Customer Workflow

Save Card Details

To save card details, the customer:

1. Opens Razorpay Checkout and selects Card as the payment method.

   

2. Provides the card details.

   

3. While making a card payment, the customer can either choose to:

   • Save their card details.
   • Not save their card details.

Make Payments Using Saved Cards

To make payment using saved cards:

1. The customers log in to the Razorpay Checkout.
2. They select Card as the payment method.
3. They enter the OTP received on their phone number and click Verify.
4. They select the saved card, enter the CVV and click Pay.
5. We recommend that customers log out of Checkout after they complete the transaction. To do this, they must:
   1. Open Razorpay Checkout.
   2. Select Card as the payment method.
   3. Click the drop-down list and select Log out from all devices.

Your customers gain a faster and enhanced checkout experience with Razorpay OTP auto-submit. The system automatically reads the OTP received, with your customer’s consent, and submits it. It prevents errors and the users do not need to navigate or interact with additional elements to complete verification, making the process seamless. This is available by default on Android SDK and not available on iOS SDK.

Handy Tips

If your customers are using Google Chrome and not able to access saved cards, it may be because they have configured their Chrome browser to not allow cookies. They can go to Chrome Settings, select Privacy and security → Cookies and other site data → Allow all cookies and restart the browser. If they still cannot access them, contact Razorpay

support

.

Prerequisites

• Sign up for a Razorpay account.

• Generate the API Keys on Razorpay Dashboard.

  
  Test Mode API Keys
  Watch this video to know how to generate Test Mode API keys.
  Live Mode API Keys
  Watch this video to know how to generate Live Mode API keys.

• Integrate with our Standard Checkout

  .

Integration Workflow

1. Enable Flash Checkout on Razorpay Dashboard

   .

2. Create a Customer

   .

3. Save Card Details on Checkout

   .

4. Create Payments using Saved Card

   .

Step 1: Enable Flash Checkout on Razorpay Dashboard

Flash Checkout enables you to save customer card details on Standard Checkout. Authentication is done using PCI-DSS compliant technology to ensure that all the card information is stored securely.

Know more about

Watch this video to see how to enable or disable Flash Checkout:

Step 2: Create a Customer

Create a customer whose card details should be saved from the Dashboard or using the Customers API. You can create customers with basic details such as email and contact using the following endpoint:

The following endpoint creates or add a customer with basic details such as name and contact details. You can use this API for various Razorpay Solution offerings.

Request Parameters

Know more about

Step 3: Save Card Details on Checkout

While making the payment, the customer enters the card details in the Checkout form. Pass customer_id and save=1 along with the other parameters into the Checkout form.

Web

<button id="rzp-button1">Pay</button>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var options = {
       "key": "<YOUR_KEY_ID>",
       "amount": "5076",
       "currency": "INR",
       "name": "Acme Corp",
       "description": "Test Transaction",
       "image": "https://example.com/your_logo",
       "customer_id": "cust_EYqfYOviw62csf",
       "prefill":{
          "contact":"9988776655",
          "email":"gaurav.kumar@example.com",
          "name":"Gaurav Kumar"
        },
       "save": 1,
       "handler": function (response){
           alert(response.razorpay_payment_id);
           alert(response.razorpay_order_id);
           alert(response.razorpay_signature)
       }
   };
   var rzp1 = new Razorpay(options);
   document.getElementById('rzp-button1').onclick = function(e){
       rzp1.open();
       e.preventDefault();
   }
   </script>

Know more about

Android

For saving the cards, the options dictionary as a JSONObject representation is shown below:

JSONObject payload = new JSONObject();
  payload.put("currency", "INR");
  payload.put("customer_id", "cust_4lsdkfldlteskf");
  payload.put("save", "1");
  // And the remaining fields

Know more about

iOS

For saving the card details on the Checkout, the options dictionary in Swift and Objective C are shown below:

internal func showPaymentForm(){
  let options: [String:Any] = [
        "customer_id":"cust_4lsdkfldlteskf",
        "save":"1",
        // And the remaining fields
    ]
  razorpay.open(options)
}

Know more about

Request Parameters

Step 4: Create Payments using Saved Card

Once the card is saved, customers can complete payments on repeat purchases by only entering the CVV. To fetch saved cards, pass the customer_id to the Checkout form.

Web

Initiate payment by passing customer_id to Checkout along with the other options.

<button id="rzp-button1">Pay</button>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var options = {
    "key": "YOUR_KEY_ID", // Enter the Key ID generated from the Dashboard
    "amount": "50000", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
    "currency": "INR",
    "name": "Acme Corp",
    "description": "Test Transaction",
    "order_id":"order_CgmcjRh9ti2lP7",
    "image": "https://example.com/your_logo",
    "customer_id": "cust_EYqfYOviw62csf",
    "handler": function (response){
        alert(response.razorpay_payment_id);
        alert(response.razorpay_order_id);
        alert(response.razorpay_signature)
    }
};
var rzp1 = new Razorpay(options);
document.getElementById('rzp-button1').onclick = function(e){
    rzp1.open();
    e.preventDefault();
}
</script>

Android

Initiate payment by passing customer_id to Checkout along with the other options.

JSONObject payload = new JSONObject();
  payload.put("customer_id", "cust_4lsdkfldlteskf");
  // And the remaining fields

iOS

Initiate payment by passing customer_id to Checkout along with the other options.

internal func showPaymentForm(){
  let options: [String:Any] = [
        "amount": "100",
        "currency": "INR",//We support more that 92 international currencies.
        "description": "purchase description",
        "order_id": "order_4xbQrmEoA5WJ0G",
        "image": "https://url-to-image.jpg",
        "name": "business or product name",
        "customer_id":"cust_4lsdkfldlteskf",
        "prefill": [
            "contact": "9797979797",
            "email": "gaurav.kumar@example.com"
        ],
        "theme": [
            "color": "#F37254"
        ]
        // And the remaining fields
    ]
  razorpay.open(options)
}

Request Parameter

Manage Saved Cards

Customers can manage their saved card details stored as tokens using our

FAQs

1. My customers have accessed their saved cards on the Razorpay Checkout by providing OTP. How do they now log out?

For a safer and secured payment experience, your customer must log out from the Razorpay Checkout by following these steps:

1. Open Razorpay Checkout.
2. Select Card as the payment method.
3. Click the drop-down and select Log out from all devices.

This logs the customers out from the saved card feature on Checkout.

Related Information

• Web Integration Custom