API ReferenceIntegrationsKnowledge Base

Save customer card details on Custom Checkout

You can save sensitive card information entered by the customer as "tokens" in Razorpay. On a repeat visit, the customers will be able to pay directly just by entering the cvv of the card. This saves the customer the hassle of entering the card details again for every transaction.

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:

Use the below endpoint to create a customer:

/customers

Request ParametersπŸ”—

name mandatory
string Customer's name. Alphanumeric value with period (.), apostrophe (') and parentheses are allowed. Name must be between 3-50 characters in length. For example, Gaurav Kumar.
contact optional
string The customer's phone number. Maximum length of 15 characters including the country code. For example, +919876543210.
email optional
string The customer's email address. 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”.

Read More: Learn more about Customers API.

Step 3: Save the Card Details on CheckoutπŸ”—

While making the payment, the customer enters the card details in the Checkout form. If the card details should be saved by Razorpay, pass customer_id and save=1 along with the other parameters into the Checkout form.

Copy<script src="https://checkout.razorpay.com/v1/razorpay.js"></script> <button id="rzp-button1" style="background-color: #3399cc; color: white; font-size: 16px; font-family: sans-serif">Pay</button> <script> var razorpay = new Razorpay({ key: "<YOUR_KEY_ID>", image: "https://i.imgur.com/n5tjHFD.png", name: "Crime Master Gogo", }); var data = { amount: 6666, currency: "INR", email: "gaurav.kumar@example.com", contact: 9123456780, notes: { address: "Ground Floor, SJR Cyber, Laskar Hosur Road, Bengaluru", }, customer_id: "cust_1Aa00000000001", save: 1, method: "card", 'card[number]': '4242424242424242', 'card[expiry_month]': '11', 'card[expiry_year]': '23', 'card[cvv]': '123', 'card[name]': 'Gaurav Kumar' }; document.getElementById("rzp-button1").onclick = function(){ razorpay.createPayment(data); razorpay.on("payment.success", function(resp) { alert(resp.razorpay_payment_id) }); razorpay.on("payment.error", function(resp){alert(resp.error.description)}); } </script>

Once the payment is complete, token is generated with these card details.

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

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

The details of the card that should be entered while making the payment.

number mandatory
integer Unformatted card number.
name mandatory
string The name of the cardholder.
expiry_month mandatory
integer Expiry month for card in MM format.
expiry_year mandatory
integer Expiry year for card in YY format.
cvv mandatory
integer CVV printed on the back of the card.

Read more: Learn about the other Checkout parameters for web integration.

Step 4: Fetch all Tokens of CustomerπŸ”—

To display all the tokens created for a customer, fetch them as follows:

/customers/:customer_id/tokens
Copycurl -u [YOUR_KEY_ID]:[YOUR_KEY_SECRET] \ -X GET https://api.razorpay.com/v1/customers/:customer_id/tokens
Copy{ "entity" : "collection", "count" : 2, "items" : [ { "id" : "token_4lsdksD31GaZ09", "entity" : "token", "method" : "card", "card" : { "entity" : "card", "name" : "Gaurav Kumar", "last4" : 1111, "network" : "Visa", "expiry_month" : 12, "expiry_year" : 2021, "emi" : true, "issuer" : "HDFC" }, "used_at" : 1473765044, "created_at" : 1473765044 }, { "id" : "token_4zwefDSCC829ma", "entity" : "token", "method" : "card", "card" : { "entity": "card", "name": " Gaurav Kumar", "network": "MasterCard", "international": false, "expiry_month": 9, "expiry_year": 2020, "last4" : 1221, "emi": false }, "used_at": null, "created_at" : 1473765043 } ] }

Path ParameterπŸ”—

customer_id
string Unique identifier of the customer.

Step 5: Create Payments using Saved CardπŸ”—

After the card is saved, for every online transaction thereafter, customers can quickly complete the payment by entering only the cvv. If the card details should be saved by Razorpay, the following additional parameters should be passed into the Checkout form.

Copy<script src="https://checkout.razorpay.com/v1/razorpay.js"></script> <button id="rzp-button1" style="background-color: #3399cc; color: white; font-size: 16px; font-family: sans-serif">Pay</button> <script> var razorpay = new Razorpay({ key: "<YOUR_KEY_ID>", image: "https://i.imgur.com/n5tjHFD.png", name: "Crime Master Gogo", }); var data = { amount: 6666, currency: "INR", email: "gaurav.kumar@example.com", contact: 9123456780, notes: { address: "Ground Floor, SJR Cyber, Laskar Hosur Road, Bengaluru", }, customer_id: "cust_1Aa00000000001", token:"token_4zwefDSCC829ma", method: "card", 'card[cvv]': '123' }; document.getElementById("rzp-button1").onclick = function(){ razorpay.createPayment(data); razorpay.on("payment.success", function(resp) { alert(resp.razorpay_payment_id) }); razorpay.on("payment.error", function(resp){alert(resp.error.description)}); } </script>

Request ParametersπŸ”—

customer_id
string Unique identifier of the customer.
token
string Token of the saved method. This is generated by Razorpay.
card[cvv]
integer cvv for the card. 3-digit code on the back of Master or Visa card. 4-digit code on the front of the AMEX card.

Delete TokensπŸ”—

In situations where your customers want to remove the saved cards from their respective accounts, you can do the same by deleting the tokens at your end.

/customers/:customer_id/tokens/:token_id

Path ParametersπŸ”—

customer_id
string Unique identifier of the customer.
token
string Token of the saved method that needs to be deleted.

Customers can delete their card details by visiting this link and following the on-screen instructions.

×