Additional Support for Payment Methods

Netbanking

For netbanking payments, specify the method as netbanking.

Razorpay.initRazorpay('<API_KEY>');
    Razorpay.getPaymentMethods().then(paymentMethods => {
        console.log(paymentMethods.netbanking);
});

UPI

For UPI payments, specify the method as upi.

Razorpay.getAppsWhichSupportUPI().then(response => {
  for (const responseElement of response.data) {
    console.log(responseElement.appName);
  }
});

The SDK supports two flows:

1. Collect

2. Intent

Collect Flow

In Collect Flow, the collect request is sent to the UPI app for the specified vpa.

Sample Code

The sample code below sends a collect request to gauravkumar@exampleupi handle.

var options = {
  "description": "Credits towards consultation",
  "currency": "INR",
  "key_id": "[YOUR_KEY_ID]",
  "amount": "5000", // amount in currency subunits. Defaults to INR. 100 = 100 paise = INR 1.
  "email": "gaurav.kumar@example.com",
  "contact": "9000090000",
  "vpa": "gauravkumar@exampleupi",
  "method": "upi",
  "_[flow]": "collect"
};

Intent Flow

Follow the steps given below to use UPI Intent flow in Razorpay's React Native Custom UI plugin:

1. Call getAppsWhichSupportUPI function to get all the available apps in customer's device.

   JavaScript

   copy

   Razorpay.getAppsWhichSupportUPI((data) => {
     console.log("Supported Apps", data);
   });

2. Ensure that the upi_app_package_name is passed from the getSupportedUPIApps() method value otherwise, it will not pass the validation.

   JavaScript

   copy

   var options = {
     "description": "Credits towards consultation",
     "currency": "INR",
     "key_id": "[YOUR_KEY_ID]",
     "amount": "5000", // amount in currency subunits. Defaults to INR. 100 = 100 paise = INR 1.
     "email": "gauravkumar@example.com",
     "contact": "9000090000",
     "method": "upi",
     "upi_app_package_name": "google_pay",
     "_[flow]": "intent"
   };

3. Your iOS app must seek permission from the device to open the UPI PSP app that the customer selects on the Checkout. For this, you must make the following changes in your iOS app's info.plist file.

   XML

   copy

   <key>LSApplicationQueriesSchemes</key>
   <array>
     <string>tez</string>
     <string>phonepe</string>
     <string>paytmmp</string>
   </array>

Check the complete list of

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, maestro16, amex, rupay, maestro, diners and unknown.
  
• If it cannot identify the network, it returns unknown.

//needs Razorpay.initRazorpay()
Razorpay.getCardsNetwork('4111111111111111').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('4111111111111111').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
});

Validate VPA

The SDK provides a method to determine if the entered Virtual Payment Address (VPA) is valid or not. A failure response is triggered when the vpaAddress is empty or the device is not connected to data to make the validation.

//needs Razorpay.initRazorpay()
Razorpay.isValidVpa('a@okaxis').then(resp => {
  console.log('is vpa valid');
  console.log(resp); // returns {"customer_name": null, "success": true, "vpa": "a@okaxis"} or {
    "code": "BAD_REQUEST_ERROR",
    "description": "Invalid VPA. Please enter a valid Virtual Payment Address",
    "field": "vpa",
    "metadata": Object {},
    "reason": "invalid_vpa",
    "source": "customer",
    "step": "payment_initiation",
  } for invalid vpa
});

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's URL here, bankCode is the bank's code; you will be able to get it from the response received in onPaymentMethodsReceived callback.

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

Fetch Wallet Logo URL

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

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

Fetch Wallet Square Logo URL

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

//needs Razorpay.initRazorpay()
//returns square wallet logo url
Razorpay.getSqWalletLogoUrl('mobikwik').then(resp => {
  console.log(resp.data); returns url for Square Logo
});

CRED

The SDK provides a method to determine if the CRED app is installed on the customer's mobile device.

//needs Razorpay.initRazorpay()
Razorpay.isCredAppAvailable().then(resp => {
  console.log('isCredAppAvailable');
  console.log(resp.data); returns true or false
});