Learn Nuxt with a Collection of 100+ Tips!

stripe-next
stripe-next

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.

Nuxt module for Stripe

npm versionnpm downloadsLicense

Nuxt module for application using stripe.

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
  1. 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