How to use Stripe with Vue.js

1npm install @stripe/stripe-js

1// src/composables/useStripe.ts
2import { loadStripe } from '@stripe/stripe-js';
3import type { Stripe } from '@stripe/stripe-js';
4import { ref } from 'vue';
5
6const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY);
7const stripe = ref<Stripe | null>(null);
8
9export function useStripe() {
10  const init = async () => {
11    stripe.value = await stripePromise;
12  };
13
14  return { stripe, init };
15}

1<!-- src/components/PaymentForm.vue -->
2<template>
3  <form @submit.prevent="handleSubmit">
4    <div id="payment-element" />
5    <button type="submit" :disabled="loading">
6      {{ loading ? 'Processing...' : 'Pay now' }}
7    </button>
8    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
9  </form>
10</template>
11
12<script setup lang="ts">
13import { ref, onMounted } from 'vue';
14import { useStripe } from '../composables/useStripe';
15
16const { stripe, init } = useStripe();
17const loading = ref(false);
18const errorMessage = ref('');
19let elements: any = null;
20
21onMounted(async () => {
22  await init();
23  const res = await fetch('/api/create-payment-intent', {
24    method: 'POST',
25    headers: { 'Content-Type': 'application/json' },
26    body: JSON.stringify({ amount: 2000 })
27  });
28  const { client_secret } = await res.json();
29
30  elements = stripe.value!.elements({ clientSecret: client_secret });
31  const paymentElement = elements.create('payment');
32  paymentElement.mount('#payment-element');
33});
34
35async function handleSubmit() {
36  if (!stripe.value || !elements) return;
37  loading.value = true;
38  errorMessage.value = '';
39
40  const { error } = await stripe.value.confirmPayment({
41    elements,
42    confirmParams: {
43      return_url: window.location.origin + '/payment-success'
44    }
45  });
46
47  if (error) {
48    errorMessage.value = error.message || 'Payment failed.';
49  }
50  loading.value = false;
51}
52</script>

1// server.js (Node.js + Express)
2const express = require('express');
3const Stripe = require('stripe');
4const stripe = Stripe(process.env.STRIPE_SECRET_KEY);
5const app = express();
6
7app.use(express.json());
8
9app.post('/api/create-payment-intent', async (req, res) => {
10  try {
11    const intent = await stripe.paymentIntents.create({
12      amount: req.body.amount, // amount in cents
13      currency: 'usd',
14      automatic_payment_methods: { enabled: true }
15    });
16    res.json({ client_secret: intent.client_secret });
17  } catch (err) {
18    res.status(400).json({ error: err.message });
19  }
20});
21
22app.listen(3001, () => console.log('Server on port 3001'));

1// Test card:
2// Number: 4242 4242 4242 4242
3// Expiry: 12/34
4// CVC: 123