nuxt-x-app
Billing
Billing and subscription components for Stripe-powered pricing pages and payment management.
Billing
Stripe-integrated billing components for subscription management, pricing display, and payment history.
Components
<XABillingHistory />
Displays paginated payment and invoice history.
<XABillingHistory :customerId="user.stripeCustomerId" />
<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"
/>
<XABillingPricingGrid />
Multi-tier pricing comparison grid.
<XABillingPricingGrid :plans="plans" :currentPlan="user.plan" @upgrade="handleUpgrade" />
<XABillingSubscriptionCard />
Current subscription status with upgrade/cancel controls.
<XABillingSubscriptionCard :subscription="subscription" @cancel="handleCancel" />
<XABillingPaymentMethodCard />
Saved payment method display (card brand, last 4, expiry).
<XABillingPaymentMethodCard :method="paymentMethod" @remove="handleRemove" />
<XABillingQuoteBuilder />
Interactive quote builder for custom pricing.
AI Context
category: Billing
package: "@xenterprises/nuxt-x-app"
requires: Stripe customer/subscription data from API
use-when: Subscription management pages, pricing pages, billing settings
typical-flow:
1. XABillingPricingGrid → user selects plan
2. Stripe checkout → redirect back
3. XABillingSubscriptionCard → shows active subscription
4. XABillingHistory → shows invoices