Flutter with Node Backend
Integrate hyper SDK to your Flutter App using hyperswitch-node
Use this guide to integrate hyper
SDK to your Flutter app.
Before following these steps, please configure your payment methods here.
Requirements
Android 5.0 (API level 21) and above
Gradle 8.8+
iOS 13.0 and above
CocoaPods
npm
1. Setup the server
Follow the Server Setup section.
2. Build checkout page on the client
2.1 Install the flutter_hyperswitch
library
flutter_hyperswitch
libraryAdd flutter_hyperswitch
to your pubspec.yaml
file
Run the following command to fetch and install the dependencies.
To apply plugins using Flutter, run the following command:
This command configures the necessary Flutter plugins for your project using the flutter_hyperswitch
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 Initialise the Hyperswitch SDK
Initialise Hyper
onto your app with your publishable key with the Hyper
constructor. To get a PublishableKey please find it here.
When utilising 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.
3.3 Initialize your Payment Session
Initialize a Payment Session by passing the clientSecret to the initPaymentSession
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, it invokes presentPaymentSheet
and handles payment results.
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 Hyperswitch 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.
Next step:
Last updated
Was this helpful?