Nuxt module for Stripe

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 instanceconst stripe = await useClientStripe()// Use the Stripe instance to interact with the stripe.js library// stripe.redirectToCheckout(...)</script>

Quick Setup

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

# Using pnpmpnpm add -D @unlok-co/nuxt-stripe# Using yarnyarn add --dev @unlok-co/nuxt-stripe# Using npmnpm install --save-dev @unlok-co/nuxt-stripe

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        apiVersion: '2022-11-15', // optional, default is '2022-11-15'      }    // CLIENT    },    client: {      key: 'pk_test_123',      // your api options override for stripe client side      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 dependenciesyarn installnpm install# Generate type stubsyarn dev:preparenpm run dev:prepare# Develop with the playgroundyarn devnpm run dev# Build the playgroundyarn dev:buildnpm run dev:build# Run ESLintyarn lintnpm run lint# Run Vitestyarn testyarn test:watchnpm run testnpm run test:watch# Release new versionyarn releasenpm run release

Nuxt 2

Disclaimer! Nuxt 2's end-of-life is planned for 31st Dec, 2023. The following stripe module is only for nuxt 2 purpose and does not cover server side:

stripe-next