Test

Methods

Checkout.init

This function initializes the checkout process and sets the required configuration options for the Checkout SDK. It should be called once per web page and must receive a configuration object that includes all necessary parameters for checkout.

When Checkout.init is executed, the SDK automatically prepares the checkout components, such as rendering the payment form for card details and managing secure communication with Ottu’s servers to process the transaction.

Properties

selector string required

The selector property in the Checkout SDK specifies the CSS selector of the HTML element that will host the checkout form. In most cases, this is a <div> on your page.

To use it, add a container element with a unique id, for example:

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

The value of selector must match the ID of the HTML element that will contain the checkout form. This is because the Checkout SDK renders the checkout UI by replacing the content of the selected element.

Here's an example of how Checkout.init might be called with a selector property:

Checkout.init({
  selector: 'checkout',
  // ... other parameters
});

merchant_id string required

The merchant_id specifies your Ottu merchant domain. Use the root domain of your Ottu account without the https:// or http:// prefix.

For example, if your Ottu URL is https://example.ottu.com, then your merchant_id is:

apiKey string required

The apiKey is your Ottu Public API key. It is used to authenticate requests between the Checkout SDK and Ottu’s servers during the checkout process.

Always use the Public API key and never the private key. Your private key must remain confidential and should not be exposed to clients under any circumstances.

session_id string required

The session_id is a unique identifier for the payment transaction linked to the checkout process. It is automatically generated when a transaction is created through the Checkout API.

For details on how to obtain and use session_id, refer to the session_id parameter in the Checkout API documentation.

lang string optional

The lang property defines the language used to display the checkout elements. You can set it to:

  • en for English

  • ar for Arabic

When lang is set to en, the checkout form appears in English. When set to ar, the checkout elements appear in Arabic and the layout automatically switches to right-to-left (RTL) to match Arabic script.

For a consistent user experience, it’s recommended to pass the same lang value in Checkout.init as the one used in the Checkout API when creating transactions.

For more details, refer to the language parameter in the Checkout API documentation.

formsOfPayment arry optional

formsOfPayment allows you to customize which forms of payment will be displayed in your checkout process. By default, all forms of payment are configured.

The available options for formsOfPayment are:

  • applePay: The Apple Pay payment method that allows customers to make purchases using their Apple Pay-enabled devices.

  • googlePay: The Google Pay payment method that allows customers to make purchases using their Google wallet cards linked in google accounts.

  • ottuPG: A method that redirects customers to a page where customers enter their credit or debit card details to make a payment.

  • tokenPay: A payment method that uses tokenization to securely store and process customers' payment information.

  • redirect: A method where customers are redirected to a payment gateway or a third-party payment processor to complete their payment.

  • stcPay: A method where customers enter their mobile number and provide an OTP send to their mobile number to complete their payment.

  • urPay: A method where customers enter their mobile number and provide an OTP send to their mobile number to complete their payment.

displayMode string optional

There are two display Modes i.e grid & column. The Default displayMode is column.

Here's an example of how Checkout.init might be called to customize the displayMode

  • grid

    In grid mode, saved cards will appear on the left side and the redirect links on the right side.

Checkout.init({
  // other parameters
  displayMode: 'grid'
});

  • column

    Default displayMode will be column, where all forms of payment appear one under another, similar to a responsive view.

Checkout.init({
  // other parameters
  displayMode: 'column'
});

setupPreload object optional

The setupPreload feature improves SDK load performance by letting merchants pre-fetch transaction details and provide them during SDK initialization. This reduces the need for the SDK to perform its own API call, which results in faster UI rendering.

To use setupPreload, include it in your Checkout.init() configuration. The setupPreload object should contain the transaction payload details.

Checkout.init({
  // other parameters
  setupPreload: {
    // prefetched transaction details object
  }
});

The setupPreload feature works closely with the Checkout API. When creating or updating a payment transaction (using session_id), set the include_sdk_setup_preload flag to true. The API will then return a sdk_setup_preload_payload key along with the rest of the response.

Pass the sdk_setup_preload_payload into Checkout.init() the same way you pass session_id, and do not modify it.

If the setupPreload object provided during SDK initialization is invalid or does not match the required structure, the SDK will ignore it and automatically fall back to its default behavior. In that case, the SDK will make an API call to retrieve the transaction details from the backend.

To benefit from instant loading and avoid fallback, ensure the setupPreload object follows the specified format exactly.

applePayInit object optional

The applePayInit object enables users to modify the Apple Pay configurations used for generating payment sessions through Apple Pay. By default, all options are pre-configured. However users have the flexibility to customize these configurations using applePayInit according to their requirements.

  • buttonLocale Users can change Apple Pay Button Locale by using buttonLocale property. Value of buttonLocale must be a 2 letter language code like ar, en etc.

  • version Users can change the API version used for creating Apple Pay payment session by using the version property. Values supported by version are written here.

In addition to above properties, users have the capability to customize the Apple Pay payment request using properties defined here. However, due to backend constraints, not all properties are modifiable. Below is the list of supported and unsupported values:

Supported Properties

  • merchantCapabilities

  • merchantIdentifier

  • supportedNetworks

  • countryCode

  • supportedCountries

  • total

  • lineItems

  • currencyCode

Unsupported Properties

  • requiredBillingContactFields

  • billingContact

  • requiredShippingContactFields

  • shippingContact

  • shippingContactEditingMode

  • supportsCouponCode

  • couponCode

  • applicationData

Example:

Checkout.init({
  selector: "checkout",
  merchant\ _id: 'domain',
  session\ _id: 'session\_id',
  apiKey: 'apiKey',
  // Default values configured for Apple Pay
  applePayInit: {
    version: 6
    buttonLocale: 'en',
    supportedNetworks: \['amex', 'masterCard', 'maestro', 'visa', 'mada'\],
    merchantCapabilities: \['supports3DS'\]
    // Remaining values are configured via init checkout API
  }
});

googlePayInit object optional

The googlePayInit object enables users to modify the Google Pay configurations used for generating payment sessions through Google Pay. By default, all options are pre-configured. However, developers have the flexibility to customize these configurations using googlePayInit according to their requirements.

  • buttonLocale Users can change Google Pay Button Locale by using buttonLocale property. Value of buttonLocale must be a 2 letter language code like ar, en,etc...

In addition to above properties, users have the capability to customize Google Pay payment request by utilizing the options outlined in the documentation here.However, due to backend constraints, not all properties are modifiable. Below is the list of supported and unsupported values:

Supported Properties

  • apiVersion

  • apiVersionMinor

  • environment

  • emailRequired

  • merchantId

  • merchantName

  • tokenizationSpecificationType

  • publicKey

  • gateway

  • gatewayMerchantId

  • allowedAuthMethods

  • allowedCardNetworks

  • allowPrepaidCards

  • allowCreditCards

  • billingAddressRequired

  • assuranceDetailsRequired

  • billingAddressParameters

  • displayItems

  • totalPrice

  • totalPriceLabel

  • totalPriceStatus

  • countryCode

  • currencyCode

Unsupported Properties

  • shippingAddressRequired

  • shippingAddressParameters

  • shippingOptionRequired

  • shippingOptionParameters

  • offerInfo

  • callbackIntents

  • existingPaymentMethodRequired

Example:

Checkout.init({
  // Other parameters
  googlePayInit: {
    apiVersion: 2,
    apiVersionMinor: 0,
    allowedCardNetworks: \["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD",     "VISA"\],
    allowedCardAuthMethods: \["PAN\_ONLY", "CRYPTOGRAM\_3DS"\],
    allowPrepaidCards: true,
    allowCreditCards: true,
    billingAddressRequired: false,
    assuranceDetailsRequired: false,
    existingPaymentMethodRequired: true,
    tokenizationSpecificationType: 'PAYMENT\_GATEWAY',
    totalPriceStatus: 'FINAL',
    totalPriceLabel: 'TOTAL',
    buttonLocale: 'en',
    // Remaining Values are configured via
    // init checkout API
  }
});

theme `object optional

The SDK Theme Customization feature lets you control the appearance of SDK elements through a theme object. The object includes CSS properties that are applied to specific components, allowing you to tailor the checkout UI to match your brand.

The theme object is a set of key–value pairs:

  • Each key represents a target SDK component.

  • Each value is a collection of CSS properties applied to that component.

Checkout.init({
  // other parameters
  theme: {
    'pay-button': {
      'background': 'black'
    }
  }
});

Checkout.reload

Checkout.reload() refreshes the Checkout SDK UI. It’s useful if you need to reload the checkout content after an error or when the UI must be updated.

Example:

Checkout.reload();

Checkout.showPopup(type, message, response)

Checkout.showPopup() displays a popup message to the user.

Popup will not display null values passed in the response.

  • type string Identifies the popup modal to display. Supported values:

    • error

    • success

    • redirect

  • message string A user-facing message, typically used to explain a failed payment.

  • pg_response object (optional) Raw response returned by the payment gateway after the transaction attempt. It may include status, transaction ID, and error details, or additional data provided by the gateway. pg_response is supported only when type is error or success.

Example:

Checkout.showPopup("success","Payment Successful! Redirecting you now. Please hold on.")
Checkout.showPopup(‘error’, 'Selected payment method failed. Try again.', {
  "merchant": "009057332",
  "timeOfLastUpdate": "2023-08-01T14:19:00.510Z",
  "version": "65"
})
 Checkout.showPopup(‘redirect’,’Redirecting to the payment page’)
PreviousInstallationNextTheming

Last updated