3.4 Initiate payment - Web checkout payment

Web Checkout flow

Web checkout flow is the another payment flow similar to Drop flow for collection payments using the Cashfree payment gateway's Android SDK. In this flow, SDK provides a webview based checkout implementation to facilitate a quick integration with our payment gateway. Your customers can fill in the necessary details in the web page and complete the payment.

This mode also handles all the business logic and UI Components to make the payment smooth and easy to use.

We have added this mode for giving access to some features which are only available in the web checkout flow now.

11991199

Web checkout Checkout

Initiating the payment

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

  • Create a CFSession object.
  • Create a CFTheme object.
  • Create a Web 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 Step2 is used to authenticate the payment. The SDK exposes a class CFSession class which accepts the payment_session_id, Environment and order ID values.

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.

CFSession cfSession = new CFSession.CFSessionBuilder()
        .setEnvironment(CFSession.Environment.SANDBOX)
        .setPaymentSessionID("paymentSessionID")
        .setOrderId("orderID")
        .build();

Set a Theme

CFWebCheckoutTheme cfTheme = new CFWebCheckoutTheme.CFWebCheckoutThemeBuilder()
        .setNavigationBarBackgroundColor("#6A3FD3")
        .setNavigationBarTextColor("#FFFFFF")
        .build();

The CFWebCheckoutThemeBuilder class used to create CFWebCheckoutTheme used to set the theming for Web checkout screen.

Create a Web Checkout Payment object

  • Code Snippet to create a payment object for Web Checkout (pre-built Web UI SDK)
CFWebCheckoutPayment cfWebCheckoutPayment = new CFWebCheckoutPayment.CFWebCheckoutPaymentBuilder()
                                .setSession(cfSession)
                                .setCFWebCheckoutUITheme(cfTheme)
                                .build();

📘

If payment component object is not provided then all the payment modes that are enabled for the merchant account is shown.

Setup Payment Callback

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

This protocol comprises of 2 methods:

  1. public void onPaymentVerify(String orderID)
  2. public void onPaymentFailure(CFErrorResponse cfErrorResponse, String orderID)
  • Code snippet demonstrating it's usage:
public class YourActivity extends AppCompatActivity implements CFCheckoutResponseCallback {
    ...
    @Override
    public void onPaymentVerify(String orderID) {

    }

    @Override
    public void onPaymentFailure(CFErrorResponse cfErrorResponse, String orderID) {

    }
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_checkout);
        try {
          // If you are using a fragment then you need to add this line inside onCreate() of your Fragment 
            CFPaymentGatewayService.getInstance().setCheckoutCallback(this);
        } catch (CFException e) {
            e.printStackTrace();
        }
    }
    ...
}

🚧

Make sure to set the callback at activity's onCreate as this also handles the activity restart cases.


Sample Code

package com.cashfree.sdk_sample;

import android.content.Intent;
import android.os.Bundle;
import android.util.Log;

import androidx.appcompat.app.AppCompatActivity;

import com.cashfree.pg.api.CFPaymentGatewayService;
import com.cashfree.pg.core.api.CFSession;
import com.cashfree.pg.core.api.webcheckout.CFTheme;
import com.cashfree.pg.core.api.callback.CFCheckoutResponseCallback;
import com.cashfree.pg.core.api.exception.CFException;
import com.cashfree.pg.core.api.utils.CFErrorResponse;
import com.cashfree.pg.core.api.webcheckout.CFWebCheckoutPayment;
import com.cashfree.pg.core.api.callback.CFCheckoutResponseCallback;

public class DropCheckoutActivity extends AppCompatActivity  implements CFCheckoutResponseCallback {

    String orderID = "ORDER_ID";
    String paymentSessionID = "TOKEN";
    CFSession.Environment cfEnvironment = CFSession.Environment.PRODUCTION;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drop_checkout);
        try {
            CFPaymentGatewayService.getInstance().setCheckoutCallback(this);
        } catch (CFException e) {
            e.printStackTrace();
        }
    }

    @Override
    public void onPaymentVerify(String orderID) {
        Log.e("onPaymentVerify", "verifyPayment triggered");
      // Start verifying your payment 
    }

    @Override
    public void onPaymentFailure(CFErrorResponse cfErrorResponse, String orderID) {
        Log.e("onPaymentFailure " + orderID, cfErrorResponse.getMessage());
    }

    public void doDropCheckoutPayment() {
        try {
            CFSession cfSession = new CFSession.CFSessionBuilder()
                    .setEnvironment(cfEnvironment)
                    .setPaymentSessionID(paymentSessionID)
                    .setOrderId(orderID)
                    .build();
            // Replace with your application's theme colors
            CFWebCheckoutTheme cfTheme = new CFWebCheckoutTheme.CFWebCheckoutThemeBuilder()
                    .setNavigationBarBackgroundColor("#fc2678")
                    .setNavigationBarTextColor("#ffffff")
                    .build();
            CFWebCheckoutPayment cfWebCheckoutPayment = new CFWebCheckoutPayment.CFWebCheckoutPaymentBuilder()
                                .setSession(cfSession)
                                .setCFWebCheckoutUITheme(cfTheme)
                                .build();
            CFPaymentGatewayService gatewayService = CFPaymentGatewayService.getInstance();
            gatewayService.doPayment(DropCheckoutActivity.this, cfDropCheckoutPayment);
        } catch (CFException exception) {
            exception.printStackTrace();
        }
    }
}