Integration Steps

Integration Guide for connecting to Jio Payment Solutions Limited Payment Gateway using Flutter Mobile SDK

Make sure that the prerequisites are met before initialization

Step 1: Add Flutter SDK to your Project

JPSL Flutter SDK is available directly via pub.dev

Adding latest version of SDK to project dependencies, run the following command in your terminal -

flutter pub add jio_payment_sdk

Importing SDK module in project code -

import 'package:jio_payment_sdk/jio_payment_sdk.dart';

Android Setup:

Adding relevant permissions to AndroidManifest.xml for Android app:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    ...
    <uses-permission android:name="android.permission.INTERNET" />
    ...
</manifest>

Set minSdkVersion to 21 or Higher

    defaultConfig {
      minSdkVersion 21
			...
    }

Optional: Enable Multidex (for large apps) If your app has many dependencies and hits the 64K method limit, you might need to enable

    defaultConfig {
      multiDexEnabled true
			...
    }

implementation 'androidx.multidex:multidex:2.0.1'

Step 2: Calling Checkout Page

To invoke payment page, initializeJioPayments method of object JioPaymentSdk needs to be called with few mandatory parameters and some optional details

Request Parameters

Parameter	Datatype	Description	M/O/C
context	`BuildContext`	Object of class `BuildContext`for the calling class	M
callback	Class Reference	Reference to class with implementation of method `onPaymentCompletedResponse`	M
amount	`Double`	Amount to be charged (double)	M
env	`JioPaymentEnv`	Payment gateway environments. For UAT / Test -`JioPaymentEnv.uat` and for Production / Live - `JioPaymentEnv.prod`)	M
merchantId	`String`	Merchant ID for JPSL PG as shared by Jio Team	M
agregatorId	`String`	Aggregator ID for JPSL PG as shared by Jio Team if applicable else pass empty string (`''`)	M
secretKey	`String`	Secret key for JPSL PG as shared by Jio Team	M
email	`String`	Email ID for the user. Default value - `[email protected]`	M
userName	`String`	User name	M
merchantName	`String`	Name of merchant as shown on the Payment Page	M
merchantImage	`String`	Local Path URL or URL Link to image	M
isAssetMerchantImage	`bool`		M
merchantTrId	`String`	Unique transaction reference	M
orderSummary	`OrderSummary`	Item wise list of order as object of `OrderSummary` with a list of `OrderItem`	O
theme	`CustomTheme`	Theme object with `primaryColor` and `secondaryColor` of type `Color`	O
timeOut	`Int`	Time in seconds before Payment page is closed, by default the payment page has timeout of `1000s`	O
allowedPaymentTypes	`List<String>`	List of payment modes needed at checkout, by default all methods are shown. List of possible values: `CARD` - Credit / Debit cards	`NB` - Netbanking

JioPaymentSdk.initializeJioPayments(
  context,
  callback: this,
  amount: 20.0,
  env: JioPaymentEnv.uat,
  merchantId: 'MID00000000031',
  agregatorId: '',
  secretKey: 'abc',
  email: '[email protected]',
  userName: 'John Doe',
  merchantName: 'Merchant Name',
  merchantImage: 'asset/Merchant logo.png',
  isAssetMerchantImage: true,
  merchantTrId: 'MREF0001001',
  // Optional enhancements
  orderSummary: OrderSummary(
    title: 'Order Summary',
    items: [
      OrderItem(
        name: "Ball",
        image: "",
        isAssetImage: false,
        description: "Round object",
        price: 5.00,
        quantity: 1,
      ),OrderItem(
        name: "Bat",
        image: "",
        isAssetImage: false,
        description: "Stick",
        price: 15.00,
        quantity: 1,
      ),
    ], 
  ),
  theme: CustomTheme(
    primaryColor: const Color.fromARGB(255, 19, 15, 215),
    secondaryColor: const Color.fromARGB(221, 242, 9, 32),
  ),
  allowedPaymentTypes: ['CARD', 'NB', 'UPI_QR', 'UPI_INTENT', 'UPI_VPA'],
  timeOut: 300,
);

Step 3: Handing Payment Response

Function to accept the payment response post closure of Payment page. The JioPaymentSDK posts the payment response as a object of PaymentResult to onPaymentCompletedResponse function implemented as method of interface PaymentCallback

`PaymentResult` parameters

parameter	Datatype	Description
success	`bool`	Indicates the status of transaction. Possible values - `true` indicating success or `false` indicating failure
transactionId	`String`	Transaction ID as passed in the request
jsonData	`Object`	Object of transaction details. Refer to Callbacks for structure of `jsonData`

class SampleClass extends StatefulWidget implements PaymentCallback {
  ...
  @override
  void onPaymentCompletedResponse(PaymentResult result) {
    if (result.success) {
      //Handle for success
    } else {
      //Handle for failure
    }
  }
  ...
}

Updated about 1 month ago