Example

Example Without googlePayInit/ApplePayInit

window.errorCallback = function(data) {
    // If payment fails with status “error” SDK triggers the errorCallback.
    // In errorCallback we show error popup by checking if form_of_payment in data is “token_pay” or “redirect”.
    let validFormsOfPayments = ['token_pay', 'redirect'];
    if (validFormsOfPayments.includes(data.form_of_payment) || data.challenge_occurred) {
        const message = "Oops, something went wrong. Refresh the page and try again.";
        // displays popup with data.message if present else displays static message
        window.Checkout.showPopup("error", data.message || message);
    }
    console.log('Error callback', data);
    // Unfreeze the basket upon an error
    unfreezeBasket();
};

window.successCallback = function(data) {
    // If payment gets completed with status “success” SDK triggers the successCallback.
    // In successCallback we redirect the user to data.redirect_url
    window.location.href = data.redirect_url;
};

window.cancelCallback = function(data) {
    // If payment fails with status “canceled” SDK triggers the cancelCallback.
    // In cancelCallback we show error popup by checking if pg_name in data.payment_gateway_info is “kpay” or data.form_of_payment is “token_pay”.
    if (data.payment_gateway_info && data.payment_gateway_info.pg_name === "kpay") {
        // displays popup with pg_response as key value pairs
        window.Checkout.showPopup("error", '', data.payment_gateway_info.pg_response);
    } else if (data.form_of_payment === "token_pay" || data.challenge_occurred) {
        const message = "Oops, something went wrong. Refresh the page and try again.";
        // displays popup with data.message if present else displays static message
        window.Checkout.showPopup("error", data.message || message);
    } else if (data.redirect_url && data.status.toLowerCase() === 'canceled') {
        // If the cancellation is successful and the status is 'canceled', the customer will be redirected to the transaction details page
        window.location.href = data.redirect_url;
    }
    console.log('Cancel callback', data);
    // Unfreeze the basket upon an error
    unfreezeBasket();
};

// Before any payment action (Apple Pay, Google Pay, token payments, direct payments, etc.)
window.beforePayment = function(data) {
    return new Promise(function(resolve, reject) {
        fetch('https://api.yourdomain.com/basket/freeze', {
            method: 'POST'
        })
        .then(function(response) {
            if (response.ok) {
                if (data && data.redirect_url) {
                    window.Checkout.showPopup('redirect', data.message || 'Redirecting to the payment page', null);
                }
                resolve(true);
            } else {
                reject(new Error('Failed to freeze the basket.'));
            }
        })
        .catch(reject);
    });
};

function unfreezeBasket() {
    fetch('https://api.yourdomain.com/basket/unfreeze', {
        method: 'POST'
    });
    // Handle unfreeze basket responses or errors if necessary
}

Checkout.init({
    selector: "checkout",
    merchant_id: 'sandbox.ottu.net',
    session_id: '51436d465f77e59242ef25f15409c2f23fe54761',
    apiKey: '3bf2a041d0896419415feac3228b17e3ec53e793',
    lang: 'en',
    ‘displayMode’: ‘grid’, // default is column
});

Extended example

HTML

</head>
    <div id="checkout"></div>
    <script src='https://assets.ottu.net/checkout/v3/checkout.min.js'
        data-error="errorCallback"
        data-success="successCallback"
        data-cancel="cancelCallback"
        data-beforepayment="beforePayment">
    </script>

JS

window.errorCallback = function(data) {
    // Triggered when payment fails with status “error”.
    // Displays an error popup if form_of_payment is “token_pay” or “redirect”.
    let validFormsOfPayments = ['token_pay', 'redirect'];
    if (validFormsOfPayments.includes(data.form_of_payment) || data.challenge_occurred) {
        const message = "Oops, something went wrong. Refresh the page and try again.";
        // Show popup with data.message if available, otherwise use default message.
        window.Checkout.showPopup("error", data.message || message);
    }
    console.log('Error callback', data);
    // Unfreeze the basket upon an error.
    unfreezeBasket();
};

window.successCallback = function(data) {
    // Triggered when payment completes successfully with status “success”.
    // Redirects the user to data.redirect_url.
    window.location.href = data.redirect_url;
};

window.cancelCallback = function(data) {
    // Triggered when payment fails with status “canceled”.
    // Displays an error popup based on pg_name in payment_gateway_info or form_of_payment.
    if (data.payment_gateway_info && data.payment_gateway_info.pg_name === "kpay") {
        // Displays a popup with pg_response as key-value pairs.
        window.Checkout.showPopup("error", '', data.payment_gateway_info.pg_response);
    } else if (data.form_of_payment === "token_pay" || data.challenge_occurred) {
        const message = "Oops, something went wrong. Refresh the page and try again.";
        // Displays a popup with data.message if available, otherwise uses default message.
        window.Checkout.showPopup("error", data.message || message);
    } else if (data.redirect_url && data.status.toLowerCase() === 'canceled') {
        // If cancellation is successful and status is 'canceled', redirect to transaction details page.
        window.location.href = data.redirect_url;
    }
    console.log('Cancel callback', data);
    // Unfreeze the basket upon an error.
    unfreezeBasket();
};

// Before any payment action (Apple Pay, Google Pay, token payments, direct payments, etc.)
window.beforePayment = function(data) {
    return new Promise(function(resolve, reject) {
        fetch('https://api.yourdomain.com/basket/freeze', {
            method: 'POST'
        })
        .then(function(response) {
            if (response.ok) {
                if (data && data.redirect_url) {
                    window.Checkout.showPopup('redirect', data.message || 'Redirecting to the payment page', null);
                }
                resolve(true);
            } else {
                reject(new Error('Failed to freeze the basket.'));
            }
        })
        .catch(reject);
    });
};

function unfreezeBasket() {
    fetch('https://api.yourdomain.com/basket/unfreeze', {
        method: 'POST'
    });
    // Optionally handle unfreeze basket responses or errors if necessary.
}

JS

Checkout init function

Checkout.init({
    selector: "checkout",
    merchant_id: 'sandbox.ottu.net',
    session_id: 'session_id',
    apiKey: 'apiKey',
    lang: 'en', // en or ar default en
    formsOfPayments: ['applePay', 'googlePay', 'stcPay', 'ottuPG', 'tokenPay', 'redirect','urPay'],
    displayMode: 'grid', // default is column
    applePayInit: {
        supportedNetworks: ['amex', 'masterCard', 'maestro', 'visa', 'mada'],
        merchantCapabilities: ['supports3DS'],
    },
    googlePayInit: {
        apiVersion: 2,
        apiVersionMinor: 0,
        allowedCardNetworks: ['AMEX', 'DISCOVER', 'INTERAC', 'JCB', 'MASTERCARD', 'VISA'],
        allowedCardAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
        tokenizationSpecificationType: 'PAYMENT_GATEWAY',
        baseCardPaymentMethodType: '',
        paymentsClient: null,
        totalPriceStatus: 'FINAL',
        totalPriceLabel: 'Total',
        buttonLocale: 'en',
    }
});