mylo Online Checkout SDK

Welcome to the mylo Online Checkout SDK documentation. This SDK provides a simple and efficient way to integrate an online checkout process into your web application. Below are the included files and their descriptions:

Versions

OLD versioning

• V1.4.4 is using sandbox environment
• V2.0.0 is using test environment
• v3.0.0 is using production environment

New versioning

From V4.*.* now every startCheckout or startOnboarding methods will require a baseUrl parameter, which is the base URL of your application. This allows you to use the SDK in different environments (sandbox, test, production) without changing the code.

Included Files

1. iframe.ts

This file contains the IframeModal class, which is responsible for creating and managing an iframe modal for the checkout process. The modal displays the checkout page within an iframe and handles the following functionalities:

• open(url: string, data: Record<string, any>): void: Opens the modal with the specified URL and data. The data is sent to the iframe via postMessage after it loads, not as query parameters.
• close(): void: Closes the modal, removes it from the DOM, and if a redirect URL was set (via postMessage from the iframe), navigates to it.
• getIframe(): HTMLIFrameElement | null: Returns the iframe element.
• onIframeLoad(callback: () => void): void: Registers a callback to be executed when the iframe is loaded.
• redirectUrl (setter): Sets a redirect URL to be used after closing the modal.

2. Base.ts

This file contains the Base class, which provides common functionalities for the checkout and onboarding processes. It includes start method.

start(data: { baseUrl: string, path: string, data: Record<string, any> }): void

Initializes the iframe modal with the provided base URL and path, and sends the data to the iframe after it loads. This method is used by both the Checkout and Onboarding classes to start their respective processes.

• baseUrl: The base URL of the application. e.g. "https://mylo-test.myloapp.com"
• path: The path to the checkout or onboarding page. e.g. "public/online-checkout" or "public/onboarding-checkout-app".

3. checkout.ts

This file contains the Checkout class, which is the main entry point for starting the checkout process. It uses the IframeModal class to display the checkout page within an iframe. The class includes the following functionalities:

startCheckout(baseUrl: string, data: Record<string, any>): void

Starts the checkout process by calling the internal start method with an object containing { baseUrl, path: "public/online-checkout", data }. This initializes the data and opens the iframe modal with the correct checkout path and provided data.

4. onboarding.ts

This file contains the Onboarding class, which is the main entry point for starting the onboarding at checkout process. It uses the IframeModal class to display the onboarding at checkout page within an iframe. The class includes the following functionalities:

startOnboarding(baseUrl: string, data: Record<string, any>): void

Starts the onboarding at checkout process by calling the internal start method with an object containing { baseUrl, path: "public/onboarding-checkout-app", data }. This initializes the data and opens the iframe modal with the correct onboarding path and provided data.

5. index.ts

This file serves as the entry point for the SDK. It exports the following:

• Checkout class
• Onboarding class
• getInstallmentInfoPLP and getInstallmentInfoPDP functions

These exports make the main checkout, onboarding, and installment calculation functionalities available for use in other parts of your application.

6. Usage

• import library

  import { Checkout, Onboarding } from "mylo-online-checkout-sdk";

• Create checkout instance:

  const myCheckout = new Checkout();
  myCheckout.startCheckout("http://mylo-test.myloapp.com", {
    client_session_secret: { clientSessionSecret }, // add here your generated client session secret
  });

• Create onboarding instance:

  const myOnboarding = new Onboarding();
  myOnboarding.startOnboarding("http://mylo-test.myloapp.com", {
    client_session_secret: { clientSessionSecret }, // add here your generated client session secret
  });