Nuxt module for Stripe

Nuxt module for application using stripe.

• ✨  Release Notes
• 🏀 Online playground

Features

This Nuxt module provides an easy way to integrate Stripe in your Nuxt application, both on the client-side and server-side. It utilizes the official stripe package for server-side usage and @stripe/stripe-js for the client-side.

Server-side usage

The module provides a useServerStripe function to create a Stripe instance on the server-side. This instance can be used to interact with the Stripe API.

Example

import { defineEventHandler } from "h3";
import { useServerStripe } from "#stripe/server";

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

  return {
    version: stripe.VERSION,
  };
});

Client-side usage

On the client-side, you can use the useClientStripe function to get a Stripe instance. This composable is a wrap around the loadStripe and can be used in pages or plugins.

Example

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

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

// Use the Stripe instance to interact with the stripe.js library
// https://docs.stripe.com/js
</script>

Quick Setup

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

npx nuxi@latest module add stripe-next

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

export default defineNuxtConfig({
  modules: ["@unlok-co/nuxt-stripe"],
});

Configuration

export default defineNuxtConfig({
  modules: ["@unlok-co/nuxt-stripe"],
  stripe: {
    // Server
    server: {
      key: "sk_test_123",
      options: {
        // your api options override for stripe server side
        // https://github.com/stripe/stripe-node?tab=readme-ov-file#configuration
      },
      // CLIENT
    },
    client: {
      key: "pk_test_123",
      // your api options override for stripe client side https://stripe.com/docs/js/initializing#init_stripe_js-options
      options: {},
    },
  },
});

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

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

Development

Initial step: Clone this repository

# Install dependencies
yarn install
npm install

# Generate type stubs
yarn dev:prepare
npm run dev:prepare

# Develop with the playground
yarn dev
npm run dev

# Build the playground
yarn dev:build
npm run dev:build

# Run ESLint
yarn lint
npm run lint

# Run Vitest
yarn test
yarn test:watch
npm run test
npm run test:watch

# Release new version
yarn release
npm run release