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
    };
}

Recurring 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"

NB Recucrring Payment

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>);

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" />