Flutter with Node Backend

Integrate Hyper SDK to your Flutter App using Pesaswap-node

Use this guide to integrate the hyper SDK to your Flutter app.

Before following these steps, please configure your payment methods.

Requirements

Android 5.0 (API level 21) and above
Android Gradle Plugin 8.5+
Gradle 8.8+
AndroidX
iOS 13.0 and above
CocoaPods
npm

Installation

$ npm install @Pesaswap-/Pesaswap-node

1. Setup the server

Follow the Server Setup section.

2. Build checkout page on the client

2.1 Install the `flutter_Pesaswap` library

Add flutter_Pesaswap to your pubspec.yaml file:

dependencies:
  flutter_Pesaswap: ^version_number

Run the following command to fetch and install the dependencies:

flutter pub get

To apply plugins using Flutter, run the following command:

dart run flutter_Pesaswap:apply_plugins

This command configures the necessary Flutter plugins for your project using the flutter_Pesaswap package. Ensure you have the package installed and configured correctly in your project. If you encounter any issues, check the package documentation for more details.

3. Complete the checkout on the client

3.1 Initialize the Pesaswap SDK

Initialize Hyper onto your app with your publishable key using the Hyper constructor. To get a PublishableKey, please find it here.

import 'package:flutter_Pesaswap/flutter_Pesaswap.dart';

final _hyper = FlutterPesaswap();
_hyper.init(HyperConfig(
  publishableKey: 'YOUR_PUBLISHABLE_KEY', 
  customBackendUrl: 'YOUR_CUSTOM_BACKEND_URL'
));

When utilizing a custom backend or logging system, you can add the customBackendUrl to HyperConfig.

3.2 Create a Payment Intent

Make a network request to the backend endpoint you created in the previous step. The clientSecret returned by your endpoint is used to complete the payment.

Future<String> fetchPaymentParams() async {
  try {
    var response = await http.get(Uri.parse("$API_URL/create-payment"));
    return jsonDecode(response.body)["clientSecret"];
  } catch (error) {
    throw Exception("Create Payment API call failed");
  }
}

3.3 Initialize your Payment Session

Initialize a Payment Session by passing the clientSecret to the initPaymentSession:

final params = PaymentMethodParams(clientSecret: 'YOUR_PAYMENT_INTENT_CLIENT_SECRET');
Session? _sessionId = await _hyper.initPaymentSession(params);

3.4 Present payment sheet and handle response

To display the Payment Sheet, integrate a “Pay Now” button within the checkout page, which, when clicked, invokes the presentPaymentSheet() method and handles the payment response. Consider the below function, which invokes presentPaymentSheet and handles payment results:

Future<void> _presentPaymentSheet() async {
  final presentPaymentSheetResponse = await _hyper.presentPaymentSheet(_sessionId!);
  if (presentPaymentSheetResponse != null) {
    final message = presentPaymentSheetResponse.message;
    setState(() {
      if (message.isLeft) {
        _statusText = "${presentPaymentSheetResponse.status.name}\n${message.left!.name}";
      } else {
        _statusText = "${presentPaymentSheetResponse.status.name}\n${message.right}";
      }
    });
  }
}

Congratulations!

Now that you have integrated the Flutter SDK, you can customize the payment sheet to blend with the rest of your app.

Please retrieve the payment status from the Pesaswap backend to get the terminal status of the payment. Do not rely solely on the status returned by the SDK, as it may not always reflect the final state of the transaction.

About Pesaswap

Payments Guide

Integrations

Foreign Exchange

Account Setup

Use Cases

Explore Pesaswap

Checklist for Production

FAQ

Flutter with Node Backend

Requirements

Installation

1. Setup the server

2. Build checkout page on the client

2.1 Install the `flutter_Pesaswap` library

3. Complete the checkout on the client

3.1 Initialize the Pesaswap SDK

3.2 Create a Payment Intent

3.3 Initialize your Payment Session

3.4 Present payment sheet and handle response

Congratulations!

​Requirements

​Installation

​1. Setup the server

​2. Build checkout page on the client

​2.1 Install the flutter_Pesaswap library

​3. Complete the checkout on the client

​3.1 Initialize the Pesaswap SDK

​3.2 Create a Payment Intent

​3.3 Initialize your Payment Session

​3.4 Present payment sheet and handle response

​Congratulations!

Requirements

Installation

1. Setup the server

2. Build checkout page on the client

2.1 Install the `flutter_Pesaswap` library

3. Complete the checkout on the client

3.1 Initialize the Pesaswap SDK

3.2 Create a Payment Intent

3.3 Initialize your Payment Session

3.4 Present payment sheet and handle response

Congratulations!