Payment Element

A component with 40+ payment methods including credit cards, SEPA, ApplePay and GooglePay.

App.vue

<script setup lang="ts">
import { loadStripe } from '@stripe/stripe-js'
import { onMounted, ref } from 'vue'
import { Elements } from 'vue-stripe'
import PaymentElementCheckoutForm from './PaymentElementCheckoutForm.vue'

const stripePromise = loadStripe(import.meta.env.PUBLIC_STRIPE_PUBLIC_KEY as string)

const clientSecret = ref<string>('')

onMounted(async () => {
  const resp = await fetch('/api/payment-element/payment-intent')
  const data = await resp.json() as { clientSecret: string }
  clientSecret.value = data.clientSecret
})
</script>

<template>
  <Elements v-if="clientSecret" :stripe="stripePromise" :options="{ clientSecret }">
    <PaymentElementCheckoutForm />
  </Elements>
</template>

PaymentElementCheckoutForm.vue

<script setup lang="ts">
import { ref } from 'vue'
import { AddressElement, LinkAuthenticationElement, PaymentElement, useElements, useStripe } from 'vue-stripe'

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

const errorMessage = ref<string | null>(null)

async function handleSubmit() {
  if (!stripe.value || !elements.value) {
    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
  }

  const { error } = await stripe.value.confirmPayment({
    // `Elements` instance that was used to create the Payment Element
    elements: elements.value,
    redirect: 'if_required',
  })

  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`.
    // router.push('/success')
  }
}
</script>

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

server.ts

import type { APIRoute } from 'astro'
import Stripe from 'stripe'

const stripe = new Stripe(import.meta.env.STRIPE_SECRET_KEY)

export const GET: APIRoute = async () => {
  const paymentIntent = await stripe.paymentIntents.create({
    amount: 2000,
    currency: 'usd',
    automatic_payment_methods: {
      enabled: true,
    },
  })

  return Response.json({
    clientSecret: paymentIntent.client_secret,
  })
}