stripe-vue

Vue components for Stripe.js and Elements with full TypeScript support.

[!NOTE] The aim of this module is to have @stripe/react-stripe-js for Vue with feature parity. You should be able to follow the React docs and examples using this module.

Features

• All Stripe Web Elements components
• Custom Checkout with the <CustomCheckoutProvider> component and useCustomCheckout() composable.
• Embedded Checkout with the <EmbeddedCheckoutProvider> and <EmbeddedCheckout> components.

Installation

npm install stripe-vue @stripe/stripe-js

Minimal example

An example CheckoutForm component:

<script setup>
import {
  PaymentElement,
  useElements,
  useStripe,
} from 'stripe-vue'

const stripe = useStripe()
const elements = useElements()

const errorMessage = ref(null)

async function handleSubmit() {
  if (elements.value === null) {
    return
  }

  // Trigger form validation and wallet collection
  const { error: submitError } = await elements.value.submit()
  if (submitError) {
    // Show error to your customer
    errorMessage.value = submitError.message
    return
  }

  // Create the PaymentIntent and obtain clientSecret from your server endpoint
  const res = await fetch('/create-intent', {
    method: 'POST',
  })
  const { client_secret: clientSecret } = await res.json()

  const { error } = await stripe.value.confirmPayment({
    // `Elements` instance that was used to create the Payment Element
    elements: elements.value,
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  })

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    errorMessage.value = error.message
  }
  else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <PaymentElement />
    <button type="submit" :disabled="!stripe || !elements">
      Pay
    </button>
    <div v-if="errorMessage">
      {{ errorMessage }}
    </div>
  </form>
</template>

<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { Elements } from 'stripe-vue'
import CheckoutForm from './CheckoutForm.vue'

const stripe = ref(null)

onMounted(async () => {
  stripe.value = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx')
})

const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  // Fully customizable with appearance API.
  appearance: {
    /* ... */
  },
}
</script>

<template>
  <Elements :stripe="stripe" :options="options">
    <CheckoutForm />
  </Elements>
</template>

To listen for events, use the @eventname directive:

Do this

<PaymentElement @loaderstart="onLoaderStart">

Don't do this

<PaymentElement :onLoaderStart="onLoaderStart">

Acknowledgements

The repository for this module is currently private. There are well-known Vue libraries that provide Stripe.js integration, such as vue-stripe-js and @vue-stripe/vue-stripe, which may suit your needs. Consider using this library if you're looking for a 1:1 correspondence in API and usage with @stripe/react-stripe-js.

Still think opening this repo to public might be useful? Let me know!

License

MIT