@maytes/checkout-button 1.1.1 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,86 @@
 # Changelog
 
+## 1.2.1
+
+### Patch Changes
+
+- [#39](https://github.com/kttipay/maytes-checkout-button/pull/39) [`73d1f0c`](https://github.com/kttipay/maytes-checkout-button/commit/73d1f0ccb84ec22473e8a0b1ba17e923c254e2ee) Thanks [@kos-maytes](https://github.com/kos-maytes)! - The Split with Maytes button keeps its white label and logo, burgundy background and Maytes focus ring when hovered, focused or pressed on sites whose theme styles every button (for example WooCommerce's Storefront theme, which turned the label dark grey on hover). Host-page transitions no longer fade the logo, and the overlay's "Return to Maytes" link no longer picks up the theme's button background. A mouse click no longer shows the theme's focus outline on the button or the link; keyboard focus shows the Maytes focus ring on both.
+
+<!-- @hash-sri-start -->
+
+**SRI hashes** (use these in `<script integrity="..." crossorigin="anonymous">`):
+
+```
+checkout-button.js   sha384-0n2iIhZMofbJkzlb2mgQmm714yMFWW0079cxvVxCxZKPjjRHTrEBddxLRygUFUA/
+checkout-button.mjs  sha384-DvlD7lErx6rl9lPfEtS9tu9Hp+sb+LC8ZXkzCnfRxP2ruuHuE/toGraDj7Hp9KjU
+checkout-button.cjs  sha384-2h9J+cURwjqOA8QYBgt1LeulM0IgD6w1hCxdLdieKvuhDb1/ejuXT3rLEy5SXsb9
+checkout-button.element.js  sha384-NHwIzALKGM4v3zbs5kbpDmWb52EGQ6+NMh7ARB5UPTCbjwn3orJV1bDnXzgZrwck
+```
+
+**SemVer CDN links** (readable production pins; use with the SRI hashes above):
+
+- [checkout-button.js](https://js.maytes.co/v1.2.1/checkout-button.js)
+- [checkout-button.mjs](https://js.maytes.co/v1.2.1/checkout-button.mjs)
+- [checkout-button.cjs](https://js.maytes.co/v1.2.1/checkout-button.cjs)
+- [checkout-button.element.js](https://js.maytes.co/v1.2.1/checkout-button.element.js)
+
+**Hashed CDN links** (byte-level production pins; use with the SRI hashes above):
+
+- [checkout-button.299a037b.js](https://js.maytes.co/checkout-button.299a037b.js)
+- [checkout-button.67fdb2e1.mjs](https://js.maytes.co/checkout-button.67fdb2e1.mjs)
+- [checkout-button.332d26cc.cjs](https://js.maytes.co/checkout-button.332d26cc.cjs)
+- [checkout-button.element.afe71cd5.js](https://js.maytes.co/checkout-button.element.afe71cd5.js)
+
+<!-- @hash-sri-end -->
+## 1.2.0
+
+### Minor Changes
+
+- [#28](https://github.com/kttipay/maytes-checkout-button/pull/28) [`a5c64cd`](https://github.com/kttipay/maytes-checkout-button/commit/a5c64cd13d095296c4c49eb3d9478f437802f9e3) Thanks [@kos-maytes](https://github.com/kos-maytes)! - `renderButton()` accepts `radius` and `height` so the Split with Maytes button can match an express-checkout row (for example 6px corners at 48px next to Apple Pay and Google Pay); a button with a `height` keeps its label on one line. Every `maytes:checkout-*` event now carries `detail.instanceId` and `detail.source` (`'button'` or `'api'`), and each instance exposes `maytes.instanceId`, so pages with several instances can tell their events apart. Existing event fields and the default button are unchanged: without `radius`/`height` the button renders exactly as in 1.1. Events that had no `detail` (`opened`, `closed`) now carry `{ instanceId, source }`. TypeScript code that hand-builds a `MaytesSDK` object needs the new `instanceId` member.
+
+- [#30](https://github.com/kttipay/maytes-checkout-button/pull/30) [`ac332b7`](https://github.com/kttipay/maytes-checkout-button/commit/ac332b7bf5d361166484e1b657a1a303e22192ef) Thanks [@kos-maytes](https://github.com/kos-maytes)! - Add `<maytes-checkout-button>`, a standard custom element for any front-end stack (plain HTML, Vue/Nuxt, Angular, Svelte/SvelteKit, Solid, React 19). Import `@maytes/checkout-button/element` or load `https://js.maytes.co/v1/checkout-button.element.js`; set `environment` and the other options as attributes and `createCheckout` as a property, and listen for `maytes-opened`, `maytes-closed`, `maytes-redirected` and `maytes-failed` on the element. `open()` starts the checkout from your own button. Configuration mistakes arrive as `maytes-failed` with `reason: 'config'` instead of throwing. `checkout-button.js`, `.mjs` and `.cjs` are unchanged.
+
+- [#26](https://github.com/kttipay/maytes-checkout-button/pull/26) [`92ef8c0`](https://github.com/kttipay/maytes-checkout-button/commit/92ef8c009fb74f7639be7e9cb1b2cd8d90a1c2ee) Thanks [@kos-maytes](https://github.com/kos-maytes)! - Add `openCheckout({ mode })` to start the Maytes checkout from the merchant's own button, with the same popup, loader, overlay, events and fallbacks as the rendered button. It resolves with the launch result (`popup`, `redirected`, `failed`, `closed` or `ignored`) and never rejects.
+
+  No change for existing integrations: the rendered button looks and behaves exactly as before. TypeScript code that builds its own `MaytesSDK` object (for example a test fake) needs the new `openCheckout` member.
+
+- [#29](https://github.com/kttipay/maytes-checkout-button/pull/29) [`c62fa53`](https://github.com/kttipay/maytes-checkout-button/commit/c62fa53eec701d71a84e67240ea86a6167aac4c0) Thanks [@kos-maytes](https://github.com/kos-maytes)! - Add React bindings at `@maytes/checkout-button/react` (`MaytesProvider`, `MaytesButton`, `useMaytes`) and `maytes.onBusyChange()`. React is an optional peer dependency (18 or 19); the CDN bundle is unchanged.
+
+- [#36](https://github.com/kttipay/maytes-checkout-button/pull/36) [`59adae5`](https://github.com/kttipay/maytes-checkout-button/commit/59adae5dfdb72eb15f6ab4ad0174b9ac693e593f) Thanks [@kos-maytes](https://github.com/kos-maytes)! - `<MaytesButton>` accepts `redirectOverlay`, like `renderButton()`: with it, a same-tab launch shows the Maytes loading overlay while the checkout is created. Off by default.
+
+- [#32](https://github.com/kttipay/maytes-checkout-button/pull/32) [`7634c62`](https://github.com/kttipay/maytes-checkout-button/commit/7634c62e007b56db63502322cd77fa553f7a14b5) Thanks [@kos-maytes](https://github.com/kos-maytes)! - Add an opt-in `redirectOverlay` option to `renderButton()` and `openCheckout()`: when the checkout opens in the same tab (redirect mode, phones, blocked popups), the Maytes loading overlay shows while the checkout is created and clears itself after a back-button return. Off by default, so existing integrations are unchanged.
+
+### Patch Changes
+
+- [#21](https://github.com/kttipay/maytes-checkout-button/pull/21) [`e87a44b`](https://github.com/kttipay/maytes-checkout-button/commit/e87a44b9649686048fa1e622831d601b8eeed71c) Thanks [@kos-maytes](https://github.com/kos-maytes)! - Fix the checkout button's busy-state spinner not reappearing after a customer's first checkout attempt on a given rendered button. The button now tracks its current icon (logo or spinner) by direct reference instead of re-querying the DOM by class name, so the spinner swap works correctly on every checkout attempt, not just the first.
+
+<!-- @hash-sri-start -->
+
+**SRI hashes** (use these in `<script integrity="..." crossorigin="anonymous">`):
+
+```
+checkout-button.js   sha384-gIQUOEPPO0H+Stb2Ffa40dFxBxGnB40p1+AHttEYor5oZiVKoM+aKagIL3GuNkG1
+checkout-button.mjs  sha384-sKFZzp1oSiijC45OFR04FOjFQfgvxawtUp+u/qXvRu5s5ZF8iMSTHaQo5g+VLJ79
+checkout-button.cjs  sha384-fkm1nIhsGYEjDw3uc4cjdxui4K8H4HuPnIQ379GP1Y7vtwFC/Dw3M85KopqvjRl1
+checkout-button.element.js  sha384-Y3aDrAucY25r7DzSkYJpsjoazd67oBy4WSxbTXBgpaWaT6TOuEOW3PidCw0PeVb9
+```
+
+**SemVer CDN links** (readable production pins; use with the SRI hashes above):
+
+- [checkout-button.js](https://js.maytes.co/v1.2.0/checkout-button.js)
+- [checkout-button.mjs](https://js.maytes.co/v1.2.0/checkout-button.mjs)
+- [checkout-button.cjs](https://js.maytes.co/v1.2.0/checkout-button.cjs)
+- [checkout-button.element.js](https://js.maytes.co/v1.2.0/checkout-button.element.js)
+
+**Hashed CDN links** (byte-level production pins; use with the SRI hashes above):
+
+- [checkout-button.c640180e.js](https://js.maytes.co/checkout-button.c640180e.js)
+- [checkout-button.d6e444ee.mjs](https://js.maytes.co/checkout-button.d6e444ee.mjs)
+- [checkout-button.d7bc9aea.cjs](https://js.maytes.co/checkout-button.d7bc9aea.cjs)
+- [checkout-button.element.6c530c24.js](https://js.maytes.co/checkout-button.element.6c530c24.js)
+
+<!-- @hash-sri-end -->
+
 ## 1.1.1
 
 ### Patch Changes
@@ -29,6 +110,7 @@ checkout-button.cjs  sha384-oSekYX0Re0jdMsBU6uzxUedTM+Cnl8uF5y0wmZmjUHngtzr8Sdze
 - [checkout-button.2aad12c3.cjs](https://js.maytes.co/checkout-button.2aad12c3.cjs)
 
 <!-- @hash-sri-end -->
+
 ## 1.1.0
 
 ### Minor Changes

package/README.md

@@ -5,136 +5,155 @@
 <h1 align="center">@maytes/checkout-button</h1>
 
 <p align="center">
-  Drop-in <strong>Split with Maytes</strong> button — one script or import, and shoppers can split any checkout with friends.
+  The <strong>Split with Maytes</strong> button for your checkout page.<br>
+  Shoppers pay their share of the order and invite friends to pay theirs.
 </p>
 
 <p align="center">
   <a href="https://www.npmjs.com/package/@maytes/checkout-button"><img alt="npm version" src="https://img.shields.io/npm/v/@maytes/checkout-button?color=4A0324&label=npm"></a>
-  <a href="https://bundlephobia.com/package/@maytes/checkout-button"><img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/@maytes/checkout-button?color=FE572A&label=gzip"></a>
   <a href="./CHANGELOG.md"><img alt="provenance" src="https://img.shields.io/badge/npm-provenance-4A0324"></a>
   <a href="./LICENSE"><img alt="license" src="https://img.shields.io/badge/license-MIT-4A0324"></a>
   <a href="https://developers.maytes.co/checkout-button"><img alt="docs" src="https://img.shields.io/badge/docs-developers.maytes.co-FE572A"></a>
 </p>
 
----
+<p align="center">
+  <a href="#quickstart">Quickstart</a> ·
+  <a href="#choose-your-setup">Guides</a> ·
+  <a href="#install">Install</a> ·
+  <a href="#api">API</a> ·
+  <a href="https://developers.maytes.co/checkout-button">Integration guide</a>
+</p>
 
-Renders a button and launches the Maytes-hosted checkout in the top-level window. Default mode opens a centered popup on wide viewports, with a branded loader and automatic redirect fallback on phones or when the popup is blocked; `mode: 'redirect'` opts into a redirect always. Inside an iframe every redirect targets the top-level window.
+When a shopper clicks the button, it asks your server to create a Maytes checkout and opens it in a popup, or in the same tab on phones. Your server captures the payment when Maytes sends the `checkout.authorized` webhook.
 
-**📖 Full integration guide:** [developers.maytes.co/checkout-button](https://developers.maytes.co/checkout-button)
+## Features
 
-- **Framework-agnostic** — same factory whether it's a `<script>` tag or `import { Maytes }`; no React/Vue/Angular binding to keep in sync.
-- **Zero runtime dependencies** — a small, dependency-free bundle; ESM/CJS ship unminified so your bundler can tree-shake it.
-- **CSP-safe by construction** — no `eval`, `Function`, or string-form timers; every release is scanned for it before shipping.
-- **Evergreen CDN by default** — the recommended `<script>` tag always serves the newest release; pin a SemVer or content-hash URL instead if you'd rather freeze on a tested build.
-- **Signed provenance** — every npm release carries a [SLSA](https://slsa.dev) provenance attestation back to this repo's build.
+- **Any stack.** A `<script>` tag or `import { Maytes }`, with [a guide per stack](#choose-your-setup), React components and a web component.
+- **No dependencies.** ESM and CommonJS builds ship unminified, so your bundler tree-shakes them.
+- **CSP-safe.** No `eval`, `Function` or string timers; every release is scanned.
+- **Evergreen CDN.** `/v1/` always serves the newest `1.x`, so you get fixes without redeploying.
+- **Signed releases.** Every npm release carries [SLSA](https://slsa.dev) provenance.
 
-## Contents
+## Quickstart
 
-- [Install](#install)
-- [Usage](#usage)
-- [API](#api)
-- [Mobile app](#mobile-app)
-- [Development](#development)
+```html
+<div id="maytes-button"></div>
+
+<script src="https://js.maytes.co/v1/checkout-button.js" crossorigin="anonymous"></script>
+<script>
+  const maytes = window.Maytes({
+    environment: 'sandbox',
+    createCheckout: async () => {
+      const res = await fetch('/api/maytes/checkout', { method: 'POST' });
+      if (!res.ok) throw new Error('Could not create the Maytes checkout');
+      return res.json(); // { checkoutId, checkoutUrl }
+    },
+  });
+
+  maytes.renderButton(document.getElementById('maytes-button'), { block: true });
+</script>
+```
 
-## Install
+Your server creates the checkout behind `POST /api/maytes/checkout`; [Your server](docs/guides/server.md) shows how. Using a framework? Pick it below.
 
-### Script tag (CDN)
+<a id="usage"></a>
 
-|  | Evergreen (recommended) | Pinned |
-|---|---|---|
-| **Use when** | Default — always get the newest `1.x` release | You'd rather freeze on a tested build |
-| **Guarantee** | Always current; a bad release reaches you immediately | The bytes you tested are the bytes shipped, forever |
-| **SRI** | Not possible | Yes |
+## Choose your setup
 
-### Evergreen (recommended)
+- **Frontend:** [HTML](docs/guides/quickstart-html.md) · [npm](docs/guides/quickstart-npm.md) · [React](docs/guides/react.md) · [Next.js](docs/guides/nextjs.md) · [Vue and Nuxt](docs/guides/vue-nuxt.md) · [Angular](docs/guides/angular.md) · [Svelte](docs/guides/svelte.md) · [Solid](docs/guides/solid.md) · [Web component](docs/guides/web-component.md)
+- **Integration:** [Your server](docs/guides/server.md) · [Stripe Payment Element](docs/guides/stripe-payment-element.md) · [Your own button](docs/guides/own-button.md)
+
+## Install
+
+**Script tag**
 
 ```html
 <script src="https://js.maytes.co/v1/checkout-button.js"
         crossorigin="anonymous"></script>
 ```
 
-No `integrity` attribute is possible here — the bytes change without notice as new `1.x` releases ship. Trust the origin via CSP instead:
+Always serves the newest `1.x` release, so you get fixes without redeploying. It won't jump to a future `2.x`: move to `/v2/checkout-button.js` yourself once that ships.
 
-```
-Content-Security-Policy: script-src 'self' https://js.maytes.co;
-```
-
-`/v1/` tracks the newest `1.x` release only; it won't jump to a future `2.x` (move to `/v2/checkout-button.js` explicitly once that ships). Poll `https://js.maytes.co/integrity.json` if you want to detect changes yourself.
-
-### Pinned (SemVer or content hash)
+<details>
+<summary><b>CSP</b></summary>
 
-For a guarantee instead of convenience — freeze on a tested build, update on your own schedule:
+Allow the CDN origin in your Content Security Policy:
 
-<!-- @cdn-example-start -->
-```html
-<script src="https://js.maytes.co/v1.1.1/checkout-button.js"
-        integrity="sha384-…"
-        crossorigin="anonymous"></script>
 ```
-
-```html
-<script src="https://js.maytes.co/checkout-button.4b780d52.js"
-        integrity="sha384-…"
-        crossorigin="anonymous"></script>
+Content-Security-Policy: script-src 'self' https://js.maytes.co;
 ```
-<!-- @cdn-example-end -->
 
-Both URLs are the same release bytes with the same SRI value — pick either. Full version/hash/SRI history: [`CHANGELOG.md`](./CHANGELOG.md), [releases](https://github.com/kttipay/maytes-checkout-button/releases), `https://js.maytes.co/integrity.json`. Pinned URLs never change once published.
+No `integrity` attribute is possible on this URL, because its bytes change as new `1.x` releases ship. Poll `https://js.maytes.co/integrity.json` if you want to detect changes yourself.
+
+</details>
 
-### npm
+**npm**
 
 ```bash
 npm install @maytes/checkout-button
 ```
 
-## Usage
+ESM (`import`) and CommonJS (`require`) builds ship unminified with type declarations; your bundler minifies them.
+
+## API
 
-`Maytes` is a callable factory (Stripe-style). Each call returns an isolated SDK instance.
+`Maytes` is a callable factory, like `Stripe()`. Each call returns an isolated instance.
 
 ```ts
 import { Maytes } from '@maytes/checkout-button';
 
 const maytes = Maytes({
+  environment: 'sandbox',
   createCheckout: async () => {
-    const res = await fetch('/api/maytes/create-checkout', { method: 'POST' });
-    return res.json(); // { checkoutId: string, checkoutUrl?: string }
+    const res = await fetch('/api/maytes/checkout', { method: 'POST' });
+    if (!res.ok) throw new Error('Could not create the Maytes checkout');
+    return res.json(); // { checkoutId, checkoutUrl }
   },
-  environment: 'sandbox',
 });
 
-const cleanup = maytes.renderButton(document.getElementById('slot'), { block: true });
+maytes.renderButton(document.getElementById('maytes-button')!, { block: true });
+```
 
-// Opt into same-window redirect instead of the default popup:
-maytes.renderButton(document.getElementById('redirect-slot'), { block: true, mode: 'redirect' });
+| Member | Purpose |
+|---|---|
+| `Maytes({ createCheckout, environment })` | Creates an instance. `createCheckout` asks your server for `{ checkoutId, checkoutUrl? }`; `environment` is `'sandbox'` or `'production'`. |
+| `renderButton(container, { label, block, mode, radius, height })` | Renders the button and returns a function that removes it. `mode` is `'popup'` (default) or `'redirect'`; `radius` and `height` fit it next to wallet buttons. |
+| `openCheckout({ mode })` | Starts the checkout from your own button, as a click on the rendered button does. See [Using your own button](docs/guides/own-button.md). |
+| `instanceId` | Read-only id of the instance; every `maytes:checkout-*` event carries it in `event.detail`. |
+| `onBusyChange(listener)` | Calls `listener(true)` when a launch starts and `listener(false)` when it ends; returns a function that stops listening. |
+| `redirectToCheckout({ checkoutId, replace })` | Sends the current tab to a checkout you already created. |
+| `checkoutUrl({ checkoutId })` | Builds the hosted checkout URL. |
+| `destroy()` | Tears down the instance, its buttons, listeners and overlay. Call it on unmount. |
+| `maytes:checkout-opened` / `-closed` / `-redirected` / `-failed` | `CustomEvent`s on `document` describing what the button did. |
 
-// Imperative alternatives:
-maytes.redirectToCheckout({ checkoutId });
-const url = maytes.checkoutUrl({ checkoutId });
+Style the button from CSS with `--maytes-button-height`, `--maytes-button-radius` and `--maytes-button-font-size`; see the [API reference](docs/guides/api.md#styling-with-css-custom-properties).
 
-// Teardown:
-cleanup();
-maytes.destroy();
-```
+Full reference: [API](docs/guides/api.md) · [Events](docs/guides/events.md).
 
-Via the script tag, the same factory is available as the global `window.Maytes(...)`.
+## More guides
 
-## API
+- **Reference:** [API](docs/guides/api.md) · [Events](docs/guides/events.md) · [Popup, redirect and iframes](docs/guides/launch-behaviour.md) · [Security and CSP](docs/guides/security-csp.md)
+- **Help:** [Troubleshooting](docs/guides/troubleshooting.md)
+- **Internals:** [Technical overview](docs/overview.md) · [CDN versioning decision record](docs/cdn-versioning.md)
 
-| Method | Purpose |
-|---|---|
-| `Maytes(options)` | Create an SDK instance. `options.createCheckout` mints a checkout server-side; `options.environment` selects the Maytes environment. |
-| `renderButton(container, options?)` | Render the button into `container`; returns a cleanup function. Options include `label`, `block`, and `mode: 'redirect' \| 'popup'` (default `'popup'`). |
-| `redirectToCheckout(options)` | Launch checkout directly (no button). |
-| `checkoutUrl(options)` | Build the hosted checkout URL. |
-| `destroy()` | Tear down the instance and its listeners — call this on unmount or when the instance's config/environment changes, not as a reaction to detecting payment success from your own polling (that can tear down a checkout that's still in progress). To remove a single button, use the cleanup function returned by `renderButton()` or hide/disable the button element instead. |
+The same guides ship in the npm package under `docs/guides/` and are published on [developers.maytes.co](https://developers.maytes.co/checkout-button).
+
+## Using an AI coding assistant
 
-### Inside an iframe?
+This repository ships an [Agent Skill](https://github.com/kttipay/maytes-checkout-button/tree/main/skills/maytes-checkout-button) that teaches coding assistants to add Split with Maytes correctly on any stack: credentials stay on your server, `createCheckout` returns `{ checkoutId, checkoutUrl }`, the button is created in browser-only code and destroyed on unmount, and the webhook captures the payment.
+
+In Claude Code:
+
+```
+/plugin marketplace add kttipay/maytes-checkout-button
+/plugin install maytes-checkout-button@maytes
+```
 
-The hosted checkout must run in the top-level window (its session cookie is refused inside a cross-site frame). If you render the button inside an iframe, the SDK navigates the top-level window; if the browser refuses, it opens a new tab; if both are refused it dispatches `maytes:checkout-failed` with `reason: 'navigation-blocked'`. When the checkout opens in a new tab, no popup poll starts and no `maytes:checkout-opened` / `maytes:checkout-closed` pair fires — you'll only see `maytes:checkout-redirected` with `target: 'tab'`. A sandboxed iframe needs `allow-scripts allow-same-origin allow-top-navigation` (plus `allow-popups allow-popups-to-escape-sandbox` for the tab fallback). Listen to `maytes:checkout-redirected` and read `event.detail.target` (`'self'`, `'top'` or `'tab'`) if your page needs to know where the checkout went. Rendering the button in the top-level page avoids all of this.
+Then ask, for example, "add Split with Maytes to my checkout". Other assistants that support Agent Skills can use the [`skills/maytes-checkout-button`](https://github.com/kttipay/maytes-checkout-button/tree/main/skills/maytes-checkout-button) folder directly. The skill covers only the released API.
 
 ## Mobile app
 
-After checkout, shoppers split the cost with friends using Maytes payment links (`app.maytes.co/…`). On a phone with the Maytes app installed, those links open directly in the app (iOS Universal Links / Android App Links); otherwise they open in the browser. Maytes handles this end to end — merchants integrate only the button and configure nothing for the app.
+After checkout, shoppers split the cost with friends using Maytes payment links (`app.maytes.co/…`). With the Maytes app installed, those links open in the app (iOS Universal Links / Android App Links); otherwise in the browser. Maytes handles this end to end — you integrate only the button and configure nothing for the app.
 
 ## Development
 
@@ -146,7 +165,7 @@ npm run test:run
 npm run build        # bundles + SRI hashes + CSP scan
 ```
 
-Versioning and changelog are managed with [Changesets](./.changeset/README.md). Run `npm run changeset` with your PR. Brand colours are vendored, not hand-written — see [`RELEASING.md`](./RELEASING.md#brand-colours-come-from-the-design-foundation) for how that works.
+Versioning and changelog are managed with [Changesets](./.changeset/README.md). Run `npm run changeset` with your PR. Brand colours are vendored, not hand-written — see [`RELEASING.md`](./RELEASING.md#brand-colours-come-from-the-design-foundation) for how that works. Internals, the end-to-end sequence and behaviour contracts are in [`docs/overview.md`](./docs/overview.md).
 
 ## License
 

package/dist/checkout-button.299a037b.js

@@ -0,0 +1,188 @@
+"use strict";var MaytesCheckoutButton=(()=>{var R=Object.defineProperty;var we=Object.getOwnPropertyDescriptor;var Ce=Object.getOwnPropertyNames;var _e=Object.prototype.hasOwnProperty;var Ee=(e,t)=>{for(var o in t)R(e,o,{get:t[o],enumerable:!0})},xe=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of Ce(t))!_e.call(e,r)&&r!==o&&R(e,r,{get:()=>t[r],enumerable:!(n=we(t,r))||n.enumerable});return e};var Me=e=>xe(R({},"__esModule",{value:!0}),e);var at={};Ee(at,{Maytes:()=>F,MaytesError:()=>c,MaytesErrorCode:()=>s,SDK_VERSION:()=>f});var s={Config:"CONFIG"},c=class extends Error{constructor(t,o){super(o),this.code=t,this.name="MaytesError"}};var G=40,z=55,Se=999;function K(e){return typeof e=="number"&&Number.isInteger(e)}function q(e){let{radius:t,height:o}=e,n={};if(o!==void 0){if(!K(o)||o<G||o>z)throw new c(s.Config,`renderButton({ height }) must be a whole number of pixels from ${G} to ${z}`);n.height=o}if(t!==void 0){let r=o===void 0?Se:Math.floor(o/2);if(!K(t)||t<0||t>r)throw new c(s.Config,`renderButton({ radius }) must be a whole number of pixels from 0 to ${r}`);n.radius=t}return n}function Y(e,t){t.radius!==void 0&&e.style.setProperty("--maytes-button-radius",`${t.radius}px`),t.height!==void 0&&(e.style.setProperty("--maytes-button-height",`${t.height}px`),e.classList.add("maytes-checkout-button--sized"))}var l={brand:{primary:"#4A0324",secondary:"#FE572A"},palette:{burgundy:{700:"#3B021D"},base:{white:"#FFFFFF"}},text:{primaryInverse:"#FFFFFF"}};var mt=l.brand.primary,Z=l.brand.secondary,A="http://www.w3.org/2000/svg",Ie=["M392,6.11c-.3-1.61-1.72-2.79-3.38-2.79h-99.97c-1.66,0-3.09,1.19-3.38,2.79l-51.14,275.49c-.36,2.07,1.24,4.03,3.38,4.03h71.07c1.72,0,3.15-1.24,3.38-2.97l5.57-42.24c.23-1.72,1.66-2.97,3.38-2.97h32.45c1.72,0,3.15,1.24,3.38,2.97l5.57,42.24c.23,1.72,1.66,2.97,3.38,2.97h74.46c2.14,0,3.8-1.96,3.38-4.03L392,6.11ZM344.42,174.89h-14.59c-2.07,0-3.62-1.84-3.38-3.86l9.55-74.33c.06-.48.48-.83.95-.83s.89.35.95.83l9.91,74.33c.3,2.02-1.31,3.86-3.38,3.86h0Z","M218.86,3.32h-77.72c-1.48,0-2.85,1.01-3.27,2.44l-25.63,83.65c-.12.35-.41.6-.83.6s-.71-.23-.83-.6L84.9,5.76c-.41-1.42-1.78-2.44-3.27-2.44H3.44c-1.9,0-3.44,1.54-3.44,3.44v275.43c0,1.9,1.54,3.45,3.44,3.45h71.26c1.9,0,3.44-1.54,3.44-3.45v-77.3l-.83-51.44c0-.53.41-.95.95-.95.41,0,.77.3.89.71l14.42,59.62c.35,1.54,1.72,2.61,3.32,2.61h28.42c1.61,0,2.97-1.06,3.32-2.61l14.47-59.79c.12-.3.35-.53.71-.53.41,0,.71.3.71.71l-.42,51.67-.06.06v77.3c0,1.9,1.54,3.44,3.44,3.44h71.37c1.9,0,3.44-1.54,3.44-3.44V6.77c0-1.9-1.54-3.44-3.44-3.44h0Z","M1179.6,147c-9.73-11.8-20.71-21.12-47.76-38.44-27.06-16.91-31.69-23.26-31.69-31.68,0-6.76,3.8-11.39,10.56-11.39,8.19,0,14.18,10.44,15.43,26.28.18,2.14,2.13,3.74,4.27,3.26l63.66-14.12c1.6-.36,2.73-1.9,2.61-3.56-3.97-49.3-35-77.36-86.44-77.36-27.47,0-50.25,8.07-67.63,24.09-17.39,16.01-25.82,36.72-25.82,62.53,0,16.91,4.22,32.09,13.12,45.62,8.9,13.53,25.75,28.3,51.56,44.38,14.77,9.32,24.09,16.49,27.88,21.12,4.21,4.63,6.35,9.31,6.35,14.36,0,6.35-4.63,10.56-11.81,10.56-10.5,0-18.15-11.87-19.28-29.66-.12-2.25-2.31-3.91-4.51-3.26l-63.6,18.68c-1.55.42-2.55,1.84-2.43,3.44,1.78,22.84,11.03,41.41,26.88,55.65,16.49,14.36,36.77,21.53,64.24,21.53s50.32-7.59,67.64-23.26c17.74-15.66,26.64-36.37,26.64-61.28,0-22.01-6.35-40.58-19.87-57.49v-.02Z","M1002.33,3.32h-146.18c-1.9,0-3.44,1.54-3.44,3.44v275.49c0,1.9,1.54,3.44,3.44,3.44h146.18c1.9,0,3.44-1.54,3.44-3.44v-62.05c0-1.9-1.54-3.44-3.44-3.44h-63.3c-1.9,0-3.45-1.54-3.45-3.45v-34.58c0-1.9,1.54-3.44,3.45-3.44v.18h53.63c1.9,0,3.45-1.54,3.45-3.44v-57.84c0-1.9-1.55-3.44-3.45-3.44h-53.63c-1.9,0-3.45-1.54-3.45-3.44v-31.61c0-1.9,1.54-3.44,3.45-3.44h63.3c1.9,0,3.44-1.54,3.44-3.44V6.77c0-1.9-1.54-3.44-3.44-3.44Z","M840.22,6.77c0-1.9-1.54-3.44-3.44-3.44h-175.31c-1.9,0-3.45,1.54-3.45,3.44v62c0,1.9,1.54,3.44,3.45,3.44h41.77c1.9,0,3.44,1.54,3.44,3.44v206.62c0,1.9,1.54,3.45,3.44,3.45h78.14c1.9,0,3.45-1.54,3.45-3.45V75.7c0-1.9,1.54-3.44,3.45-3.44h41.77c1.9,0,3.44-1.54,3.44-3.44h-.12V6.77h-.02Z","M607.71,3.38l-.06-.06c-23.23,0-32.59,48.08-40.22,80.25-1.38,5.82-4.74,18.31-7.75,27.31-4.44,13.26-10.68,30.43-22.21,31.93-18.85,2.47-7.14-39.43-7.14-39.43l21.67-92.98c.84-3.6-1.92-7.02-5.58-7.02h-85.49c-3.12,0-5.64,2.46-5.71,5.64l-1.68,75.09c-.48,21.25,5.64,42.31,18.37,59.37,12.72,17.05,38.81,28,63.12,25.9,52.48-7.08,65.46-70.49,68.4-71.1,3.06-.64,2.56,9.3.84,22.15-2.2,16.42-8.46,32.1-18.52,45.27-5.3,6.95-11.13,12.9-16.55,16.37-32.96,22.51-95.69,9.48-122.4-2.7-3.66-1.68-7.75,1.02-7.75,5.04l16.39,83.98c0,.84.18,1.68.54,2.4,9.48,17.83,53.31,19.33,74.43,17.77,32.18-2.04,100.37-29.35,115.32-122.33,12.17-103.08-1.14-162.91-38.06-162.84l.02-.02Z"];function h(e,t){let o=document.createElementNS(A,"svg");o.setAttribute("xmlns",A),o.setAttribute("viewBox","0 0 1199.47 289.04"),o.style.height=e,o.style.width="auto",o.style.color=t;for(let n of Ie){let r=document.createElementNS(A,"path");r.setAttribute("fill","currentColor"),r.setAttribute("d",n),o.appendChild(r)}return o}function p(e){return typeof e=="object"&&e!==null&&e.name==="SecurityError"}function T(){return window.top!==null&&window.top!==window}function L(){if(!T())return null;let e=window.top;try{return e.document,e}catch(t){if(!p(t))throw t;return null}}function J(){if(!T())return window.innerWidth;let e=L();if(e!==null)return e.innerWidth;let t=window.screen?.width;return typeof t=="number"&&t>0?t:window.innerWidth}function X(e,t,o){o?e.location.replace(t):e.location.href=t}function Oe(e){try{e.opener=null}catch(t){if(!p(t))throw t}}function w(e,t){if(!T())return X(window,e,t),{target:"self"};let o;try{return X(window.top,e,t),{target:"top"}}catch(n){if(!p(n))throw n;o=n}try{let n=window.open(e,"_blank");return n!==null?(Oe(n),{target:"tab"}):{target:null,cause:o}}catch(n){return{target:null,cause:n}}}var Q="maytes-overlay-title",D="data-maytes-checkout-button-overlay-styles",Re="rgba(0, 0, 0, 0.6)";function Ae(){let e=L();if(e===null)return null;let t=e.document;return t.body!==null?t:null}function Te(){return Ae()??document}function Le(e){if(e===document||e.querySelector(`style[${D}]`)!==null)return;let t=document.head.querySelector("style[data-maytes-checkout-button]");if(t===null)return;let o=e.createElement("style");o.setAttribute(D,"");let n=t.getAttribute("nonce");n!==null&&o.setAttribute("nonce",n),o.textContent=t.textContent??"",e.head.appendChild(o)}function De(e,t,o){let n=e.createElement("dialog");n.className="maytes-checkout-overlay",n.setAttribute("aria-labelledby",Q),n.setAttribute("data-maytes-overlay","");let r=e.createElement("div");r.className="maytes-checkout-overlay__content";let d=e.createElement("div");d.setAttribute("aria-hidden","true"),d.appendChild(h("2.5rem",Z)),r.appendChild(d);let i=e.createElement("div");i.className="maytes-checkout-overlay__spinner",i.setAttribute("role","status"),i.setAttribute("aria-live","polite"),i.setAttribute("aria-label","Checkout in progress"),r.appendChild(i);let u=e.createElement("p");if(u.id=Q,u.className="maytes-checkout-overlay__text",u.textContent=o==="popup"?"Completing checkout with Maytes\u2026":"Taking you to Maytes\u2026",r.appendChild(u),o==="popup"){let a=e.createElement("button");a.className="maytes-checkout-overlay__link",a.type="button",a.textContent="Return to Maytes",a.addEventListener("click",()=>{if(t.popupWindow!==null&&!t.popupWindow.closed)try{t.popupWindow.focus()}catch(m){if(!p(m))throw m}}),r.appendChild(a)}return n.appendChild(r),n.addEventListener("cancel",a=>{a.preventDefault(),t.popupWindow!==null&&!t.popupWindow.closed&&t.popupWindow.close(),y(t)}),n}function ee(e){e.style.background=Re}function U(e,t="popup"){if(e.overlayEl!==null)return;let o=Te();Le(o);let n=De(o,e,t);if(e.overlayEl=n,o.body.appendChild(n),o!==document&&Ue(e),typeof n.showModal=="function")try{n.showModal()}catch(r){console.warn("[maytes/checkout-button] dialog.showModal failed; falling back to inline backdrop",r),n.setAttribute("open",""),ee(n)}else n.setAttribute("open",""),ee(n)}function Ue(e){let t=()=>y(e);window.addEventListener("pagehide",t),e.overlayDetach=()=>window.removeEventListener("pagehide",t)}function y(e){if(e.overlayEl===null)return;e.overlayDetach?.(),e.overlayDetach=null;let t=e.overlayEl,o=t.ownerDocument;typeof t.close=="function"&&t.open&&t.close(),t.remove(),o!==document&&o.head.querySelector(`style[${D}]`)?.remove(),e.overlayEl=null}var We={staging:"https://staging-checkout.maytes.co",sandbox:"https://sandbox-checkout.maytes.co",production:"https://checkout.maytes.co"};function te(e){return e==="sandbox"||e==="production"||e==="staging"}function oe(e,t){if(t!==void 0)return t;let o=We[e];if(o===void 0)throw new c(s.Config,`Unknown environment: ${String(e)}`);return o}function ne(e){let t;try{t=new URL(e)}catch{return!1}return t.protocol==="https:"||t.protocol==="http:"}function W(e){let t=e.trim().replace(/\/+$/,""),o;try{o=new URL(t)}catch{throw new c(s.Config,`baseUrl is not a valid URL: ${t}`)}if(o.protocol!=="https:"&&o.protocol!=="http:")throw new c(s.Config,`baseUrl must use http or https; got ${o.protocol}`);return t}function Ne(e){if(typeof e!="string"||e.trim().length===0)throw new c(s.Config,"checkoutId is required (non-empty string)");return e.trim()}function C(e,t,o){let n=Ne(o);return`${W(oe(e,t))}/?id=${encodeURIComponent(n)}`}function Pe(e,t){if(typeof window>"u")throw new c(s.Config,"redirectToCheckout requires a browser context (window is undefined)");if(w(e,t).target===null)throw new c(s.Config,"redirectToCheckout could not leave the embedding iframe; call it from a user gesture or from the top-level page")}function re(e,t){return{checkoutUrl(o){return C(e,t,o.checkoutId)},redirectToCheckout(o){let n=C(e,t,o.checkoutId);Pe(n,o.replace===!0)}}}var f="1.2.1";var ae="data-maytes-checkout-button",ce=`style[${ae}="${f}"]`,se=`__maytes_checkout_button_styles_refs_${f}__`,ie="#6b8aff",Be=`
+.maytes-checkout-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.57em;
+  min-height: var(--maytes-button-height, auto);
+  padding: 0.71em 1.29em;
+  border-radius: var(--maytes-button-radius, 999px);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  font-size: var(--maytes-button-font-size, 14px);
+  font-weight: 600;
+  line-height: 1;
+  user-select: none;
+}
+.maytes-checkout-button.maytes-checkout-button,
+.maytes-checkout-button.maytes-checkout-button:hover,
+.maytes-checkout-button.maytes-checkout-button:focus,
+.maytes-checkout-button.maytes-checkout-button:active {
+  background: ${l.brand.primary};
+  border: none;
+  color: ${l.text.primaryInverse};
+  box-shadow: none;
+  text-decoration: none;
+  text-shadow: none;
+  filter: none;
+  transform: none;
+  opacity: 1;
+  cursor: pointer;
+  transition: background-color 120ms ease, opacity 120ms ease;
+}
+.maytes-checkout-button.maytes-checkout-button:hover { background: ${l.palette.burgundy[700]}; }
+.maytes-checkout-button.maytes-checkout-button:focus:not(:focus-visible) { outline: none; }
+.maytes-checkout-button.maytes-checkout-button:focus-visible {
+  outline: 2px solid ${ie};
+  outline-offset: 2px;
+}
+.maytes-checkout-button.maytes-checkout-button[aria-disabled='true'] {
+  cursor: progress;
+  opacity: 0.7;
+}
+.maytes-checkout-button.maytes-checkout-button * { transition: none; }
+.maytes-checkout-button.maytes-checkout-button .maytes-checkout-button__logo,
+.maytes-checkout-button.maytes-checkout-button .maytes-checkout-button__logo * {
+  animation: none;
+  fill: currentColor;
+}
+.maytes-checkout-button--sized {
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+.maytes-checkout-button--block {
+  display: flex;
+  width: 100%;
+}
+.maytes-checkout-button__logo { height: 1em; width: auto; flex: none; }
+.maytes-checkout-button__spinner {
+  height: 1em;
+  width: 1em;
+  border-radius: 50%;
+  border: 0.14em solid currentColor;
+  border-right-color: transparent;
+  animation: maytes-checkout-button-spin 0.7s linear infinite;
+}
+@keyframes maytes-checkout-button-spin {
+  to { transform: rotate(360deg); }
+}
+.maytes-checkout-overlay {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  max-width: 100vw;
+  max-height: 100vh;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  z-index: 2147483646;
+  font: 500 15px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}
+.maytes-checkout-overlay[open] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.maytes-checkout-overlay::backdrop {
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+.maytes-checkout-overlay__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+}
+.maytes-checkout-overlay__spinner {
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 4px solid rgba(255, 255, 255, 0.3);
+  border-top-color: ${l.brand.secondary};
+  border-radius: 50%;
+  animation: maytes-checkout-button-spin 0.8s linear infinite;
+}
+.maytes-checkout-overlay__text {
+  color: ${l.text.primaryInverse};
+  font-size: 1.125rem;
+  font-weight: 500;
+  margin: 0;
+}
+.maytes-checkout-overlay__link {
+  font-size: 0.875rem;
+  text-underline-offset: 4px;
+  font-family: inherit;
+}
+.maytes-checkout-overlay__link.maytes-checkout-overlay__link,
+.maytes-checkout-overlay__link.maytes-checkout-overlay__link:hover,
+.maytes-checkout-overlay__link.maytes-checkout-overlay__link:focus,
+.maytes-checkout-overlay__link.maytes-checkout-overlay__link:active {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.7);
+  box-shadow: none;
+  text-decoration: underline;
+  text-shadow: none;
+  transform: none;
+  opacity: 1;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+.maytes-checkout-overlay__link.maytes-checkout-overlay__link:hover { color: ${l.text.primaryInverse}; }
+.maytes-checkout-overlay__link.maytes-checkout-overlay__link:focus:not(:focus-visible) { outline: none; }
+.maytes-checkout-overlay__link.maytes-checkout-overlay__link:focus-visible {
+  outline: 2px solid ${ie};
+  outline-offset: 2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .maytes-checkout-overlay__spinner,
+  .maytes-checkout-button__spinner { animation: none; }
+}
+`,ue=`
+:root { color-scheme: light; }
+html, body { margin: 0; height: 100%; }
+body.maytes-popup-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: ${l.brand.primary};
+  color: ${l.text.primaryInverse};
+  font: 500 16px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}
+.maytes-popup-loading__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 2rem;
+  text-align: center;
+}
+.maytes-popup-loading__logo { height: 2.75rem; width: auto; }
+.maytes-popup-loading__spinner {
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 4px solid rgba(255, 255, 255, 0.25);
+  border-top-color: ${l.brand.secondary};
+  border-radius: 50%;
+  animation: maytes-checkout-button-spin 0.8s linear infinite;
+}
+@keyframes maytes-checkout-button-spin {
+  to { transform: rotate(360deg); }
+}
+.maytes-popup-loading__text { margin: 0; font-size: 1.05rem; font-weight: 500; }
+.maytes-popup-loading__slow {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.75);
+  max-width: 22rem;
+}
+.maytes-popup-loading__slow[hidden] { display: none; }
+@media (prefers-reduced-motion: reduce) {
+  .maytes-popup-loading__spinner { animation: none; }
+}
+`;function le(){return window[se]??0}function de(e){let t=window;t[se]=e}function pe(e){let t=le()+1;if(de(t),document.head.querySelector(ce)!==null)return;let o=document.createElement("style");o.setAttribute(ae,f),e!==void 0&&e!==""&&o.setAttribute("nonce",e),o.textContent=Be,document.head.appendChild(o)}function me(){let e=Math.max(0,le()-1);if(de(e),e>0)return;let t=document.head.querySelector(ce);t!==null&&t.remove()}var N=500,P=800,$e=500,Fe=600,He=8e3;function Ve(e){if(typeof e!="object"||e===null)return!1;let t=e;return!(typeof t.checkoutId!="string"||t.checkoutId.trim().length===0||t.checkoutUrl!==void 0&&(typeof t.checkoutUrl!="string"||t.checkoutUrl.trim().length===0||!ne(t.checkoutUrl)))}function je(e){try{e.focus()}catch(t){if(!p(t))throw t}}function _(e){if(e!==null)try{e.closed||e.close()}catch(t){if(!p(t))throw t}}function Ge(){let e=window.screen?.width??N,t=window.screen?.height??P,o=Math.max(0,Math.round((e-N)/2)),n=Math.max(0,Math.round((t-P)/2));return`popup=yes,width=${N},height=${P},left=${o},top=${n},resizable=yes,scrollbars=yes`}function v(e){e.popupPollHandle!==null&&(clearInterval(e.popupPollHandle),e.popupPollHandle=null)}function ze(e,t){v(e),e.popupPollHandle=setInterval(()=>{let o=e.popupWindow;(o===null||o.closed)&&(v(e),e.popupWindow=null,t())},$e)}function Ke(){return J()<=Fe}function qe(e){return window.open("about:blank",e.popupName,Ge())}function Ye(e,t){e.location.replace(t)}function Ze(e){for(;e.body.firstChild!==null;)e.body.removeChild(e.body.firstChild)}function Xe(e,t){let o=e.document;if(o===null||o.head===null||o.body===null)return;o.title="Maytes checkout",o.documentElement.lang="en";let n=o.createElement("style");t!==void 0&&t!==""&&n.setAttribute("nonce",t),n.textContent=ue,o.head.appendChild(n),o.body.classList.add("maytes-popup-loading"),Ze(o);let r=o.createElement("main");r.className="maytes-popup-loading__content",r.setAttribute("role","status"),r.setAttribute("aria-live","polite");let d=h("2.75rem",l.text.primaryInverse);d.setAttribute("class","maytes-popup-loading__logo"),d.setAttribute("aria-hidden","true"),r.appendChild(d);let i=o.createElement("div");i.className="maytes-popup-loading__spinner",i.setAttribute("aria-hidden","true"),r.appendChild(i);let u=o.createElement("p");u.className="maytes-popup-loading__text",u.textContent="Completing checkout with Maytes\u2026",r.appendChild(u);let a=o.createElement("p");a.className="maytes-popup-loading__slow",a.hidden=!0,a.textContent="Still connecting. This can take a moment on slow networks.",r.appendChild(a),o.body.appendChild(r),setTimeout(()=>{a.hidden=!1},He)}function Je(e,t){return{instanceId:e.instanceId,source:t}}function B(e,t,o){let n=o===void 0?{...e,reason:t}:{...e,reason:t,cause:o};document.dispatchEvent(new CustomEvent("maytes:checkout-failed",{detail:n}))}function Qe(e,t,o){let n={...e,url:t,target:o};document.dispatchEvent(new CustomEvent("maytes:checkout-redirected",{detail:n}))}function E(e,t="renderButton"){if(e!=="redirect"&&e!=="popup")throw new c(s.Config,`${t}({ mode }) must be 'redirect' or 'popup'`);return e}function x(e,t="renderButton"){if(e===void 0)return!1;if(typeof e!="boolean")throw new c(s.Config,`${t}({ redirectOverlay }) must be true or false`);return e}function $(e,t){e.busy=t;for(let o of[...e.busyViews])o(t)}function M(e){y(e),$(e,!1)}function he(e,t){_(t),v(e),e.popupWindow===t&&(e.popupWindow=null),M(e)}function et(e){if(e.restoreDetach!==null)return;let t=n=>{n.persisted&&(o(),M(e))},o=()=>{window.removeEventListener("pageshow",t),e.restoreDetach=null};window.addEventListener("pageshow",t),e.restoreDetach=o}function tt(e,t,o,n){let r=w(o,!1);return n&&(r.target==="self"||r.target==="top")?($(e,!1),et(e)):M(e),r.target===null?(console.error("[maytes/checkout-button] could not leave the embedding frame:",r.cause),B(t,"navigation-blocked",r.cause),{outcome:"failed",reason:"navigation-blocked"}):(Qe(t,o,r.target),{outcome:"redirected",target:r.target})}function ot(e,t){let o=qe(e);return o===null?null:(e.popupWindow=o,e.popupNavigated=!1,je(o),Xe(o,e.config.cspNonce),U(e),document.dispatchEvent(new CustomEvent("maytes:checkout-opened",{detail:t})),ze(e,()=>{M(e),document.dispatchEvent(new CustomEvent("maytes:checkout-closed",{detail:t}))}),o)}async function S(e,t,o,n=!1){if(e.busy||e.destroyed)return{outcome:"ignored"};$(e,!0);let r=Je(e,o),d=t==="popup"&&!Ke(),i=d?ot(e,r):null;i===null&&n&&U(e,"redirect");try{let u=await e.config.createCheckout();if(e.destroyed||i!==null&&i.closed)return _(i),{outcome:"closed"};if(!Ve(u)){he(e,i);let m=new c(s.Config,"createCheckout must resolve to { checkoutId: string, checkoutUrl?: http(s) URL }");return console.error(m),B(r,"invalid-shape",m),{outcome:"failed",reason:"invalid-shape"}}let a=u.checkoutUrl??C(e.config.environment,e.config.baseUrl,u.checkoutId);return i!==null?(e.popupNavigated=!0,Ye(i,a),{outcome:"popup"}):(d&&console.warn("[maytes/checkout-button] popup was blocked; redirecting instead"),tt(e,r,a,n))}catch(u){return i!==null&&i.closed?{outcome:"closed"}:(he(e,i),console.error("[maytes/checkout-button] createCheckout failed:",u),B(r,"create-checkout-rejected",u),{outcome:"failed",reason:"create-checkout-rejected"})}}function ye(){let e=h("1em","currentColor");return e.setAttribute("class","maytes-checkout-button__logo"),e.setAttribute("aria-hidden","true"),e}function nt(){let e=document.createElement("span");return e.className="maytes-checkout-button__spinner",e.setAttribute("aria-hidden","true"),e}function fe(e,t,o={}){if(e.destroyed)throw new c(s.Config,"renderButton() called on a destroyed Maytes instance");if(!(t instanceof HTMLElement))throw new c(s.Config,"renderButton(container) requires an HTMLElement");let n=q(o),r=x(o.redirectOverlay);pe(e.config.cspNonce);let d=o.label??"Split with",i=o.block===!0,u=E(o.mode??"popup"),a=document.createElement("button");a.type="button",a.className=i?"maytes-checkout-button maytes-checkout-button--block":"maytes-checkout-button",Y(a,n),a.setAttribute("aria-label",`${d} Maytes`);let m=document.createTextNode(`${d} `),b=ye();a.appendChild(m),a.appendChild(b);let ke=k=>{if(k){a.setAttribute("aria-disabled","true"),a.setAttribute("aria-busy","true");let g=nt();b.replaceWith(g),b=g}else{a.removeAttribute("aria-disabled"),a.removeAttribute("aria-busy");let g=ye();b.replaceWith(g),b=g}},I=!1,H=k=>{I&&(ke(k),k||(I=!1))};e.busyViews.add(H);let V=()=>{e.busy||e.destroyed||(I=!0,S(e,u,"button",r))};a.addEventListener("click",V),t.appendChild(a);let j=!1,O=()=>{j||(j=!0,a.removeEventListener("click",V),a.remove(),e.busyViews.delete(H),e.teardowns.delete(O),me())};return e.teardowns.add(O),O}function be(){return`${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`}function ge(){if(typeof crypto<"u"&&typeof crypto.randomUUID=="function")try{return crypto.randomUUID()}catch{return be()}return be()}function ve(e,t){let o={createCheckout:e.createCheckout,environment:e.environment};return t?.baseUrl!==void 0&&(o.baseUrl=t.baseUrl),t?.cspNonce!==void 0&&(o.cspNonce=t.cspNonce),{config:o,busy:!1,busyViews:new Set,instanceId:ge(),overlayEl:null,overlayDetach:null,restoreDetach:null,popupWindow:null,popupNavigated:!1,popupName:`maytes-checkout-${ge()}`,popupPollHandle:null,destroyed:!1,teardowns:new Set}}function rt(e){if(typeof e!="object"||e===null)throw new c(s.Config,"Maytes() requires an options object");if(typeof e.createCheckout!="function")throw new c(s.Config,"Maytes({ createCheckout }) must be an async function returning { checkoutId }");if(!te(e.environment))throw new c(s.Config,"Maytes({ environment }) must be 'sandbox' or 'production'")}function it(e){e!==void 0&&e.baseUrl!==void 0&&W(e.baseUrl)}var F=(e,t)=>{rt(e),it(t);let o=ve(e,t),{checkoutUrl:n,redirectToCheckout:r}=re(o.config.environment,o.config.baseUrl);return{instanceId:o.instanceId,renderButton(i,u){return fe(o,i,u)},openCheckout(i){if(o.destroyed)throw new c(s.Config,"openCheckout() called on a destroyed Maytes instance");let u=E(i?.mode??"popup","openCheckout"),a=x(i?.redirectOverlay,"openCheckout");return S(o,u,"api",a)},onBusyChange(i){if(o.destroyed)throw new c(s.Config,"onBusyChange() called on a destroyed Maytes instance");return o.busyViews.add(i),()=>{o.busyViews.delete(i)}},redirectToCheckout(i){r(i)},checkoutUrl(i){return n(i)},destroy(){if(!o.destroyed){o.destroyed=!0,v(o),o.restoreDetach?.(),y(o),o.popupNavigated||_(o.popupWindow),o.popupWindow=null,o.busy=!1;for(let i of[...o.teardowns])i();o.teardowns.clear()}}}};typeof window<"u"&&(window.Maytes=F);return Me(at);})();
+window.Maytes = MaytesCheckoutButton.Maytes;
+//# sourceMappingURL=checkout-button.js.map