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
  checkout_flutter_sdk: ^1.0.5

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;

    // sandboxEnabled is by default set to false
    BoxPayCheckout boxPayCheckout = BoxPayCheckout(context: context, token: checkoutToken, onPaymentResult: onPaymentResult, sandboxEnabled: true); 

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