Additional Support for Payment Methods

Check the various form fields you can use in the Checkout Form used in Razorpay Checkout integrations.


The Razorpay Web Custom SDK lets you integrate the supported payment methods on your Website's Checkout form.

Use the

to fetch the payment methods available for your account.

Below are the sample payloads for each payment method.

This payment method allows you to display your Customer Identifier details on the checkout. Your customers can make online bank transfers to this account.

Feature Request

  • This is an on-demand feature. Please raise a request with our to get this feature activated on your Razorpay account.
  • Watch this video to know how to raise a feature enablement request on the Razorpay Dashboard.
Feature Request GIF

There are no specific request parameters to be passed. Instead, you must pass the fetchVirtualAccount method for your Customer Identifier to get created and the details to appear on the checkout. Know more about

.

In this case, data.method should be specified as card. Other required fields:

  • card[name]
  • card[number]
  • card[cvv]
  • card[expiry_month]
  • card[expiry_year]
razorpay.createPayment({
amount: 5000,
email: 'gaurav.kumar@example.com',
contact: '9123456780',
order_id: 'order_9A33XWu170gUtm',
method: 'card',
'card[name]': 'Gaurav Kumar',
'card[number]': '4111111111111111',
'card[cvv]': '566',
'card[expiry_month]': '10',
'card[expiry_year]': '20'
});

If you want to securely store the customer's card details as network tokens, know about

.

For EMIs, data is the same as the card, with the following differences:

  • method should be emi
  • An additional field, emi_duration corresponding to the number of months for EMI, should be included. After the customer selects the desired plan, pass the corresponding value in the emi_duration field.

Use the code given below:

razorpay.createPayment({
amount: 300000,
email: 'gaurav.kumar@example.com',
contact: '9000090000',
order_id: 'order_9A33XWu170gUtm',
method: 'emi',
emi_duration: 9,
'card[name]': 'Gaurav Kumar',
'card[number]': '5241810000000000',
'card[cvv]': '123',
'card[expiry_month]': '10',
'card[expiry_year]': '30'
});

To display the available EMI plans, use the Razorpay checkout helper methods to fetch the details of the EMI plans and display them. You can use the event ready, as shown below:

var razorpay = new Razorpay(...); // as before
/**
* The above code remains the same.
* You can fetch the available EMI plans by adding the below code in your options.
*/
razorpay.once('ready', function() {
console.log(razorpay.methods.emi_plans);
console.log(razorpay.methods.netbanking);
})

razorpay.methods.emi_plans

string Lists the EMI-supported banks with their respective interest rates.

razorpay.methods.netbanking

string Contains the list of all banks and bank codes.

Cardless EMI is a checkout payment method that allows customers to convert their payment amount to EMIs. The user does not require a debit or credit card. Make payments via credits approved by the supported Cardless EMI payment partner.

Feature Request

  • This is an on-demand feature. Please raise a request with our to get this feature activated on your Razorpay account.
  • Watch this video to know how to raise a feature enablement request on the Razorpay Dashboard.
Feature Request GIF

Use the code given below:

razorpay.createPayment({
amount: 5000,
email: 'gaurav.kumar@example.com',
contact: '9000090000',
order_id: 'order_9A33XWu170gUtm',
method: 'cardless_emi',
provider: '<provider_name>'
});

Possible values for provider:

  • barb
  • cshe
  • hdfc
  • icic
  • idfb
  • kkbk
  • krbe
  • zestmoney
  • earlysalary
  • tvsc
  • walnut369

When method is netbanking, you need to pass an additional field bank as shown below:

razorpay.createPayment({
amount: 5000,
email: 'gaurav.kumar@example.com',
contact: '9123456780',
order_id: 'order_9A33XWu170gUtm',
method: 'netbanking',
bank: 'SBIN'
})

You can list the available banks using a drop-down for customers. You can obtain a list of banks using the

.

When method is wallet, you need to pass an additional field wallet as shown below:

razorpay.createPayment({
amount: 5000,
email: 'gaurav.kumar@example.com',
contact: '9000090000',
order_id: 'order_9A33XWu170gUtm',
method: 'wallet',
wallet: 'mobikwik'
});

Possible values for wallet:

You can accept in-app payments from your customers transacting in PhonePe Switch. Know more about

.

You can accept UPI payments using the collect flow. Know more about

and .

Customers enter their vpa or

on your UI and complete the payments on their respective UPI apps in collect flow.

You can now pass the vpa parameter in the upi array as shown below:

razorpay.createPayment({
amount: 5000,
email: 'gaurav.kumar@example.com',
contact: '9123456780',
order_id: 'order_9A33XWu170gUtm',
method: 'upi',
upi:
{
vpa: 'gauravkumar@somebank',
flow: 'collect'
}
});

You will need to ask VPA from the user, which can be a text field with a regex of ^.+@.+$.

UPI Payments Using Phone Number

You can accept UPI payments using phone number for the collect flow. Follow the steps given below:

  1. You must collect the customer's phone number from your end.
  2. Check if any vpa is associated with the given number and get the vpa_token for that number using the sample code given below:
    var razorpay = new Razorpay({
    key: '<YOUR_KEY_ID>',
    });
    razorpay.verifyVpa(number)
    .then((data) => {
    // get and store data.vpa_token for initiating payment
    // you will get data.masked_vpa in this response which you can show the end user to accept payment on this vpa associated app
    })
    .catch(() => {
    // no vpa associated with the number, show an error to the user
    });
  3. Pass the vpa_token parameter in the upi array as shown below:
    razorpay.createPayment({
    amount: 5000,
    email: 'gaurav.kumar@example.com',
    contact: '9000090000',
    order_id: 'order_9A33XWu170XXXX',
    method: 'upi',
    upi: {
    vpa_token: 'f731951149df8903d374b117f921ab41',
    flow: 'collect'
    }
    });

You can display a UPI QR Code at checkout. Customers can scan this QR code using a UPI app on their mobile phones to complete the payment.

Sample QR Code on Checkout

Ensure that you invoke/activate the QR Code only after a user clicks Show QR Code.

UPI QR code on Razorpay Payment Gateway custom web integration.

Pass the qr parameter in the upi array as shown below:

razorpay.createPayment({
amount: 5000,
email: 'gaurav.kumar@example.com',
contact: '9123456780',
order_id: 'order_9A33XWu170gUtm',
method: 'upi',
upi:
{
qr: true,
timeout: 10
}
});

timeout

optional

integer Indicates the time (in minutes) after which the QR code will expire. Possible values are between 1 to 10. The default value is 10.

Handy Tips

For the best experience, show QR codes only on desktops.

You can avail the UPI Intent flow by integrating with the

.

Using Razorpay, you can let your customers make UPI Intent payments on your mobile website. Customers can then proceed with the payment without navigating away from your mobile website. This leads to a faster checkout experience with higher success rates.

Know how to integrate with

.

Feature Enablement

The UPI Intent feature is usually available by default. If you are unable to access this feature, raise a request with our

to get this enabled on your Razorpay account.

You can enable your customers to make payments using the Pay Later service offered by various third-party providers such as:

ProviderProvider CodeAvailabilityMinimum TransactionMaximum Transaction
rzpx_postpaid₹1000NA
ICICI Bank PayLatericic₹1₹30,000
GetSimplgetsimpl₹1₹25,000
FlexiPay by HDFC Bankhdfc₹1,000₹20,000
LazyPaylazypay₹1₹10,000

Watch Out!

LazyPay services are temporarily disabled.

  • Contact our to get this payment method enabled for your account.
  • Customers should be registered account holders of the Pay Later service providers.

After creating an order and obtaining the customer's payment details, send the information to Razorpay to complete the payment. You can do this by invoking createPayment and passing method=paylater and provider=<provider_name>.

Available providers with provider code:

  • : rzpx_postpaid

  • GetSimpl: getsimpl

  • ICICI Bank PayLater: icic

  • FlexiPay by HDFC Bank: hdfc

  • LazyPay: lazypay

    Watch Out!

    LazyPay services are temporarily disabled.

razorpay.createPayment({
amount: 200000,
currency: 'INR',
email: 'gaurav.kumar@example.com',
contact: '9111145678',
order_id: 'order_DPzFe1Q1dEObDv',
method: 'paylater',
provider: <provider_code>
});

You can accept recurring payments from your customers using emandate, card or upi as the method. For more information about authorisation and subsequent payments, refer to the

.

Feature Request

  • This is an on-demand feature. Please raise a request with our to get this feature activated on your Razorpay account.
  • Watch this video to know how to raise a feature enablement request on the Razorpay Dashboard.
Feature Request GIF

  1. .
  2. Create an Order with method as emandate, nach or upi.
  3. Collect authorisation transaction.
    • Using custom checkout.
    • Using an authorisation link.
  4. Verify Tokens.
  5. Charge subsequent payments.

Know more about

.

Use the sample checkout code given below:

razorpay.createPayment({
amount: 0,
currency: 'INR',
email: 'gaurav.kumar@example.com',
contact: '9111145678',
order_id: 'order_EAbtuXPh24LrEc',
customer_id: 'cust_E9penp7VGhT5yt',
recurring: '1',
method: 'emandate',
bank: 'HDFC',
auth_type: 'netbanking',
'bank_account[name]': 'Gaurav Kumar',
'bank_account[account_number]': '1121431121541121',
'bank_account[account_type]': 'savings',
'bank_account[ifsc]': 'HDFC0000001'
});

To add CRED as a payment method, you need to:

  • Pass the app_offer parameter in Orders API.
  • Pass the method and provider parameters in .

You must create an order using Orders API. In the response, you obtain an order_id which you must pass to Checkout.

POST
/orders

amount

mandatory

integer The transaction amount, expressed in the currency subunit, such as paise (in case of INR). For example, for an actual amount of ₹299.35, the value of this field should be 29935.

currency

mandatory

string The currency in which the transaction should be made. See the

. Default is INR.

app_offer

optional

boolean Allow/do not allow customers to use CRED coins to make payments. This is used to prevent double discounting scenarios where customers have already availed discounts using voucher/coupon,and you do not want them to redeem Coins as well. Possible values:

  • true - Customer not allowed to use CRED coins to make payment.
  • false (default) - Customer can use CRED coins to make payment.

receipt

optional

string Your receipt id for this order should be passed here. Maximum length is 40 characters.

notes

optional

object Key-value pair that can be used to store additional information about the entity. Maximum 15 key-value pairs, 256 characters (maximum) each. For example, "note_key": "Beam me up Scotty”.

razorpay.createPayment({
amount: 12340,
currency: 'INR',
email: 'gaurav.kumar@example.com',
contact: '9111145678',
order_id: 'order_EAbtuXPh24LrEc',
method: 'app',
provider: 'cred'
});

Along with the other checkout options, you must pass:

method

mandatory

string The method used to make the payment. Here, it must be app.

provider

mandatory if method=app

string Name of the PSP app. Here, it must be cred.


Is this integration guide useful?