Integrate Saved Cards at Standard Checkout

Check the prerequisites and the integration steps for Saved Cards on your standard checkout page. Know how to integrate Saved Cards on Custom Checkout.

Prerequisites

Create a Razorpay account.
Generate API Keys on Dashboard. Watch this video to know how to generate Test Mode API keys. Watch this video to know how to generate Live Mode API keys.
Integrate with our Standard Checkout.
Generate API Keys on Dashboard.
Integrate with our Standard Checkout.

Step 1: Enable Flash Checkout on Dashboard

Flash Checkout, enabled by default on your Standard Checkout, lets your customers save their card details for future purchases. Customers can choose whether to save their card information during the payment process. All card details are stored securely using PCI-DSS-compliant technology. Know more about 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. /customers

Curl

curl -u [YOUR_KEY_ID]:[YOUR_KEY_SECRET] \
-X POST https://api.razorpay.com/v1/customers \
-H "Content-Type: application/json" \
-d '{
    "name": "Gaurav Kumar",
    "contact": "+919876543210",
    "email": "gaurav.kumar@example.com",
    "fail_existing": "0",
    "notes": {
      "notes_key_1": "Tea, Earl Grey, Hot",
      "notes_key_2": "Tea, Earl Grey… decaf."
  }
}'

```java: Java
RazorpayClient razorpay = new RazorpayClient("[YOUR_KEY_ID]", "[YOUR_KEY_SECRET]");

JSONObject customerRequest = new JSONObject();
customerRequest.put("name","Gaurav Kumar");
customerRequest.put("contact","+919876543210");
customerRequest.put("email","gaurav.kumar@example.com");
customerRequest.put("fail_existing", "0");
JSONObject notes = new JSONObject();
notes.put("notes_key_1","Tea, Earl Grey, Hot");
notes.put("notes_key_2","Tea, Earl Grey… decaf.");
customerRequest.put("notes",notes);

Customer customer = razorpay.customers.create(customerRequest);

```python: Python
import razorpay
client = razorpay.Client(auth=("YOUR_ID", "YOUR_SECRET"))

client.customer.create({
  "name": "Gaurav Kumar",
  "contact": "+919876543210",
  "email": "gaurav.kumar@example.com",
  "fail_existing": "0",
  "notes": {
    "notes_key_1": "Tea, Earl Grey, Hot",
    "notes_key_2": "Tea, Earl Grey… decaf."
  }
})

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

data := map[string]interface{}{
    "name": "Gaurav Kumar",
    "contact": "+919876543210",
    "email": "gaurav.kumar@example.com",
    "fail_existing": "0",
    "notes": map[string]interface{}{
      "notes_key_1": "Tea, Earl Grey, Hot",
      "notes_key_2": "Tea, Earl Grey… decaf.",
	},
}

body, err := client.Customer.Create(data, nil)

```php: PHP
$api = new Api($key_id, $secret);

$api->customer->create(array('name' => 'Gaurav Kumar', 'email' => 'gaurav.kumar@example.com','contact'=>'+919876543210','notes'=> array('notes_key_1'=> 'Tea, Earl Grey, Hot','notes_key_2'=> 'Tea, Earl Grey… decaf'));

```csharp: .NET
RazorpayClient client = new RazorpayClient("[YOUR_KEY_ID]", "[YOUR_KEY_SECRET]");

Dictionary options = new Dictionary();

options.Add("name", "Gaurav Kumar"); 
options.Add("contact", "+919876543210"); 
options.Add("email", "gaurav.kumar@example.com"); 
options.Add("fail_existing", "0"); 

Customer customer = Customer.Create(options);

```ruby: Ruby
require "razorpay"
Razorpay.setup('YOUR_KEY_ID', 'YOUR_SECRET')

Razorpay::Customer.create({
  "name": "Gaurav Kumar",
  "contact": "+919876543210",
  "email": "gaurav.kumar@example.com",
  "fail_existing": "0",
  "notes": {
    "notes_key_1": "Tea, Earl Grey, Hot",
    "notes_key_2": "Tea, Earl Grey… decaf."
  }
})

```javascript: Node.js
var instance = new Razorpay({ key_id: 'YOUR_KEY_ID', key_secret: 'YOUR_SECRET' })

instance.customers.create({
  name: "Gaurav Kumar",
  contact: "+919876543210",
  email: "gaurav.kumar@example.com",
  fail_existing: "0",
  notes: {
    notes_key_1: "Tea, Earl Grey, Hot",
    notes_key_2: "Tea, Earl Grey… decaf."
  }
})

Success Response

{
  "id" : "cust_1Aa00000000004",
  "entity": "customer",
  "name" : "Gaurav Kumar",
  "email" : "gaurav.kumar@example.com",
  "contact" : "+919876543210",
  "gstin": null,
  "notes": {
    "notes_key_1":"Tea, Earl Grey, Hot",
    "notes_key_2":"Tea, Earl Grey… decaf."
  },
  "created_at ": 1234567890
}
```json: Failure Response
{
  "error": {
    "code": "BAD_REQUEST_ERROR",
    "description": "Contact number should be at least 8 digits, including country code",
    "source": "business",
    "step": "NA",
    "reason": "invalid_contact_number",
    "metadata": {},
    "field": "contact"
  }
}

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. email 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:

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

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: Create an Order

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

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
}'
```java: Java
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());
}
```Python: Python
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)
```php: PHP
$order  = $client->order->create([
  'receipt'         => 'order_rcptid_11',
  'amount'          => 50000, // amount in the smallest currency unit
  'currency'        => 'INR'// [See the list of supported currencies](/payments/international-payments#supported-currencies).)
]);
```csharp: .NET
Dictionary options = new Dictionary();
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);
```ruby: Ruby
options = amount: 50000, currency: 'INR', receipt: ''
order = Razorpay::Order.create
```javascript: Node.js
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);
});
```json: Response
{
    "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.

Step 4: Enable Customer Card Saving on Checkout

While making the payment, the customer enters card details and can choose to save them for future use. Pass customer_id along with the other parameters into the Checkout form.

Web Standard Checkout

Pay


var options = {
    "key": "",
    "amount": "5076",
    "currency": "INR",
    "name": "Acme Corp",
    "description": "Test Transaction",
    "image": "https://example.com/your_logo",
    "customer_id": "cust_EYqfYOviw62csf",
    "order_id": "order_DBJOWzybf0sJbb",
    "prefill":{
        "contact":"+919876543210",
        "email":"gaurav.kumar@example.com",
        "name":"Gaurav Kumar"
        },
    "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();
}

Request Parameter

customer_id mandatory : string Unique identifier of the customer. This can be obtained from the response of the previous step. Know more about Checkout parameters for web integration. To enable customers to save their cards, pass customer_id along with other parameters:

Save Card

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

Request Parameter

customer_id mandatory : string Unique identifier of the customer. This can be obtained from the response of the previous step. Know more about Checkout parameters for Android integration. To enable customers to save their cards, pass customer_id along with other parameters. The options dictionary in Swift and Objective C are shown below:

Swift

internal func showPaymentForm(){
let options: [String:Any] = [
       "customer_id":"cust_4lsdkfldlteskf",
       "order_id":"order_DBJOWzybf0sJbb"
       // And the remaining fields
   ]
razorpay.open(options)
}
```objectivec: Objective C
   @"customer_id" : @"cust_4lsdkfldlteskf",
   @"order_id": "order_DBJOWzybf0sJbb"
   // And the remaining fields

Request Parameter

customer_id mandatory : string Unique identifier of the customer. This can be obtained from the response of the previous step. Know more about other Checkout parameters for iOS integration.

Step 5: 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.

Standard Checkout

Pay


var options = {
    "key": "YOUR_KEY_ID", // Enter the Key ID generated from the Dashboard
    "amount": "50000", // Amount is in currency subunits.
    "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();
}

Request Parameter

customer_id mandatory : string Unique identifier of the customer. Created in Step 2. Initiate payment by passing customer_id to Checkout along with the other options.

Initiate Payment

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

Request Parameter

customer_id mandatory : string Unique identifier of the customer. Created in Step 2. Initiate payment by passing customer_id to Checkout along with the other options.

Swift

internal func showPaymentForm(){
let options: [String:Any] = [
       "amount": "100",
       "currency": "INR",//Amount is in currency subunits.
       "description": "purchase description",
       "order_id": "order_4xbQrmEoA5WJ0G",
       "image": "https://url-to-image.jpg",
       "name": "business or product name",
       "customer_id":"cust_4lsdkfldlteskf",
       "prefill": [
           "contact": "+919876543210",
           "email": "gaurav.kumar@example.com"
       ],
       "theme": [
           "color": "#F37254"
       ]
       // And the remaining fields
   ]
razorpay.open(options)
}
```objectivec: Objective C
   @"amount" : @(2000),
   @"email" : @"gaurav.kumar@example.com",
   @"contact" : @"+919876543210",
   @"customer_id" : @"cust_4lsdkfldlteskf"
   // And the remaining fields

Request Parameter

customer_id mandatory : string Unique identifier of the customer. Created in Step 2.

Test Integration

Use test cards to test your payment integration before going live. The test cards simulate different payment scenarios and error conditions for all supported card networks. Know more about Test Cards.

​Prerequisites

​Step 1: Enable Flash Checkout on Dashboard

​Step 2: Create a Customer

​API Sample Code

​Request Parameters

​Step 3: Create an Order

​API Sample Code

​Request Parameters

​Response Parameters

​Error Response Parameters

​Step 4: Enable Customer Card Saving on Checkout

​Request Parameter

​Request Parameter

​Request Parameter

​Step 5: Create Payments Using Saved Card

​Request Parameter

​Request Parameter

​Request Parameter

​Test Integration

Prerequisites

Step 1: Enable Flash Checkout on Dashboard

Step 2: Create a Customer

API Sample Code

Request Parameters

Step 3: Create an Order

API Sample Code

Request Parameters

Response Parameters

Error Response Parameters

Step 4: Enable Customer Card Saving on Checkout

Request Parameter

Request Parameter

Request Parameter

Step 5: Create Payments Using Saved Card

Request Parameter

Request Parameter

Request Parameter

Test Integration