Buy button for any website

Add one script and one link to any page that accepts HTML (Webflow, WordPress, Framer, Squarespace, Carrd, Ghost, a hand-written site). On WordPress, Framer and Webflow there is a ready-made integration: see Site builders. When a buyer clicks, the Pocketsflow checkout opens in an overlay on top of your page. They pay without leaving your site, and you can react to the purchase in JavaScript.

Copy a ready-made snippet from the dashboard: Products → ⋮ → Share → Embed on your website. Pick a button or a plain link, set the label, copy.

Quick start

<!-- 1. Once per page, anywhere (head or end of body) -->
<script src="https://app.pocketsflow.com/embed.js" defer></script>

<!-- 2. A Pocketsflow-styled buy button -->
<a
  href="https://yourstore.pocketsflow.com/checkout?productId=PRODUCT_ID"
  data-pocketsflow-button
>Buy now</a>

<!-- …or keep your own styling: any link with data-pocketsflow-checkout -->
<a
  href="https://yourstore.pocketsflow.com/checkout?productId=PRODUCT_ID"
  data-pocketsflow-checkout
>Get the guide</a>

The href is your normal checkout link (the one you get from Share). Use ?subscriptionId=… for a subscription. Any extra query parameters you already use (such as customerEmail, clientReferenceId or your own metadata) are kept. Without the script, or if it fails to load, the link still works: it simply opens the checkout page.

Attributes

Attribute	On	What it does
`data-pocketsflow-checkout`	any link or element	Opens its `href` in the overlay. The element keeps your site’s styling.
`data-pocketsflow-button`	any link or element	Same, and styles it as a Pocketsflow button (brand blue, 40px tall).
`data-pocketsflow-open="tab"`	a tagged element	Opens the checkout in a new tab instead of the overlay. Button styling is kept.

Either attribute may carry the checkout URL as its value (data-pocketsflow-checkout="https://…") when the element is not a link, for example a <button> or a <div>. Elements added after the page loads work too. Call Pocketsflow.refresh() to style buttons you add later. Cmd/Ctrl-click and middle-click keep the browser’s normal “open in new tab”.

How the overlay behaves

A centered dialog over a dimmed page, with a close button. Escape, the close button or a click on the backdrop closes it. Page scroll is locked while it is open, keyboard focus stays inside it, and focus returns to the button when it closes.
A spinner shows until the checkout is ready. If the checkout cannot load within 15 seconds, the overlay offers Open checkout in a new tab.
On screens narrower than 560px, the checkout opens in a new tab instead of an overlay.
After a successful payment the overlay shows the buyer’s thank-you page, with their download. It stays open until the buyer closes it (or you close it).
Apple Pay and Google Pay work in the overlay once your website’s domain is verified under Settings → Checkout. See Wallets on your own website.

Events

The script dispatches DOM events. They bubble from the clicked element, so you can listen on window or document.

Event	`event.detail`	When
`pocketsflow:open`	`{ url, mode }`, `mode` is `"overlay"` or `"tab"`	Before the checkout opens. Call `event.preventDefault()` to cancel.
`pocketsflow:success`	`{ url, orderId, productId, amount, currency, isSubscription, subscriptionId }`	Once per checkout, after the order exists.
`pocketsflow:close`	`{ url, completed }`	The overlay closed. `completed` is `true` after a purchase.

<script>
  window.addEventListener("pocketsflow:success", (event) => {
    const { orderId, amount, currency } = event.detail;
    // e.g. send a conversion to your analytics
    console.log("Paid", orderId, amount, currency);
  });

  window.addEventListener("pocketsflow:close", (event) => {
    if (event.detail.completed) window.location.href = "/thanks";
  });
</script>

Treat pocketsflow:success as a signal for the page, not as proof of payment. Fulfil orders from the order.completed webhook, which is signed. See Webhooks.

JavaScript API

The script exposes window.Pocketsflow:

Method	Description
`Pocketsflow.open(url, options?)`	Opens a checkout URL in the overlay (or a new tab on small screens). Pass `{ mode: "tab" }` to always use a new tab. Returns `false` for an invalid URL or a cancelled `pocketsflow:open`.
`Pocketsflow.close()`	Closes the overlay.
`Pocketsflow.refresh()`	Styles `data-pocketsflow-button` elements added after load.
`Pocketsflow.version`	The script version, e.g. `"1.1.0"`.

document.querySelector("#pricing-cta").addEventListener("click", () => {
  Pocketsflow.open(
    "https://yourstore.pocketsflow.com/checkout?productId=PRODUCT_ID",
  );
});

Including the script twice is harmless: the second copy does nothing.

Security

The overlay accepts messages only from the checkout frame it opened, and only from that checkout’s origin. A message posted by anything else on the page is ignored.
The checkout answers only the page that framed it, by its exact origin.
Only the checkout and thank-you pages can be framed. The Pocketsflow dashboard cannot be shown inside another site.

The older pocketsflow-popup.js integration (window.openPocketsflowCheckout, inline embeds with embedDivId, onSuccess callbacks) keeps working. See Checkout page. For new sites, embed.js is the simpler choice.

For creators

Create Tools

Selling products & subscriptions

Payments & payouts

Operating your business

For buyers

Quick start

Attributes

How the overlay behaves

Events

JavaScript API

Security

​Quick start

​Attributes

​How the overlay behaves

​Events

​JavaScript API

​Security

​Advanced: the JavaScript popup

Quick start

Attributes

How the overlay behaves

Events

JavaScript API

Security

Advanced: the JavaScript popup