3.2 Initiate payment - UPI Checkout

UPI flow

UPI flow is the standard flow for Cashfree payment gateway's Cordova SDK. In this flow, SDK provides a pre-built native screen to facilitate a quick integration with our payment gateway.

Initiating the payment

To initiate the UPI checkout payment in the SDK, follow these steps

Create a Session object.
Create a Components object.
Create a Theme object.
Create a UPI Checkout Payment object.
Set payment callback.
Initiate the payment using the payment object created from [step 4]

Create a session

The payment_session_id created from Step 2 is used to authenticate the payment.

Cashfree provides two environments, one being the sandbox environment for developers to test the payment flow and responses and the other being production environment which gets shipped to production. This environment can be set in this session object.

The values for environment can be either SANDBOX or PRODUCTION.

let session = {
	"payment_session_id": "payment_session_id",
  "orderID": "order_id",
	"environment": "SANDBOX" //"SANDBOX" or "PRODUCTION"
}

Payment Components

The Cashfree's UPI checkout allows the merchant to control the payment modes shown to their customer using the payment component parameter.

Set a Theme

let theme = {
	"navigationBarBackgroundColor": "#E64A19", //ios
  "navigationBarTextColor": "#FFFFFF", //ios
  "buttonBackgroundColor": "#FFC107", //ios
  "buttonTextColor": "#FFFFFF", //ios
  "primaryTextColor": "#212121", 
  "secondaryTextColor": "#757575", //ios
  "backgroundColor": "#FFFFFF"
}

Create a UPI Checkout Payment object

Code Snippet to create a payment object for UPI Checkout (pre-built UI SDK)

let upiPaymentObject = {
	"theme": {
		"navigationBarBackgroundColor": "#E64A19", //ios
	  "navigationBarTextColor": "#FFFFFF", //ios
	  "buttonBackgroundColor": "#FFC107", //ios
	  "buttonTextColor": "#FFFFFF", //ios
	  "primaryTextColor": "#212121", 
	  "secondaryTextColor": "#757575", //ios
	  "backgroundColor": "#FFFFFF"
	},
	"session": {
		"payment_session_id": "payment_session_id",
  	"orderID": "order_id",
		"environment": "SANDBOX" //"SANDBOX" or "PRODUCTION"
	}
}

Setup Payment Callback

The SDK exposes an interface CFCallback to receive callbacks from the SDK once the payment flow ends.

This protocol comprises of 2 methods:

public void onVerify(result)
public void onError(error)

Code snippet demonstrating it's usage:

function onDeviceReady() {
  const callbacks = {
        onVerify: function (result) {
					let details = {
          	"orderID": result.orderID
          }
          console.log(details);
        },
        onError: function (error){
          let errorObj = {
          	"orderID": result.orderID,
            "status": error.status,
            "code": error.code,
            "type": error.type,
            "message": error.message
          }
          console.log(errorObj);
        }
    }
    CFPaymentGateway.setCallback(callbacks)
}

Sample Code

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
    let upiElement = document.getElementById("onUPI");
    upiElement.addEventListener("click", (e) => initiateUPIPayment());

    const callbacks = {
       onVerify: function (result) {
					let details = {
          	"orderID": result.orderID
          }
          console.log(details);
        },
        onError: function (error){
          let errorObj = {
          	"orderID": result.orderID,
            "status": error.status,
            "code": error.code,
            "type": error.type,
            "message": error.message
          }
          console.log(errorObj);
        }
    }
    CFPaymentGateway.setCallback(callbacks)
}

function initiateUPIPayment() {
    CFPaymentGateway.doUPIPayment({
        "theme": {
					"navigationBarBackgroundColor": "#E64A19", //ios
				  "navigationBarTextColor": "#FFFFFF", //ios
				  "buttonBackgroundColor": "#FFC107", //ios
				  "buttonTextColor": "#FFFFFF", //ios
				  "primaryTextColor": "#212121", 
				  "secondaryTextColor": "#757575", //ios
				  "backgroundColor": "#FFFFFF"
				},
        "session": {
            "payment_session_id": "payment_session_id",
				  	"orderID": "order_id",
						"environment": "SANDBOX" //"SANDBOX" or "PRODUCTION"
        }
    })
}

You can check our demo app located here.

Updated about 1 year ago