The Smarter Way
Search…
⌃K

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>

Functions

To initiate checkout SDK, which will generate the SDK HTML

selector string

Should be same ID of checkout.

merchant_id string

Merchant domain.

apiKey

Authentication method, see API key.
It is generated when payment was created. See checkout API Session ID.

lang

Language used. See checkout API language.

Example

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.

Callbacks

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.

status string

Could be (“created”, “in_process”, “canceled”, “success” or “error”).

messagestring

It is the returned string.

Example

window.errorCallback = function ("data)"{
"data"{
"status":"error",
"message":"create_session error."
}
}
// example
// redirect to checkout page
Called when a customer cancels the payment.
It is generated when payment was created. See checkout API Session ID

status 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.

order_no

A number for transaction provided by merchant. See checkout API order_no.

operation string

Either pay or authorized.
Transaction reference number.

messagestring

It is the returned string.

Example

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.

messagestring

It is the returned string.
It is generated when payment was created. See checkout API Session ID.

status 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.

order_no

A number for transaction provided by merchant. See checkout API order_no.

operation string

Either pay or authorized.
Transaction reference number.

Example

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.

status string

Could (“created”, “in_process”, “canceled”, “success” or “error”).

messagestring

It is the returned string.
Where the customer gets navigated to, after the payment process ends. See check out API redirect_url.

Example

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

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 27d ago