Web

Checkout JS

Installation

<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

Checkout.init

To initiate checkout SDK, which will generate the SDK HTML

Parameters description

selector string

Should be same ID of checkout.

merchant_id string

Merchant domain.

apiKey

API Public key should be used.

session_id

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"
});

Checkout.reload

To refresh the SDK. It is useful when we get an error and want to refresh the content.

Callbacks

window.errorCallback

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.

Parameters description

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

window.cancel.Callback

Called when a customer cancels the payment.

Parameters description

session_id

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

status string

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

redirect_url

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.

reference_numberstring

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();
}

window.success.Callback

Called when the payment completed successfully.

Parameters description

messagestring

It is the returned string.

session_id

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

status string

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

redirect_url

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.

reference_numberstring

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
}

window.beforeRedirect

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.

Parameters description

status string

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

messagestring

It is the returned string.

redirect_url

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);
      });
}

Full example

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

Integrate Apple Pay

For Apple Pay integration, you have to enable Apple Pay in capabilities in your project. If apple pay available, will show by default.

PreviousSDKNextiOS

Last updated