Payments

Payment Gateway

Web Integration

Custom

Features

Saved Cards

Scenario 1

Business Seeks Customer Consent, Saves Card Details With Razorpay Curlec

Procedure to follow if you plan to collect customer consent on your UI.

Given below are the integration steps to save cards as tokens with Razorpay Curlec.

New Card Workflow

New cards are the cards that are not saved with Razorpay previously. Follow the below integration steps:

  1. Changes on checkout UI.

  2. Changes in integration code.

1. Checkout UI

You should modify your user interface to explicitly receive customer consent for saving card details as tokens with Razorpay Curlec.

2. Integration Code

2.1 Create a Customer

You can create customers using the

Create a Customer API

. The customer_id received in the response should be passed in the Create Payment request.

2.2 Create Payment

Use the following code to Create a Payment.

<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.jpg",
        name: " Nur Aisyah",
       });
       var data = {
        amount: 6666,
        currency: "",
        order_id: "order_ISsp1ekSCHgoAw",
        email: "nur.aisyah@example.com",
        contact: +60123456789,
        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]: ' Nur Aisyah'
       };


       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

save

mandatory

integer Determines whether Razorpay Curlec should save customer card details as tokens with the Razorpay Curlec. Possible values:

  • 1: Razorpay Curlec should save customer card details as tokens with the Razorpay Curlec. This will work only if explicit customer consent has been received from the customer.
  • 0: Razorpay Curlec should not save the card details.

card

mandatory

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

number

string Unformatted card number.

name

string The name of the cardholder.

expiry_month

string Expiry month for card in MM format.

expiry_year

string Expiry year for card in YY format.

cvv

string The card's CVV number.

customer_id

mandatory

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

2.3 Fetch all Tokens of Customer

Fetch all tokens created for a customer using the API given below.

GET
/customers/:customer_id/tokens
curl -u [YOUR_KEY_ID]:[YOUR_KEY_SECRET] \
-X GET https://api.razorpay.com/v1/customers/:customer_id/tokens

Path Parameter

customer_id

string Unique identifier of the customer.

Response Parameters

id

string The unique identifier of the Razorpay Curlec token.

entity

string The name of the entity. Here, it is token.

method

string The type of saved instrument. In the current use case, the value is card.

card

object The customer card details.

last4

string The last 4 digits of the tokenised card.

network

string The card network. Possible values:

  • Visa
  • RuPay
  • MasterCard
  • American Express
  • Diners Club
  • Maestro
  • JCB
  • Union Pay

issuer

string The 4-character issuer code unique to each issuing bank in India. For example, HDFC, SBIN and so on.

type

string The type of card. Possible values:

  • credit
  • debit
  • prepaid

international

boolean Indicates whether the card is international (issued outside India) or domestic. Possible values:

  • true: The card is international.
  • false: The card is domestic.

sub_type

string The card sub_type for the given IIN. Pricing of card payment may change on the basis of card type. Possible values:

  • consumer
  • business
  • unknown

compliant_with_tokenisation_guidelines

boolean Indicates whether the token is compliant with the local guidelines (this is for Indian Cards only). Possible values:

  • true: The token is compliant with local guidelines.
  • false: The token is not compliant with local guidelines.

status

string The overall status for the token. Possible values:

  • initiated: The token attains this state after Razorpay Curlec has received the tokenisation request and is working with token service providers for creating the token.
  • active: The token attains this state if the token is activated for at least one of the token service providers.
  • suspended: The token attains this state if:
    - The token is not activated for any one of the token service providers.
    - The token is suspended for at least one of the token service providers.
  • deactivated: The token attains this state if the token is not active/suspended for any one of the token service providers and is deactivated for at least one token service provider. Know about the complete list of

    token states

    .

2.4 Fetch Card Properties of an Existing Token

Use this API to retrieve card details such as network, issuer and so on for a given token.

GET
/customers/:customer_id/tokens/:token_id

Path Parameter

customer_id

string Unique identifier of the customer.

token_id

string Unique identifier of the token.

Response Parameters

id

string The unique identifier of the Razorpay Curlec token.

entity

string The name of the entity. Here, it is token.

method

string The type of saved instrument. In the current use case, the value is card.

card

object The customer card details.

last4

string The last 4 digits of the tokenised card.

network

string The card network. Possible values:

  • Visa
  • RuPay
  • MasterCard
  • American Express
  • Diners Club
  • Maestro
  • JCB
  • Union Pay

issuer

string The 4-character issuer code unique to each issuing bank in India. For example, HDFC, SBIN and so on.

type

string The type of card. Possible values:

  • credit
  • debit
  • prepaid

international

boolean Indicates whether the card is international (issued outside India) or domestic. Possible values:

  • true: The card is international.
  • false: The card is domestic.

sub_type

string The card sub_type for the given IIN. Pricing of card payment may change on the basis of card type. Possible values:

  • consumer
  • business
  • unknown

compliant_with_tokenisation_guidelines

boolean Indicates whether the token is compliant with the local guidelines (this is for Indian Cards only). Possible values:

  • true: The token is compliant with local guidelines.
  • false: The token is not compliant with local guidelines.

status

string The overall status for the token. Possible values:

  • initiated: The token attains this state after Razorpay Curlec has received the tokenisation request and is working with token service providers for creating the token.
  • active: The token attains this state if the token is activated for at least one of the token service providers.
  • suspended: The token attains this state if:
    - The token is not activated for any one of the token service providers.
    - The token is suspended for at least one of the token service providers.
  • deactivated: The token attains this state if the token is not active/suspended for any one of the token service providers and is deactivated for at least one token service provider. Know about the complete list of

    token states

    .

2.5 Create Payments Using Saved Card

After the card is saved, customers can quickly complete the payment for every subsequent online transaction by entering only the cvv.

<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.jpg",
        name: "Crime Master Gogo",
       });
       var data = {
        amount: 6666,
        currency: "",
        email: "nur.aisyah@example.com",
        order_id: "order_ISsp1ekSCHgoAw",
        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 Unique identifier of the token saved with the Razorpay Curlec.

card[cvv]

string CVV of the card.

2.6 Delete Tokens

If the customers want to remove the saved cards from their respective accounts, use the following API to delete the tokens.

DELETE
/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.

Delete Saved Card Details

Customers can delete their card details. Check this

demo

and follow the on-screen instructions.

Existing Saved Card

  • Existing cards are those cards whose details are saved with Razorpay Curlec on Razorpay Curlec servers.

  • Razorpay Curlec saves the existing card details as tokens if the customer provides explicit consent.

  • The businesses signify customer consent by sending the consent_to_save_card=1 parameter in the Create Payment request.

  • If the customer does not provide consent, the card details are not saved.

    Handy Tips

    The existing card details are saved as tokens whether the Collect Consent from Customers feature is enabled on the Dashboard or not, provided consent_to_save_card=1.

Given below is the sample code:

<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.jpg",
        name: " Nur Aisyah",
       });
       var data = {
        amount: 6666,
        currency: "",
        email: "nur.aisyah@example.com",
        order_id: "order_ISsp1ekSCHgoAw",
        contact: 9123456780,
        notes: {
          address: "Ground Floor, SJR Cyber, Laskar Hosur Road, Bengaluru",
        },
        customer_id: "cust_1Aa00000000001",
        token: "token_4zwefDSCC829ma",
        method: "card",
        card[cvv]: '123',
        consent_to_save_card: 1
       };


       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>

Is this integration guide useful?

ON THIS PAGE