Vue Stripe Playground

createVueStripe() as the provider

The demo below is a separate Vue app that only calls app.use(createVueStripe({ publishableKey })). It has no VueStripeProvider: useStripe(), VueStripeElements and the Payment Element get Stripe from the plugin, which loads Stripe.js once, the first time something needs it.

app.use(createVueStripe({ publishableKey: 'pk_test_...' }))

<VueStripeElements mode="payment" :amount="2000" currency="usd">
  <VueStripePaymentElement />
</VueStripeElements>

No Stripe key configured. Click "Add Key" in the header above.