Opening the pop-up with JavaScript

What is JavaScript pop-up triggering?

You can open the payment pop-up on your website with JavaScript. This means you can attach it to any element, click, mouse event, state change and so on.

Start by Adding the pop-up script to your site.

Checkout Page will add a CheckoutPage Object to the Window. Inspect it by running Window.checkoutPage.

To open a checkout, execute this:

  window.checkoutPage.open({
    seller: "{SELLER_NAME}",
    checkout: "{CHECKOUT_SLUG}"
  });

To close any open checkouts, execute this:

  window.checkoutPage.close();

Using query parameters in the pop-up

To store additional details to payments, you can use Query parameters. You can store query parameters in the JavaScript pop-up by adding a Query Object to the Open Function:

  window.checkoutPage.open({
    seller: "{SELLER_NAME}",
    checkout: "{CHECKOUT_SLUG}",
    query: { variant: "green" }
  });

Note that the query object can be only one level deep: arrays and objects are omitted, and other values are converted to strings.

Checking if the Checkout Page script is loaded

In more advanced scenario’s, you may have to check if the Window And Window.checkoutPage Exists before executing the open and close functions. We recommend using the following function:

  if (typeof window !== "undefined" && typeof window.checkoutPage !== "undefined) {
    window.checkoutPage.open({
      seller: "{SELLER_NAME}",
      checkout: "{CHECKOUT_SLUG}"
    });
  }

  if (typeof window !== "undefined" && typeof window.checkoutPage !== "undefined") {
    window.checkoutPage.close()
  }