Skip to content
/
Installation
Last updated

Installation

The first step to using Kustom Elements is adding the installation script to your site. This script registers the web components and connects them to your merchant account. All elements depend on it, so it must be placed before any element tags on the page.

Prerequisites

  • A Kustom merchant account (Playground for testing, Production for live)
  • Access to the Kustom Portal to get your installation script

First time setup

  1. Log in to the Kustom Portal, keep in mind that you need to be logged in to the same environment that you want to use the elements in, the snippets are not interchangeable between environments.
  2. Go to the Elements section.
  3. You need to register the domains where your code will run.
  4. Then click the "Generate" button to get the installation script.

Kustom Portal — First time setup

The installation script

Copy the installation scripts and place them as high in the <head> of your page as possible. Please be aware that your portal view might be a bit different from the first time you start working with the elements but you should still be able to locate the copy script button.

Kustom Portal — Elements installation script

Allowed domains

  • Add each domain where Kustom Elements will be used (e.g. www.my-shop.com, checkout.my-shop.com).
  • Only for playground environments, you can use wildcards to allow all subdomains, for example *.my-shop.com.
  • Use your Playground installation script only on test domains; use your Production script only on live domains.

Kustom Portal — Domain configuration

Add the script to your site

Place the installation script in your site’s <head> so it loads before any element tags. Typically this means adding it to your main layout or template that wraps all pages where you use Kustom Elements.

Example (do not copy this code, it is just an example, use the script you copied from the Kustom Portal):

<!DOCTYPE html>
<html>
  <head>
    <!-- Kustom Elements Snippet start -->

    <script
      async
      id="kustom-elements-script"
      type="text/javascript"
      src="https://js.test.kustomcheckout.net/kustom-elements/v1/pre-load.js"
      data-public-api-key="{{Your public API key}}"
    ></script>

    <script>
      (function (w) {
        ((window.kustomElements =
          window.kustomElements ||
          function (w, ...n) {
            return new Promise((o, i) => {
              window.kustomElements._internal.q.push({
                method: w,
                args: n,
                resolve: o,
                reject: i,
              });
            });
          }),
          (window.kustomElements._internal = window.kustomElements
            ._internal || { q: [], snippetVersion: "1.0.0" }),
          window.kustomElements.load ||
            (window.kustomElements.load = new Promise((w, n) => {
              ((window.kustomElements._internal.loadResolve = w),
                (window.kustomElements._internal.loadReject = n));
            })));
      })(window);
    </script>

    <!-- Kustom Elements Snippet end -->
  </head>
  <body>
    <!-- Your page content and Kustom Elements go here -->
  </body>
</html>

Next steps

Once the installation script is in place, you can add Kustom Elements to your pages. See Usage for how to embed the elements.

Previous page
Next page