Nuxt module for Stripe

Fully featured Stripe module for Nuxt 3. Checkout Stripe Docs for more information about how to use.

Features

This Nuxt module provides an easy, fully typed, way to integrate Stripe in your Nuxt 3 application, both on the client-side and server-side. Respectively it utilizes the official packages of @stripe/stripe-js and stripe.

Initial Setup

1. Add @sandros94/nuxt-stripe dependency to your project

# Using npm
npm install --save-dev @sandros94/nuxt-stripe

# Using yarn
yarn add --dev @sandros94/nuxt-stripe

# Using pnpm
pnpm add -D @sandros94/nuxt-stripe

2. Add @sandros94/nuxt-stripe to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@sandros94/nuxt-stripe'
  ],
})

Configuration

Stripe keys can be added and edited at runtime via environment variables…

NUXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_live_..."
NUXT_STRIPE_API_KEY="sk_live_..."

…or to the Nuxt configuration file like:

export default defineNuxtConfig({
  modules: [
    '@sandros94/nuxt-stripe'
  ],
  stripe: {
    // Client
    publishableKey: 'pk_test_123', // required
    clientOptions: {
      apiVersion: '2022-11-15', // optional, default is '2022-11-15'
      /** other stripe-js options */
    }
    // Server
    apiKey: 'sk_test_123', // required
    serverOptions: {
      apiVersion: '2022-11-15', // optional, default is '2022-11-15'
      /** other stripe options */
    }
  }
})

For all available serverOptions options take a look at the official repo README. While for the clientOptions options take a look at the official docs.

We highly recommend you put your production keys in your .env file to avoid committing them

Client-side usage

For client-side usage you can use the useStripeClient function to get a stripe-js instance.
This composable is a wrap around the loadStripe and can be used in pages or plugins. Remember to wrap useStripeClient() in a ClientOnly built-in composable or use it in a client-only composable like Checkout.client.vue

Example

<template>
  <div>
    <h1>Nuxt Stripe instance</h1>
    <ClientOnly>
      {{ stripe ? stripe : 'Loading...'}}
    </ClientOnly>
  </div>
</template>

<script setup lang="ts">
// Call the composable to get the Stripe instance
const stripe = await useStripeClient()

// Use the Stripe instance to interact with the stripe.js library
// stripe.redirectToCheckout(...)
</script>

Server-side usage

For server-side usage you can use the useStripeServer function to create a stripe instance.
This instance should be used server-side to interact with the Stripe API.

Example

import { defineEventHandler } from 'h3'

export default defineEventHandler(async (event) => {
  const stripe = await useStripeServer(event)
  console.info("Stripe instance:", stripe)

  return {
    version: stripe.VERSION
  }
})

Contribution

Clone this repository and then:

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint

# Run Vitest
pnpm run test

# Release new version
pnpm run release

Notes

This module was originally a fork of fuentesloic/nuxt-stripe and it was ment for Nuxt 3 only, if you are looking for a Nuxt 2 version take a look at the original work WilliamDASILVA/nuxt-stripe.