Vue Stripe Playground
VueStripePricingTablev5.3.0
Embed a subscription pricing table configured in your Stripe Dashboard. No backend code required - just provide the pricing table ID.
Create a Pricing Table in Stripe Dashboard →
Add your Stripe publishable key using the header button to test this component.
Props & Events
| Prop / Event | Type | Required | Description |
|---|---|---|---|
| pricingTableId | string | Yes | Pricing table ID from Stripe Dashboard (starts with prctbl_) |
| customerEmail | string | No | Pre-fill customer email in checkout |
| customerSessionClientSecret | string | No | For existing customers (from Customer Session API) |
| clientReferenceId | string | No | Reference ID for fulfillment reconciliation |
| @load | () => void | Event | Emitted when pricing table script loads |
| @error | (error: Error) => void | Event | Emitted when script fails to load |
Event Log
Configure a pricing table ID to see events...
Key Insights
- No Backend Required: Pricing tables are configured entirely in the Stripe Dashboard.
- Automatic Checkout: Clicking a price takes customers directly to Stripe Checkout.
- Separate Script: Uses
pricing-table.jsinstead of@stripe/stripe-js. - Provider Required: Must be wrapped in
VueStripeProviderto get the publishable key. - Limitations: Max 4 products per pricing interval, no usage-based pricing support.