Billing
BillingPricingGrid
Multi-tier pricing comparison grid.
Billing
Stripe-integrated billing components for subscription management, pricing display, and payment history.
Components
<XABillingPricingGrid />
Multi-tier pricing comparison grid.
<XABillingPricingGrid :plans="plans" :currentPlan="user.plan" @upgrade="handleUpgrade" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
plans | PricingPlan[] | required | Array of plan objects passed to individual XABillingPricingCard instances |
currentPlan | string | '' | The active plan name — highlights the matching card |
Emits
| Event | Payload | Description |
|---|---|---|
upgrade | (plan: PricingPlan) | Fired when the user selects a plan |
AI Context
component: XABillingPricingGrid
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Billing
requires: Stripe plans/pricing data from API
use-when: Displaying a side-by-side pricing comparison grid for multiple tiers. The primary entry point for pricing pages.
typical-flow: "XABillingPricingGrid → user selects plan → Stripe checkout → XABillingSubscriptionCard"