Jio Payment SDK – Flutter Example #

This example demonstrates how to integrate the Jio Payment SDK into your Flutter application to accept online payments.

📦 Installation #

Add the dependency in your pubspec.yaml:

dependencies:
  jio_payment_sdk: ^<latest_version>

⚡ Usage

1. Initialization

To initialize the Jio Payment SDK, you need to call JioPaymentSdk.initializeJioPayments() with the required configuration.

JioPaymentSdk.initializeJioPayments(
  context,
  callback: this, // PaymentCallback implementation
  amount: widget.price.toDouble(),
  env: JioPaymentEnv.uat, // Change to JioPaymentEnv.prod in production
  merchantId: 'JP2000000000031',
  agregatorId: "",
  secretKey: "abc",
  email: 'test@example.com',
  userName: 'Test User',
  merchantName: 'Test Store',
  merchantImage: "asset/Ajio logo.png",
  merchantTrId: merchantTxnNo(), // Unique transaction ID
  isAssetMerchantImage: true,
  orderSummary: OrderSummary(
    title: "Order Summary",
    items: orderDetailList,
  ),
  theme: CustomTheme(
    primaryColor: const Color.fromRGBO(227, 155, 43, 1),
    secondaryColor: Colors.black87,
  ),
  paymentMethod: PaymentMethod.netBanking,
  allowedPaymentTypes: ["CARD", "NB", "UPI"],
  timeOut: 1000,
);

2. Callback Handling

Your widget’s state should implement the PaymentCallback interface to handle payment results.

@override
void onPaymentCompletedResponse(PaymentResult result) {
  setState(() => _isPaying = false);

  if (result.success) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text("Payment Successful 🎉"),
        backgroundColor: Colors.green,
      ),
    );
    Future.delayed(const Duration(seconds: 2), () {
      Navigator.pop(context);
    });
  } else {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text("Payment Failed ❌"),
        backgroundColor: Colors.red,
      ),
    );
    _showFailureDialog();
  }
}

3. Setup Options

Parameter Description amount Amount to be charged (double) env Environment (JioPaymentEnv.uat or JioPaymentEnv.prod) merchantId Provided by JioPay secretKey Secret key for authentication merchantTrId Unique transaction ID orderSummary Details of products in the order theme Customize payment UI colors allowedPaymentTypes List of allowed payment modes (CARD, NB, UPI, etc.) timeOut Timeout in seconds for transaction

4. Open Checkout

In this example, the checkout is triggered in initState() so the payment flow starts as soon as the screen opens.

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    _startPayment();
  });
}

📌 Notes

Test in UAT first before going live.

Always use unique transaction IDs for each payment.

Ensure Android and iOS configurations are set up as per Jio Payment SDK’s official documentation.

🖼 Example UI Flow

Open PlaceOrderScreen(price: 500)

SDK initializes with provided parameters

Jio Payment Gateway UI opens

User completes or cancels payment

Result is handled in onPaymentCompletedResponse

📄 License

MIT License