Sign in →
Embed Widgets1 min read

Embed Widgets — Overview

Drop pricing, subscribe, invoices, and checkout into any page. Eight widgets in @aforoai/storefront-widgets, three integration tiers, one shared bridge.

Updated 2026-06-30Suggest edits
Docs Embed Widgets Overview

Embed Widgets is the tier between "use our hosted Storefront as-is" and "build your own UI on the headless API." You ship a script tag (or an npm import), drop one of eight web components into your page, and the widget handles pricing display, subscribe, invoices, checkout, and subscription management against your Aforo tenant. Your brand, your domain, our billing.

What Embed Widgets is for#

Customers who already have a marketing site, web app, or admin console, and want billing UI to live inside it. The widgets are framework-agnostic (script tag works anywhere), but ship React and Vue adapters as first-class. Auth uses a short-lived bridge token your backend mints for the signed-in customer — the widget itself never sees your Aforo API key.

The eight widgets#

Each widget is a self-contained surface with locked props and emitted events. Click into the reference page for code samples, the full prop list, and the event payload spec.

Phase-1 widgets that aren't yet shipped (account profile, dunning surface, etc.) are listed on the page so search + external links don't 404.

Three integration tiers#

Same widgets, three ways to mount them:

TierHow you mountBest for
Script tag<script src="…/v1/loader.js"> + a <div data-aforo-widget="…">. Vanilla HTML, any framework.Marketing sites, Webflow, Wordpress, static pages.
npm packagenpm i @aforoai/storefront-widgets, import the React / Vue component.React or Vue apps that already have a build pipeline.
IframeEmbed our hosted widget URL in an <iframe>. Sandboxed.Strict CSP environments, third-party site embedding.

See for end-to-end install in under 10 minutes.

Cross-cutting concerns#

Read these once and they apply to every widget you mount:

Pick by what you need to ship#

GoalWidgetAuth needed
Add a pricing page to a marketing siteAforoPricingCardNone — anonymous
Convert a signed-in user to paidAforoSubscribeButtonBridge token
Show a customer their invoicesAforoInvoiceListBridge token or magic link
Take a payment without leaving the pageAforoCheckoutFlowBridge token
Let the customer manage subscriptionsAforoSubscriptionManager + AforoUpgradeCancelBridge token
Display current usage against quotaAforoUsageMeterBridge token
Manage saved payment methodsAforoPaymentMethodBridge token
INFO
Bridge tokens are short-lived (typically minutes) and customer-scoped. Your backend mints them with your Aforo embed key + the customer's id — the widget never sees your key directly. has the mint snippet for Node, Python, Go, and Java.

Hosted Storefront vs. Embed Widgets vs. Headless API

Three ways to put Aforo billing in front of a customer. Embed Widgets is the middle tier: more flexible than the hosted Storefront (your page, your domain), less work than building from the Headless API (we own the components).

  • Storefront — fully hosted alternative if you don't want to embed.
  • Reference → API Reference — the headless API that backs every widget.
  • SDKs — for metering events from your service (different surface from these widgets).
  • Operations → Alerts & Notifications — postMessage events the widget emits are advisory; backend webhooks are authoritative.