Opening the pop-up with JavaScript

Learn how to open and close the checkout pop-up with JavaScript

With Checkout Page, you can easily create a one page checkout and add it to your site in different ways.

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