Flutter Custom Browser SDK

This document describes how to integrate Custom Browser SDK with Flutter.

Features

OTP assist: This feature helps you automatically read OTP messages on bank pages to ease the payment experience. Bank Page Optimizations: PayU optimizes bank pages for a good payment experience.

Compatibility

Android

Min SDK Version: 21
Compile SDK Version: 31
Kotlin 1.6.10

iOS

iOS version 11

SDK Integration

To integrate PayU CustomBrowser with flutter SDK, perform the following steps:

Step 1: Include the SDK in your app

The CustomBrowser SDK for Flutter is offered through Fluter Pub.dev

To add the SDK plugin use the following dependency in your app: $ flutter pub add payubiz_cb_flutter:

import 'package:payubiz_cb_flutter/payubiz_cb_flutter.dart';
import 'package:payubiz_cb_flutter/PayUCBConstantKeys.dart';

📘
Note: If you are developing for iOS, Install the pod using the following command inside “ios” folder.
$ pod install 

Step 2: SDK initialisation

Declare PayuCustomBrowserFlutter instance and initialise the object.

class _MyAppState extends State<MyApp> implements PayUCustomBrowserProtocol {

  late PayUCustomBrowserFlutter payUCustomBrowserFlutterPlugin;

  @override
  void initState() {
    super.initState();
    payUCustomBrowserFlutterPlugin = PayUCustomBrowserFlutter(this);
  }
}

🚧
Keep in mind
If you are developing for iOS, ensure that your minimum deployment target is iOS 11.

Step 3: Callback/ Protocol implementation

Implement protocol at class level and override it’s methods to get hash generation and transaction callbacks.

class _MyAppState extends State<MyApp> implements PayUCustomBrowserProtocol

Implement the following methods in your class to get callback.

@override
onPayuCBResponse(Map? response) {
    String eventType = response[PayUEventType.eventType];
    switch(eventType) {
      case PayUEventType.onPaymentSuccess: {
        String eventResponse = parsePayUResponse(response);
        //handle PayU response
      }
      break;
      case PayUEventType.onPaymentFailure: {
        String eventResponse = parsePayUResponse(response);
        //handle PayU response
      }
      break;

      case PayUEventType.onBackButton: {
        String eventResponse = parsePayUResponse(response);
        //handle PayU response
      }
      break;

      case PayUEventType.onPaymentTerminate: {
          String eventResponse = parsePayUResponse(response);
          //handle PayU response
        }
        break;

      default: {
        //handle unknown events
      }
      break;
    }
}

String parsePayUResponse(Map response){
    var eventResponse = response[PayUEventType.eventResponse];
    return eventResponse != null ? eventResponse.toString() : "";
}

Step 4: Set up Payment Hashes

Hash is required to authenticate the request and to make sure MiTM has not happened while data was travelling over the network. You have to set the hash in hash parameter during creation of payment params. Use the following format to generate the hash:

sha512(key|txnid|amount|productinfo|firstname|email|udf1|udf2|udf3|udf4|udf5||||||SALT)

📘
Note
For TPV transactions, use the following format to generate the hash:
sha512(key|txnid|amount|productinfo|firstname|email|udf1|udf2|udf3|udf4|udf5||||||beneficiarydetail|SALT)
The beneficiarydetail parameter value will be at last or the last value to be appended.{"beneficiaryAccountNumber":,"ifscCode":}

Here is a sample hash logic with sample value of the parameters for your reference:

smsplus|1695662774012|1|Info|Abc|[[email protected]](mailto:[email protected])|udf1|udf2|udf3|udf4|udf5|||||| {"beneficiaryAccountNumber":"1234567890","ifscCode":"IFSC0000024"}|1b1b0

Step 5: Generate the Payment Parameters

Set up the payment parameters for the SDK to initiate a transaction request. Use the following sample code for a quick integration:

  var cbConfig = {
      first_name: < Name>,
      email: <email id>,
      phone: <phone number>,
      url:"https://secure.payu.in/_payment",
      payment_type:<NB/CC/CASH>,
      auto_approve:<true/false>, //pass false if you don't want to auto submit
      auto_select_otp: <true/false>, //pass false if you don't want to auto read the OTP
      merchant_response_timeout: 10,
      post_data: postData // create post data as defined in next block
    }
  
  var payUPaymentParams = {
      key: <Merchant Key>,
      transaction_id: <Transaction ID>,
      amount: <Amount>,
      surl: <SURL>,
      furl: <FURL>,
      product_info: <Product Info>,
      user_credentials: <pass user_credential>,
      cb_config: cbConfig // object from above
    };
}

Parameter	Description	Notes
key `Mandatory`	`String` This parameter must contain your merchant key received from PayU.	Cannot be null or empty
transaction_id `Mandatory`	`String` It should be unique for each transaction.	Cannot be null or empty and should be unique for each transaction. Maximum allowed length is 25 characters. It cannot contain special characters like: -_/
amount `Mandatory`	`String` Total transaction amount.	Cannot be null or empty and should be valid double stringified example: “100.0”
product_info `Mandatory`	`String` Information about product.	Cannot be null or empty
first_name `Mandatory`	`String` Customer’s first name	Cannot be null or empty
email `Mandatory`	`String` Customer’s email id	Cannot be null or empty
phone `Mandatory`	`String` Customer’s phone number.	Should be a valid phone number
User Credential `mandatory`	`String` This is used for the store card feature. PayU will store cards corresponding to passed user credentials and similarly, user credentials will be used to access previously saved cards. Format: `<merchantKey>:<userId>` Here, the UserId is any ID/email/phone number to uniquely identify the user. **	"merchantKey:userId"
ios_surl `Mandatory`	`String` When the transaction gets success, PayU will load this url and pass transaction response. Note: This field is applicable for iOS integration	Should be a valid URL
ios_furl `Mandatory`	`String` When the transaction gets fail, PayU will load this url and pass transaction response. Note: This field is applicable for iOS integration	Should be a valid URL
android_surl `Mandatory`	`String` When the transaction gets success, PayU will load this url and pass transaction response. Note: This field is applicable for Android integration	Should be a valid URL
android_furl `Mandatory`	`String` When the transaction gets fail, PayU will load this url and pass transaction response. When the transaction gets success, PayU will load this url and pass transaction response. Note: This field is applicable for Android integration	Should be a valid URL
environment `Mandatory`	`String` Environment of SDK	"0" for Production and "1" for Test
url `Mandatory`	`String` The post URL
post_data `Mandatory`	`String` call `getPostData` method defined in next block to generate post request
payment_type `Mandatory`	`String` Payment option using which payment is being done. Example: CC, NB, CASH etc.
auto_approve `Mandatory`	`boolean` It will auto submit the OTP without user intervention
merchant_response_timeout `Mandatory`	`integer` If the SDK does not get response from bank it will give control to Merchant app when this timeout will exceed. PayU response will be send back to Merchant.	Should be a valid positive number

Credit / Debit Card

To pay using a credit card or debit card, perform the following steps.

The bankcode and pg should be as below :-

"&pg=" + "CC" +  
"&bankcode=" + "CC"

Set the following credit card parameters:

"&ccnum=" +
PayUTestCredentials.ccnum + //Here you can pass your Card No
"&ccvv=" +
PayUTestCredentials.cvv + //Here you can pass your CVV
"&ccexpyr=" +
PayUTestCredentials.ccexpyr + //Here you can pass your EXPYear 2025
"&ccexpmon=" +
PayUTestCredentials.ccexpmon + //Here you can pass your ExpMonth 05
"&ccname=" +
PayUTestCredentials.ccname ;

Store Credit / Debit card

To Pay using StoredCard, perform the following steps.

Set the StoredCard parameter similar to the following code snippet

"&ccnum=" +
PayUTestCredentials.ccnum + //Here you can pass your Card No
"&ccvv=" +
PayUTestCredentials.cvv + //Here you can pass your CVV
"&ccexpyr=" +
PayUTestCredentials.ccexpyr + //Here you can pass your EXPYear 2025
"&ccexpmon=" +
PayUTestCredentials.ccexpmon + //Here you can pass your ExpMonth 05
"&ccname=" +
PayUTestCredentials.ccname +
"&store_card=" +
PayUTestCredentials.storedCard + // storedCard value should be 1

Card Tokenization with PayU

For cards tokenized with the PayU platform merchant needs to pass the below parameters

"&ccvv=" +
PayUTestCredentials.cvv + // pass the correct CVV.
"&store_card_token=" +
PayUTestCredentials.storeCardToken + // pass the store card token
&storecard_token_type=" +
PayUTestCredentials.storecardTokenType+ // storecardTokenType value should be 0

Third Party-Card Tokenization

For cards tokenized outside the PayU platform merchant needs to pass the below parameters.

"&ccvv=" +
PayUTestCredentials.cvv + //Either pass the correct CVV or omit the parameter completely.
"&ccexpyr=" +
PayUTestCredentials.ccexpyr + //This parameter must contain the network token expiry year.
"&ccexpmon=" +
PayUTestCredentials.ccexpmon + //This parameter must contain the network token expiry month.
"&store_card_token=" +
PayUTestCredentials.storeCardToken + // This must include the Network token generated at your end.
&storecard_token_type=" +
PayUTestCredentials.storecardTokenType+ // storecardTokenType value should be 1
"&additional_info=" +
PayUTestCredentials.addtionalDetails;   // {
    "last4Digits": "<last digit of card>",
    "tavv": "<will be given by tokenisation partner>",
    "trid": "<will be given by tokenisation partner>",
    "tokenRefNo": "<will be given by tokenisation partner>"
  }

SI Payment

PayUPaymentParamKey.si_details: {
      PayUSIParamsKeys.billingAmount: "1.00",
      PayUSIParamsKeys.billingCurrency: "INR",
      PayUSIParamsKeys.billingCycle:
      "DAILY", // YEARLY | MONTHLY | WEEKLY | DAILY | ONCE | ADHOC
      PayUSIParamsKeys.billingInterval: "1",
      PayUSIParamsKeys.paymentEndDate: "2023-12-12", // YYYY-MM-DD
      PayUSIParamsKeys.paymentStartDate: "2022-12-12" // YYYY-MM-DD
    }
PayUSIParamsKeys.is_free_trial: "0", // 1 | 0 (true | false)
PayUSIParamsKeys.si: "1"

Recurring Payments in NetBanking

PayUSIParamsKeys.beneficiarydetail: {
      PayUSIBeneDetailsKeys.beneficiaryAccountNumber:
      PayUTestCredentials.accountNumber,
      PayUSIBeneDetailsKeys.beneficiary_ifsc:
      PayUTestCredentials.accountIFSC,
      PayUSIBeneDetailsKeys.beneficiaryName: 'Name',
      PayUSIBeneDetailsKeys.beneficiaryAccountType:
      "0" // 1 for CURRENT ,0 for Saving
    }

Step 6: Initiate Payment

Initialise and launch the SDK by calling the following code snippet:

payUCustomBrowserFlutterPlugin.openCB(params: <PayU Payment Params>);

Test the Integration and Go-live

Test the integration

After the integration is complete, you must test the integration before you go live and start collecting payment. You can start accepting actual payments from your customers once the test is successful.

You can make test payments using one of the payment methods configured at the Checkout.

🚧
Callout
The UPI in-app and UPI intent flow is not available in the Test mode.

👍
Testing checklist
Things to remember while testing an integration:

To test the integration make sure that you are making a transaction call to the test endpoint.

Use your test key and salt for the transaction requests. See Genearate test key and salt.

Set the value of the environment parameters to 1.

🚧
Test cards only for Test environment
These test cards, UPI, and Wallet credentials must only be used in the sandbox environment. Using these test cards in production environment may cause validation error.

You can make test payments using one of the payment methods configured at the Checkout.

Test credentials for supported payment methods

Following are the payment methods supported in PayU Test mode.

Test Credential for Card

Card Number	Expiry	CVV	OTP
5123456789012346	05/25	123	123456

Test credentials for Net Banking

Use the following credentials to test the Net Banking integration:

user name: payu
password: payu
OTP: 123456

Test VPA for UPI

You can use either of the following VPAs to test your UPI-related integration:

For Testing the UPI Collect flow, Please follow the below steps:-

Once you enter the VPA click on the verify button and proceed to pay.
In NPCI page timer will start, Don't "CLICK" on click text. Please wait on the NPCI page.
The below link opens in the browser Paste the transaction ID at the end of the URL then click on the success/failure simulator page. After that, your app will redirect to your app with the transaction response.

https://pgsim01.payu.in/UPI-test-transaction/confirm/<Txn_id>

For Android

You can add the below metadata under the application tag in the manifest file to test the UPI Collect flow on test env:-

🚧
Ensure to remove the code from the manifest file before going live.

<application>
<meta-data android:name="payu_debug_mode_enabled" android:value="true" /> // set the value to false for production environment
<meta-data android:name="payu_web_service_url" android:value="https://test.payu.in" /> //Comment in case of Production-->
<meta-data android:name="payu_post_url" android:value="https://test.payu.in"/> //Comment in case of Production-->
</appliction>

❗️
Callout
The UPI in-app and UPI intent flow is not available in the Test mode.

Test cards for EMI

You can use the following Debit and Credit cards to test Emi integration.


Kotak DC EMI	1. Card Number: 4706-1378-0509-9594

Expiry: any future date (mm/yy)
CVV: 123
OTP: 111111
Name: Any name
Mobile Number: 9123412345 (mandatory for EMI) | | AXIS DC EMI | 1) Card Number: 4011-5100-0000-0007

Expiry: any future date (mm/yy)
CVV: 123
OTP: 111111
Name: Any name
Mobile Number: 9123412345 (mandatory for EMI) | | HDFC CC EMI | 1. Card Number: 4453-3410-65876437

Expiry: any future date (mm/yy)
CVV: 123
OTP: 111111
Name: Any name
Mobile Number: 9123412345 (mandatory for EMI) | | ICICI CC EMI | 1) Card Number: 4453-3410-65876437

Expiry: any future date (mm/yy)
CVV: 123
OTP: 111111
Name: Any name
Mobile Number: 9123412345 (mandatory for EMI) |

Test wallets

You can use the following wallets and their corresponding credentials to test wallet integration.

Wallet	Mobile Number	OTP
PayTM	7777777777	888888
PhonePe	Use the Phonepe Pre-Prod app for testing purposes as described in the following PhonePe doc. location: https://developer.phonepe.com/v1/docs/setting-up-test-account Download the app and register your mobile number and follow the instructions as described in the above PhonePe docs.	NA
AmazonPay	You can test using your original Amazon account details.

Go-live Checklist

Ensure these steps before you deploy the integration in a live environment.

Collect Live Payments

After testing the integration end-to-end, once you are confident that the integration is working as expected, you can switch to live mode to start accepting payments from your customers.

🚧
Watch Out!
Ensure that you are using the production merchant key and salt generated in the live mode.

Checklist 2: Configure environment() parameter

Set the value of the environment()to 0 in the payment integration code. This enables the integration to accept live payments.

Checklist 4:- Remove/comment meta -data code from manifest file :-

For Android

You must be comment/remove the below metadata code from the manifest file to use the UPI Collect flow on Production env:-

<application>
<meta-data android:name="payu_debug_mode_enabled" android:value="true" /> // set the value to false for production environment
<meta-data android:name="payu_web_service_url" android:value="https://test.payu.in" /> //Comment in case of Production-->
<meta-data android:name="payu_post_url" android:value="https://test.payu.in"/> //Comment in case of Production-->
</appliction>

Checklist 5: Configure verify payment method

Configure the Verify payment method to fetch the payment status. We strongly recommend that you use this as a back up method to handle scenarios where the payment callback is failed due to technical error.

Checklist 6: Configure Webhook

We recommend that you configure Webhook to receive payment responses on your server. For more information, refer to Webhooks.

Sample app

The sample app for Flutter Custom Browser SDK can be found in the following Github location:

https://github.com/payu-intrepos/PayUCustomBrowser-Flutter.git

Updated about 17 hours ago

Features

Compatibility

Android

iOS

SDK Integration

Keep in mind

Note

Test the Integration and Go-live

Callout

Testing checklist

Test cards only for Test environment

Ensure to remove the code from the manifest file before going live.

Callout

Watch Out!

For Android

Sample app

EXAMPLE QUESTIONS