Introductions

CDN Address

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

SDK Instantiation

Create an SDK instance using the following code:

const subotiz = window.Subotiz()

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();