Introductions

CDN Address

https://cdn.subotiz.com/static/subotiz/v0/subotiz.js

SDK Instantiation

Create an SDK instance using the following code:

const subotiz = window.Subotiz()

Prewarm Checkout (Recommended)

This method preloads the resources required by Checkout in advance, so that the Checkout first screen renders faster when it is opened later.

prewarm is a static method on Subotiz and can be called without creating an SDK instance. Prewarming runs while the page is idle and does not affect the normal loading of your page.

It is recommended to call this method as early as possible after including subotiz.js, without waiting for initEmbeddedCheckout, so as to reserve sufficient time for prewarming.

Method Invocation Example

<!-- Include the SDK; async loading is recommended to avoid blocking the page -->
<script
  async
  src="https://checkout.subotiz.com/static/subotiz/v0/subotiz.js"
  onload="window.Subotiz.prewarm({ environment: 'PRODUCTION' })"
></script>

<!-- For merchants with a custom domain: -->
<!--
<script
  async
  src="https://checkout.subotiz.com/static/subotiz/v0/subotiz.js"
  onload="window.Subotiz.prewarm({ checkoutUrl: 'https://pay.merchant.com' })"
></script>
-->

Parameter Specification

Options (optional) object type

Field Type Required Default Description

environment 'SANDBOX' ｜ 'PRODUCTION' No 'SANDBOX' Environment setting, which must match the environment used when initializing Checkout: 'SANDBOX'- Sandbox environment (default) 'PRODUCTION'- Production environment

checkoutUrl

string

Field	Type	Required	Default	Description
environment	'SANDBOX' ｜ 'PRODUCTION'	No	'SANDBOX'	Environment setting, which must match the environment used when initializing Checkout: 'SANDBOX'- Sandbox environment (default) 'PRODUCTION'- Production environment
checkoutUrl	string	No		Custom Checkout domain. When provided, it takes precedence over `environment`. It must be identical to the Checkout domain actually used afterwards, otherwise prewarming will not take effect.
trigger	'domready' ｜ 'immediate'	No	'domready'	Prewarm timing: 'domready'- Prewarm automatically once the page DOM is ready (default, recommended) 'immediate'- Prewarm immediately after the call, suitable when you want to control the prewarm timing yourself.

Custom Checkout domain. When provided, it takes precedence over environment.

It must be identical to the Checkout domain actually used afterwards, otherwise prewarming will not take effect.

trigger 'domready' ｜ 'immediate' No 'domready' Prewarm timing: 'domready'- Prewarm automatically once the page DOM is ready (default, recommended) 'immediate'- Prewarm immediately after the call, suitable when you want to control the prewarm timing yourself.

Initializing Embedded Checkout

This method initializes the embedded Checkout payment component and returns a Checkout instance.

Method Invocation Example

const checkout = await subotiz.initEmbeddedCheckout({
    fetchSessionUrl: async() =>{
        // Example of obtaining sessionURL from the server side
        const response = await fetch('/api/session');
        const data = await response.json();
        return data.sessionUrl;
    },
    environment: 'SANDBOX',  // 'SANDBOX' | 'PRODUCTION'

});

Parameter Specification

Options (required) object type

Field	Type	Required	Default	Description
fetchSessionId	`()=>Promise<string>`	No		Callback function `fetchClientSecret() => Promise<string>` to retrieve the Checkout Session ID. Either `fetchSessionId` or `fetchSessionUrl` must be provided. When both are provided, only `fetchSessionId` will be invoked.
fetchSessionUrl	`()=>Promise<string>`	No		Callback function `fetchClientSecret() => Promise<string>` to retrieve the Checkout Session URL. Either `fetchSessionId` or `fetchSessionUrl` must be provided. When both are provided, only `fetchSessionId` will be invoked.
environment	'SANDBOX' ｜ 'PRODUCTION'	No	'SANDBOX'	Environment setting: 'SANDBOX'- Sandbox environment (default) 'PRODUCTION'- Production environment
onComplete	()=>void	No		Callback function triggered upon payment completion. Only fires if `redirect_on_completion` was set to `if_required` during Checkout Session creation, meaning it triggers when the user is not automatically redirected.

Mount the Checkout Component

First, create a container DOM element, then mount the Checkout component into this container.

Operation Example

<!-- Create Container  -->
<div id="your_domElement">
  <!-- Checkout component will be displayed here -->
</div>

<script>
  // Mount the component
  checkout.mount('#your_domElement');
</script>

Parameter Specification

selector Required string type. The CSS selector for the container element (e.g., '#your_domElement').

Unmount the Checkout Component

Unmount the Checkout component from the DOM. It can be remounted later using mount.

checkout.unmount();