Skip to main content
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.in/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.in/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.
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.

​
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>

​
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.