Integrate Checkout Plus
PayU Checkout Plus is the most convenient way to collect payment on your website. Add the inline JS script to your website’s header section, then call the bolt.launch() function and pass the transaction data objects when your customers click the payment button. PayU will take care of the payment and returns to your page when it is done.
Notes:
The Checkout Plus integration is not recommended for the app browsers. For example, WebView, Chrome Custom tab, etc. Although there is Redirection Web Checkout which can be integrated. For more information, refer to following:
- Redirection Web Checkout: PayU Hosted Checkout .
- Webview configurations:
Steps to integrate
- Add the inline script in the HTML Header
- Pass the transaction request objects
- Fetch the response using the responseHandler function
For more information on handling any errors during a transaction, refer to the CatchException section of this document.
Step 1: Add meta-tags & scripts in the HTML header
Add the following meta-tag & JS script in the HTML header section of your website:
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://jssdk.payu.in/bolt/bolt.min.js"></script>
Test Script
Replace the script mentioned in the earlier code snippet with https://jssdk-uat.payu.in/bolt/bolt.min.js to test the integration.
Step 2: Pass transaction request objects
The bolt.launch()
function takes two arguments.
- In the first argument, the data objects contain the transaction request data see the request parameters section for the details of the parameters to be passed as data objects). The format of the data object is as shown below:
var data = { key: 'O85456',
hash: hash,
txnid: tnxID,
amount: '1',
firstname: 'surbhi',
email: "[email protected]",
phone: "1234567890",
productinfo: 'BOLT',
surl: 'http://thirdparty.com/testresponse.php',
furl: 'http://thirdparty.com/testresponse.php',
lastname: 'soni',
enforce_paymethod: "creditcard|debitcard|HDFB|AXIB",
display_lang: "Hindi",
drop_category: "creditcard|debitcard",
pg: "CC",
custom_note: "You will be charged an extra amount of Rs 100 on this transaction"
};
- The second argument is the Handler which contains two functions. The
responseHandler()
function and thecatchException()
function.
var handlers = {responseHandler: function (BOLT) {
if(BOLT.response.txnStatus == "SUCCESS"){
console.log('Your payment has been successful');
}
if (BOLT.response.txnStatus == "FAILED") {
console.log('Payment failed. Please try again.');
}
if(BOLT.response.txnStatus == "CANCEL"){
console.log('Payment failed. Please try again.');
}
},
catchException: function (BOLT) {
console.log('Payment failed. Please try again.');
}};
Sample request
$(document).on('click','#submit',function () {
var data = { key: 'O85456',
hash: hash,
txnid: tnxID,
amount: '1',
firstname: 'surbhi',
email: "[email protected]",
phone: "1234567890",
productinfo: 'BOLT',
surl: 'http://thirdparty.com/testresponse.php',
furl: 'http://thirdparty.com/testresponse.php',
lastname: 'soni',
enforce_paymethod: "creditcard|debitcard|HDFB|AXIB",
display_lang: "Hindi",
drop_category: "creditcard|debitcard",
pg: "CC",
custom_note: "You will be charged an extra amount of Rs 100 on this transaction"
};
var handlers = {responseHandler: function (BOLT) {
if(BOLT.response.txnStatus == "SUCCESS"){
console.log('Your payment has been successful');
}
if (BOLT.response.txnStatus == "FAILED") {
console.log('Payment failed. Please try again.');
}
if(BOLT.response.txnStatus == "CANCEL"){
console.log('Payment failed. Please try again.');
}
},
catchException: function (BOLT) {
console.log('Payment failed. Please try again.');
}};
bolt.launch( data , handlers );
});
Note:
Here, when your customer clicks on the payment button (#submit), this code triggers the
bolt.launch()
function that passes the transaction parameters along with theresponseHandler()
andcatchException()
functions as arguments.
Request parameters
Parameter | Description | Example |
---|---|---|
key mandatory |
| Your Test Key |
hash mandatory |
|
|
txnid mandatory |
| s7hhDQVWvbhBdN |
amount mandatory | integer The transaction amount, expressed in the currency subunit, such as paise (in case of INR). For example, for an actual amount of “299.35” it should be "29935" | 29935 |
firstname mandatory |
| Ashish |
lastname optional |
| Verma |
email mandatory |
| |
phone mandatory |
| 9876543210 |
productinfo mandatory |
| iPhone |
surl mandatory |
| |
furl mandatory |
| |
udf1
|
| Payment Preference |
udf2
|
| Shipping Method |
udf3 |
| Shipping Address1 |
udf4 |
| Shipping City |
udf5
|
| Shipping Zip Code |
pg |
| |
bankcode |
| |
codurl optional |
| |
drop_category optional |
| creditcard|debitcard |
enforce _paymethod optional | String`This parameter allows you to customize the payment options for each transaction. You can enforce specific payment modes, cards scheme, specific banks under Net Banking using this method. | creditcard|debitcard|HDFB|AXIB |
custom_note - optional** | String` This parameter allows yo pass any custom note for the transaction. | You will be charged an extra amount of Rs 100 on this transaction |
note_category optional |
|
Step 3: Fetch the response using responseHandler
The responseHandler()
function fetches the response from PayU once the transaction is completed. In case of a successful, failed, or canceled transaction, the response parameters will be returned to the responseHandler()
function based on the corresponding logic defined by the merchant.
CatchException
The catchException()
function captures the transaction message in case of any exceptions.
Sample response
Sample Response URL
mihpayid: 403993715523615328
mode: CC
status: success
unmappedstatus: captured
key: JPM7Fg
txnid: 50QJq6lBJBmx14
amount: 10.00
cardCategory: domestic
discount: 0.00
net_amount_debit: 10
addedon: 2021-07-28 15:11:37
productinfo: iPhone
firstname: PayU User
lastname:
address1:
address2:
city:
state:
country:
zipcode:
email: [email protected]
phone: 9876543210
udf1:
udf2:
udf3:
udf4:
udf5:
udf6:
udf7:
udf8:
udf9:
udf10:
hash: afeab9dcf4e43d47f8fbf5a6838d393c70694a58e30ada08e6cb86ac943236c05717c5f5e4872d671fe81d0d9b2d9facd44e9a061ba621aff6f20c4343ea5dfa
field1:
field2:
field3:
field4:
field5:
field6:
field7:
field8:
field9: Transaction Completed Successfully
payment_source: payu
PG_TYPE: CC-PG
bank_ref_num: 7f0d5ada-59bb-41d7-9e41-20a6af2406c9
bankcode: CC
error: E000
error_Message: No Error
name_on_card: test
cardnum: 411111XXXXXX1111
cardhash: This field is no longer supported in postback params.
Response parameters
Parameter | Description |
---|---|
mihpayid | It is a unique reference number created for each transaction at PayU’s end which is used to identify a transaction in case of a refund. |
mode | This parameter describes the payment category by which the transaction was completed/attempted by the customer. The values are:
|
bankcode | This parameter contains the code indicating the payment option used for the transaction. For example, Visa Debit Card – VISA, Master Debit Card – MAST. |
status | This parameter returns the status of the transaction and must be used to map the order status. Possible values are success, failure, or pending. The significance of the values for these values are:
|
unmappedstatus | This parameter holds the status of a transaction in PayU's internal database, which can include intermediate states. Possible values include: dropped, bounced, captured, auth, failed, usercancelled, or pending. For information on status description, refer to Payment State Explanations. |
key | This parameter contains the merchant key. |
error | For the failed transactions, this parameter provides the reason for failure. |
error_message | This parameter contains the error message. For the list of error message, refer to Error Codes. |
bank_ref_num | For each successful transaction – this parameter contains the bank reference number generated by the bank. |
txnid | This parameter contains the transaction ID value posted by the merchant during the transaction request. |
amount | This parameter contains the original amount which was sent in the transaction request by the merchant. |
productinfo | This parameter contains the same value of product information which was sent in the transaction request from the merchant’s end to PayU. |
firstname | This parameter contains the same value of first name which was sent in the transaction request from the merchant’s end to PayU. |
lastname | This parameter contains the same value of last name which was sent in the transaction request from the merchant’s end to PayU. |
This parameter contains the same value of email which was sent in the transaction request from the merchant’s end to PayU. | |
phone | This parameter contains the same value of phone which was sent in the transaction request from the merchant’s end to PayU. |
hash | This parameter is crucial and is similar to the hash parameter used in the transaction request. For more information, refer to Generate Hash. |
PG_TYPE | This parameter gives information on the payment gateway used for the transaction. |
udf1 | This parameter contains the same value of udf1, udf2, udf3, udf4, or udf5, which was sent in the transaction request from the merchant’s end to PayU. |
udf2 | This parameter contains the same value of udf1, udf2, udf3, udf4, or udf5, which was sent in the transaction request from the merchant’s end to PayU. |
udf3 | This parameter contains the same value of udf1, udf2, udf3, udf4, or udf5 which was sent in the transaction request from the merchant’s end to PayU. |
udf4 | This parameter contains the same value of udf1, udf2, udf3, udf4, or udf5, which was sent in the transaction request from the merchant’s end to PayU. |
udf5 | This parameter contains the same value of udf1, udf2, udf3, udf4, or udf5, which was sent in the transaction request from the merchant’s end to PayU. |
Updated 7 days ago