1. Integration Steps

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

  1. Include the SDK in your app
  2. Initialise the SDK
  3. Implement Callback protocol
  4. Set up payment hashes
  5. Generate the payment parameters
  6. Initiate payment

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>,
      cb_config: cbConfig // object from above
    };
}
ParameterDescriptionNotes
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 idCannot be null or empty
phone
Mandatory
String Customer’s phone number.Should be a valid phone number
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

Step 6: Initiate Payment

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

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

Step 7: Configure AndroidManifest.xml

To automatically fill OTP on bank pages, SDK requires the RECEIVE_SMS permission, configure the AndroidManifest.xml by adding receive sms permission as shown below.

<uses-permission android:name="android.permission.RECEIVE_SMS" />