Additional Support for Payment Methods

Use the Razorpay React Native Custom UI SDK to integrate supported payment methods on the Checkout form of your app as per your business requirements.

Handy Tips

Ensure you have called Razorpay.initRazorpay(key) in your build integration before using any of the methods on this page. Know more about

initializing the SDK

Fetch Payment Methods

Use the

Fetch Payment Methods API

to fetch the payment methods available for your account.

Razorpay.getPaymentMethods().then(paymentMethods => {
  console.log(paymentMethods);
});

The response includes the list of enabled payment methods, available banks for netbanking, and EMI plans for eligible cards.

Below are the sample payloads for each payment method.

Debit and Credit Card

For card payments, specify method as card and pass the card details as shown below:

Razorpay.open({
  description: 'Credits towards consultation',
  currency: 'MYR',
  key_id: '<YOUR_KEY_ID>',
  amount: '5000',
  email: 'nur.aisyah@example.com',
  contact: '+60345675444',
  order_id: 'order_9A33XWu170gUtm',
  method: 'card',
  card: {
    number: '4842793002086571',
    name: 'Nur Aisyah',
    expiry_month: '10',
    expiry_year: '30',
    cvv: '123'
  }
}).then((data) => {
  // handle success
  alert(`Success: ${data.razorpay_payment_id}`);
}).catch((error) => {
  // handle failure
  alert(`Error: ${error.code} | ${error.description}`);
});

FPX

For FPX payments, specify method as fpx and pass the bank code as shown below:

Razorpay.open({
  description: 'Credits towards consultation',
  currency: 'MYR',
  key_id: '<YOUR_KEY_ID>',
  amount: '5000',
  email: 'nur.aisyah@example.com',
  contact: '+60345675444',
  order_id: 'order_9A33XWu170gUtm',
  method: 'fpx',
  bank: 'HSBC'
}).then((data) => {
  // handle success
  alert(`Success: ${data.razorpay_payment_id}`);
}).catch((error) => {
  // handle failure
  alert(`Error: ${error.code} | ${error.description}`);
});

You can list the available banks using a drop-down for customers. Obtain the list of banks from the getPaymentMethods() response.

Wallet

For wallet payments, specify method as wallet and pass the wallet code as shown below:

Razorpay.open({
  description: 'Credits towards consultation',
  currency: 'MYR',
  key_id: '<YOUR_KEY_ID>',
  amount: '5000',
  email: 'nur.aisyah@example.com',
  contact: '+60345675444',
  order_id: 'order_9A33XWu170gUtm',
  method: 'wallet',
  wallet: 'touchngo'
}).then((data) => {
  // handle success
  alert(`Success: ${data.razorpay_payment_id}`);
}).catch((error) => {
  // handle failure
  alert(`Error: ${error.code} | ${error.description}`);
});

Possible values for wallet:

touchngo (default)
grabpay (default)
shopback (requires
approval
)
boost (default)

Card Utilities

You can use these methods for card payment method integration.

Fetch Card Network

The SDK provides a method to get the card network name of the card number.

At least 6 digits of the card number are required to identify the network.
Possible values returned by this method are visa, mastercard and unionpay.
If it cannot identify the network, it returns unknown.

//needs Razorpay.initRazorpay()
Razorpay.getCardsNetwork('4842793002086571').then(resp => {
  console.log(resp.data); // returns visa
});

Card Number Validation

The SDK provides a checksum-based method to determine if the entered card number is valid or not.

//needs Razorpay.initRazorpay()
Razorpay.isValidCardNumber('4842793002086571').then(resp => {
  console.log('is card number valid:');
  console.log(resp.data); // returns true or false
});

Fetch Card Number Length for Card Network

The SDK provides a method to get the card number length for a specific card network.

Razorpay.getCardNetworkLength('visa').then(resp => {
  console.log(resp.data); // returns 16 for visa
});

Logo

Given below are the sample codes for fetching various payment method logo URLs.

Fetch Bank Logo URL

The SDK provides a method to fetch the bank logo URL. The bankCode is available in the getPaymentMethods() response.

//needs Razorpay.initRazorpay()
Razorpay.getBankLogoUrl('UTIB').then(resp => {
  console.log(resp.data); // returns https://cdn.razorpay.com/bank/UTIB.gif
});

Fetch Wallet Logo URL

The SDK provides a method to get the wallet logo URL.

//needs Razorpay.initRazorpay()
Razorpay.getWalletLogoUrl('touchngo').then(resp => {
  console.log(resp.data); // returns https://cdn.razorpay.com/wallet/touchngo.png
});

Fetch Wallet Square Logo URL

The SDK provides a method to get the wallet's square-shaped logo URL.

//needs Razorpay.initRazorpay()
Razorpay.getSqWalletLogoUrl('touchngo').then(resp => {
  console.log(resp.data); // returns square wallet logo URL
});

Saved Cards