Flutter Checkout SDK

BoxPay Flutter SDK enables swift creation of a payment process within your Flutter application. We offer robust and adaptable UI components ready for immediate use, allowing you to effortlessly accept payments from your shoppers.

To begin integrating with the BoxPay Checkout, the initial step is to register and setup your BoxPay account.

This outlines the typical workflow for integrating a BoxPay Flutter checkout SDK –

• The shopper taps on the Buy/Pay button on the Merchant App.
• The Merchant Server processes the request and initiates a checkout session through the Create Checkout Session API.
• The Merchant Server receives the BoxPay Checkout token in the response and returns it back to Merchant App.
• Merchant App initiates the BoxPay payment flow by invoking Checkout SDK. Please refer to the Flutter Checkout SDK Integration Steps section for more details around it.
• The shopper completes the payment on the BoxPay Payment Sheet.
• After payment, BoxPay calls the result callback method with the payment status.
• Depending on the payment status received, the Merchant App redirects the customer to either the Order Confirmation page, or to the payment failed/canceled page.

Flutter Checkout SDK Integration Steps

Add SDK dependency

Next step is to add the SDK dependency in your pubspec.yaml file to access the SDK classes in your App –

dependencies:
  // ...
 
  // Boxpay Flutter Checkout SDK
  boxpay_checkout_flutter_sdk: ^1.0.15

Add required permissions

Please make sure that required permissions are added in your Apps to ensure seamless working of UPI Intent –

Android App

Following package and intent queries need to be added to AndroidManifest.xml –

<queries>
    <!-- Google Pay specific queries -->
    <package android:name="com.google.android.apps.nbu.paisa.user" />

    <!-- UPI-based payment schemes -->
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="gpay" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="paytmmp" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="phonepe" />
    </intent>
    <intent>
         <action android:name="android.intent.action.VIEW" />
         <data android:scheme="upi" />
    </intent>
</queries>

iOS App

Following scheme queries need to be added to Info.plist –

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>gpay</string>
    <string>tez</string>
    <string>paytmmp</string>
    <string>phonepe</string>
    <string>upi</string>
</array>

Initiate the SDK payment flow

In order to initiate the payment flow, you need to create a checkout session from your server endpoint. Additionally, you need to pass the payment result callback function to get notified when the payment is either successful or cancelled by the user. In case of failures, we prompt user to retry in the BoxPay payment sheet itself.

Finally, you can initiate the payments flow using the SDK classes as shown below –

void initiatePayment() {
    val checkoutToken = // Call your server API that will in-turn call the BoxPay create checkout session api to get the checkout token;

    val shopperToken = ""//From the same api call in payload response shopper_token will be received
    BoxPayCheckout boxPayCheckout = BoxPayCheckout(
          context: context,
          token: tokenFetched,
          onPaymentResult: onPaymentResult,
          shopperToken: shopperToken, 
          configurationOptions: {
            ConfigurationOptions.enableSandboxEnv: true, // for sandbox env, pass its value as true as shown -
            ConfigurationOptions.showUpiQrOnLoad: false, // this is for QR related changes, to show QR as the checkout loads send its value as true as shown
          },
        );

    boxPayCheckout.display();
}


void onPaymentResult(PaymentResultObject status) {
    if (result.status == "Success") {
        // Take further steps after Success of payment
        // ...
        // redirect to success screen
    } else{
        // Handle payment cancellation
    }
}

PaymentResultObject model

Verifying the payment status

Once you get the PaymentResultObject in your callback function, you can verify/handle the status as below:

Getting the payment details using Operation Inquiry endpoint

If you need to get additional details, you can invoke BoxPay Operation Inquiry API from your server side component using the transactionId and operationId (with same value as transactionId) received in PaymentResultObject as you must NOT store the BoxPay API key in the Flutter App.