Documentation
Search…
PayKun Basic-Know-How
JS Checkout
It is easy to integrate the JS Checkout into your website. It provides an efficient way to collect online payments with multiple payment options from your customer. Also, it adds to customer satisfaction because while making the payment he remains on the merchant website. This boosts the trust and confidence of the customer to proceed with the checkout process and pay with their preferred payment method.
Prerequisite
Following things will be required before you can begin integration:
- Merchant ID
Integration Steps for JS Checkout
1. include js
In the given order include these two JS in your HTML script
1
<script src="https://checkout.paykun.com/checkout/plugin/crypt/crypto-js.min.js"></script>
2
<script src="https://checkout.paykun.com/checkout/js/paykun.js"></script>
Copied!
Note : Jquery is required to make sure that you have included Jquery before including above js files
2. JS Code
The given below is the Sample JS Code to initialize the payment -
1
// Create Paykun object
2
// Currently Sandbox does not support JS checkout, and so you will not be able to test JS integration,
3
// isLive can only be true for now
4
const pk = new PayKun({ merchantId : "merchantId", accessToken: "accessToken", isLive: true});
5
// Add this function in your javascript tag or your js file
6
// This method can be called to initialize payment, It can be any event User Generated Or system Generated
7
function initPayment() {
8
let order = {
9
amount: "10", // Amount to collect
10
orderId: "ORD" + (new Date).getTime(), // Unique order id, You can use your custom login here, but make sure it generates unique ID everytime
11
productName: "Mobile", // Name of the product
12
customerName: "Test name", // Name of the customer
13
customerEmail: "[email protected]", // Email of the customer
14
customerMobile: "9999999999", // Mobile of customer
15
currency: "INR", //set your 3 digit currency code here
16
// Following are callback function and will be called when any result is received after payment,
17
// If payment is success then onSuccess method will be called Or else onCancelled method will be called
18
onSuccess: function (transactionId) {
19
// You can use 'transactionId' variable to process payment at your server side if you like,
20
// In that case you can call our transaction status API on your server to get transaction information Or
21
// You can get complete transaction details by calling the following function
22
// WARNING: It is advisable to verify transaction amount and status at your server side using Transaction ID before delivering any service for security reason
23
var transaction = pk.getTransactionDetail(transactionId, function(transaction) {
24
// You can show payment success message to user here, Also process this payment success at your server side to deliver services to customer
25
console.log(transaction);
26
alert('Payment is success, Your transaction ID : ' + transaction.transaction.payment_id);
27
});
28
},
29
onCancelled: function (transactionId) {
30
// You can use 'transactionId' variable to process payment at your server side if you like,
31
// In that case you can call our transaction status API on your server to get transaction information Or
32
// You can get complete transaction details by calling following function
33
var transaction = pk.getTransactionDetail(transactionId, function(transaction) {
34
// You can show payment canceled message to user here, Also mark this payment as failed/cancelled at your server side
35
console.log(transaction);
36
alert('Payment is cancelled, Your transaction ID : ' + transaction.transaction.payment_id);
37
});
38
}
39
};
40
//Init Paykun Payment and open checkout popup
41
pk.init(order);
42
}
Copied!
3. Pay Button
Place this button in your HTML code, so a user can click on it and proceed to pay. Similarly, you can call initPayment() anywhere to initiate the payment.
1
<button onclick="initPayment()">Pay ₹10</button>
Copied!
Sample Transaction Response
1
{
2
"message": "Record retrieved successfully",
3
"transaction": {
4
"payment_id": "55873-83139-75447-76995",
5
"merchant_email": "[email protected]",
6
"merchant_id": "123456789012345",
7
"status": "Failed",
8
"status_flag": 0,
9
"payment_mode": null,
10
"order": {
11
"order_id": "DEMO_ORD1560424646862",
12
"product_name": "Test Checkout",
13
"gross_amount": 10,
14
"gateway_fee": null,
15
"tax": null
16
},
17
"customer": {
18
"name": "Customer Name",
19
"email_id": "[email protected]",
20
"mobile_no": "1234567890"
21
},
22
"shipping": {
23
"address": null,
24
"city": null,
25
"state": null,
26
"country": null,
27
"pincode": null
28
},
29
"billing": {
30
"address": null,
31
"city": null,
32
"state": null,
33
"country": null,
34
"pincode": null
35
},
36
"custom_field_1": "",
37
"custom_field_2": "",
38
"custom_field_3": "",
39
"custom_field_4": "",
40
"custom_field_5": "",
41
"date": "1560424703"
42
}
43
}
Copied!
Last modified 1yr ago
Copy link