Live Demo

Test Vue Stripe components with real Stripe integrations. These live demos connect to our hosted backend at backend.vuestripe.com - no setup required.

One-Time Payments

Stripe Checkout

Redirect to Stripe's hosted checkout page using the session URL.

Payment Element

Accept cards, wallets, and bank payments with the universal Payment Element.

Embedded Checkout

Stripe's prebuilt Checkout page inside your page, from a Checkout Session.

Custom Checkout

Your own checkout page on a Checkout Session: Payment Element, billing address, and session totals.

Checkout Form (beta)

Stripe's complete checkout form as one element, confirmed with useCheckoutForm.

Card Element

Legacy single-field card input with full styling control.

Split Card Elements

Separate inputs for card number, expiry, and CVC.

Link Authentication

Enable one-click checkout with Stripe Link.

Express Checkout

Apple Pay, Google Pay, and Link buttons from the Express Checkout Element.

Payment Request

Your own button opens the browser's payment sheet with usePaymentRequest.

Address Element

Collect billing or shipping addresses with autocomplete.

Saving Cards and Tokens

Save a Card

Save a payment method for later with a SetupIntent and useSetupIntent.

Create Payment Method

Turn card details into a reusable PaymentMethod with useCreatePaymentMethod.

Tokens

Create a ConfirmationToken, a card Token, and a Radar Session.

Buy Now, Pay Later

Payment Method Messaging

Show Klarna, Afterpay, and Affirm installment messaging.

Regional Payment Methods

SEPA Direct Debit

Collect an IBAN and confirm a SEPA Direct Debit payment.

BECS Direct Debit (Australia)

Collect an Australian bank account with the AU Bank Account Element.

ACH Direct Debit (US)

Link a US bank account with Financial Connections and confirm the debit.

Subscriptions

Stripe Checkout

Redirect customers to Stripe's hosted checkout page for subscriptions.

Embedded Elements

Keep customers on your site with embedded subscription forms.

Identity

Identity Verification

Verify a customer's identity in Stripe's modal with useIdentity.

Not in the Live Demos

Some components need Stripe access that the demo account does not have, so they have no live demo. Their API pages describe what Stripe returns without access:

• VueStripeTermsElement and VueStripeLinkSignupElement: Stripe betas.
• VueStripeTaxIdElement: no demo yet, though it needs no beta flag. Build your own checkout page shows how to add it.
• Issuing Elements and the Issuing, Treasury and Financial Account disclosures: an account onboarded to Stripe Issuing or Treasury.
• VueStripePricingTable: a pricing table created in your Stripe Dashboard. The Pricing Table guide shows how to set one up.

Test data

Pay with 4242 4242 4242 4242, any future expiry date, any CVC and any postal code. Cards for 3D Secure and declines, and test bank accounts, are in Test your integration.