Parameters in Checkout
Param name | Description | Datatype | Example | Mandatory / Conditional / Optional |
---|---|---|---|---|
deviceId | This is the identifier for Hash Algorithm that need the used. Supported deviceIdentifiers & algorithms are - WEBSH1(SHA-256 algorithm), WEBSH2(SHA-512 algorithm) |
Alphanumeric | WEBSH2 | Mandatory |
deviceId | This is the identifier for Hash Algorithm that need the used. Supported deviceIdentifiers & algorithms are - ANDROIDSH1(SHA-256 algorithm), ANDROIDSH2(SHA-512 algorithm) |
Alphanumeric | ANDROIDSH2 | Mandatory |
deviceId | This is the identifier for Hash Algorithm that need the used. Supported deviceIdentifiers & algorithms are - iOSSH1(SHA-256 algorithm), iOSSH2(SHA-512 algorithm) |
Alphanumeric | iOSSH2 | Mandatory |
deviceId | This is the identifier for Hash Algorithm that need the used. Supported deviceIdentifiers & algorithms are - ANDROIDSH1 (OR) iOSSH1(SHA-256 algorithm), ANDROIDSH2 (OR) iOSSH2(SHA-512 algorithm). This needs to be dynamic as per platform only. |
Alphanumeric | iOSSH2 | Mandatory |
deviceId | This is the identifier for Hash Algorithm that need the used. Supported deviceIdentifiers & algorithms are - iOSSH1(SHA-256 algorithm), iOSSH2(SHA-512 algorithm) |
Alphanumeric | iOSSH2 | Mandatory |
deviceId | This is the identifier for Hash Algorithm that need the used. Supported deviceIdentifiers & algorithms are - iOSSH1(SHA-256 algorithm), iOSSH2(SHA-512 algorithm) |
Alphanumeric | iOSSH2 | Mandatory |
token | In this Pass the Hash value generated. Hash value will be generated using the below logic by passing the below values in pipe separated to the hashing algorithm passed in deviceId consumerData.merchantId|consumerData.txnId|totalamount|consumerData.accountNo|consumerData.consumerId|consumerData.consumerMobileNo|consumerData.consumerEmailId|consumerData.debitStartDate|consumerData.debitEndDate|consumerData.maxAmount|consumerData.amountType|consumerData.frequency|consumerData.cardNumber|consumerData.expMonth|consumerData.expYear|consumerData.cvvCode|SALT [Salt will be given by ] The last SALT will be the Key given by Hashing Algorithm will be SHA1 or SHA 2 as sent in the request in deviceId Note: Token(HASH) should always be generated at server side only and please make sure that SALT will never be exposed. |
varchar | 0b125f92d967e06135a7179d2d0a3a12e246dc0ae2b00ff018ebabbe747a4b5e47b5eb7583ec29ca0bb668348e1e2cd065d60f323943b9130138efba0cf109a9 | Mandatory |
enableNewWindowFlow | This is a new feature included in checkout it only accept boolean values true OR false . If this feature is enabled, then bank page will open in new window. Once transaction gets completed(success/failed) response will be given in provided response handler function.This flag is most useful for single page applications. This flag should always be false for hybrid/native application integration. |
Boolean | false | optional |
returnUrl | This is return url of merchant where response will be posted, it may be same page where payment request is initiated or another page where merchant need to capture response | Url | https://www.merchanturl.com/response/response.jsp | Mandatory(if enableNewWindowFlow is not enabled) |
redirectOnClose | This is a optional parameter, kindly pass boolean true OR URL value to redirect on the click of close button.If value is true OR valid URL format is passed then it automatically redirect with merchant transaction identifier using POST method. |
boolean OR url | https://www.merchanturl.com/response/response.jsp | Optional |
responseHandler | This is a callback function in JS level which can be used to handle PG response in JS level. | Alphanumeric | handleResponse | Mandatory |
paymentMode | Payment mode (Available options: all, cards, netBanking, UPI, wallets, cashCards, NEFTRTGS, emiBanks, BNPLBanks, cardlessEMIBanks and MVISA(for Scan & Pay) ), If Bank selection is at end then select all , if bank selection at Merchant end then pass appropriate mode respective to selected option |
char | all | Mandatory |
paymentModeOrder | Merchant can define their payment mode order (Available options: cards, netBanking, wallets, cashCards, UPI, MVISA, debitPin, NEFTRTGS, emiBanks, BNPLBanks, cardlessEMIBanks and MVISA(for Scan & Pay) ) |
Array | ["cards", "netBanking", "wallets", "cashCards", "UPI", "MVISA", "debitPin", "emiBanks", "NEFTRTGS"] | Optional |
PRIMARY_COLOR_CODE | This is optional parameter where merchant can provide their primary color code so that provided color code theme gets applied in checkout. If value is blank or not provided then checkout default themes will be applied. | varchar | hexadecimal(e.g. #8e7cc3) or color name | Optional |
SECONDARY_COLOR_CODE | This is optional parameter where merchant can provide their secondary color so that provided color theme gets applied in checkout. If value is blank or not provided then checkout default themes will be applied. | varchar | hexadecimal(e.g. #FFFFFF) or color name | Optional |
BUTTON_COLOR_CODE_1 | This is optional parameter where merchant can provide their button background color so that provided background color gets applied for checkout buttons. If value is blank or not provided then provided primary color is applied as button background. | varchar | hexadecimal(e.g. #674ea7) or color name | Optional |
BUTTON_COLOR_CODE_2 | This is optional parameter where merchant can provide their button text color so that provided text color gets applied for checkout buttons. If value is blank or not provided then secondary color is applied as button text color. | varchar | hexadecimal(e.g. #FFFFFF) or color name | Optional |
checkoutElement | This is the element id where checkout loads on merchant page instead of popup overlay. | Element Selector | #checkoutElement | Optional |
merchantLogoUrl | An absolute URL pointing to a logo image of merchant which will show on checkout popup. | url | https://www.merchanturl.com/images/logo.png | Optional |
merchantMsg | Customize message from merchant which will be shown to customer in checkout page | Alphanumeric | Your information is secured using industry standard encryption | Optional |
disclaimerMsg | Customize disclaimer message from merchant which will be shown to customer in checkout page | Alphanumeric | Disclaimer : For authentication Rs. 2/- will be charged. | Optional |
currency | Transaction currency. Click here to get list of available currency | Alphabets | INR | Mandatory |
merchantId | Merchant identifier to be shared by | Alphanumeric | T1234 | Mandatory |
consumerId | Consumer id assigned by merchant, This is required if enableSI or enableExpressPay or payWithSavedInstrument or enableInstrumentRegistration feature is enabled |
Alphanumeric(maxlength is 20) | c9 | Conditional |
consumerMobileNo | Consumer mobile no. capture by merchant. | Number | 9898121290 | Optional |
consumerEmailId | Consumer email id capture by merchant. | Alphanumeric | test@test.com | Optional |
txnId | Merchant’s unique transaction reference number | Alphanumeric | m1tr2uyyw1(maxlength is 40) | Mandatory |
txnType | Transaction type (Available options: SALE, AUTH, CAPTURE ). In case of AUTH & CAPTURE calls only Cards/UPI modes are supported, so pass appropriate mode in paymentMode . For CAPTURE request our PG’s transaction id need to be passed in PGtxnId parameter. |
Alphanumeric | SALE | Conditional |
txnSubType | Set transaction sub type as DEBIT only if transaction type is SALE else keep this field blank. |
Alphanumeric | DEBIT | Conditional |
items | Product detailsitemId : This is scheme code - its value will be shared by , Every scheme code will be mapped with a account number at end where merchant will receive payoutamount : Amount of each product in `comAmt : Commission amount of each item in `. |
array | [{ "itemId": "first", "amount": "1", "comAmt": "0"}] | Mandatory |
cartDescription | Any additional details can be passed here and same will be provided in response | Only a-zA-Z0-9_/&^$#,!:.-@{}~ and whitespace are allowed |
Test description | Optional |
cardScheme | Only provided cardScheme will be allowed. If key is not passed/blank string/blank array then all card schemes are allowedValid supported schemes are "visa", "master", "maestro", "rupay", "amex", "diners" . |
array | ["visa", "master", "rupay"] | Conditional |
cardSubType | Only provided Credit or Debit cards will be allowed. If key is not passed/blank string then all card types are allowed Valid supported schemes are "credit" or "debit" . |
string | credit | Conditional |
cardNumber | Card no entered by user to perform card transaction. | Number | 4111********1111 | Conditional |
expMonth | Expiry Month entered by user to perform card transaction. | Number | 09 | Conditional |
expYear | Expiry year entered by user to perform card transaction. | Number | 2022 | Conditional |
cvvCode | CVV code entered by user to perform card transaction. | Number | 123 | Conditional |
nameOnCard | Name entered by user to perform card transaction. | Alphanumeric | test user | Conditional |
saveInstrument | To vault instrument set true else set it false | Boolean | false | Conditional |
bankCode | Bank code shared by | Number | 123 | Conditional |
accountNo | Customer account no required for TPV transaction | Number | ******1111 | Conditional |
instrumentId | If payment mode is cards or UPI then use instrument token of registered instrument shared by |
Number | 1234 | Conditional |
Integration
You can integrate Checkout in as little as client-side code. As we release new Checkout features, we’ll automatically roll them out to your existing Checkout integration, so that you will always be using our latest technology without needing to change a thing.
Note:
Having Meta-Viewport tag and jQuery library is recommended before integrating checkout. If you already having a jQuery in your project then there is no need to include our jQuery.
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1" />
jQuery library URL
<script src="https://www.paynimo.com/paynimocheckout/client/lib/jquery.min.js" type="text/javascript"></script>
- Include the following line of code before
</body>
tag in your HTML.Checkout Link <script type="text/javascript" src="https://www.paynimo.com/paynimocheckout/server/lib/checkout.js"></script>
- Initialize Checkout on click of pay button and your HTML code is looks as below, EDIT & TRY THIS CODE
<!doctype html> <html> <head> <title>Checkout Demo</title> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1" /> <script src="https://www.paynimo.com/paynimocheckout/client/lib/jquery.min.js" type="text/javascript"></script> </head> <body> <button id="btnSubmit">Proceed to Pay</button> <script type="text/javascript" src="https://www.paynimo.com/paynimocheckout/server/lib/checkout.js"></script> <script type="text/javascript"> $(document).ready(function() { function handleResponse(res) { if (typeof res != "undefined" && typeof res.paymentMethod != "undefined" && typeof res.paymentMethod.paymentTransaction != "undefined" && typeof res.paymentMethod.paymentTransaction.statusCode != "undefined" && res.paymentMethod.paymentTransaction.statusCode == "0300") { // success block } else if (typeof res != "undefined" && typeof res.paymentMethod != "undefined" && typeof res.paymentMethod.paymentTransaction != "undefined" && typeof res.paymentMethod.paymentTransaction.statusCode != "undefined" && res.paymentMethod.paymentTransaction.statusCode == "0398") { // initiated block } else { // error block } }; $(document).off("click", "#btnSubmit").on("click", "#btnSubmit", function(e) { e.preventDefault(); var reqJson = { "features": { "enableAbortResponse": true, "enableExpressPay": true, "enableInstrumentDeRegistration" : true, "enableMerTxnDetails": true }, "consumerData": { "deviceId": "WEBSH2", //possible values "
WEBSH1
" or "WEBSH2
" "token": "e04be9ed85f134a8ca30f609dca6c1f36e742762590daf6ed6edda06275f378a2147f6244ca2295d134beba1e98c6e67140577893b99e6bd34c09d3f2350519c", "returnUrl": "https://pgproxyuat.in.worldline-solutions.com/linuxsimulator/MerchantResponsePage.jsp", //merchant response page URL "responseHandler": handleResponse, "paymentMode": "all", "merchantLogoUrl": "https://www.paynimo.com/CompanyDocs/company-logo-vertical.png", //provided merchant logo will be displayed "merchantId": "L3348", "currency": "INR", "consumerId": "c964634", "txnId": "1708068696283", //Unique merchant transaction ID "items": [{ "itemId": "first", "amount": "1", "comAmt": "0" }], "customStyle": { "PRIMARY_COLOR_CODE": "#45beaa", //merchant primary color code "SECONDARY_COLOR_CODE": "#FFFFFF", //provide merchant's suitable color code "BUTTON_COLOR_CODE_1": "#2d8c8c", //merchant's button background color code "BUTTON_COLOR_CODE_2": "#FFFFFF" //provide merchant's suitable color code for button text } } }; $.pnCheckout(reqJson); if(reqJson.features.enableNewWindowFlow){ pnCheckoutShared.openNewWindow(); } }); }); </script> </body> </html>Live Code Preview
-
We will send response using
post
method inmsg
key on provided returnUrl. You need to capturemsg
key’s value which will be in pipe(|) separated format as mentioned below:txn_status|txn_msg|txn_err_msg|clnt_txn_ref|tpsl_bank_cd|tpsl_txn_id|txn_amt|clnt_rqst_meta|tpsl_txn_time|bal_amt|card_id|alias_name|BankTransactionID|mandate_reg_no|token|hash
Merchant need to take the response and then calculate the hash using the same algorithm used at the time of checkout initialisation and need to pass below formatted response string to the same algorithm to generate a HASH value for Dual verification
txn_status|txn_msg|txn_err_msg|clnt_txn_ref|tpsl_bank_cd|tpsl_txn_id|txn_amt|clnt_rqst_meta|tpsl_txn_time|bal_amt|card_id|alias_name|BankTransactionID|mandate_reg_no|token|SALT (Same key used during sending request)
After calculating HASH value same HASH need to match with HASH value which is provided from in response for dual verification.
If HASH in response and HASH created at your end matched then respective Success/Failure acknowledgement need be shown to end customer and update status of transaction in merchant’s DB as well. If HASH is not getting matched, failure acknowledgement screen with technical error can be displayed.
txn_status
value will be0300
in case of Success,0398
in case of Initiated,0399
in case of failure,0396
in case of Awaited and0392
in case of Aborted. On the basis of response code you can mark your transaction eitherSuccess
/Initiated
/Failed
/Awaited
/Aborted
.
Integration
You can integrate Checkout in as little as client-side code. As we release new Checkout features, we’ll automatically roll them out to your existing Checkout integration, so that you will always be using our latest technology without needing to change a thing.
Minimum Required SDK | API 21(Lollipop Version) |
- Download weipl_checkout aar file into module’s libs folder:
weipl_checkout.aar
- Include below lines in dependencies section of module’s build.gradle file:
implementation "androidx.appcompat:appcompat:1.4.2" implementation "androidx.constraintlayout:constraintlayout:2.1.2" implementation "com.android.volley:volley:1.2.1" implementation 'com.google.android.gms:play-services-auth:21.0.0' implementation 'com.google.android.gms:play-services-auth-api-phone:18.0.2' implementation files("libs/weipl_checkout.aar")
If your app is already compliant with Google Play's policy for reading OTPs from SMS or wants to go live with it and you want to give Auto Read OTP assisted journey with permission based flow then below permissions needs to be added inAndroidManifest.xml
file<uses-permission android:name="android.permission.RECEIVE_SMS" />
To work Auto Read OTP during transaction, below feature must be added inAndroidManifest.xml
<uses-feature android:name="android.hardware.telephony" android:required="false" />
NOTE: This functionality is available only if the merchant is already compliant with Google Play's policy for reading OTPs from SMS. If you are not compliant with the permission-based approach, then a consent-based journey will be available in auto-read OTP assisted mode. If you wish to proceed with the permission-based approach, please follow the required steps outlined in this link. - Import WLCheckoutActivity as follows to invoke Checkout
import com.weipl.checkout.WLCheckoutActivity;
- You have to call preloadData() method and set listener in calling activity’s
onCreate()
method so that SDKs dependecy files will be preloaded & available at the time of checkout.WLCheckoutActivity.setPaymentResponseListener(this); WLCheckoutActivity.preloadData(applicationContext);
- Initialize Checkout on click of pay button and your initialisation will be as below,
JSONObject reqJson = new JSONObject(); JSONObject jsonFeatures = new JSONObject(); jsonFeatures.put("enableExpressPay", true); jsonFeatures.put("enableInstrumentDeRegistration", true); jsonFeatures.put("enableAbortResponse", true); jsonFeatures.put("enableMerTxnDetails", true); reqJson.put("features", jsonFeatures); JSONObject jsonConsumerData = new JSONObject(); jsonConsumerData.put("deviceId", "AndroidSH2"); //possible values "AndroidSH1" or "AndroidSH2" jsonConsumerData.put("token", "e04be9ed85f134a8ca30f609dca6c1f36e742762590daf6ed6edda06275f378a2147f6244ca2295d134beba1e98c6e67140577893b99e6bd34c09d3f2350519c"); jsonConsumerData.put("paymentMode", "all"); jsonConsumerData.put("merchantLogoUrl","https://www.paynimo.com/CompanyDocs/company-logo-vertical.png"); jsonConsumerData.put("merchantId","L3348"); jsonConsumerData.put("currency","INR"); jsonConsumerData.put("consumerId","c964634"); jsonConsumerData.put("txnId", "1708068696283"); JSONArray jArrayItems = new JSONArray(); JSONObject jsonItem1 = new JSONObject(); jsonItem1.put("itemId", "first"); jsonItem1.put("amount", "1"); jsonItem1.put("comAmt", "0"); jArrayItems.put(jsonItem1); jsonConsumerData.put("items", jArrayItems); JSONObject jsonCustomStyle = new JSONObject(); jsonCustomStyle.put("PRIMARY_COLOR_CODE", "#45beaa"); jsonCustomStyle.put("SECONDARY_COLOR_CODE", "#ffffff"); jsonCustomStyle.put("BUTTON_COLOR_CODE_1", "#2d8c8c"); jsonCustomStyle.put("BUTTON_COLOR_CODE_2", "#ffffff"); jsonConsumerData.put("customStyle",jsonCustomStyle); reqJson.put("consumerData", jsonConsumerData); WLCheckoutActivity.open(currentContext, reqJson); //currentContext will be current activity context
- Getting response Back from WLCheckoutActivity in merchant's Activity
@override public void wlCheckoutPaymentResponse(JSONObject response) { Log.d("In wlCheckoutPaymentResponse()", response.toString()); }
Sample response format after transaction completion will be:
{ "msg": "txn_status|txn_msg|txn_err_msg|clnt_txn_ref|tpsl_bank_cd|tpsl_txn_id|txn_amt|clnt_rqst_meta|tpsl_txn_time|bal_amt|card_id|alias_name|BankTransactionID|mandate_reg_no|token|hash", "merchant_code": "L3348" }
Where merchant need to capture
msg
from above given sample response and then calculate the hash using the same algorithm used at the time of checkout initialisation and need to pass below formatted response string to the same algorithm to generate a HASH value for Dual verificationtxn_status|txn_msg|txn_err_msg|clnt_txn_ref|tpsl_bank_cd|tpsl_txn_id|txn_amt|clnt_rqst_meta|tpsl_txn_time|bal_amt|card_id|alias_name|BankTransactionID|mandate_reg_no|token|SALT (Same key used during sending request)
After calculating HASH value same HASH need to match with HASH value which is provided from in response for dual verification.
If HASH in response and HASH created at your end matched then respective Success/Failure acknowledgement need be shown to end customer and update status of transaction in merchant’s DB as well. If HASH is not getting matched, failure acknowledgement screen with technical error can be displayed.
txn_status
value will be0300
in case of Success,0398
in case of Initiated,0399
in case of failure,0396
in case of Awaited and0392
in case of Aborted. On the basis of response code you can mark your transaction eitherSuccess
/Initiated
/Failed
/Awaited
/Aborted
.@override public void wlCheckoutPaymentError(JSONObject response) { Log.d("In wlCheckoutPaymentError()", response.toString()); }
In response, you will get
error_code
anderror_desc
which you can display to user. We will provide response in this method only in case of non payment errors. e.g.:{ "error_code": "0399", "error_desc": "Due to some technical reason we are unable to process your request, please try again later!" }
Integration
You can integrate Checkout in as little as client-side code. As we release new Checkout features, we’ll automatically roll them out to your existing Checkout integration, so that you will always be using our latest technology without needing to change a thing.
- import checkout SDK class
import weipl_checkout
- Declare WLCheckout Class variable:
var WLCheckout : WLCheckoutViewController?
- You have to call preloadData() inside viewDidLoad() method so that SDKs dependecy files will be preloaded & available at the time of checkout.
NotificationCenter.default.addObserver(self, selector: #selector(self.wlCheckoutPaymentResponse(result:)), name: Notification.Name("wlCheckoutPaymentResponse"), object: nil) NotificationCenter.default.addObserver(self, selector: #selector(self.wlCheckoutPaymentError(result:)), name: Notification.Name("wlCheckoutPaymentError"), object: nil) WLCheckout = WLCheckoutViewController() WLCheckout?.preloadData()
- Initialize Checkout on click of pay button and your initialisation will be as below,
let reqJson : [String:Any] = [ "features" : [ "enableAbortResponse": true, "enableExpressPay": true, "enableInstrumentDeRegistration": true, "enableMerTxnDetails": true ], "consumerData": [ "deviceId": "iOSSH2", //possible values "
iOSSH1
" or "iOSSH2
" "token": "e04be9ed85f134a8ca30f609dca6c1f36e742762590daf6ed6edda06275f378a2147f6244ca2295d134beba1e98c6e67140577893b99e6bd34c09d3f2350519c", "paymentMode": "all", "merchantLogoUrl": "https://www.paynimo.com/CompanyDocs/company-logo-vertical.png", //provided merchant logo will be displayed "merchantId": "L3348", "currency": "INR", "consumerId": "c964634", "txnId": "1708068696283", //Unique merchant transaction ID "items": [[ "itemId": "first", "amount": "1", "comAmt": "0" ]], "customStyle": [ "PRIMARY_COLOR_CODE": "#45beaa", // RGB and Hex and RGB supported parameter "SECONDARY_COLOR_CODE": "#ffffff", "BUTTON_COLOR_CODE_1": "#2d8c8c", "BUTTON_COLOR_CODE_2": "#ffffff", ] ] ] do { let jSONObject = String(data: try JSONSerialization.data(withJSONObject: reqJson, options: .prettyPrinted), encoding: String.Encoding(rawValue: NSUTF8StringEncoding)) WLCheckout!.open(requestObj: jSONObject!) DispatchQueue.main.async{ self.present(self.WLCheckout!, animated: true, completion: nil) } } catch _ as NSError { } - Getting response Back from WLCheckoutViewController in merchant's ViewController
@objc func wlCheckoutPaymentResponse(result: Notification) { print("\(result.object!)") }
Sample response format after transaction completion will be:
{ "msg": "txn_status|txn_msg|txn_err_msg|clnt_txn_ref|tpsl_bank_cd|tpsl_txn_id|txn_amt|clnt_rqst_meta|tpsl_txn_time|bal_amt|card_id|alias_name|BankTransactionID|mandate_reg_no|token|hash", "merchant_code": "L3348" }
Where merchant need to capture
msg
from above given sample response and then calculate the hash using the same algorithm used at the time of checkout initialisation and need to pass below formatted response string to the same algorithm to generate a HASH value for Dual verificationtxn_status|txn_msg|txn_err_msg|clnt_txn_ref|tpsl_bank_cd|tpsl_txn_id|txn_amt|clnt_rqst_meta|tpsl_txn_time|bal_amt|card_id|alias_name|BankTransactionID|mandate_reg_no|token|SALT (Same key used during sending request)
After calculating HASH value same HASH need to match with HASH value which is provided from in response for dual verification.
If HASH in response and HASH created at your end matched then respective Success/Failure acknowledgement need be shown to end customer and update status of transaction in merchant’s DB as well. If HASH is not getting matched, failure acknowledgement screen with technical error can be displayed.
txn_status
value will be0300
in case of Success,0398
in case of Initiated,0399
in case of failure,0396
in case of Awaited and0392
in case of Aborted. On the basis of response code you can mark your transaction eitherSuccess
/Initiated
/Failed
/Awaited
/Aborted
.@objc func wlCheckoutPaymentError(result: Notification) { print("\(result.object!)") }
In response, you will get
error_code
anderror_desc
which you can display to user. We will provide response in this method only in case of non payment errors.{ "error_code": "0399", "error_desc": "Due to some technical reason we are unable to process your request, please try again later!" }
Integration
You can integrate Checkout in as little as client-side code. As we release new Checkout features, we’ll automatically roll them out to your existing Checkout integration, so that you will always be using our latest technology without needing to change a thing.
This plugin is available on Pub, for installation
& sample code
please refer pub link
- Import package
import 'package:weipl_checkout_flutter/weipl_checkout_flutter.dart';
- Create Flutter Plugin instance:
WeiplCheckoutFlutter wlCheckoutFlutter = WeiplCheckoutFlutter();
- Attach event listeners
The plugin uses event-based communication, and emits events when payment fails or succeeds. The event names are exposed via the constants wlResponse from plugin class. Use the on(String event, Function handler) method on the WeiplCheckoutFlutter instance to attach event listeners.
wlCheckoutFlutter.on(WeiplCheckoutFlutter.wlResponse, handleResponse);
- Initialize Checkout on click of pay button and your initialisation will be as below,
var options = { "features": { "enableAbortResponse": true, "enableExpressPay": true, "enableInstrumentDeRegistration": true, "enableMerTxnDetails": true, }, "consumerData": { "deviceId": "iOSSH2", //supported values "ANDROIDSH1" or "ANDROIDSH2" for Android and supported values "iOSSH1" or "iOSSH2" for iOS "token": "e04be9ed85f134a8ca30f609dca6c1f36e742762590daf6ed6edda06275f378a2147f6244ca2295d134beba1e98c6e67140577893b99e6bd34c09d3f2350519c", "paymentMode": "all", "merchantLogoUrl": "https://www.paynimo.com/CompanyDocs/company-logo-vertical.png", //provided merchant logo will be displayed "merchantId": "L3348", "currency": "INR", "consumerId": "c964634", "txnId": "1708068696283", //Unique merchant transaction ID "items": [ {"itemId": "first", "amount": "1", "comAmt": "0"} ], "customStyle": { "PRIMARY_COLOR_CODE": "#45beaa", //merchant primary color code "SECONDARY_COLOR_CODE": "#FFFFFF", //provide merchant's suitable color code "BUTTON_COLOR_CODE_1": "#2d8c8c", //merchant's button background color code "BUTTON_COLOR_CODE_2": "#FFFFFF" //provide merchant's suitable color code for button text } } }; wlCheckoutFlutter.open(options);
- The handlers would be defined somewhere as to get response of transaction
void handleResponse(Map
response) { // After capturing response perform HASH validation as mentioned in documentation and do rest of the activity to update in your system & show Seccess/Failure/Pending acknowledgement details to end customer depending on response status. } Sample response format after transaction completion will be:
{ "msg": "txn_status|txn_msg|txn_err_msg|clnt_txn_ref|tpsl_bank_cd|tpsl_txn_id|txn_amt|clnt_rqst_meta|tpsl_txn_time|bal_amt|card_id|alias_name|BankTransactionID|mandate_reg_no|token|hash", "merchant_code": "L3348" }
Where merchant need to capture
msg
from above given sample response and then calculate the hash using the same algorithm used at the time of checkout initialisation and need to pass below formatted response string to the same algorithm to generate a HASH value for Dual verificationtxn_status|txn_msg|txn_err_msg|clnt_txn_ref|tpsl_bank_cd|tpsl_txn_id|txn_amt|clnt_rqst_meta|tpsl_txn_time|bal_amt|card_id|alias_name|BankTransactionID|mandate_reg_no|token|SALT (Same key used during sending request)
After calculating HASH value same HASH need to match with HASH value which is provided from in response for dual verification.
If HASH in response and HASH created at your end matched then respective Success/Failure acknowledgement need be shown to end customer and update status of transaction in merchant’s DB as well. If HASH is not getting matched, failure acknowledgement screen with technical error can be displayed.
txn_status
value will be0300
in case of Success,0398
in case of Initiated,0399
in case of failure,0396
in case of Awaited and0392
in case of Aborted. On the basis of response code you can mark your transaction eitherSuccess
/Initiated
/Failed
/Awaited
/Aborted
.In response, you will get
error_code
anderror_desc
which you can display to user. We will provide response in this method only in case of non payment errors.{ "error_code": "0399", "error_desc": "Due to some technical reason we are unable to process your request, please try again later!" }
Integration
You can integrate Checkout in as little as client-side code. As we release new Checkout features, we’ll automatically roll them out to your existing Checkout integration, so that you will always be using our latest technology without needing to change a thing.
This plugin is available on NPM for installation
& sample code
please refer NPM link
- Import
WeiplCheckout
module to your componentimport WeiplCheckout from 'react-native-weipl-checkout';
- Call
WeiplCheckout.open
method with the payment options along with callback functions(e.g., responseCallback & errorCallback). The method return response toresponseCallback
callback function for Success & Failed cases only. In case of any exception response will be provided inerrorCallback
callback function.var options = { "features": { "enableAbortResponse": true, "enableExpressPay": true, "enableInstrumentDeRegistration": true, "enableMerTxnDetails": true, }, "consumerData": { "deviceId": "iOSSH2", //supported values "ANDROIDSH1" or "ANDROIDSH2" for Android and supported values "iOSSH1" or "iOSSH2" for iOS "token": "e04be9ed85f134a8ca30f609dca6c1f36e742762590daf6ed6edda06275f378a2147f6244ca2295d134beba1e98c6e67140577893b99e6bd34c09d3f2350519c", "paymentMode": "all", "merchantLogoUrl": "https://www.paynimo.com/CompanyDocs/company-logo-vertical.png", //provided merchant logo will be displayed "merchantId": "L3348", "currency": "INR", "consumerId": "c964634", "txnId": "1708068696283", //Unique merchant transaction ID "items": [ {"itemId": "first", "amount": "1", "comAmt": "0"} ], "customStyle": { "PRIMARY_COLOR_CODE": "#45beaa", //merchant primary color code "SECONDARY_COLOR_CODE": "#FFFFFF", //provide merchant's suitable color code "BUTTON_COLOR_CODE_1": "#2d8c8c", //merchant's button background color code "BUTTON_COLOR_CODE_2": "#FFFFFF" //provide merchant's suitable color code for button text } } }; WeiplCheckout.open(options, responseCallback, errorCallback);
- Getting response Back in callback methods
function responseCallback(res) { // After capturing response perform HASH validation as mentioned in documentation and do rest of the activity to update in your system & show Seccess/Failure/Pending acknowledgement details to end customer depending on response status. } function errorCallback(res) { // You will get response in this method in case of exceptions only, after capturing response you can handle these case as exceptions. }
Sample response format after transaction completion will be:
{ "msg": "txn_status|txn_msg|txn_err_msg|clnt_txn_ref|tpsl_bank_cd|tpsl_txn_id|txn_amt|clnt_rqst_meta|tpsl_txn_time|bal_amt|card_id|alias_name|BankTransactionID|mandate_reg_no|token|hash", "merchant_code": "L3348" }
Where merchant need to capture
msg
from above given sample response and then calculate the hash using the same algorithm used at the time of checkout initialisation and need to pass below formatted response string to the same algorithm to generate a HASH value for Dual verificationtxn_status|txn_msg|txn_err_msg|clnt_txn_ref|tpsl_bank_cd|tpsl_txn_id|txn_amt|clnt_rqst_meta|tpsl_txn_time|bal_amt|card_id|alias_name|BankTransactionID|mandate_reg_no|token|SALT (Same key used during sending request)
After calculating HASH value same HASH need to match with HASH value which is provided from in response for dual verification.
If HASH in response and HASH created at your end matched then respective Success/Failure acknowledgement need be shown to end customer and update status of transaction in merchant’s DB as well. If HASH is not getting matched, failure acknowledgement screen with technical error can be displayed.
txn_status
value will be0300
in case of Success,0398
in case of Initiated,0399
in case of failure,0396
in case of Awaited and0392
in case of Aborted. On the basis of response code you can mark your transaction eitherSuccess
/Initiated
/Failed
/Awaited
/Aborted
.In case of exceptions, you will get
error_code
anderror_desc
which you can display to user. We will provide response in this method only in case of non payment errors.{ "error_code": "0399", "error_desc": "Due to some technical reason we are unable to process your request, please try again later!" }
Integration
You can integrate Checkout in as little as client-side code. As we release new Checkout features, we’ll automatically roll them out to your existing Checkout integration, so that you will always be using our latest technology without needing to change a thing.
For Usage
, Declaration
and Integration
in details please refer GIT link
- Initialize Checkout on click of pay button and your initialisation will be as below,
var options = { "features": { "enableAbortResponse": true, "enableExpressPay": true, "enableInstrumentDeRegistration": true, "enableMerTxnDetails": true, }, "consumerData": { "deviceId": "iOSSH2", //supported values "ANDROIDSH1" or "ANDROIDSH2" for Android and supported values "iOSSH1" or "iOSSH2" for iOS "token": "e04be9ed85f134a8ca30f609dca6c1f36e742762590daf6ed6edda06275f378a2147f6244ca2295d134beba1e98c6e67140577893b99e6bd34c09d3f2350519c", "paymentMode": "all", "merchantLogoUrl": "https://www.paynimo.com/CompanyDocs/company-logo-vertical.png", //provided merchant logo will be displayed "merchantId": "L3348", "currency": "INR", "consumerId": "c964634", "txnId": "1708068696283", //Unique merchant transaction ID "items": [ {"itemId": "first", "amount": "1", "comAmt": "0"} ], "customStyle": { "PRIMARY_COLOR_CODE": "#45beaa", //merchant primary color code "SECONDARY_COLOR_CODE": "#FFFFFF", //provide merchant's suitable color code "BUTTON_COLOR_CODE_1": "#2d8c8c", //merchant's button background color code "BUTTON_COLOR_CODE_2": "#FFFFFF" //provide merchant's suitable color code for button text } } }; WLCheckout.open(options, paymentCallback, errorCallback);
- The handlers would be defined somewhere as to get response of transaction
var paymentCallback = function(response) { // After capturing response perform HASH validation as mentioned in documentation and do rest of the activity to update in your system & show Seccess/Failure/Pending acknowledgement details to end customer depending on response status. } var errorCallback = function(error) { // You will get response in this method in case of exceptions only, after capturing response you can handle these case as exceptions. }
Sample response format after transaction completion will be:
{ "msg": "txn_status|txn_msg|txn_err_msg|clnt_txn_ref|tpsl_bank_cd|tpsl_txn_id|txn_amt|clnt_rqst_meta|tpsl_txn_time|bal_amt|card_id|alias_name|BankTransactionID|mandate_reg_no|token|hash", "merchant_code": "L3348" }
Where merchant need to capture
msg
from above given sample response and then calculate the hash using the same algorithm used at the time of checkout initialisation and need to pass below formatted response string to the same algorithm to generate a HASH value for Dual verificationtxn_status|txn_msg|txn_err_msg|clnt_txn_ref|tpsl_bank_cd|tpsl_txn_id|txn_amt|clnt_rqst_meta|tpsl_txn_time|bal_amt|card_id|alias_name|BankTransactionID|mandate_reg_no|token|SALT (Same key used during sending request)
After calculating HASH value same HASH need to match with HASH value which is provided from in response for dual verification.
If HASH in response and HASH created at your end matched then respective Success/Failure acknowledgement need be shown to end customer and update status of transaction in merchant’s DB as well. If HASH is not getting matched, failure acknowledgement screen with technical error can be displayed.
txn_status
value will be0300
in case of Success,0398
in case of Initiated,0399
in case of failure,0396
in case of Awaited and0392
in case of Aborted. On the basis of response code you can mark your transaction eitherSuccess
/Initiated
/Failed
/Awaited
/Aborted
.In response, you will get
error_code
anderror_desc
which you can display to user. We will provide response in this method only in case of non payment errors.{ "error_code": "0399", "error_desc": "Due to some technical reason we are unable to process your request, please try again later!" }
Xcode Setup
- Set Minimum Target version : 12.0
- Direct Integration Setup
- Download latest release of weipl_checkout.xcframework.zip & drag .xcframework in "Framework, libraries, and Embedded content" and set "Embed & Sign" option.
- For CocoaPod Setup
- Visit CocoaPod for our SDK installation in your project.
- For Swift Package Manager Setup
- To add weipl_checkout package dependency to your Xcode project, select
File > Swift Packages > Add Package Dependency and enter https://github.com/Worldline-ePayments-India/weipl-checkout-ios.git
. - You can also navigate to your target's General pane, and in the "Frameworks, Libraries, and Embedded Content" section, click the + button, select Add Other, and choose Add Package Dependency.
- To add weipl_checkout package dependency to your Xcode project, select
Permissions
-
For UPI Intent in iOS, the info.plist in iOS should be modified to include
LSApplicationQueriesSchemes
.<key>LSApplicationQueriesSchemes</key> <array> <string>phonepe</string> <string>gpay</string> <string>paytm</string> <string>credpe</string> </array> <key>LSRequiresIPhoneOS</key> <true/> <key>UIBackgroundModes</key> <array> <string>fetch</string> <string>processing</string> </array>
-
For UPI Intent in Android please below code in AndroidManifest file of your application, e.g.
YOUR_APPLICATION_ROOT_FOLDER/android/app/src/main/AndroidManifest.xml
.<queries> <intent> <action android:name="android.intent.action.VIEW" /> <data android:scheme="upi" android:host="pay"/> </intent> </queries>
Add below code in AndroidManifest file of your application to work our SDK with your application, e.g.
YOUR_APPLICATION_ROOT_FOLDER/android/app/src/main/AndroidManifest.xml
:<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<activity android:name="com.weipl.checkout.WLCheckoutActivity" android:exported="true" android:screenOrientation="portrait"/>
If your app is already compliant with Google Play's policy for reading OTPs from SMS or wants to go live with it and you want to give Auto Read OTP assisted journey with permission based flow then below permissions needs to be added inAndroidManifest.xml
file<uses-permission android:name="android.permission.RECEIVE_SMS" />
To work Auto Read OTP during transaction, below feature must be added inAndroidManifest.xml
<uses-feature android:name="android.hardware.telephony" android:required="false" />
NOTE: This functionality is available only if the merchant is already compliant with Google Play's policy for reading OTPs from SMS. If you are not compliant with the permission-based approach, then a consent-based journey will be available in auto-read OTP assisted mode. If you wish to proceed with the permission-based approach, please follow the required steps outlined in this link.
Configuration Options
Note: All features and provided options are needs to be added in existing request options as per your features need.
Option | Description |
---|---|
showPGResponseMsg | It’s true by default, which enables the final success/failure messages of checkout.js. If you want to show your own final response messages then set its value to false . |
showDownloadReceipt | It’s true by default, and shows a download button on response page in checkout overlay for successful transactions. To hide this button in response set its value as false during checkout initialization. |
enableExpressPay | It’s false by default, to enable saved payment options set its value to true |
hideSavedInstruments | It’s false by default, after enabling this feature checkout hides saved payment options even in case of enableExpressPay is enabled. |
separateCardMode | It’s false by default, if this feature is enabled checkout shows two separate payment mode(Credit Card & Debit Card). |
payDetailsAtMerchantEnd | It’s false by default, if bank details/card details/payment details are captured at merchant end then pass this flags value true and provide saved instrument details or captured details for respective payment mode (netBanking , cards , cashCards , emiBanks , NEFTRTGS and wallets ) to checkout.If payment mode is |
payWithSavedInstrument | It’s false by default. To enable this feature set payWithSavedInstrument and payDetailsAtMerchantEnd value to true provide below parameter detailsIf payment mode is |
enableExpressPay | It’s false by default, to enable saved payment options set its value to true |
enableInstrumentDeRegistration | It’s false by default, To enable this feature set enableExpressPay and enableInstrumentDeRegistration value to true
{ "features": { "enableExpressPay": true, "enableInstrumentDeRegistration": true }, "consumerData": { "consumerId": "c964634", //Your consumer identifier } } |
Available parameters and their default values
{ "features": { "showLoader": true, "showPGResponseMsg": true, "enableAbortResponse": true, "showDownloadReceipt": true, "enableNewWindowFlow": false, "payDetailsAtMerchantEnd": false, "payWithSavedInstrument": false, "enableExpressPay": false, "hideSavedInstruments": false, "enableInstrumentDeRegistration": false, "separateCardMode": false }, "consumerData": { "deviceId": "WEBSH2", "token": "", "returnUrl": "", "payOptionsHandler": "", "responseHandler": "", "responseStr": "", "paymentMode": "all", "paymentModeOrder": [], "checkoutElement": "", "merchantLogoUrl": "", "merchantMsg": "", "disclaimerMsg": "", "siLabelText": "", "merchantId": "", "consumerId": "", "consumerMobileNo": "", "consumerEmailId": "", "txnId": "", "txnType": "SALE", "txnSubType": "DEBIT", "items": [], "cartDescription": "", "cardNumber": "", "expMonth": "", "expYear": "", "cvvCode": "", "nameOnCard": "", "saveInstrument": false, "bankCode": "", "accountNo": "", "instrumentId": "" } }