Comment on page
Advanced Integration
Customize your integration (Optional Step)
"payUCheckoutProConfig" object need to be passed with "payUPaymentParams" in "openCheckoutScreen" method of "PayUBizSdk".
Sample code for can be:
var paymentObject = {
payUPaymentParams: payUPaymentParams,
payUCheckoutProConfig: payUCheckoutProConfig
}
PayUBizSdk.openCheckoutScreen(paymentObject);
For iOS:
You can change the primary and the secondary color of the UI to match your apps theme
var payUCheckoutProConfig = {
primaryColor: "<Color Hex Code e.g. #aabbcc>",
secondaryColor: "<Color Hex Code e.g. #000000>",
}
For Android:
You can customise the logo to personalise the checkout screen
For iOS:
var payUCheckoutProConfig = {
merchantLogo: "<Image asset name like 'Jio'>",
}
For Android:
Add the image in the app/res/drawable folder of the native Android app and pass the same under 'merchantLogo' key.
You can customise the name to personalise the checkout screen
var payUCheckoutProConfig = {
merchantName: "<Merchant Name>",
}
Merchant can choose to hide dialog that appears when back button is pressed from L1 screen. Default value is true.
var payUCheckoutProConfig = {
showExitConfirmationOnCheckoutScreen: true/false,
}
Merchant can choose to hide dialog that appears when back button is pressed after payment is initialised. Default value is true.
var payUCheckoutProConfig = {
showExitConfirmationOnPaymentScreen: true/false,
}
Merchant can choose to auto select OTP flow on bank page with below flag. Default value is false.
var payUCheckoutProConfig = {
autoSelectOtp: true/false,
}
This is time PayU will wait for merchant surl/furl to load before passing the transaction response back to the app. If merchant surl/furl pages take a longer to load then by default PayU has response timeout of 5000 milli second. However, if merchant feel that their surl/furl can take longer than 5000 milli second then they can set this flag.
var payUCheckoutProConfig = {
merchantResponseTimeout: 5000,
}
Merchant can enable surepay on bank page. When internet is lost during the transaction, if transaction can be retry from that bank page after internet is resumed, surepay dialog is displayed. It has legitimate values as 0,1,2 and 3. Where number defines number of times surepay dialog should be displayed during the transaction for no internet connectivity. Default value is 0.
var payUCheckoutProConfig = {
surePayCount: 0-3,
}
Merchant can pass the checkout order details to the SDK that will be displayed in the SDK during the transaction flow.
var payUCheckoutProConfig = {
cartDetails: [{ 'Order': 'Value' }, { 'Key Name': 'Value1' }]
}
Consider below example to display Google Pay, PhonePe and Paytm on primary checkout screen
var payUCheckoutProConfig = {
paymentModesOrder: [{ 'UPI': 'TEZ' }, { 'Wallets': 'PAYTM' }, { 'Wallets': 'PHONEPE' }]
}
This will display Google Pay, PhonePe and Paytm respectively on top of available payment options. To reorder the all the payment options check the next section.
Default payment modes order on checkout screen is as below: Card, NetBanking, UPI and Wallets
Merchant can specify the checkout payment options order. For this, merchant need to provide list of payment modes. Checkout order will be the order of items in the list. If not all payment modes order is mentioned in list the other payment modes will be displayed in their default order as shown above.
Consider below example to order Cards and UPI on L1 screen
var payUCheckoutProConfig = {
paymentModesOrder: [{ 'cards': '' }, { 'net banking': '' }, { 'upi': '' }, { 'wallets': '' }, { 'emi': '' }]
}
The resulting order on the initial Checkout screen will be:
Cards (credit/debit) Net Banking UPI Wallets EMI |
To pass offers in the CheckoutPro SDK refer to the below code snippet.
var payUCheckoutProConfig = {
offer_details: [
{ offerTitle:'Sample Offer 1',
offerDescription:'Sample Offer 1 Description Here',
offerKey:'testoffer1',
offerPaymentTypes:['Net Banking','UPI','Wallets','Cards']
},
{ offerTitle:'Sample Offer 2',
offerDescription:'Sample Offer 2 Description Here',
offerKey:'testoffer2',
offerPaymentTypes:['Net Banking','UPI','Wallets','Cards']
}
]
}
Merchant can set this flag to false if doesn’t want Checkout Pro SDK to ask for runtime SMS permission on bank otp page. Default value is true.
var payUCheckoutProConfig = {
merchantSMSPermission: true/false
}
Merchant can choose to auto approve OTP flow on bank page with below flag. Default value is false.
var payUCheckoutProConfig = {
autoApprove: true/false
}
Merchant can choose to hide the toolbar on CB. By default,toolbar is displayed.
var payUCheckoutProConfig = {
showCbToolbar: true/false
}
Last modified 2yr ago