Nuxt module for application using stripe.
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.
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.
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
}
})
On the client-side, you can use the useClientStripe
function to get a Stripe instance.
This instance can be used in pages or plugins.
Use stripe inside pages or plugins
<template>
<h1>Nuxt Stripe instance</h1>
<div>
{{ stripe }}
</div>
</template>
<script setup lang="ts">
// Import the function in your component or page
import { useClientStripe } from '@unlok-co/nuxt-stripe'
// Call the function to get the Stripe instance
const stripe = useClientStripe()
// Use the Stripe instance to interact with the stripe.js library
// stripe.redirectToCheckout(...)
</script>
- Add
@unlok-co/nuxt-stripe
dependency to your project
# Using pnpm
pnpm add -D @unlok-co/nuxt-stripe
# Using yarn
yarn add --dev @unlok-co/nuxt-stripe
# Using npm
npm install --save-dev @unlok-co/nuxt-stripe
- Add
@unlok-co/nuxt-stripe
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: [
'@unlok-co/nuxt-stripe'
],
})
Stripe keys can be added to the .env
file...
STRIPE_PUBLISHABLE_KEY="pk_live_..."
STRIPE_API_KEY="sk_live_..."
...or to the Nuxt configuration file:
export default defineNuxtConfig({
modules: [
'@unlok-co/nuxt-stripe'
],
stripe: {
// Server
apiKey: 'sk_test_123', // required
apiVersion: '2022-11-15', // optional, default is '2022-11-15'
// Client
publishableKey: 'pk_test_123', // required
}
})
We highly recommend you put your production keys in your
.env
file to avoid committing them
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
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: