@vue-stripe/vue-stripe@4.3.2

Payment

Live Demo

1. Create a PaymentIntent backend

ClientSecret is required for the elements to be rendered. That's why you need to generate a payment intent first.

See the PaymentIntent documentation here.

Let's use the following data to render create a PaymentIntent.

{
  "amount": 2000,
  "currency": "usd"
}

2. Render Payment Elements frontend

The ClientScret from the request above will be used as an option to render the UI.

Get Started with Payment Elements

See implementation guide here.