3.1 Initiate payment - Drop Checkout

Drop flow

Drop flow is the standard flow for Cashfree payment gateway's Flutter SDK. In this flow, SDK provides a pre-built native screen to facilitate a quick integration with our payment gateway. Your customers can fill in the necessary details here and complete the payment.

This mode handles all the business logic and UI Components to make the payment smooth and easy to use. The SDK allows the merchant to customize the UI in terms of color coding and payment modes shown.

Initiating the payment

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

Create a CFSession object.
Create a CFPaymentComponents object.
Create a CFTheme object.
Create a Drop Checkout Payment object.
Set payment callback.
Initiate the payment using the payment object created from [step 4]

Create a session

📘
We have released our latest version 2022-09-01 to make our integration more secure for merchants and customers to use. In the this latest version, we have revamped the integration method for using our Drop and Element SDK.
Previous Implementation of creating session with "order_token" (setOrderToken) is deprecated and is replaced by "payment_session_id" (setPaymentSessionId).

The payment_session_id created is used to authenticate the payment. The SDK exposes a class CFSession class which accepts the order_token, 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.

import 'package:flutter_cashfree_pg_sdk/api/cfsession/cfsession.dart';

try {
      var session = CFSessionBuilder().setEnvironment(environment).setOrderId(Utils.orderId).setPaymentSessionId(paymentSessionId).build()
      return session;
    } on CFException catch (e) {
      print(e.message);
    }

Payment Components

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

import 'package:flutter_cashfree_pg_sdk/api/cfpaymentcomponents/cfpaymentcomponent.dart';

List<CFPaymentModes> components = <CFPaymentModes>[];
components.add(CFPaymentModes.UPI);
components.add(CFPaymentModes.CARD);
components.add(CFPaymentModes.WALLET);
var paymentComponent = CFPaymentComponentBuilder().setComponents(components).build();

If this method is not called, by default all the payment modes are enabled.

Set a Theme

import 'package:flutter_cashfree_pg_sdk/api/cftheme/cftheme.dart';

var theme = CFThemeBuilder().setNavigationBarBackgroundColorColor("#FF0000").setPrimaryFont("Menlo").setSecondaryFont("Futura").build();

The CFThemeBuilder class used to create CFTheme used to set the theming for Drop checkout screen.

Create a Drop Checkout Payment object

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

try {
  var cfDropCheckoutPayment = CFDropCheckoutPaymentBuilder().setSession(session!).setPaymentComponent(paymentComponent).setTheme(theme).build();

  cfPaymentGatewayService.doPayment(cfDropCheckoutPayment);
} on CFException catch (e) {
      print(e.message);
}

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

Setup Payment Callback

Callbacks must be registered in the "init" method of the screen that invokes the SDK.

Two methods have to be declared and their instance has to be sent to the SDK. Following is the code snippet to do the same

Code snippet demonstrating it's usage:

// Class level variable -> CFPaymentGatewayServie is a Singleton
var cfPaymentGatewayService = CFPaymentGatewayService();

// Callback methods
void verifyPayment(String orderId) {
    print("Verify Payment");
}

void onError(CFErrorResponse errorResponse, String orderId) {
    print("Error while making payment");
}

// Register the callbacks
@override
void initState() {
    super.initState();
    cfPaymentGatewayService.setCallback(verifyPayment, onError);
}

📘
You can now subscribe to Cashfree generated events for analytics

This callback is optional

void receivedEvent(String event_name, Map<dynamic, dynamic> meta_data) {
    print(event_name);
    print(meta_data);
  }

@override
  void initState() {
    super.initState();
    cfPaymentGatewayService.setCallback(verifyPayment, onError, receivedEvent);
  }

🚧
Make sure to set the callback at init and remove the callback at dispose as this also handles the activity restart cases and prevents memory leaks.

Sample Code

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cashfree_pg_sdk/api/cferrorresponse/cferrorresponse.dart';
import 'package:flutter_cashfree_pg_sdk/api/cfpayment/cfdropcheckoutpayment.dart';
import 'package:flutter_cashfree_pg_sdk/api/cfpaymentcomponents/cfpaymentcomponent.dart';
import 'package:flutter_cashfree_pg_sdk/api/cfpaymentgateway/cfpaymentgatewayservice.dart';
import 'package:flutter_cashfree_pg_sdk/api/cfsession/cfsession.dart';
import 'package:flutter_cashfree_pg_sdk/api/cftheme/cftheme.dart';
import 'package:flutter_cashfree_pg_sdk/utils/cfenums.dart';
import 'package:flutter_cashfree_pg_sdk/utils/cfexceptions.dart';
import 'package:flutter_cashfree_pg_sdk_example/utils/util.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  var cfPaymentGatewayService = CFPaymentGatewayService();

  @override
  void initState() {
    super.initState();
    cfPaymentGatewayService.setCallback(verifyPayment, onError);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            children: [
              TextButton(onPressed: pay, child: const Text("Pay"))
            ],
          ),
        ),
      ),
    );
  }

  void verifyPayment(String orderId) {
    print("Verify Payment");
  }

  void onError(CFErrorResponse errorResponse, String orderId) {
    print("Error while making payment");
  }

  String orderId = "order_3242Eypmd5FgXn0CUfibZ5vWEfZ8GY";
  String paymentSessionId = "session_ashfjksGFjhksdgfjkhsgfakhsdgfkjasgdfkjsgfdh";
  CFEnvironment environment = CFEnvironment.SANDBOX;

  CFSession? createSession() {
    try {
      var session = CFSessionBuilder().setEnvironment(environment).setOrderId(Utils.orderId).setPaymentSessionId(paymentSessionId).build()
      return session;
    } on CFException catch (e) {
      print(e.message);
    }
    return null;
  }

  pay() async {
    try {
      var session = createSession();
      List<CFPaymentModes> components = <CFPaymentModes>[];
      components.add(CFPaymentModes.UPI);
      components.add(CFPaymentModes.CARD);
      components.add(CFPaymentModes.WALLET);
      var paymentComponent = CFPaymentComponentBuilder().setComponents(components).build();

      var theme = CFThemeBuilder().setNavigationBarBackgroundColorColor("#FF0000").setPrimaryFont("Menlo").setSecondaryFont("Futura").build();

      var cfDropCheckoutPayment = CFDropCheckoutPaymentBuilder().setSession(session!).setPaymentComponent(paymentComponent).setTheme(theme).build();

      cfPaymentGatewayService.doPayment(cfDropCheckoutPayment);
    } on CFException catch (e) {
      print(e.message);
    }

  }

}

You can check our demo app located here.

Updated 9 months ago

Drop flow

Initiating the payment

Create a session

📘

Payment Components

Set a Theme

Create a Drop Checkout Payment object

📘

Setup Payment Callback

📘You can now subscribe to Cashfree generated events for analytics

🚧

Sample Code

📘
You can now subscribe to Cashfree generated events for analytics