Examples

<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { Elements, PaymentElement, useElements, useStripe } from 'vue-stripe'

const stripePromise = loadStripe('pk_test_xxx')
const stripe = useStripe()
const elements = useElements()

async function handleSubmit() {
  if (!stripe.value || !elements.value)
    return

  const { error: submitError } = await elements.value.submit()
  if (submitError) {
    console.error(submitError.message)
    return
  }

  const res = await fetch('/create-payment-intent', { method: 'POST' })
  const { clientSecret } = await res.json()

  const { error } = await stripe.value.confirmPayment({
    elements: elements.value,
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/return',
    },
  })

  if (error) {
    console.error(error.message)
  }
}
</script>

<template>
  <Elements :stripe="stripePromise" :options="{ clientSecret: '{{CLIENT_SECRET}}' }">
    <form @submit.prevent="handleSubmit">
      <PaymentElement />
      <button type="submit">
        Pay
      </button>
    </form>
  </Elements>
</template>

<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { CardElement, Elements, useElements, useStripe } from 'vue-stripe'

const stripePromise = loadStripe('pk_test_xxx')
const stripe = useStripe()
const elements = useElements()

async function handleSubmit() {
  if (!stripe.value || !elements.value)
    return

  const cardElement = elements.value.getElement(CardElement)
  if (!cardElement)
    return

  const { error, paymentMethod } = await stripe.value.createPaymentMethod({
    type: 'card',
    card: cardElement,
  })

  if (error) {
    console.error(error.message)
  }
  else {
    // Use paymentMethod.id
    console.log('Payment method:', paymentMethod.id)
  }
}
</script>

<template>
  <Elements :stripe="stripePromise">
    <form @submit.prevent="handleSubmit">
      <CardElement />
      <button type="submit">
        Pay
      </button>
    </form>
  </Elements>
</template>

<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { CheckoutProvider, ExpressCheckoutElement, PaymentElement, useCheckout } from 'vue-stripe/checkout'

const stripePromise = loadStripe('pk_test_xxx')
const checkout = useCheckout()

function fetchClientSecret() {
  return fetch('/create-checkout-session', { method: 'POST' })
    .then(response => response.json())
    .then(data => data.clientSecret)
}

async function handleSubmit() {
  if (checkout.value?.type !== 'success')
    return

  const result = await checkout.value.checkout.confirm()
  if (result.type === 'error') {
    console.error(result.error.message)
  }
}
</script>

<template>
  <CheckoutProvider
    :stripe="stripePromise"
    :options="{ clientSecret: fetchClientSecret }"
  >
    <form @submit.prevent="handleSubmit">
      <ExpressCheckoutElement />
      <PaymentElement />
      <button type="submit">
        Pay
      </button>
    </form>
  </CheckoutProvider>
</template>

<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { EmbeddedCheckout, EmbeddedCheckoutProvider } from 'vue-stripe'

const stripePromise = loadStripe('pk_test_xxx')

function fetchClientSecret() {
  return fetch('/create-checkout-session', { method: 'POST' })
    .then(response => response.json())
    .then(data => data.clientSecret)
}
</script>

<template>
  <EmbeddedCheckoutProvider
    :stripe="stripePromise"
    :options="{ fetchClientSecret }"
  >
    <EmbeddedCheckout />
  </EmbeddedCheckoutProvider>
</template>

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

const stripePromise = loadStripe('pk_test_xxx')
</script>

<template>
  <Elements :stripe="stripePromise">
    <router-view />
  </Elements>
</template>

<script setup>
import { useStripeStore } from '@/stores/stripe'

const stripeStore = useStripeStore()
const stripePromise = computed(() => stripeStore.stripePromise)
</script>

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