stripe-next
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 instance
const stripe = await useClientStripe();
// Use the Stripe instance to interact with the stripe.js library
// https://docs.stripe.com/js
</script>
Quick Setup
- Add
@unlok-co/nuxt-stripe
dependency to your project
npx nuxi@latest module add stripe-next
- Add
@unlok-co/nuxt-stripe
to themodules
section ofnuxt.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