Integrate Saved Cards at Standard Checkout

Check the prerequistes and the integration steps for

Saved Cards

on your standard checkout page. Know

how to integrate Saved Cards on Custom Checkout

Prerequisites

Sign up for a Razorpay account.
Generate API Keys on Razorpay Dashboard.

Watch this video to know how to generate Test Mode API keys.
Integrate with our Standard Checkout
.

Step 1: Enable Flash Checkout on Razorpay Dashboard

Enable Flash Checkout 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

Flash Checkout

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:

API Sample Code

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.

POST

/customers

Know more about

Customers API

Request Parameters

name

optional

string Customer's name. Alphanumeric value with period (.), apostrophe ('), forward slash (/), at (@) and parentheses are allowed. The name must be between 3-50 characters in length. For example, Gaurav Kumar.

contact

optional

string The customer's phone number. A maximum length of 15 characters including country code. For example, +919876543210.

optional

string The customer's email address. A maximum length of 64 characters. For example, gaurav.kumar@example.com.

fail_existing

optional

string Possible values:

0: If a customer with the same details already exists, fetches details of the existing customer.
1 (default): If a customer with the same details already exists, throws an error.

gstin

optional

string Customer's GST number, if available. For example, 29XAbbA4369J1PA.

notes

optional

object This is a key-value pair that can be used to store additional information about the entity. It can hold a maximum of 15 key-value pairs, 256 characters (maximum) each. For example, "note_key": "Beam me up Scotty”.

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.

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

Request Parameters

customer_id

mandatory

string Unique identifier of the customer. This can be obtained from the response of the previous step.

save

mandatory

boolean Specifies if the card details should be stored as tokens. Possible values:

1: Saves the card details
0 (default): Does not save the card details.

Know more about

Checkout parameters

for web integration.

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.

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>

Request Parameter

customer_id

mandatory

string Unique identifier of the customer.

Created in Step 2