Prefill Amount Fields in Payment Button
Configure to prefill the amount fields of the Payment Button.
You can prefill the amount fields present in your Payment Button. This provides a better user experience for your customers.
You can set a particular item quantity for a product.
Let us assume you want to sell iPhone 12 max smartphone cases
for RM39
. You create a Payment Button titled Limited Edition iPhone 12 Phone Case
to sell the product. You can ensure that when the customer clicks the Payment Button, the quantity to be purchased appears pre-selected as 1
.
To add prefilled item quantity field:
-
Log in to the
and create a Payment Button titled Limited Edition iPhone 12 Phone Case. Ensure you select theBuy Now
button type. -
In the Amount Details section, create an amount field called
iPhone 12 Max Case
usingItem with Quantity
as the field type. -
Configure the Customer Details section as required.
-
Create the Payment Button.
-
Here is a sample embed code. Copy the embed code to add the Payment Button.
<form><script src="https://checkout.razorpay.com/v1/payment-button.js"data-payment_button_id="pl_GE9RTzFzrOTdSj"></script> </form> -
When you embed the button code on your website, add the following parameter:
data-prefill.amount.iphone_12_max_case="1"The parameter structure is explained below:
Handy Tips
- Ensure that the field-level validations are in place. If you enter a character in the
amount
field, say100
orHundred
, the field will not get populated. - If the amount field label consists of two words, add an underscore as a separator of two words. For example, the two words in the iPhone 12 Max Case field should be separated by an underscore. That is,
iphone_12_max_case
. - If the item is out of stock or has less quantity available, though the field will appear prefilled, the customer will not be able to purchase the product.
The updated embed code looks like this:
<form><script src="https://checkout.razorpay.com/v1/payment-button.js"data-payment_button_id="pl_GE9RTzFzrOTdSj" data-prefill.amount.iphone_12_max_case="1"></script> </form>This ensures that the
iPhone 12 Max Case
item quantity will always appear prefilled as1
.
- Ensure that the field-level validations are in place. If you enter a character in the
You can add a fixed amount field which gets added during checkout when the user selects a product.
Let us continue with the iPhone Case example. Assume you also provide gift wrapping services at a fixed cost of RM30. You want to ensure that this field appears pre-selected during Checkout.
To pre-select Fixed Amount field:
-
Log in to the
and create a Payment Button titled Limited Edition iPhone 12 Phone Case. Ensure you select theBuy Now
button type. -
In the Amount Details section, create an amount field called
Gift Wrap
usingFixed Amount
as the field type. This should be an optional field. -
Configure the Customer Details section as required.
-
Update the Payment Button.
-
Here is a sample embed code. Copy the embed code.
<form><script src="https://checkout.razorpay.com/v1/payment-button.js"data-payment_button_id="pl_GE9RTzFzrOTdSj"></script> </form> -
When you embed the button code on your website, add the following parameter:
data-prefill.amount.gift_wrap="1"The parameter structure is explained below:
Handy Tips
- Ensure that the field-level validations are in place. If you enter a character in the
amount
field, say1oo
orHundred
, the field will not get populated. - If the amount field label consists of two words, add an underscore as a separator of two words. For example, the two words in the Gift Wrap field should be separated by an underscore. That is,
gift_wrap
. - Ensure that the field is marked optional.
- If the item is out of stock or has less quantity available, though the field will appear prefilled, the customer will not be able to purchase the product.
The updated embed code looks like this:
<form><script src="https://checkout.razorpay.com/v1/payment-button.js"data-payment_button_id="pl_GE9RTzFzrOTdSj" data-prefill.amount.gift_wrap="1"></script> </form>This ensures that the
Gift Wrap
amount field will appear pre-selected when customer opens Checkout. - Ensure that the field-level validations are in place. If you enter a character in the
You can add a field with a pre-filled amount value which the customer can also edit.
Suppose you are the director of an NGO that is raising funds for flood relief. Apart from the relief packages such as sanitation kits (worth RM75) and dry ration kits (worth RM100), you are adding a field to collect cash.
You want to prefill the Cash
field for donors. And, you want to show RM50 as a suggested donation amount. Donors can donate this amount, RM50, or change the amount and then pay.
-
Log in to the
and create a Payment Button titled Contribute to Malaysia Flood Relief. Select theDonations
button type. -
In the Donation Amount section, create an amount field called
Cash
. -
Configure the Customer Details section as required.
-
Publish the Payment Button.
-
Here is a sample embed code. Copy the embed code.
<form><script src="https://checkout.razorpay.com/v1/payment-button.js"data-payment_button_id="pl_GENk7eNBLg6ukw"></script> </form> -
When you embed the button code on your website, add the following parameter:
data-prefill.amount.cash="50"The parameter structure is explained below:
Handy Tips
- Ensure that the field-level validations are in place. If you enter a character in the
amount
field, say100
orHundred
, the field will not get populated. - If you are using a custom field name for amount, ensure that the field name is entered in lowercase and is separated by an underscore. For example, if the amount field name is
Cash Funds
, enter the suffix ascash_funds
. - Pre-population of the amount field is subject to the Minimum and Maximum Input Price set for the amount field. For example, if the Maximum Input Price has been set as RM100, the Cash field cannot be prefilled with a value higher than RM100.
The updated embed code looks like this:
<form><script src="https://checkout.razorpay.com/v1/payment-button.js"data-payment_button_id="pl_GENk7eNBLg6ukw" data-prefill.amount.cash="50"></script> </form>This ensures that the
Cash
amount field will appear prefilled with an amount of RM50 when the customer opens Checkout. - Ensure that the field-level validations are in place. If you enter a character in the
Was this page helpful?