Embed checkout pages and storefronts

Use a Nautilus checkout page or storefront as a hosted link, button destination, or auto-resizing inline embed. Both surfaces support preselecting a location and product.

Choose a surface

Surface	Use it when	URL format
Checkout page	You want a curated campaign, offer, or subset of locations and products.	`https://www.nautilus-app.com/c/checkout/CHECKOUT_LINK_ID`
Storefront	You want the organization’s complete public catalog, filtered by location.	`https://www.nautilus-app.com/c/storefront/ORGANIZATION_SLUG`

A checkout page exposes only the locations and products configured on that page. If the page is deactivated or deleted, its direct links and embeds stop working. A storefront reads the organization’s public catalog. Only storefront-visible locations and published products appear.

Get the base URL

In Nautilus, open Checkout Pages. For a checkout page:

Open the checkout page you want to integrate.
Click Copy link to copy its hosted URL.
Click Embed code, select Inline embed, and click Copy code.
Click View live page to test the customer experience.

For the full storefront:

Click Preview to open the organization’s storefront.
Or open Edit Storefront, select a location, and click Live Checkout.

Use the exact URL Nautilus generates. The examples below use placeholders that you must replace.

Preselect a location and product

Nautilus reads these case-sensitive query parameters:

Parameter	Value	Behavior
`locationId`	Nautilus site ID	Selects a location available on the checkout page or storefront.
`productId`	Nautilus product ID	Selects a product available at the selected location and on the selected surface.
`embedded`	`true`	Enables iframe-friendly presentation. The Nautilus loader adds this automatically.
`transparent`	`true`	Makes the storefront’s outer background transparent. Storefront only.

Select a location

Checkout page:

https://www.nautilus-app.com/c/checkout/CHECKOUT_LINK_ID?locationId=SITE_ID

Storefront:

https://www.nautilus-app.com/c/storefront/ORGANIZATION_SLUG?locationId=SITE_ID

The customer lands on the selected location and chooses from that location’s available products.

Select a location and product

Checkout page:

https://www.nautilus-app.com/c/checkout/CHECKOUT_LINK_ID?locationId=SITE_ID&productId=PRODUCT_ID

Storefront:

https://www.nautilus-app.com/c/storefront/ORGANIZATION_SLUG?locationId=SITE_ID&productId=PRODUCT_ID

Always include locationId when you include productId. Products are location-specific. The product must belong to the selected location and be available on the chosen surface. Do not substitute a POS item ID, Stripe price ID, product name, location name, or organization slug for a Nautilus site or product ID.

Get the correct IDs

The safest method is to copy them from a working customer flow:

Open the live checkout page or storefront from Nautilus.
Select the intended location.
Select the intended product.
Copy the resulting browser URL. Nautilus adds locationId and productId as the selection changes.
Open the copied URL in a clean browser session.
Confirm the visible location, product name, price, and purchase terms.

You can also retrieve sites, products, and checkout links through the Nautilus API.

Invalid, hidden, or mismatched IDs can return a valid page that falls back to the location or product selection screen. An HTTP 200 response does not prove that preselection worked.

Add a link or button

Use the preselected URL as a normal link:

<a
  href="https://www.nautilus-app.com/c/checkout/CHECKOUT_LINK_ID?locationId=SITE_ID&productId=PRODUCT_ID"
  target="_blank"
  rel="noopener noreferrer"
>
  Buy now
</a>

For a storefront, change the href to the storefront URL:

<a
  href="https://www.nautilus-app.com/c/storefront/ORGANIZATION_SLUG?locationId=SITE_ID&productId=PRODUCT_ID"
  target="_blank"
  rel="noopener noreferrer"
>
  Buy now
</a>

Embed a checkout page

The Nautilus loader creates the iframe, enables payment and geolocation permissions, adds embedded=true, and automatically resizes the iframe as its content changes.

<div
  data-nautilus-embed="checkout"
  data-src="/c/checkout/CHECKOUT_LINK_ID?locationId=SITE_ID&productId=PRODUCT_ID"
  data-height="800px"
></div>

<script>
  window.NautilusEmbedConfig = {
    baseUrl: "https://www.nautilus-app.com",
  };
</script>
<script src="https://www.nautilus-app.com/embed/loader.js"></script>

Paste the <div> where the checkout should appear. Define window.NautilusEmbedConfig before you load loader.js. Load loader.js only once per page. data-height sets the initial minimum height while automatic resizing starts.

Embed a storefront

Use the same loader with data-nautilus-embed="storefront":

<div
  data-nautilus-embed="storefront"
  data-src="/c/storefront/ORGANIZATION_SLUG?locationId=SITE_ID&productId=PRODUCT_ID"
  data-height="800px"
></div>

<script>
  window.NautilusEmbedConfig = {
    baseUrl: "https://www.nautilus-app.com",
  };
</script>
<script src="https://www.nautilus-app.com/embed/loader.js"></script>

To show the host website’s background behind the storefront, add transparent=true to data-src:

<div
  data-nautilus-embed="storefront"
  data-src="/c/storefront/ORGANIZATION_SLUG?locationId=SITE_ID&productId=PRODUCT_ID&transparent=true"
  data-height="800px"
></div>

Open checkout in a drawer

Use a drawer when you want customers to start checkout without leaving the current page. The host website owns the trigger, backdrop, drawer shell, responsive layout, and accessibility behavior. Nautilus supplies the checkout page or storefront that runs inside the iframe. loader.js does not provide a drawer API. On desktop, open the shell as a drawer from the right. On mobile, present the same shell as a bottom sheet. Build the iframe URL from the checkout page or storefront URL. Add locationId, optional productId, and embedded=true. Set allow="geolocation; payment" on the iframe. The following example uses one script block for every trigger on the page. Each trigger can use a different checkout page or storefront URL, location, product, and accessible title. Keep the direct URL in each trigger’s href. It remains available when JavaScript is disabled. The open drawer also includes a direct link in case a browser extension or Content Security Policy blocks the iframe.

<style>
  .nautilus-checkout-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: #075985;
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
  }

  .nautilus-checkout-dialog {
    position: fixed;
    inset: 0 0 0 auto;
    box-sizing: border-box;
    width: min(100%, 32rem);
    max-width: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #ffffff;
    color: #0f172a;
    box-shadow: -12px 0 36px rgb(15 23 42 / 24%);
  }

  .nautilus-checkout-dialog[open] {
    display: flex;
    flex-direction: column;
    animation: nautilus-checkout-drawer-in 180ms ease-out;
  }

  .nautilus-checkout-dialog::backdrop {
    background: rgb(15 23 42 / 55%);
    animation: nautilus-checkout-backdrop-in 180ms ease-out;
  }

  .nautilus-checkout-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
  }

  .nautilus-checkout-title {
    margin: 0;
    font: 600 1rem/1.4 system-ui, sans-serif;
  }

  .nautilus-checkout-close {
    display: inline-grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: 1.75rem/1 system-ui, sans-serif;
  }

  .nautilus-checkout-close:hover {
    background: #f1f5f9;
  }

  .nautilus-checkout-close:focus-visible,
  .nautilus-checkout-trigger:focus-visible,
  .nautilus-checkout-direct-link:focus-visible {
    outline: 3px solid #0ea5e9;
    outline-offset: 2px;
  }

  .nautilus-checkout-frame-wrap {
    position: relative;
    min-height: 0;
    flex: 1 1 auto;
  }

  .nautilus-checkout-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .nautilus-checkout-loading {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #ffffff;
    text-align: center;
  }

  .nautilus-checkout-loading[hidden] {
    display: none;
  }

  .nautilus-checkout-spinner {
    width: 2rem;
    height: 2rem;
    margin: 0 auto;
    border: 3px solid #cbd5e1;
    border-top-color: #0284c7;
    border-radius: 999px;
    animation: nautilus-checkout-spin 700ms linear infinite;
  }

  .nautilus-checkout-fallback {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.75rem 1rem;
    border-top: 1px solid #e2e8f0;
    font: 0.875rem/1.5 system-ui, sans-serif;
    text-align: center;
  }

  .nautilus-checkout-direct-link {
    color: #0369a1;
  }

  @keyframes nautilus-checkout-drawer-in {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }

  @keyframes nautilus-checkout-sheet-in {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  @keyframes nautilus-checkout-backdrop-in {
    from {
      background: rgb(15 23 42 / 0%);
    }
  }

  @keyframes nautilus-checkout-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @media (max-width: 640px) {
    .nautilus-checkout-dialog {
      inset: auto 0 0;
      width: 100%;
      height: min(85dvh, 48rem);
      margin: auto 0 0;
      border-radius: 1rem 1rem 0 0;
      box-shadow: 0 -12px 36px rgb(15 23 42 / 24%);
    }

    .nautilus-checkout-dialog[open] {
      animation-name: nautilus-checkout-sheet-in;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .nautilus-checkout-dialog[open],
    .nautilus-checkout-dialog::backdrop,
    .nautilus-checkout-spinner {
      animation: none;
    }
  }
</style>

<!-- Add as many triggers as you need. Keep each href as a direct fallback. -->
<a
  class="nautilus-checkout-trigger"
  href="https://www.nautilus-app.com/c/checkout/CHECKOUT_LINK_ID?locationId=SITE_ID&productId=PRODUCT_ID"
  data-nautilus-checkout-trigger
  data-nautilus-url="https://www.nautilus-app.com/c/checkout/CHECKOUT_LINK_ID"
  data-nautilus-location-id="SITE_ID"
  data-nautilus-product-id="PRODUCT_ID"
  data-nautilus-title="Purchase a wash plan"
>
  Buy now
</a>

<a
  class="nautilus-checkout-trigger"
  href="https://www.nautilus-app.com/c/storefront/ORGANIZATION_SLUG?locationId=SITE_ID"
  data-nautilus-checkout-trigger
  data-nautilus-url="https://www.nautilus-app.com/c/storefront/ORGANIZATION_SLUG"
  data-nautilus-location-id="SITE_ID"
  data-nautilus-title="Browse wash plans"
>
  View all plans
</a>

<!-- Install this script once, even when the page has multiple triggers. -->
<script>
  (() => {
    const triggerSelector = "[data-nautilus-checkout-trigger]";
    let lastTrigger = null;
    let scrollState = null;

    const dialog = document.createElement("dialog");
    dialog.className = "nautilus-checkout-dialog";
    dialog.setAttribute("role", "dialog");
    dialog.setAttribute("aria-modal", "true");

    const header = document.createElement("div");
    header.className = "nautilus-checkout-header";

    const title = document.createElement("h2");
    title.className = "nautilus-checkout-title";
    title.id = "nautilus-checkout-title";
    dialog.setAttribute("aria-labelledby", title.id);

    const closeButton = document.createElement("button");
    closeButton.className = "nautilus-checkout-close";
    closeButton.type = "button";
    closeButton.setAttribute("aria-label", "Close checkout");
    closeButton.textContent = "×";

    header.append(title, closeButton);

    const frameWrap = document.createElement("div");
    frameWrap.className = "nautilus-checkout-frame-wrap";

    const loading = document.createElement("div");
    loading.className = "nautilus-checkout-loading";
    loading.setAttribute("role", "status");
    loading.setAttribute("aria-live", "polite");

    const spinner = document.createElement("div");
    spinner.className = "nautilus-checkout-spinner";
    spinner.setAttribute("aria-hidden", "true");

    const loadingText = document.createElement("span");
    loading.append(spinner, loadingText);

    const fallback = document.createElement("p");
    fallback.className = "nautilus-checkout-fallback";
    fallback.append(document.createTextNode("Trouble loading checkout? "));

    const directLink = document.createElement("a");
    directLink.className = "nautilus-checkout-direct-link";
    directLink.target = "_blank";
    directLink.rel = "noopener noreferrer";
    directLink.textContent = "Open it in a new tab";
    fallback.append(directLink);

    frameWrap.append(loading);
    dialog.append(header, frameWrap, fallback);
    document.body.append(dialog);

    function buildUrls(trigger) {
      const configuredUrl = trigger.dataset.nautilusUrl;
      if (!configuredUrl) {
        throw new Error("A Nautilus checkout or storefront URL is required.");
      }

      const directUrl = new URL(
        configuredUrl,
        window.location.href,
      );

      if (directUrl.protocol !== "https:") {
        throw new Error("The Nautilus URL must use HTTPS.");
      }

      const locationId = trigger.dataset.nautilusLocationId;
      if (!locationId) {
        throw new Error("A Nautilus location ID is required.");
      }

      const directParams = new URLSearchParams(directUrl.search);
      directParams.set("locationId", locationId);

      const productId = trigger.dataset.nautilusProductId;
      if (productId) {
        directParams.set("productId", productId);
      } else {
        directParams.delete("productId");
      }

      directParams.delete("embedded");
      directUrl.search = directParams.toString();

      const frameUrl = new URL(directUrl.toString());
      const frameParams = new URLSearchParams(frameUrl.search);
      frameParams.set("embedded", "true");
      frameUrl.search = frameParams.toString();

      return { directUrl, frameUrl };
    }

    function lockScroll() {
      const root = document.documentElement;
      const body = document.body;

      scrollState = {
        x: window.scrollX,
        y: window.scrollY,
        rootOverflow: root.style.overflow,
        bodyOverflow: body.style.overflow,
        bodyPosition: body.style.position,
        bodyTop: body.style.top,
        bodyLeft: body.style.left,
        bodyRight: body.style.right,
        bodyWidth: body.style.width,
      };

      root.style.overflow = "hidden";
      body.style.overflow = "hidden";
      body.style.position = "fixed";
      body.style.top = `-${scrollState.y}px`;
      body.style.left = `-${scrollState.x}px`;
      body.style.right = "0";
      body.style.width = "100%";
    }

    function restoreScroll() {
      if (!scrollState) return;

      const root = document.documentElement;
      const body = document.body;
      const { x, y } = scrollState;

      root.style.overflow = scrollState.rootOverflow;
      body.style.overflow = scrollState.bodyOverflow;
      body.style.position = scrollState.bodyPosition;
      body.style.top = scrollState.bodyTop;
      body.style.left = scrollState.bodyLeft;
      body.style.right = scrollState.bodyRight;
      body.style.width = scrollState.bodyWidth;
      scrollState = null;
      window.scrollTo(x, y);
    }

    function openDrawer(trigger, urls) {
      const accessibleTitle =
        trigger.dataset.nautilusTitle || "Nautilus checkout";

      lastTrigger = trigger;
      title.textContent = accessibleTitle;
      loadingText.textContent = `Loading ${accessibleTitle}`;
      loading.hidden = false;
      directLink.href = urls.directUrl.toString();
      frameWrap.setAttribute("aria-busy", "true");

      const iframe = document.createElement("iframe");
      iframe.className = "nautilus-checkout-frame";
      iframe.title = accessibleTitle;
      iframe.allow = "geolocation; payment";
      iframe.loading = "eager";
      iframe.addEventListener(
        "load",
        () => {
          loading.hidden = true;
          frameWrap.setAttribute("aria-busy", "false");
        },
        { once: true },
      );

      frameWrap.querySelector("iframe")?.remove();
      iframe.src = urls.frameUrl.toString();
      frameWrap.append(iframe);
      lockScroll();
      dialog.showModal();
      closeButton.focus({ preventScroll: true });
    }

    function closeDrawer() {
      if (dialog.open) dialog.close();
    }

    document.addEventListener("click", (event) => {
      const trigger = event.target.closest?.(triggerSelector);
      if (!trigger) return;

      if (
        event.button !== 0 ||
        event.metaKey ||
        event.ctrlKey ||
        event.shiftKey ||
        event.altKey
      ) {
        return;
      }

      // Older browsers follow the trigger's direct href.
      if (typeof dialog.showModal !== "function") return;

      try {
        const urls = buildUrls(trigger);
        event.preventDefault();
        openDrawer(trigger, urls);
      } catch (error) {
        console.error(error);
        // Keep the trigger's href available as the direct-link fallback.
      }
    });

    closeButton.addEventListener("click", closeDrawer);

    dialog.addEventListener("cancel", (event) => {
      event.preventDefault();
      closeDrawer();
    });

    dialog.addEventListener("click", (event) => {
      if (event.target !== dialog) return;

      const bounds = dialog.getBoundingClientRect();
      const clickedBackdrop =
        event.clientX < bounds.left ||
        event.clientX > bounds.right ||
        event.clientY < bounds.top ||
        event.clientY > bounds.bottom;

      if (clickedBackdrop) closeDrawer();
    });

    dialog.addEventListener("close", () => {
      frameWrap.querySelector("iframe")?.remove();
      frameWrap.setAttribute("aria-busy", "false");
      restoreScroll();

      const trigger = lastTrigger;
      lastTrigger = null;
      trigger?.focus({ preventScroll: true });
    });
  })();
</script>

Replace every placeholder in both href and the matching data attributes. data-nautilus-url accepts either a checkout page or storefront base URL. data-nautilus-location-id is required. data-nautilus-product-id is optional. Use data-nautilus-title for a concise title that identifies the experience to screen-reader users. The script creates text nodes and assigns textContent for the per-trigger title. Do not insert titles or other data-attribute values with innerHTML.

Implement the drawer in React

In React, keep the selected URL and open state in the host application. Store the trigger in a ref so you can restore focus after closing. Build the direct and iframe URLs in a pure helper with new URL() and URLSearchParams. Render the shell in a portal, lock both root and body scrolling in an effect, and set title and allow="geolocation; payment" on the iframe. You can implement the focus trap and responsive shell with the native <dialog> element. Libraries such as Vaul or Radix Dialog can instead supply focus, dismissal, and touch-gesture primitives. Neither library is required. The host application still owns the shell and passes the constructed Nautilus URL to the iframe.

Style the drawer and checkout

The parent page can style the trigger, backdrop, loading state, and drawer shell. The Nautilus page is cross-origin, so parent-page CSS cannot style anything inside the iframe. Configure checkout colors, logos, and other branding in Nautilus.

Handle a completed purchase

Set onSuccess before loading the Nautilus script. It can redirect the host page:

<script>
  window.NautilusEmbedConfig = {
    baseUrl: "https://www.nautilus-app.com",
    onSuccess: "https://example.com/thank-you",
  };
</script>

Or it can run a callback:

<script>
  window.NautilusEmbedConfig = {
    baseUrl: "https://www.nautilus-app.com",
    onSuccess(event) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({ event: "nautilus_purchase_completed" });
    },
  };
</script>

Treat the callback as a conversion signal, not as the source of payment truth. Use Nautilus purchase records or a server-side integration for reconciliation.

Use the loader on a dynamic site

If your application adds an embed container after loader.js has loaded, initialize new containers after rendering:

window.NautilusEmbed.init();

You can also create an embed directly:

<div id="checkout-container"></div>
<script>
  window.NautilusEmbed.create({
    target: "#checkout-container",
    src: "/c/checkout/CHECKOUT_LINK_ID?locationId=SITE_ID&productId=PRODUCT_ID",
    height: "800px",
  });
</script>

Use a plain iframe

Use the Nautilus loader whenever possible. If a CMS blocks custom JavaScript, use a fixed-height iframe:

<iframe
  title="Purchase a car wash"
  src="https://www.nautilus-app.com/c/checkout/CHECKOUT_LINK_ID?locationId=SITE_ID&productId=PRODUCT_ID&embedded=true"
  style="width: 100%; height: 900px; border: 0; display: block"
  loading="lazy"
  allow="geolocation; payment"
></iframe>

This fallback does not resize automatically. Replace its src with the storefront URL when embedding a storefront. The payment permission is required for browser wallets such as Apple Pay or Google Pay when the browser and payment configuration support them.

Configure Content Security Policy

If your website uses a restrictive Content Security Policy, allow Nautilus as a frame source. The framework-agnostic drawer does not load loader.js or jsDelivr:

frame-src https://www.nautilus-app.com;

Move the example’s CSS and JavaScript into same-origin files, or authorize the inline blocks with your normal nonce or hash mechanism. Do not add unsafe-inline only for this integration. For a loader-based inline embed, also allow the Nautilus script and the iframe-resizer dependency. Merge these origins into your existing policy:

script-src https://www.nautilus-app.com https://cdn.jsdelivr.net;
frame-src https://www.nautilus-app.com;

If your policy requires a nonce or hash for inline scripts, apply your normal CSP mechanism to the NautilusEmbedConfig block. The loader fetches @iframe-resizer/parent from jsDelivr. Contact Nautilus if you must self-host that dependency.

Preserve campaign attribution

The loader preserves parameters already present in data-src. It also forwards non-empty query parameters from the host page, supporting attribution parameters such as UTMs and click IDs. Do not place customer personal information, credentials, access tokens, or other secrets in the host page URL.

Verify the integration

Test every location and product combination your website exposes:

Click the website’s source link or button.
Confirm the destination URL contains the expected locationId and productId.
Reload that exact URL in a clean browser session.
Confirm the visible location, product name, price, recurrence or trial terms, and organization branding.
For a drawer, confirm it opens from the right on desktop and from the bottom on mobile.
Inspect the iframe and confirm it includes allow="geolocation; payment". Test browser-wallet availability on an eligible browser and device.
Navigate by keyboard. Confirm focus enters and stays within the open dialog, the close button has an accessible name, and focus returns to the original trigger after closing.
Close the drawer with Escape, the close button, and a backdrop click.
Confirm the page behind the drawer does not scroll while open. Confirm its original scroll position and scroll behavior return after every dismissal method.
Disable JavaScript and confirm each trigger opens its href. Block the Nautilus frame in a test policy and confirm the drawer’s direct link still works.
For a loader-based inline embed, test desktop and mobile widths, automatic height changes, scrolling, and browser-wallet availability.

Only complete a test purchase when the environment, payment method, and customer scope are explicitly authorized.

Troubleshoot the integration

The wrong product is selected

Confirm the parameter names are exactly locationId and productId.
Confirm both values came from the same working location and product selection.
Confirm the product belongs to the selected location and remains available on the checkout page or storefront.
Test from a clean URL instead of relying on browser history.

The embed is blank

Open the direct checkout page or storefront URL and confirm it works.
For a checkout page, confirm the page is active.
Confirm the host site allows custom scripts and iframes.
Check the browser console for blocked requests to www.nautilus-app.com or cdn.jsdelivr.net.
Confirm loader.js loads after window.NautilusEmbedConfig is defined.

The embed does not resize

Confirm the host can load https://cdn.jsdelivr.net/npm/@iframe-resizer/parent@5.
Confirm the iframe URL includes embedded=true. The loader adds it automatically.
Keep a reasonable data-height so the checkout remains usable if the resize script is blocked.

Apple Pay or Google Pay is missing

Use the Nautilus loader, which grants the iframe payment permission.
For a manual iframe, include allow="geolocation; payment".
Wallet display still depends on browser, device, domain, and payment-provider eligibility.

Checkout and storefront

Forms

Embed checkout pages and storefronts

Choose a surface

Get the base URL

Preselect a location and product

Select a location

Select a location and product

Get the correct IDs

Add a link or button

Embed a checkout page

Embed a storefront

Open checkout in a drawer

Implement the drawer in React

Style the drawer and checkout

Handle a completed purchase

Use the loader on a dynamic site

Use a plain iframe

Configure Content Security Policy

Preserve campaign attribution

Verify the integration

Troubleshoot the integration

The wrong product is selected

The embed is blank

The embed does not resize

Apple Pay or Google Pay is missing

​Choose a surface

​Get the base URL

​Preselect a location and product

​Select a location

​Select a location and product

​Get the correct IDs

​Add a link or button

​Embed a checkout page

​Embed a storefront

​Open checkout in a drawer

​Implement the drawer in React

​Style the drawer and checkout

​Handle a completed purchase

​Use the loader on a dynamic site

​Use a plain iframe

​Configure Content Security Policy

​Preserve campaign attribution

​Verify the integration

​Troubleshoot the integration

​The wrong product is selected

​The embed is blank

​The embed does not resize

​Apple Pay or Google Pay is missing

Choose a surface

Get the base URL

Preselect a location and product

Select a location

Select a location and product

Get the correct IDs

Add a link or button

Embed a checkout page

Embed a storefront

Open checkout in a drawer

Implement the drawer in React

Style the drawer and checkout

Handle a completed purchase

Use the loader on a dynamic site

Use a plain iframe

Configure Content Security Policy

Preserve campaign attribution

Verify the integration

Troubleshoot the integration

The wrong product is selected

The embed is blank

The embed does not resize

Apple Pay or Google Pay is missing