> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pocketsflow.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Buy button for any website

> Sell anywhere: add a Pocketsflow buy button to your own site and open the checkout on top of the page.

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](/integrations/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.

<Tip>
  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.
</Tip>

## Quick start

```html theme={"system"}
<!-- 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](/payments/payment-methods#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. |

```html theme={"system"}
<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>
```

<Note>
  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](/api-webhooks/events).
</Note>

## 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"`. |

```js theme={"system"}
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.

## Advanced: the JavaScript popup

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.