Web
<head>
<script src="https://assets.ottu.net/checkout/v2/checkout.min.js"
data-error="errorCallback" data-cancel="cancelCallback"
data-success="successCallback"
data-beforeredirect="beforeRedirect"></script>HTML
</head>
To initiate checkout SDK, which will generate the SDK HTML
Should be same ID of checkout.
Merchant domain.
HTML
<div id="checkout"></div>
js
Checkout.init({
"selector":"checkout",
"merchant_id":"",
"session_id":"",
"apiKey":"",
"lang":"en"
});
To refresh the SDK.
It is useful when we get an error and want to refresh the content.
The error callback is invoked when problems occur during a payment.
It must be defined using the data-error attribute on the Checkout script tag.
The attribute value may be the name of a global function or a URL string.
When a URL is provided, the browser will be redirected to the new page with a query parameter appended for each argument.
Could be (“created”, “in_process”, “canceled”, “success” or “error”).
It is the returned string.
window.errorCallback = function ("data)"{
"data"{
"status":"error",
"message":"create_session error."
}
}
// example
// redirect to checkout page
Called when a customer cancels the payment.
Could (“created”, “in_process”, “canceled”, “success” or “error”).
Where the customer gets navigated to, after the payment process ends. See check out API redirect_url.
Either pay or authorized.
Transaction reference number.
It is the returned string.
window.cancelCallback = function (data) {
data
{
"status": "canceled",
"message": "Payment operation completed successfully.",
"session_id": "",
"order_no": "",
“operation”: "pay",
"reference_number": "",
"redirect_url": "",
}
// example
Checkout.reload();
}
Called when the payment completed successfully.
It is the returned string.
Could (“created”, “in_process”, “canceled”, “success” or “error”).
Where the customer gets navigated to, after the payment process ends. See check out API redirect_url.
Either pay or authorized.
Transaction reference number.
window.successCallback = function (data) {
data
{
"status": "success",
"message": "Payment operation completed successfully.",
"session_id": "",
"order_no": "",
"operation": "pay",
"reference_number": "",
"redirect_url": "",
}
// example
window.location.href = data.redirect_url
}
return new Promise(function(resolve, reject), It is a helper function that has to return a promise object, to create the redirect_url.
This allows the merchant to redirect the user to the cart page and wait for a while before creating the redirect_url.
In case the customer changes items in the cart, the due amount will be updated accordingly, then the merchant will wait for a while until the customer does not return, then the function returns a promise object, the cart will be frozen and marked as submitted, and the redirect_url will be generated.
Could (“created”, “in_process”, “canceled”, “success” or “error”).
It is the returned string.
Where the customer gets navigated to, after the payment process ends. See check out API redirect_url.
window.beforeRedirect = function (data) {
data
{
“status”: “success”,
“message”: "Redirecting to the payment page...",
“redirect_url”: “"
}
// example
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(true);
}, 2000);
});
}
// HTML
<div id="checkout"></div>
<script src='./checkout.min.js'
data-error="errorCallback",
data-success="successCallback",
data-cancel="cancelCallback">
</script>
// JS
// Error callback function
// Possible values:
error:
{
"status": "error",
"message": "create_session error."
}
window.errorCallback = function(error) {
console.log('applw pay error callback',error)
if (error.redirect_url)
window.location.href = error.redirect_url
}
// JS
// Success callback function
// Possible values:
success:
{
"status": "success",
"message": "Payment operation completed successfully.",
"session_id": "",
"order_no": "",
"operation": "pay",
"reference_number": ""
"redirect_url": ""
}
window.successCallback = function(success) {
window.location.href = success.redirect_url
if(success.data.redirect_url)
window.location.href = success.data.redirect_url
}
// JS
// Cancel callback function
// Possible values:
cancel:
{
"status": "canceled",
"message": "payment operation is cancelled.",
"session_id": "",
"order_no": "",
"operation": "pay",
"reference_number": ""
"redirect_url": ""
}
window.cancelCallback = function(cancel) {
Checkout.reload()
console.log('cancel callback', cancel)
}
// JS
// Checkout init function
Checkout.init({
selector: 'checkout',
merchant_id: 'ksa.ottu.dev',
session_id: '51436d465f77e59242ef25f15409c2f23fe54761',
apiKey: 'L0Fc5f81.dLqByodGesaD9pJdzoKpo6rP1FQBkVzr',
enableCHD: false, // false or true default false
CHDonly: false, // false or true default false
lang: 'en', // en or ar default en
});
Apple Pay will show automatically if the following conditions are being meet:
- Customer has an Apple device which supports Apple Pay payments.
- The browser is safari, only for web payments in the mobile SDK it doesn’t matter.
- The customer has a wallet configured on his Apple Pay device.
- The customer has more than one active cards in the wallet.
For Apple Pay integration, you have to enable Apple Pay in capabilities in your project.
If apple pay available, will show by default.
Last modified 2mo ago