Streamlining Payments in Your Flutter App with PhonePe Payment Gateway

Introduction

In the ever-evolving landscape of mobile apps, creating a seamless payment experience is paramount. With Flutter gaining momentum in the development world, integrating robust payment gateways is more crucial than ever. Enter phone_pe_pg, a powerful plugin designed exclusively for integrating PhonePe Payment Gateway in your Flutter apps. In this guide, we’ll delve into the details of integrating PhonePe Payment Gateway into your app using its two distinct methods: PhonePe UPI (Custom Checkout) and PhonePe Standard Checkout.

Introducing phone_pe_pg: Elevating Your Payment Game

phone_pe_pg | Flutter Package

I’m excited to introduce phone_pe_pg, the all-in-one solution for integrating PhonePe’s payment capabilities into your Flutter apps. Whether you’re building an e-commerce platform or a service that relies on quick, secure transactions, phone_pe_pg has you covered.

Setup

To start, ensure you have the correct version and package name:

dependencies:
 phone_pe_pg: ^0.0.2

Next, create an instance of PhonePe_PG:

import ‘package:phone_pe_pg/phone_pe_pg.dart’;
PhonePePg phonePePg = PhonePePg(
 isUAT: true, // true for UAT environment, false for production
 saltKey: 'your_salt_key',
 saltIndex: 'your_salt_index',
);

For Both the types of transaction (UPI & Standard Checkout) you need an object of PaymentRequest

The `PaymentRequest` class is just a data model and has multiple properties which are as follows:

* `merchantId`: This is the merchant id provided by PhonePe. You can get it from [here](https://www.phonepe.com/business-solutions/payment-gateway/).

* `merchantTransactionId`: This is the transaction id generated by you. It should be unique for each transaction.

* `merchantUserId`: This is the user id of the user who is making the payment. It should be unique for each user.

* `amount`: This is the amount of the transaction. (PhonePe Accept the amount in paisa but you have the enter the amount in INR since I have already converted it to paisa in the package)

* `redirectUrl`: This is the url to which the user will be redirected after the transaction is completed. You can use this to show the user the status of the transaction. (NOTE: This is only used in Standard Checkout / Pay Page payment method)

* `redirectMode: This is the method used to redirect the user to the `redirectUrl`. It can be either `POST` or `GET`. (NOTE: This is only used in Standard Checkout / Pay Page payment method)

* `callbackUrl`: This is the url to which the PhonePe will send the transaction status. You can use this to update the transaction status in your database.

* `deviceContext`: This is the device context of the user. It is used to identify the user’s OS and Callback Scheme for iOS. You can use the `DeviceContext` class to create the device context. (NOTE: This is only used in UPI Intent)_ *You can use `DeviceContext.getDefaultDeviceContext({String? merchantCallBackScheme})` to get the default device context based on the current OS and You can pass the `merchantCallBackScheme` for iOS.*

* `mobileNumber`: This is the mobile number of the user.

* `paymentInstrument`: This is basically the payment type, where payment instrument is actually a abstract class. To set the `paymentInstrument`, you can use any sub class of `PaymentInstrument` class.

Current Sub Classes of `PaymentInstrument` class are:

CardPaymentInstrument // For Card Payment
    NetBankingPaymentInstrument // For Net Banking Payment
    PayPagePaymentInstrument // For Standard Checkout / Pay Page Payment
    SavedCardPaymentInstrument // For Saved Card Payment
    TokenPaymentInstrument // For Token Payment
    UpiCollectPaymentInstrument // For UPI Collect Payment (Sends the payment request to the givem UPI Id)
    UpiIntentPaymentInstrument // For UPI Intent Payment
    UpiQrPaymentInstrument // For UPI QR Payment

Each of the above payment instrument take input based on the payment type, such as card, saved card & token payment instruments will take card details and other required details, on the other hand `PayPagePaymentInstrument` does not take any input.

You can further check the details of each payment instrument in the API Documentation.

UPI Transactions (Custom Checkout)

Uses SDKLess integration from PhonePe

Android: https://developer.phonepe.com/v1/docs/android-pg-sdkless-integration

iOS: https://developer.phonepe.com/v1/docs/ios-pg-sdkless-integration

1. Get the list of UPI apps available:

List<UpiAppInfo> upiApps = await PhonePePg.getUpiApps();

2. Create a `PaymentRequest` for UPI:

PaymentRequest paymentRequest = PaymentRequest(
 amount: amount,
 callbackUrl: "https://www.xyx.com",
 deviceContext: DeviceContext.getDefaultDeviceContext(
 merchantCallBackScheme: merchantCallBackScheme,
 ),
 merchantId: ‘MerchantID’, //Provided by phonepe
 merchantTransactionId: ‘Random Transaction Id’,
 merchantUserId: ‘Random User Id’,
 mobileNumber: ‘Mobile Number’,
 paymentInstrument: UpiIntentPaymentInstrument(
 targetApp: Platform.isAndroid
 ? selectedUPIApp.packageName!
 : selectedUPIApp.iOSAppName!,
 //TargetApp is the package name of the UPI App you want to use for  payment from for Android and iOS App Name of the app you want to use for payment for iOS 
 ),
);

3. Start the UPI transaction and handle the result:

final result = await phonePePg.startUpiTransaction(paymentRequest);
// Use result to check transaction status (SUCCESS, FAILURE, PENDING)

Standard Checkout (Uses PhonePe’s PayPage instrument)

1. Create a `PaymentRequest` for Standard Checkout:

PaymentRequest paymentRequest = PaymentRequest(
 amount: amount,
 callbackUrl: "https://www.xyx.com",
 deviceContext: DeviceContext.getDefaultDeviceContext(
 merchantCallBackScheme: merchantCallBackScheme,
 ),
 merchantId: ‘MerchantID’,
 merchantTransactionId: ‘Random Transaction Id’,
 merchantUserId: ‘Random User Id’,
 mobileNumber: ‘Mobile Number’,
 paymentInstrument: PayPagePaymentInstrument(),
 redirectUrl: ‘Your Redirect URL’,
 redirectMode: ‘POST’, // or ‘GET’
);

2. Initiate the Standard Checkout:

Navigator.push(
 context,
   MaterialPageRoute(
     builder: (context) => phonePePg.startPayPageTransaction(
       paymentRequest: paymentRequest,
       onPaymentComplete: (paymentStatusResponse, error) {
       // Handle payment status and error
       },
     ),
   ),
);

Note: I haven’t tested out other payment instruments such as UPI Collect, UPI QR, Card, since they are part of custom checkout, if anyone does test them out, please let me know if you find any issue, I’ll be happy to update the package for the same & UPI Transaction is not working as expected in iOS, please wait for update for the same

Support

Feel free to raise any issues on github, or even if you want you can join me on discord and we can improve the plugin together 🤝

Conclusion

phone_pe_pg is the ultimate solution for integrating PhonePe’s payment features into your Flutter app. Whether you’re implementing UPI transactions or Standard Checkout, this plugin offers seamless integration and a secure payment environment.

For more detailed insights and examples, refer to the phone_pe_pg documentation