Prefill Amount Fields in Payment Button

To add prefilled item quantity field:

1. Log in to the Dashboard and create a Payment Button titled Cool Smartphone Cases. Ensure you select the Buy Now button type.

2. In the Amount Details section, create an amount field called Smartphone Case using Item with Quantity as the field type.

3. Configure the Customer Details section as required.

4. Create the Payment Button.

5. Here is a sample embed code. Copy the embed code to add the Payment Button.
   

   Button Embed Code

   copy

   <form><script src="https://checkout.razorpay.com/v1/payment-button.js"
   data-payment_button_id="pl_GE9RTzFzrOTdSj"></script> </form>

6. When you embed the button code on your website, add the following parameter:

   Amount Field Parameter

   copy

   data-prefill.amount.smartphone_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, say 100 or Hundred, 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 Smartphone Case field should be separated by an underscore. That is, smartphone_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:

   Updated Button Embed Code

   copy

   <form><script src="https://checkout.razorpay.com/v1/payment-button.js"
   data-payment_button_id="pl_GE9RTzFzrOTdSj" data-prefill.amount.smartphone_case="1">
   </script> </form>

   This ensures that the Smartphone Case item quantity will always appear prefilled as 1.

To pre-select Fixed Amount field:

1. Log in to the Dashboard and create a Payment Button titled Cool Smartphone Cases. Ensure you select the Buy Now button type.

2. In the Amount Details section, create an amount field called Gift Wrap using Fixed Amount as the field type. This should be an optional field.

3. Configure the Customer Details section as required.

4. Update the Payment Button.

5. Here is a sample embed code. Copy the embed code.

   Button Embed Code

   copy

   <form><script src="https://checkout.razorpay.com/v1/payment-button.js"
   data-payment_button_id="pl_GE9RTzFzrOTdSj">
   </script> </form>

6. When you embed the button code on your website, add the following parameter:

   Amount Field Parameter

   copy

   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, say 100 or Hundred, 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:

   Updated Button Embed Code

   copy

   <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.

1. Log in to the Dashboard and create a Payment Button titled Contribute to Global Flood Relief. Select the Donations button type.

2. In the Donation Amount section, create an amount field called Cash.

3. Configure the Customer Details section as required.

4. Publish the Payment Button.

5. Here is a sample embed code. Copy the embed code.

   Button Embed Code

   copy

   <form><script src="https://checkout.razorpay.com/v1/payment-button.js"
   data-payment_button_id="pl_GENk7eNBLg6ukw">
   </script> </form>

6. When you embed the button code on your website, add the following parameter:

   Amount Field Parameter

   copy

   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, say 100 or Hundred, 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 as cash_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:

   Updated Button Embed Code

   copy

   <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.