Checkout SDK

Integration modes

Three ways to embed the widget: rendered inline, opened as a modal from your own button, or a self-rendering drop-in button.

Inline

Rendered immediately into your markup. mount is required: pass a CSS selector or an HTMLElement. Use the wide layout for two columns that collapse to one in narrow slots, or narrow for a single column.

Inline

coinfat.checkout({
  invoice: ulid,
  display: "inline",
  mount: "#pay",     // required for inline: CSS selector or HTMLElement
  layout: "wide"     // 'wide' = two columns, collapsing to one on narrow slots
});

Opened from your own button. checkout() returns a session. Call session.open() to show it. mount is ignored for modals.

Modal

const session = coinfat.checkout({
  invoice: ulid,
  display: "modal",
  layout: "narrow"
});

myButton.addEventListener("click", () => session.open());

The session exposes open(), close(), and destroy(). The last stops polling and unmounts the widget.

Drop-in button

Renders its own button and opens the modal when clicked. Pass modal options under checkout: everything checkout() takes except invoice, display, and mount. The button exposes destroy().

Button

coinfat.button({
  invoice: ulid,
  mount: "#pay-button",
  label: "Pay with crypto",   // optional; localized default if omitted
  checkout: {                 // options for the modal it opens
    onCompleted: (invoice) => console.log("paid", invoice.ulid)
  }
});