3. 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.

12001200

Drop Checkout

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

The order_token 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).setOrderToken(Utils.orderToken).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.

33443344

Theme options

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);
}

🚧

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 orderToken = "mAyIMOBjkB1ay0LcBm7K";
  CFEnvironment environment = CFEnvironment.SANDBOX;

  CFSession? createSession() {
    try {
      var session = CFSessionBuilder().setEnvironment(environment).setOrderId(Utils.orderId).setOrderToken(Utils.orderToken).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.