Quick Start

Demo

Below is a demo of the Checkout SDK in action. This demo shows how the Checkout SDK can be used to create a streamlined checkout experience for customers, with support for multiple forms of payment and a customizable

Installation

Follow the steps below to install and initialize the Checkout SDK in your web checkout page. Once completed, the payment form will load securely inside your selected container.

1

Add the Checkout SDK Script

To install the Checkout SDK, you'll need to include the library in your web application by adding a script tag to your HTML section. You can do this by using the following code snippet:

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

2

Add div for Checkout Form

In your page's HTML add the following div where the Checkout Form be loaded.

<div id="checkout"></div>

3

Configure Callbacks

Configure the callbacks for the Web SDK. You can find more details on each of the callbacks here.

window.errorCallback = function(data) {
  window.Checkout.showPopup("error", data.message || message);
}
window.cancelCallback = function(data) {
  const message = data.message || "Oops, something went wrong. Refresh the page and try again.";
  window.Checkout.showPopup("error", message, data.payment_gateway_info.pg_response);
}
window.successCallback = function(data) {
  window.location.href = data.redirect_url;
}

4

Initialize Checkout SDK

Initialize the Checkout SDK with required parameters. You can find more details on the parameters passed to the Chcekout.init method here.

Checkout.init({
  selector: "checkout",
  merchant_id: 'domain', // replace with your Ottu domain
  session_id: 'session_id', // replace with session_id obtained from Checkout API
  apiKey: 'apiKey', // replace with your public API key
});