Billing
BillingPricingCard
Single pricing tier card with features list and CTA.
Billing
Stripe-integrated billing components for subscription management, pricing display, and payment history.
Components
<XABillingPricingCard />
Single pricing tier card with features list and CTA.
<XABillingPricingCard
name="Pro"
:price="29"
billing="monthly"
:features="['Unlimited projects', '10GB storage', 'Priority support']"
:highlighted="true"
@select="handleSelect"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | required | Plan name (e.g., 'Pro', 'Enterprise') |
price | number | required | Plan price in dollars |
billing | 'monthly' | 'yearly' | 'monthly' | Billing interval displayed below the price |
features | string[] | [] | List of feature strings rendered as a checklist |
highlighted | boolean | false | Visually emphasise this card as the recommended plan |
ctaLabel | string | 'Get started' | Call-to-action button label |
Emits
| Event | Description |
|---|---|
select | Fired when the CTA button is clicked |
AI Context
component: XABillingPricingCard
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Billing
requires: Stripe pricing data
use-when: Displaying a single pricing tier with a features list and call-to-action button. Typically used inside XABillingPricingGrid or standalone on a pricing page.
typical-flow: "XABillingPricingGrid → user selects plan → Stripe checkout"