This flutter plugin lets you seamlessly integrate Zwitch Payment Gateway with your flutter app and start collecting payments.
Pre-Requisites
Payment Token
A payment token represents an order or a purchase. The first step to opening up a payment page on your app is to create a payment_token. A payment_token can be created by referring to the create payment token API. This API should always be called from your server. You will receive a payment_token as a response.
Access Token
The access key is a unique key that you can generate from your Zwitch dashboard.
Android
Change the minSdkVersion in your build.gradle file in the android/app/build.gradle has
minSdkVersion 26
IOS
Minimum supported iOS version 14.0.
Get Started
Installation
This ensures the latest version is always fetched.
flutter pub add open_payment
Import
import 'package:open_payment/open_payment.dart';
Usage
Calling initiate payment function on click of a button.
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: onPaymentClick,
)
onPaymentClick function
Future<void> onPaymentClick() async {
OpenPaymentPayload openPaymentPayload =
OpenPaymentPayload(
accessToken: "your-access-token",
paymentToken: "payment-token",
environment: PaymentEnvironment.live,
//PaymentEnvironment.sandbox
logoUrl: "your-logo-url",
mainColor: "#83025c",
errorColor: "#ff0000"
);
await OpenPayment.initiatePayment(
openPaymentPayload: openPaymentPayload,
onTransactionComplete: (TransactionDetails
transactionDetails) {
// Handle transaction result
}
To see the whole implementation check example.
Initialize Open Payment Payload
You need to create a payload with the following parameters:
| Parameter | Description |
|---|---|
| accessToken(Mandat ory) | The access key is a unique key that you can generate from your Zwitch dashboard. Throws an exception in case of an empty string |
| paymentToken(Mandatory) | To create the token using the Create Payment Token API. Throws an exception in case of an empty string |
| environment(Mandatory) | Following ENUM can be passed to this method.PaymentEnvironment.live and PaymentEnvironment.sandbox |
| logoUrl | Image URL for setting logo. |
| mainColor | The main color of the Layer will be changed to this. Example: #f8c5c5 |
| errorColor | The error color (icons/ error lines/error messages) of Layer will be changed to this. Example: #83025c |
onTransaction Complete implementation
This is called whenever a transaction is completed. Along with TransactionDetails passed as a parameter. TransactionDetails.status may either be captured, failed, pending, or cancelled.
Note
If onTransactionComplete is invoked it doesn't means that payment is successful. It may fail but transaction is completed is the only purpose.
onTransactionComplete: (TransactionDetails
transactionDetails) {
// Handle transaction result
}
onError implementation
This is called whenever there is an integration error.
onError: (String error) {
// Handle integration error
}
🛠️ Info.plist Configuration
To support UPI and other payment apps, add the following entry to your app's Info.plist:
<key>LSApplicationQueriesSchemes</key>
<array>
<string>gpay</string>
<string>paytmmp</string>
<string>phonepe</string>
<string>bhim</string>
<string>amazonpay</string>
<string>payzapp</string>
<string>icici</string>
<string>axisbank</string>
<string>sbi</string>
<string>kotak</string>
<string>federal</string>
<string>yesbank</string>
<string>idfcbank</string>
<string>indus</string>
<string>pnb</string>
<string>ikwik</string>
<string>axispay</string>
<string>idfcup</string>
<string>kotak811</string>
<string>cred</string>
</array>