Custom Checkout using nextgen APIs

Custom Checkout Page

If you want to build a custom checkout page you need to build your own UI and send the payment details to Cashfree. We will assume that you have built your own custom checkout page.

Cashfree expects you to send the payment_session_id (received from Create Order API) and payment instrument details to an endpoint like /orders/sessions. The payload will change for every payment method - example cards, upi, net banking, apps etc.

Cards

To send card details from you UI just send the details to the below endpoint /orders/sessions.

curl --request POST \
  --url https://sandbox.cashfree.com/pg//orders/sessions \
  --header 'Content-Type: application/json' \
  --header 'x-version: <<x-api-version>>' \
  --data '{
    "payment_session_id": "session__CvcEmNKDkmERQrxnx39ibhJ3Ii034pjc8ZVxf3qcgEXCWlgDDlHRgz2XYZCqpajDQSXMMtCusPgOIxYP2LZx0-05p39gC2Vgmq1RAj--gcn",
    "payment_method" : {
        "card" : { 
            "channel": "link",
            "card_number": "4444333322221111",
            "card_holder_name": "rohit",
            "card_expiry_mm" : "02",
            "card_expiry_yy" : "22",
            "card_cvv" : "123"                      
        }
    }
}'
{
  "payment_method": "card",
  "channel": "link",
  "action": "link",
  "data": {
    "url": "https://sandbox.cashfree.com/pg/view/gateway/LGi51C905Z3uVgjzi1YSb7832c7d73d67f194164fd745dfdebdf",
    "payload": null,
    "content_type": null,
    "method": null
  },
  "cf_payment_id" : 1234
}

The response for all card payments will require you to redirect the customer to the bank's OTP page for 2FA. In the response the value of action is what determines how you should parse the data. In case the action === link. You need to access the data.url and redirect the customer to that url. To accept cards you need to have PCI DSS certification

UPI

There are multiple ways to perform a UPI payment. You can either use a upi intent link, a qrcode or send a payment collection request to the customers UPI app. Here is a brief snapshot of these payment methods.

ChannelFlow description
linkThis channel is used for intent payments. If you send the channel as link, we will return you the intent links for different UPI applications.
qrcodeThis channel is used to generate a UPI qrcode.
collectThis channel is used to send a payment collection notification to the customers UPI app. The customer should then approve the request to complete the payment.
{
    "payment_session_id": "session__CvcEmNKDkmERQrxnx39ibhJ3Ii034pjc8ZVxf3qcgEXCWlgDDlHRgz2XYZCqpajDQSXMMtCusPgOIxYP2LZx0-05p39gC2Vgmq1RAj--gcn",
    "payment_method" : {
        "upi" : { 
            "channel": "link"
        }
    }
}
{
  "payment_method": "upi",
  "channel": "link",
  "action": "custom",
  "data": {
    "url": null,
    "payload": {
      "bhim": "bhim://upi/[email protected]&pn=Cashfree&tr=244178447&am=2.00&cu=INR&mode=00&purpose=00&mc=5732&tn=Cashfree%20Payment",
      "default": "upi://[email protected]&pn=Cashfree&tr=244178447&am=2.00&cu=INR&mode=00&purpose=00&mc=5732&tn=Cashfree%20Payment",
      "gpay": "tez://upi/[email protected]&pn=Cashfree&tr=244178447&am=2.00&cu=INR&mode=00&purpose=00&mc=5732&tn=Cashfree%20Payment",
      "paytm": "paytm://upi/[email protected]&pn=Cashfree&tr=244178447&am=2.00&cu=INR&mode=00&purpose=00&mc=5732&tn=Cashfree%20Payment",
      "phonepe": "phonepe://[email protected]&pn=Cashfree&tr=244178447&am=2.00&cu=INR&mode=00&purpose=00&mc=5732&tn=Cashfree%20Payment"
    },
    "content_type": null,
    "method": null
  },
  "cf_payment_id" : 1234
}
{
    "payment_session_id": "session__CvcEmNKDkmERQrxnx39ibhJ3Ii034pjc8ZVxf3qcgEXCWlgDDlHRgz2XYZCqpajDQSXMMtCusPgOIxYP2LZx0-05p39gC2Vgmq1RAj--gcn",
    "payment_method" : {
        "upi" : { 
            "channel": "qrcode"
        }
    }
}
{
  "payment_method": "upi",
  "channel": "qrcode",
  "action": "custom",
  "data": {
    "url": null,
    "payload": {
      "qrcode": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAFAAQMAAAD3XjfpAAAABlBMVEX///8AAABVwtN+AAADAklEQVR42uyazXG8OhDEm+LAkRAIRZkBm5lCIQSOOqiYV9MtAX7+RzBe1ZbtWv+4dM30fCB8z/d8z98+m5nZMZh9ir6Yc539u4o0+m+LCK4ApgPTsU7O8jnLemI8AaSQ4GTXQx3AbJA8DiY7A4OuSlk+dmz+nzmPljFbdHCdHNyxNGHsTGaRQabCRm08IYBUgTrnCvwjZ4KAsr11uj9nGu/Pb38MAnacHmCSZ7bxNr9fhS4E6EnAcNjKsk+m4qZwgONnSHCg4e2ujZ9rOkF5vLwD6QmKUCANwHY5n0qcqPHESOOPCA4M/4HaeFCU2Yyp3yt8SLBlQ1kur28uUnZJvMrBXKeQ4FYwMBV2LB/HvZcxNjVW3/KEAhkOhwrdVjwzEju4zCr3Mvtg4LFCEeEK7aDbiRotv80+ELhOh/yeTk+dAE8CsI97J0wgkIHAAaUsnFRO1AaqwqeI4FDA3cOy+zhuFyMC2kA83Xo0UHlwUaet7V2YCtV72Px4QCgQTP1LT0zWVZHls40NCTIQNpMNQGMKVen+FxWk2308KJaLIykqkrXBFH8aVNVfWR6YP0jat1LB1zwTCuQY4wq5UWrrqtl1PNOPJUUs0FtbZQ6donCM6Q2fD+0RQXjf44McjdLbXC4p6I+u0zPFRQK3/h5FS3bcK+bKIfbHyi4Q2LtbtQK7qoIPrqLmqODVO93dxxsavHpcs/wKikjgoNrPnzvNr6WC4qK+Z9dQILBwE+fUdu+kfHC1n8urOOAmVXxcpwUSxL1urrOFBEvraDa3Adu5a85tdp1zUFCrCgqjP5T9AFPhtZ0JBQ7PCOdVfZDB1275Y0zwjezaSbWgwK/WNQ54vy/U0vlqs2tbzSTMFhHUltn71qI7Ad7FKBwSJ5UcEez3APROhXsK43uFSnnGoGBbP/ASgNRSO1P5xPMOKSQobZadN9iax3eRwoLFx/FBq6bufDb+7xVpILDf2+PtBw7iGkZ10edd4gKB7U2hbrpQpIS7ieP1pojg93zP98Q6/wUAAP//VPQba1W96TYAAAAASUVORK5CYII="
    },
    "content_type": null,
    "method": null
  },
  "cf_payment_id" : 1234
}
{
    "payment_session_id": "session__CvcEmNKDkmERQrxnx39ibhJ3Ii034pjc8ZVxf3qcgEXCWlgDDlHRgz2XYZCqpajDQSXMMtCusPgOIxYP2LZx0-05p39gC2Vgmq1RAj--gcn",
    "payment_method" : {
        "upi" : { 
            "channel": "collect",
      "upi_id": "[email protected]"
        }
    }
}
{
  "payment_method": "upi",
  "channel": "collect",
  "action": "custom",
  "data": {
    "url": null,
    "payload": null,
    "content_type": null,
    "method": null
  },
  "cf_payment_id" : 1234
}

Parsing Response

The response for UPI will always have action as custom. This is because each payment flow needs to be handled differently.

  • Link: In the response we will send you a upi intent (or an app link). The default link will work on all android devices, since upi:// is a registered intent scheme in Android. If you want to override the default intent link with the custom link for every app, you just need to change the scheme prefix with the app prefix.

  • QR Code: In this response we will share a custom payload with you. The payload will contain the qrcode parameter which can be used to present the QR code to the customer.

  • Collect: A successful response for a collect request will contain action as custom but the data payload will contain only null values. This is because, if you receive a successful (200) response, we would have already sent the app notification to the customers UPI application. Now you need to wait for the webhook, which will be invoked once the user completes the payment. If the user does not complete the payment within a specific time, you can cancel this order for the user.

Net banking

To initiate a net banking payment, you need to pass us the net banking parameter. In response Cashfree will return a redirect link to you.

{
    "payment_session_id": "session__CvcEmNKDkmERQrxnx39ibhJ3Ii034pjc8ZVxf3qcgEXCWlgDDlHRgz2XYZCqpajDQSXMMtCusPgOIxYP2LZx0-05p39gC2Vgmq1RAj--gcn",
    "payment_method": {
            "netbanking": {
                    "channel": "link",
                    "netbanking_bank_code": 3009
        }
    }
}
{
  "payment_method": "netbanking",
  "channel": "link",
  "action": "link",
  "data": {
    "url": "https://www.cashfree.com/PaymentGateway/txnreq.pg?id=902f1351-1d5c-45ee-a71b-06c8f90b7436",
    "payload": null,
    "content_type": null,
    "method": null
  },
  "cf_payment_id" : 1234
}

Apps

To initiate payment for a custom application like Airtel money, PhonePe, Google Pay etc. You will have to send us the customers phone number and the application name. In response we will return a https url using which the customer can pay using this app.

Valid app names are gpay, phonepe, ola, paytm, amazon, airtel, freecharge, mobikwik, jio,

{
    "payment_session_id": "session__CvcEmNKDkmERQrxnx39ibhJ3Ii034pjc8ZVxf3qcgEXCWlgDDlHRgz2XYZCqpajDQSXMMtCusPgOIxYP2LZx0-05p39gC2Vgmq1RAj--gcn",
    "payment_method": {
            "app": {
        "channel": "link",
        "provider":"paytm",
        "phone": "9930764185""
        }
    }
}
{
  "payment_method": "app",
  "channel": "link",
  "action": "link",
  "data": {
    "url": "https://prod.cashfree.com/pgnextgenapi-test/api/v1/view/gateway/9dGxfNN4Ce62TUjxZhQg843317e97fef732632edf59b8e7144c2",
    "payload": null,
    "content_type": null,
    "method": null
  },
  "cf_payment_id" : 1234
}

EMI

To process EMI payments on a card you need to pass the card_bank_name and emi_tenure in the API request. If the card does not belong to the card_bank_name bank, the API will throw an error. Ensure you pass the bank names specified below within brackets for the card_bank_name field.

The banks supported credit card EMI payments are:

  • Standard Chartered Credit Card (Standard Chartered)
  • ICICI Bank Credit Card (ICICI)
  • Kotak Bank Credit Card (Kotak)
  • HDFC Bank Credit Card (HDFC)
  • Bank of Baroda Credit Card (BOB)
  • RBL Credit Card (RBL)
  • Axis Bank Credit Card (Axis)
  • AU Small Finance Bank (AU)
curl --request POST \
  --url https://api.cashfree.com/pg//orders/sessions \
  --header 'Content-Type: application/json' \
  --header 'x-version: <<x-api-version>>' \
  --data '{
  "payment_session_id": "session__CvcEmNKDkmERQrxnx39ibhJ3Ii034pjc8ZVxf3qcgEXCWlgDDlHRgz2XYZCqpajDQSXMMtCusPgOIxYP2LZx0-05p39gC2Vgmq1RAj--gcn",
    "payment_method" : {
        "emi": {
            "channel": "link",
            "card_number": "41xxxxxxxxx150", 
            "card_expiry_mm": "11",
            "card_expiry_yy": "25",
            "card_cvv": "123",
            "card_bank_name": "Kotak",
            "emi_tenure": 3
        }
    }
}'

BNPL

Cashfree provides multiple BNPL options for payments. To process these payments take a look at the below curl requests. We support the following providers -

  1. cardless_emi providers - flexmoney, zestmoney
  2. paylater providers - kotak ,flexipay, zestmoney, lazypay, olapostpaid , simpl
curl --request POST \
  --url https://api.cashfree.com/pg//orders/sessions \
  --header 'Content-Type: application/json' \
  --header 'x-version: <<x-api-version>>' \
  --data '{
  "payment_session_id": "session__CvcEmNKDkmERQrxnx39ibhJ3Ii034pjc8ZVxf3qcgEXCWlgDDlHRgz2XYZCqpajDQSXMMtCusPgOIxYP2LZx0-05p39gC2Vgmq1RAj--gcn",
  "payment_method": {
    "paylater": {
      "channel": "link",
      "provider":"lazypay",
      "phone":"7428638946"
    }
  }
}'
curl --request POST \
  --url https://api.cashfree.com/pg/orders/pay \
  --header 'Content-Type: application/json' \
  --header 'x-version: 2022-01-01' \
  --data '{
  "order_token": "n0hKSNHiPJZ83XqE8UnH",
  "payment_method": {
    "cardless_emi": {
      "channel": "link",
      "provider":"flexmoney",
      "phone":"7428638946"
    }
  }
}'

Paypal

To process payments through Paypal you will have to provide the payment_method as paypal. Please look at the API request and response below.

curl --request POST \
  --url https://api.cashfree.com/pg//orders/sessions \
  --header 'Content-Type: application/json' \
  --header 'x-api-version: <<x-api-version>>' \
  --data '{
  "payment_session_id": "session__CvcEmNKDkmERQrxnx39ibhJ3Ii034pjc8ZVxf3qcgEXCWlgDDlHRgz2XYZCqpajDQSXMMtCusPgOIxYP2LZx0-05p39gC2Vgmq1RAj--gcn",
  "payment_method": {
    "paypal": {
      "channel": "link",
      "currency": "USD"
    }
  }
}'
{
    "payment_method": "paypal",
    "channel": "link",
    "action": "link",
    "data": {
        "url": "https://api.cashfree.com/pg/view/gateway/NSQXpOThJaJdCvacY8L73376372d8a61c7546fd06de14f9fa76e",
        "payload": null,
        "content_type": null,
        "method": null
    },
    "cf_payment_id": 80098154
}