Kontempo Checkout SDK

Demo

For demo, please visit https://checkout.kontempo.io/demo/sdk

Installation

Add the code snippet below to your website page, generally before the closing </head> tag.
This code snippet is used to load Kontempo Checkout SDK for using its functions in your website.

<!-- Kontempo Checkout SDK - Installation Code Snippet  -->
  <script>
    (function (w, d, s, o, f, u, js, fjs) {
      w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
      js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
      u = u || ''; w[o].u = u;
      js.src = (u || '') + '/sdk/' + f + '.js'; js.async = 1;
      fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', 'Kontempo', 'v1', 'https://checkout.kontempo.io'));
  </script>

Usage

Checkout Options

In order to start a checkout session, you need to prepare Checkout Options object.
The Checkout Options need the following data specified:

var MERCHANT_ACCOUNT  = 'mer_xxxxxxxxxx.xxxx'; // required
  var ORDER_ID          = 'order id'; // required
  var ORDER_TOTAL       = 123.45; // required
  var ORDER_SUMMARY     = 'order summary'; // optional

  var checkoutOptions = {
    merchantAccount: MERCHANT_ACCOUNT,
    order: {
      referenceId: ORDER_ID,
      totalAmount: ORDER_TOTAL,
      summary: ORDER_SUMMARY,
    },
  }

Hosted Checkout

Hosted Checkout is Komtempo built-in checkout app, located at https://checkout.kontempo.io.
Using this mode, the SDK will open https://checkout.kontempo.io in a new tab with the data from specified Checkout Options. Buyer then perform their checkout directly on Kontempo Hosted Checkout app.

To start a Hosted Checkout session, use the following code snippet.

Kontempo('sdk_v1.ready', function (sdk) {
    sdk.initHostedCheckout(checkoutOptions);
  });

Modal Checkout

If you want to place the Checkout UI directly in your website inside a modal / popup, you can use Modal Checkout mode.

To start a Modal Checkout session, use the following code snippet.

Kontempo('sdk_v1.ready', function (sdk) {
    // start modal checkout session
    var instance = sdk.initModalCheckout(checkoutOptions, {
      onCancel: function () {
        instance.destroy(); // destroy the instance
      }
    });
  });

You can customize Modal Checkout UI further by using following config options.

const overlayOptions = {
    // specify CSS z-index property of the modal
    zIndex: 1,

    // specify custom color of modal backdrop
    backdropColor: 'rgba(0, 0, 0, 0.5)',
  }

  Kontempo('sdk_v1.ready', function (sdk) {
    var instance = sdk.initModalCheckout(checkoutOptions, {
      // optional - modal overlay options
      overlay: overlayOptions,

      // optional - callback when checkout canceled
      onCancel: function () {
        alert('Checkout Canceled!');
      },

      // optional - callback when checkout successfully completed
      onComplete: function (data) {
        console.log('Checkout Data:', data);
        console.log('Order ID:', data.orderId);

        alert('Checkout Completed!');
      },

      // optional - callback when error occurred
      onError: function (data) {
        console.log('Checkout Error Code:', data.code);

        alert('Checkout Error!');
      },
    });
  });

Inline Checkout

If you want to place the Checkout UI directly in your website in specific area / element, you can use Inline Checkout mode.

To start an Inline Checkout session, use the following code snippet.

// get the container element from your page
  const containerElement = document.getElementById('checkout_ui_container_element');

  Kontempo('sdk_v1.ready', function (sdk) {
    // start inline checkout session
    var instance = sdk.initInlineCheckout(checkoutOptions, {
      element: containerElement,

      onCancel: function () {
        // destroy the instance - only unbind events
        instance.destroy();

        // destroy the instance - also remove the checkout UI
        instance.destroy({ removeIframe: true });

        // destroy the instance - also remove the container element
        instance.destroy({ removeIframe: true, removeElement: true });
      }
    });
  });

You can customize Inline Checkout UI further by using following config options.

const configOptions = {
    // specify default language to display in case the SKD failed to detect language from browser settings
    // supported value: 'es' (for Spanish) | 'en' (for English)
    defaultLanguage: 'es',

    // force specific language to display
    // supported value: 'es' (for Spanish) | 'en' (for English)
    language: 'es',

    // whether to show header or not
    // supported values: true (show header) | false (hide header)
    showHeader: true,

    // whether to show language menu or not
    // supported values: true (show language menu) | false (hide language menu)
    showLanguageMenu: true,
  }

  Kontempo('sdk_v1.ready', function (sdk) {
    var instance = sdk.initInlineCheckout(checkoutOptions, {
      element: containerElement,

      // optional - additional config options
      config: configOptions,

      // optional - callback when checkout canceled
      onCancel: function () {
        alert('Checkout Canceled!');
      },

      // optional - callback when checkout successfully completed
      onComplete: function (data) {
        console.log('Checkout Data:', data);
        console.log('Order ID:', data.orderId);

        alert('Checkout Completed!');
      },

      // optional - callback when error occurred
      onError: function (data) {
        console.log('Checkout Error Code:', data.code);

        alert('Checkout Error!');
      },
    });
  });

Callback Data

Complete Callback: onComplete(data)

Error Callback: onError(data)

Error Codes:

Copyright © Kontempo.io