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 TipsEnsure 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
Debit and Credit Card
FPX
Wallet
Card Utilities
Logo

Fetch Payment Methods

Use the Fetch Payment Methods API to fetch the payment methods available for your account.

JavaScript

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:

JavaScript

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:

JavaScript

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:

JavaScript

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.

JavaScript

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

JavaScript

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

JavaScript

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.

JavaScript

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

JavaScript

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

JavaScript

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

Saved Cards

​Fetch Payment Methods

​Debit and Credit Card

​FPX

​Wallet

​Card Utilities

​Fetch Card Network

​Card Number Validation

​Fetch Card Number Length for Card Network

​Logo

​Fetch Bank Logo URL

​Fetch Wallet Logo URL

​Fetch Wallet Square Logo URL

​Related information

Fetch Payment Methods

Debit and Credit Card

FPX

Wallet

Card Utilities

Fetch Card Network

Card Number Validation

Fetch Card Number Length for Card Network

Logo

Fetch Bank Logo URL

Fetch Wallet Logo URL

Fetch Wallet Square Logo URL

Related information