Hydrogen / Headless

The FlexyPe Checkout SDK is a lightweight browser script that opens checkout from any storefront built on Shopify — including Shopify Hydrogen and other headless or React frontends. Load the script, then call a global window.FlexyPeCheckout object to open or close checkout.

Complete the Shopify onboarding first. It’s mandatory — your store must be onboarded and your domain registered with FlexyPe before you can integrate on any storefront.

Contact the FlexyPe team for your script URL and to register your store domain before you start.

Add the script

Place the script tag in your site’s <head>. The defer attribute ensures it loads without blocking rendering.

<script src="https://static.flexype.io/scripts/checkout.min.js" defer></script>

Once loaded, the global window.FlexyPeCheckout object becomes available with open and close methods.

In a Hydrogen or React app, add the tag to your root HTML document (e.g. the <head> in your root route / document component) so it loads once for the whole app.

How store detection works

FlexyPe detects your store from the domain the script runs on. That domain must match the store domain you registered with us during onboarding — otherwise checkout won’t open.

Production: no extra config needed. The SDK uses your live domain automatically.
Local development: add a data-shop-domain attribute to the script tag with your registered domain so the SDK can detect the store while running on localhost.

<script
  src="https://static.flexype.io/scripts/checkout.min.js"
  data-shop-domain="your-domain.com"
  defer
></script>

data-shop-domain is for local development only. Remove it on production, where the store is detected from the live domain.

Open checkout

FlexyPeCheckout.open accepts a params object whose flow field determines the checkout behavior.

Cart checkout
Buy now

Use the checkout flow to open checkout with cart items.

window.FlexyPeCheckout.open({
  flow: "checkout",
  source: "checkout_button", // optional
  items: [
    { product_id: 123456, variant_id: 789012, quantity: 1 },
    { product_id: 234567, variant_id: 890123, quantity: 2 },
  ],
});

flow

string

required

Must be "checkout".

items

array

Items to check out. Each item has product_id, variant_id, and quantity.

source

string

Optional label identifying where checkout was triggered (for analytics).

session

string

Optional session ID for resuming an abandoned checkout.

Use the buynow flow for Buy Now buttons. It requires a reference to the button element that triggered the action.

window.FlexyPeCheckout.open({
  flow: "buynow",
  btn: document.getElementById("buy-now-btn"),
  variantId: 789012, // optional
});

flow

string

required

Must be "buynow".

btn

HTMLButtonElement

required

Reference to the button element that triggered the action.

variantId

number

The variant ID of the product to purchase.

Close checkout

Close the checkout programmatically at any time:

window.FlexyPeCheckout.close();

Examples

<button id="buy-now-btn" onclick="handleBuyNow(this, 789012)">Buy Now</button>

<script>
  function handleBuyNow(btn, variantId) {
    window.FlexyPeCheckout.open({
      flow: "buynow",
      btn: btn,
      variantId: variantId,
    });
  }
</script>

<button onclick="handleCartCheckout()">Checkout</button>

<script>
  async function handleCartCheckout() {
    // Step 1: Get current cart items
    // Step 2: Map them to { product_id, variant_id, quantity }
    const items = [/* ...mapped cart items... */];

    // Step 3: Open checkout
    window.FlexyPeCheckout.open({
      flow: "checkout",
      source: "cart_checkout_button",
      items: items,
    });
  }
</script>

Quick reference

// Minimal — single item checkout
window.FlexyPeCheckout.open({
  flow: "checkout",
  items: [{ product_id: 123456, variant_id: 789012, quantity: 1 }],
});

// Full — checkout with source
window.FlexyPeCheckout.open({
  flow: "checkout",
  source: "buy_now_button",
  items: [{ product_id: 123456, variant_id: 789012, quantity: 1 }],
});

// Buy Now
window.FlexyPeCheckout.open({
  flow: "buynow",
  btn: document.querySelector("#buy-now-btn"),
  variantId: 789012,
});

// Close checkout
window.FlexyPeCheckout.close();

Testing on localhost

Use the data-shop-domain attribute (see How store detection works) to point the SDK at your registered store while developing locally.

You can test the full FlexyPe checkout flow on localhost, but payments may not go through — payment gateways usually block local environments.

Need help?

Reach out to the FlexyPe team at [email protected] for your script URL and any integration support.

Get Started

Platforms

Integrations

Webhooks

Hydrogen / Headless

Add the script

How store detection works

Open checkout

Close checkout

Examples

Quick reference

Testing on localhost

Need help?

​Add the script

​How store detection works

​Open checkout

​Close checkout

​Examples

​Quick reference

​Testing on localhost

​Need help?

Add the script

How store detection works

Open checkout

Close checkout

Examples

Quick reference

Testing on localhost

Need help?