Vue Stripe.js Integration

2.0.2 · active · verified Sun Apr 19

vue-stripe-js (current stable version 2.0.2) is a library that provides Vue 3 components for integrating Stripe.js into web applications, enabling developers to build various payment UIs. It maintains an active release cadence with frequent minor updates for bug fixes and compatibility, including enhanced Nuxt 3 support. Major versions, like v2.0.0, introduce significant architectural shifts such as the transition to ES modules. The library's core philosophy emphasizes minimal abstractions, offering direct control over Stripe.js functionalities while leveraging Vue's reactivity system. It is fully TypeScript-ready and designed to work seamlessly with modern frontend toolchains, acting as a lightweight, unopinionated bridge between the Stripe.js SDK and the Vue component lifecycle for creating advanced payment integrations.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to load Stripe.js, initialize StripeElements and StripeElement components for a Payment Element, and handle a form submission to confirm a payment intent in a Vue 3 TypeScript application.

<template>
  <form
    v-if="stripeLoaded"
    @submit.prevent="handleSubmit"
  >
    <StripeElements
      :stripe-key="publishableKey"
      :instance-options="stripeOptions"
      :elements-options="elementsOptions"
      ref="elementsComponent"
    >
      <StripeElement
        type="payment"
        :options="paymentElementOptions"
        ref="paymentComponent"
      />
    </StripeElements>
    <button type="submit">
      Submit Payment
    </button>
  </form>
  <div v-else>Loading Stripe...</div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from "vue"
import { loadStripe } from "@stripe/stripe-js"
import { StripeElements, StripeElement } from "vue-stripe-js"

import type {
  StripeElementsOptionsMode,
  StripePaymentElementOptions,
} from "@stripe/stripe-js"

// Use your actual publishable key from Stripe Dashboard
const publishableKey = process.env.VITE_STRIPE_PUBLISHABLE_KEY ?? "pk_test_YOUR_KEY";

const stripeOptions = ref({
  // Optional: https://stripe.com/docs/js/initializing#init_stripe_js-options
})
const elementsOptions = ref<StripeElementsOptionsMode>({
  // Required: https://stripe.com/docs/js/elements_object/create#stripe_elements-options
  mode: "payment",
  amount: 1099, // Example: $10.99
  currency: "usd",
  appearance: {
    theme: "flat",
  },
})
const paymentElementOptions = ref<StripePaymentElementOptions>({
  // Optional: https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options
})
const stripeLoaded = ref(false)
const clientSecret = ref("") // This should come from your backend

const elementsComponent = ref<typeof StripeElements | null>(null)
const paymentComponent = ref<typeof StripeElement | null>(null)

onBeforeMount(async () => {
  try {
    await loadStripe(publishableKey);
    stripeLoaded.value = true;

    // In a real application, you would call your backend here
    // to create a PaymentIntent and fetch its client_secret.
    // For this example, we'll simulate a client_secret.
    clientSecret.value = "pi_FAKE_CLIENT_SECRET_TEST"; // Replace with actual client_secret
    elementsOptions.value.clientSecret = clientSecret.value; // Assign clientSecret to elementsOptions
  } catch (error) {
    console.error("Failed to load Stripe.js or initialize elements:", error);
  }
})

async function handleSubmit() {
  if (!elementsComponent.value || !paymentComponent.value || !clientSecret.value) {
    console.error("Stripe elements not ready or client secret missing.");
    return;
  }

  const stripeInstance = elementsComponent.value.instance;
  const elements = elementsComponent.value.elements;

  if (!stripeInstance || !elements) {
    console.error("Stripe or Elements instance not available.");
    return;
  }

  console.log("Attempting to confirm payment...");
  const { error } = await stripeInstance.confirmPayment({
    elements,
    confirmParams: {
      return_url: window.location.origin + '/payment-complete',
    },
  });

  if (error) {
    console.error("Payment confirmation failed:", error.message);
    // Display error to the user
  } else {
    console.log("Payment successful! Redirecting to return_url.");
    // User will be redirected to return_url
  }
}
</script>

view raw JSON →