Custom Button

Create a Custom Payment Button and accept payments from customers.

You can create a Payment Button using the Razorpay Dashboard and embed it on your website to accept payments from customers.

You work for a baking institute and are in charge of organising a baking competition. You must add a payment button in your website for participants to register and pay the enrollment fee.

Maximum Number of Participants

Registration Fee (in ₹)



Create a Custom Payment Button🔗

Watch this video to see how to create a Custom Payment Button.

Step 1: Select a Template🔗

  1. Log into the Razorpay Dashboard and navigate to Payment Button.

  2. Click + Create Payment Button.

  3. On the Button Creation Wizard, select the Create Your Own button type.

  4. Click Use this template.

Step 2: Add Button Details🔗

Configure these sections to create the Payment Button:

2.1: Button Details🔗

On the Button Details pop-up page, enter the relevant information:

  1. Title: Provide a name for the button. This name is for your internal reference and appears on the Razorpay Dashboard. It will not be visible to customers. For example, Annual Baking Competition.
  2. Button Type: If you want to change the button type, click the drop-down list and select one of the types. If the button type is switched mid-way, any information entered during creation will not be saved.
  3. Button Label: The text on the button to be displayed to customers. Please enter alphanumeric characters only. The maximum character limit is 20. An example for this is Register Now.
  4. Button Theme: You can choose between the following themes:
    • Razorpay Dark
    • Razorpay Light
    • Razorpay Outline
    • Brand Color (This is the color configured by you on Razorpay Dashboard)
  5. Click Next.

2.2: Amount Details🔗

For the Payment Button in the example, you must create the Registration Fee amount fields with the following configuration:

Amount Field Name

Amount Field Type

Optional Item

Registration Fee

Fixed Amount


To create the Registration Fee amount field:

  1. Click +Add Amount Field.

  2. From the drop-down list, select Fixed Amount as the field type.

  3. On the pop-up:

    1. Enter the label of the product as Registration Fee.

    2. Click + Add Description and enter details if required.

    3. Enter the amount as 500.

    4. Click the more icon to view Advanced Options. Select Item has Limited Stock and enter the value as 50.

    5. Click Save.

  4. Save the field and click Next.

2.3: Customer Details🔗

In Customer Details, configure the information that must be entered by the participant while making the payment. By default, Email and Phone must be entered. However, you can edit the labels of these fields.

Custom Fields🔗

You can add more fields to collect additional data from the participant. Let us add two custom fields - Name and Address.

To add Name custom field:

  1. Click + Add Input Field. From the dropdown list that appears, select Single Line Text.
  2. In the modal, enter the label for the custom field - Name.
  3. If required, add a description for the field.
  4. Click Save.

Similarly, create the custom field for Address.

To proceed, click Next.

The data entered by the participants will be available in the Transaction Details report.

2.4: Review and Create🔗

Review the details entered in the previous sections. You can click Back to navigate to the Button Details, Amount Details and Customer Details sections to make changes.

Click Create Button.

After completing the steps, the button code appears. Copy this code and add it in your webpage.

Embed Payment Button Code in Website🔗

The embed code generated on the Razorpay Dashboard must be embedded in your website. After this is done, the Buy Now button will appear on your website.

Customers can click this button to:

  1. Open Razorpay Checkout
  2. Select the products
  3. Add their name and address
  4. Complete the payment.

You can embed this code on any webpage, be it a custom HTML site or one built on platforms such as WordPress, Wix or Google Sites.

Let us embed the Buy Now button on an HTML page.

  1. Create a blank HTML file on your system.
  2. Paste the embed code on to the page.
  3. Save this HTML page and open it on the browser.

Your button has now been embedded on your website!

Test Pay Button🔗

You can test the Payment Button by adding the code to this page.

Customer Interaction🔗

Let us make a test transaction to check how the customer will interact with the button on your website.

  1. Click the Register Now button.
  2. Enter name and phone number and fill in the details in the other fields and click Next.
  3. Select a payment method, for example, netbanking, and complete the payment.
  4. The payment success screen is displayed and a confirmation email is sent to you.

Post Payment Actions🔗

After the customer has successfully completed the payment, you can:

  1. Send them a payment receipt
  2. Show them a custom message
  3. Redirect them to another page

Send Payment Receipt🔗

You can ensure that your customers receive payment receipts via email once they complete the payment. Know how to send and download automated or manual payment receipts.

If you are an NGO, you can send and download payment receipts with 80-G information.

Show Custom Message🔗

You can show a custom message to your customers once they complete a payment.

To show custom messages:

  1. On the Button Created Successfully pop-up page, click Configure against Redirect URL and Custom Message.
  2. On the pop-up page, enable Show a custom message.
  3. Add the custom message in the field.
  4. Click Save.

Add a Redirect URL🔗

You can redirect your customers to another page after they complete a payment.

To redirect your customers:

  1. On the Button Created Successfully pop-up page, click Configure against Redirect URL and Custom Message.
  2. On the pop-up page, enable Redirect URL.
  3. Add the redirect URL in the field.
  4. Click Save.

View Transaction Details on Razorpay Dashboard🔗

You can view the payments as and when they are made in the Transactions Details View of the page.

Export Report🔗

You can also export the report data into a CSV file.

To export report:

  1. Log into the Razorpay Dashboard and navigate to Payment Button.
  2. Select the relevant Payment Button. The Transactions Details View appears.
  3. Click Export All (CSV) button.

A .csv file is downloaded, where you can find a monthly report of all the payments made using your button.


You will receive the payments in your bank account as per the settlement cycle agreed upon at the time of Razorpay account setup. Usually, this is T+2 days. In case of international payments, the settlement cycle is T+7 days.