The checkout.mount method is used to add the checkout to the specified container in the DOM.

1CheckoutSDK.checkout.mount({
2  containerId: 'checkout-container', // Container identifier
3  options: {
4    selectedPaymentMethod: 'pay_pal',
5    coupon: 'COUPON123',
6    language: 'en',
7    autocharge: false,
8    mobileView: true,
9    hideFields: { email: true },
10  },
11});

Identifier of the DOM element to which the checkout will be attached. The container must exist in the DOM before the method is called. The checkout will automatically change its height according to content changes, so the container must be able to grow in both height and width; otherwise there is a risk of unwanted scrollbars appearing.

A set of parameters applied when the checkout is loaded.

• selectedPaymentMethod (string): this parameter conflicts with the billing logic and currently exists only to preserve backward compatibility for the merchant Lasta; its use is not recommended.
• coupon (string)
• language (string)
• autocharge (boolean)
• mobileView (boolean)
  - forces the mobile layout to be used; otherwise, checking whether the device is mobile is done via the userAgent;
  - can be useful if on desktop the checkout container width is the same as in the mobile view.
• hideFields (object)
  - an object with fields that must be hidden on the form during checkout rendering. Currently this is only the email field.
  - the key is the field name, and the value is a boolean: true — the field will be hidden; false — the field will be displayed (default behavior).

The checkout.unmount method is used to remove the checkout from the DOM. Subscriptions to events associated with it are preserved.

CheckoutSDK.checkout.unmount();

The checkout.submit method is used to submit the form inside the checkout. It is required in cases when you need to have your own Submit button outside the checkout.

CheckoutSDK.checkout.submit();

1. This method calls submit on the checkout form.
2. Before calling the method, make sure that the checkout is mounted and ready to work

The checkout.update method is used to change checkout data.

1CheckoutSDK.checkout.update({
2  language: "de",
3  autocharge: false,
4  hideFields: {
5    email: true,
6  },
7});

Changes the language.

Enables or disables automatic subscription renewal.

An object with fields that must be hidden on the form during checkout rendering. Currently this is only the email field. The key is the field name, and the value is a boolean: true — the field will be hidden; false — the field will be displayed (default behavior).

The checkout.events object provides methods for working with checkout events. You can subscribe to events coming from the checkout.

The subscribe method is used to subscribe to events coming from the checkout.

1CheckoutSDK.checkout.update({
2  language: "de",
3  autocharge: false,
4  hideFields: {
5    email: true,
6  },
7});

The name of the event to subscribe to. See the “Available events” table.

A function that will be called when the event is received, with the payload object passed as an argument.

An object with the unsubscribe method, which allows you to cancel the subscription to the event.

subscription.unsubscribe();

The name of the event to subscribe to. See the “Available events” table.

A function that will be called when the event is received, with the payload object passed as an argument.

Use subscribe to subscribe to events coming from the checkout instead of directly listening to the message event, as in the previous implementation.

Current implementation of handling messages from the checkout:

1window.addEventListener('message', (event) => {
2  if (event.data.type === 'changePaymentMethod') {
3    const payload = event.data.payload;
4    // Event handling
5  }
6})

Receiving events from the checkout via CheckoutSDK:

1const subscription = CheckoutSDK.checkout.events.subscribe(
2  'changePaymentMethod',
3  (payload) => {
4    console.log('Подія checkout:', payload); 
5    // Event data handling
6  }
7);

The unsubscribeAll method is used to remove all subscriptions to checkout events.

CheckoutSDK.checkout.events.unsubscribeAll();

1. Use this method to clear all subscriptions, for example before removing the checkout or when finishing work with the SDK.
2. The method automatically removes all subscriptions created via checkout.events.subscribe.

1// Subscribing an event handler
2const readySubscription = CheckoutSDK.checkout.events.subscribe(
3  'ready',
4  (payload) => {
5    console.log('checkout готовий:', payload);
6  }
7);
8
9
10// Cancelling handling of the `ready` event
11readySubscription.unsubscribe();
12
13// Removing all subscriptions for all events
14CheckoutSDKinstanse.checkout.events.unsubscribeAll();