AforoPricingCard

What it renders#

AforoPricingCard renders your tenant's published offerings as a pricing card grid. The widget calls Aforo's headless config endpoint on mount, filters to status === 'PUBLISHED', and renders one card per offering with your brand kit colors.

Three layouts to pick from:

• horizontal (default) — auto-fit grid, cards 260px wide minimum. Good for marketing pages with 3-4 plans.
• vertical — single-column stack. Good for narrow viewports or sidebars.
• table — semantic <table> with one column per plan and one row per feature. Good for plan comparison pages with 5+ plans.

<div data-aforo-widget="pricing-card"
     data-aforo-tenant-slug="your-tenant"
     data-aforo-embed-key="ek_live_replace_me"
     data-aforo-layout="horizontal"></div>

<script src="https://cdn.aforo.ai/embed/loader.js" async></script>

import { AforoPricingCard } from '@aforoai/storefront-widgets';

export function Pricing() {
  return (
    <AforoPricingCard
      tenantSlug="your-tenant"
      embedKey="ek_live_replace_me"
  layout="horizontal"
    />
  );
}

Mount examples#

<script
  src="https://embed.aforo.ai/v1/loader.js"
  integrity="sha384-…"
  crossorigin="anonymous"
  async
></script>

<div
  data-aforo-widget="pricing-card"
  data-tenant-slug="acme"
  data-embed-key="embk_live_…"
  data-layout="horizontal"
  data-featured-offering-id="off_pro"
></div>

Props reference#

Events#

PricingCard emits the standard aforo.pricing-card.ready and aforo.pricing-card.error lifecycle events, plus one widget-specific event:

window.aforoEmbed?.on(
  'aforo.pricing-card.cta_clicked',
  (payload) => {
    // payload = {
    //   offeringId: string,
    //   planName: string,
    //   priceCents: number,
    //   currency: string,
    //   billingCycle: 'monthly' | 'yearly',
    //   ratePlanId?: string,
    // }
    track('pricing_card_clicked', payload);
  },
);

See the Events reference for the full envelope shape and origin allowlist rules.

Common patterns#

Redirect to your own checkout

If you already have your own checkout flow, pass ctaUrlByOffering with one URL per offering:

<AforoPricingCard
  tenantSlug="acme"
  embedKey="embk_live_…"
  ctaUrlByOffering={{
    off_starter: '/checkout?plan=starter',
    off_pro: '/checkout?plan=pro',
    off_enterprise: 'mailto:sales@acme.com',
  }}
/>

React onClick callback instead of redirect

For SPA navigation, omit URLs and use onCtaClick:

import { useRouter } from 'next/navigation';

const router = useRouter();

<AforoPricingCard
  tenantSlug="acme"
  embedKey="embk_live_…"
  onCtaClick={({ offeringId }) => {
    router.push(`/subscribe/${offeringId}`);
  }}
/>

Highlight a featured plan

<AforoPricingCard
  tenantSlug="acme"
  embedKey="embk_live_…"
  featuredOfferingId="off_pro"
/>

The featured card gets a 2px border in your primary color plus a "Most popular" badge with both visible text and an aria-label alternative (color is supplementary, not the only signal).

Limitations#

• Anonymous mode only. PricingCard never requires a bridge token — it's designed for marketing pages where the visitor has no identity yet.
• Published offerings only. Draft / archived offerings are filtered server-side. Publish from Storefront → Offerings before they appear.
• No usage simulator. PricingCard renders the displayed price as configured on the rate plan. Per-plan usage estimators are UsageMeter territory (Phase 1).