Native OTP - Razorpay

Available in🇮🇳 India

Native OTP helps generate and verify OTP on the customers’ browser without redirecting them to their bank’s ACS page for authentication. Since there will be no redirection using the customers’ browser, it will reduce the dependency on the customers’ browser network, reduce the drop-off rates, and give a seamless consumer experience for card transactions.

Advantages

Increase success rates by up to 4%.
Reduce payment failures due to low internet speeds.
Avoid failures due to redirects to bank pages.
Offer a consistent experience on mobile and web checkout.

Prerequisites

Verify that you are PCI compliant to accept and process customers’ card details. Know more about PCI compliance. The compliance certificate should be updated as per the yearly renewal cycle.
Raise a request with our Support team to enable this feature on your Checkout page.
Know about the Razorpay Payment Flow.
Integrate with Razorpay Custom Checkout.

Integration Steps

Follow the integration steps given below: 1.1 Create an Order in Server. 1.2 Integrate the getCardFlows Method. 1.3 Create a Payment. 1.4 Display OTP UI. 1.5 Perform OTP Authentication. 1.6 Verify Payment Signature.

1.1 Create an Order in Server

Order is an important step in the payment process.

An order should be created for every payment.
You can create an order using the Orders API. It is a server-side API call. Know how to authenticate Orders API.
The order_id received in the response should be passed to the checkout. This ties the Order with the payment and secures the request from being tampered.

Watch Out!Payments made without an order_id cannot be captured and will be automatically refunded. You must create an order before initiating payments to ensure proper payment processing.

API Sample Code

The following is a sample API request and response for creating an order:

curl -X POST https://api.razorpay.com/v1/orders
-u [YOUR_KEY_ID]:[YOUR_KEY_SECRET]
-H 'content-type:application/json'
-d '{
    "amount": 50000,
    "currency": "INR",
    "receipt": "rcptid_11",
    "partial_payment": true,
    "first_payment_min_amount": 23000
}'

try {
  JSONObject orderRequest = new JSONObject();
  orderRequest.put("amount", 50000); // amount in the smallest currency unit
  orderRequest.put("currency", "INR");
  orderRequest.put("receipt", "order_rcptid_11");

  Order order = razorpay.Orders.create(orderRequest);
} catch (RazorpayException e) {
  // Handle Exception
  System.out.println(e.getMessage());
}

import razorpay
client = razorpay.Client(auth=("api_key", "api_secret"))

DATA = {
    "amount": 50000,
    "currency": "INR",
    "receipt": "receipt#1",
    "notes": {
        "key1": "value3",
        "key2": "value2"
    }
}
client.order.create(data=DATA)

$order  = $client->order->create([
  'receipt'         => 'order_rcptid_11',
  'amount'          => 50000, // amount in the smallest currency unit
  'currency'        => 'INR'// <a href="/docs/payments/international-payments/#supported-currencies" target="_blank">See the list of supported currencies</a>.)
]);

Dictionary<string, object> options = new Dictionary<string,object>();
options.Add("amount", 50000); // amount in the smallest currency unit
options.add("receipt", "order_rcptid_11");
options.add("currency", "INR");
Order order = client.Order.Create(options);

options = amount: 50000, currency: 'INR', receipt: '<order_rcptid_11>'
order = Razorpay::Order.create

var options = {
  amount: 50000,  // amount in the smallest currency unit
  currency: "INR",
  receipt: "order_rcptid_11"
};
instance.orders.create(options, function(err, order) {
  console.log(order);
});

{
    "id": "order_DBJOWzybf0sJbb",
    "entity": "order",
    "amount": 50000,
    "amount_paid": 0,
    "amount_due": 50000,
    "currency": "INR",
    "receipt": "rcptid_11",
    "status": "created",
    "attempts": 0,
    "notes": [],
    "created_at": 1566986570
}

Request Parameters

Here is the list of parameters and their description for creating an order: amount mandatory : integer Payment amount in the smallest currency sub-unit. For example, if the amount to be charged is ₹299, then pass 29900 in this field. In the case of three decimal currencies, such as KWD, BHD and OMR, to accept a payment of 295.991, pass the value as 295990. And in the case of zero decimal currencies such as JPY, to accept a payment of 295, pass the value as 295.

Watch Out!As per payment guidelines, you should pass the last decimal number as 0 for three decimal currency payments. For example, if you want to charge a customer 99.991 KD for a transaction, you should pass the value for the amount parameter as 99990 and not 99991.

currency mandatory : string The currency in which the transaction should be made. See the list of supported currencies. Length must be 3 characters.

Handy TipsRazorpay has added support for zero decimal currencies, such as JPY and three decimal currencies, such as KWD, BHD and OMR, allowing businesses to accept international payments in these currencies. Know more about Currency Conversion (May 2024).

receipt optional : string Your receipt id for this order should be passed here. Maximum length is 40 characters. notes optional : json 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”. partial_payment optional : boolean Indicates whether the customer can make a partial payment. Possible values:

true: The customer can make partial payments.
false (default): The customer cannot make partial payments.

id mandatory : string Unique identifier of the customer. For example, cust_1Aa00000000004. Know more about Orders API.

Response Parameters

Descriptions for the response parameters are present in the Orders Entity table.

Error Response Parameters

The error response parameters are available in the API Reference Guide.

1.2 Integrate the getCardFlows Method

Validating the authentication type is critical. This will help you set the value of auth_type during payment creation.

Watch Out!If the value of auth_type is sent as an OTP for a BIN that is not validated successfully, the transaction will fail.

Use the getCardFlows method given below to check for the available flows on a given card number:

getcardsflow

razorpay.getCardFlows('438628', (flows) => {
      console.log(flows.otp);
    });

Use the getCardFeatures method given below to get the card features:

getCardFeatures

{
    "flows": {
        "otp": true,
        "recurring": false,
        "iframe": false,
        "emi": true
    },
    "type": "credit",
    "issuer": "HDFC",
    "network": "Diners Club",
    "cobranding_partner": null,
    "country": "IN",
    "http_status_code": 200
}

1.3 Create a Payment

While initiating payment for the card payment method, you must pass an additional parameter within the create payment function if the card flow function response is otp = true.

Create a Payment

function createRazorpayPayment (data) {
 rzp.createPayment(data, {
   nativeotp: true
 });
}

1.4 Display OTP UI

Use the sample code given below to display OTP UI to your customers:

OTP UI

rzp.on('payment.otp.required', function (data) {
 // Show OTP UI
// data = {
//   "metadata": {
//     "issuer": "HDFC",
//     "network": "MC",
//     "last4": "9275",
//     "iin": "512967"
//   },
//   "next": [
//     "otp_submit",
//     "otp_resend"
//   ],
//   "redirect": "https://api.razorpay.com/v1/payments/pay_E1xQsBuIZ02..."
// }
});

Handy Tips

If you want to redirect the user to the bank ACS page, you should use the URL present in the response for creating a payment.
To get post-transaction feedback from the bank page to your website, the callback URL needs to be defined while creating a payment. Razorpay will send the response to the defined callback URL after payment success or failure.

1.5 Perform OTP Authentication

After entering the OTP, the customer can perform either:

OTP Submit
OTP Resend
OTP Cancel

OTP Submit

OTP submission is a part of the payment authentication process where the customer submits the OTP received through your application’s frontend. The customer receives the OTP for card payments via their preferred notification medium - SMS or email.

Handy TipsDo not perform any validation on the length of the OTP since this can vary across banks. The OTP, however, should not be blank.

Use the following function to enable customers to submit OTP

OTP Submit

function submitRazorpayOTP (otp) {
 rzp.submitOTP(otp);
}

OTP Resend

There can be situations when customers must re-enter the OTP sent to them. The issuing bank determines the number of retries that the user is allowed. Given below is the sample code of the OTP Resend function:

OTP Resend

function resendRazorpayOTP () {
 rzp.resendOTP();
}

OTP Cancel

Customers can cancel the payment based on their requirements. Given below is the sample code of the OTP Cancel function:

OTP Cancel

function cancelRazorpayPayment () {
 rzp.emit('payment.cancel');
}

1.6 Verify Payment Signature

Once the payment process is completed, Razorpay will make a POST request to the callback_url on whether the payment was a success or a failure. You can easily verify the payment signature using our SDKs:

String secret = "<YOUR_KEY_SECRET>";

JSONObject options = new JSONObject();
options.put("razorpay_order_id", "order_IEIaMR65cu6nz3");
options.put("razorpay_payment_id", "pay_IH4NVgf4Dreq1l");
options.put("razorpay_signature", "0d4e745a1838664ad6c9c9902212a32d627d68e917290b0ad5f08ff4561bc50f");

boolean status =  Utils.verifyPaymentSignature(options, secret);

use Razorpay\Api\Api;
$api = new Api($key_id, $key_secret);
$attributes  = array('razorpay_signature'  => '23233',  'razorpay_payment_id'  => '332' ,  'razorpay_order_id' => '12122');
$order  = $api->utility->verifyPaymentSignature($attributes)

require 'razorpay'
Razorpay.setup('key_id', 'key_secret')
payment_response = {
  'razorpay_order_id': '12122',
  'razorpay_payment_id': '332',
  'razorpay_signature': '23233'
}

Razorpay::Utility.verify_payment_signature(payment_response)

import razorpay
client = razorpay.Client(auth=("YOUR_ID", "YOUR_SECRET"))

client.utility.verify_payment_signature({
   'razorpay_order_id': razorpay_order_id,
   'razorpay_payment_id': razorpay_payment_id,
   'razorpay_signature': razorpay_signature
   })

RazorpayClient client = new RazorpayClient("[YOUR_KEY_ID]", "[YOUR_KEY_SECRET]");

Dictionary<string, string> attributes = new Dictionary<string, string>();

            attributes.Add("razorpay_payment_id", paymentId);
            attributes.Add("razorpay_order_id", Request.Form["razorpay_order_id"]);
            attributes.Add("razorpay_signature", Request.Form["razorpay_signature"]);

            Utils.verifyPaymentSignature(attributes);

var instance = new Razorpay({ key_id: 'YOUR_KEY_ID', key_secret: 'YOUR_SECRET' })

var { validatePaymentVerification } = require('./dist/utils/razorpay-utils');

validatePaymentVerification({"order_id": razorpayOrderId, "payment_id": razorpayPaymentId }, signature, secret);

import ( razorpay "github.com/razorpay/razorpay-go" )
client := razorpay.NewClient("YOUR_KEY_ID", "YOUR_SECRET")

params := map[string]interface{}{
	"razorpay_order_id": "order_IEIaMR65cu6nz3",
	"razorpay_payment_id": "pay_IH4NVgf4Dreq1l",
}

signature := "0d4e745a1838664ad6c9c9902212a32d627d68e917290b0ad5f08ff4561bc50f";
secret := "EnLs21M47BllR3X8PSFtjtbd";
utils.VerifyPaymentSignature(params, signature, secret)

If razorpay_payment_id is returned, the payment is successfully created and verified.

Handy TipsA successful transaction results in creating the razorpay_order_id in your database. You can mark the corresponding transaction at your end as paid and notify the customer of the same.

Sample Code

You can use the sample code given below:

Sample Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      type="text/javascript"
      src="https://checkout.razorpay.com/v1/razorpay.js"
    ></script>
  </head>
  <body>
    <p>Pay Rs. 5000</p>
    <h2>Payment Method</h2>
    <p id="method"></p>
    <button id="rzp-button1">Pay</button>
    <button id="rzp-button2">pop-up top</button>
  </body>

  <script>
    var razorpay = new Razorpay({
      key: 'YOUR_KEY_ID',
      image:
        'https://www.carlogos.org/car-logos/lamborghini-logo-1000x1100-show.png',
      callback_url: 'https://www.google.com/',
      redirect: true,
    });

    razorpay.once('ready', function (response) {
      // console.log(response.methods);
      // document.getElementById("method").innerHTML = JSON.stringify(response.methods);
    });

    razorpay.getCardFlows('438628', (flows) => {
      console.log(flows.otp);
    });

    var data = {
      amount: 100,
      email: 'gaurav.kumar@example.com',
      contact: '9000090000',
      //"order_id": "order_JyhxBsMXOOfJ4c",
      method: 'card',
      'card[name]': 'Gaurav Kumar',
      'card[number]': '4386289407660153',
      'card[cvv]': '566',
      'card[expiry_month]': '10',
      'card[expiry_year]': '26',
    };

    var btn = document.querySelector('#rzp-button1');
    btn.addEventListener('click', function () {
      razorpay.createPayment(data, {
        nativeotp: true,
      });

      razorpay.on('payment.otp.required', function (data) {
        // Show OTP UI
        console.log(data);
      });

      // razorpay.submitOTP('1234');
      //razorpay.resendOTP();
      //razorpay.emit('payment.cancel');
    });

    var btn1 = document.querySelector('#rzp-button2');
    btn1.addEventListener('click', function () {
      razorpay.focus(); // will bring popup to top
    });
  </script>
</html>

​Advantages

​Prerequisites

​Integration Steps

​1.1 Create an Order in Server

​API Sample Code

​Request Parameters

​Response Parameters

​Error Response Parameters

​1.2 Integrate the getCardFlows Method

​1.3 Create a Payment

​1.4 Display OTP UI

​1.5 Perform OTP Authentication

​OTP Submit

​OTP Resend

​OTP Cancel

​1.6 Verify Payment Signature

​Sample Code

Advantages

Prerequisites

Integration Steps

1.1 Create an Order in Server

API Sample Code

Request Parameters

Response Parameters

Error Response Parameters

1.2 Integrate the getCardFlows Method

1.3 Create a Payment

1.4 Display OTP UI

1.5 Perform OTP Authentication

OTP Submit

OTP Resend

OTP Cancel

1.6 Verify Payment Signature

Sample Code