Performing actions on the checkout button

Gain a better understanding of how to perform customized actions on the Prebuilt Checkout button

Various callback functions can be assigned to properties in the button options configuration object. Some of these functions accept an optional actions parameter, which allows you to:

• Start and stop a spinner

• Open a checkout modal

Some callbacks in the Prebuilt Checkout configuration object also accept actions. For details, refer to Performing actions on the modal.

Start and stop a loading spinner

The actions parameter exposes loading.start() and loading.stop(). These two functions display and hide a spinning GIF, a visual cue that the checkout window is in the process of opening.

onClick: async (actions) => {
  ...
    actions.loading.start();
    const checkoutSessionId = await createCheckoutSession();
    actions.loading.stop();
  ...
}

Open a checkout modal

The actions parameter exposes checkout.modal.open(), which accepts a required checkout-session id and an optional configuration object, and results in the creation of a checkout window.

The actions.checkout.modal.open() function accepts the same inputs and generates the same output as createModal().

For details, refer to Button click event on the Rendering a checkout button page.

onClick: async (actions) => {
      ...
      actions.checkout.modal.open(checkoutSessionId, modalConfig);
      ...
  }