Installation - Nuxt Stripe

Install @fixers/nuxt-stripe:

pnpm

pnpm add @fixers/nuxt-stripe

Add @fixers/nuxt-stripe as a module in your nuxt.config file:

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@fixers/nuxt-stripe'
  ]
})

Create a Webhook endpoint server/api/stripe/webhook.ts:

server/api/stripe/webhook.ts

export default stripeWebhookHandler((event) => {
  switch (stripeEvent.type) {
    case 'payment_intent.succeeded': {
      //
    }
  }
})

Environment variables

Add the Stripe keys to your .env file:

.env

NUXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_<...>"
NUXT_STRIPE_SECRET="sk_"
NUXT_STRIPE_WEBHOOK_SECRET="whsec_"

Head to your Stripe dashboard to the API keys.

And that's it, you can start using the useStripe() composable in your application, whoosh!

To receive webhooks events during development, install the Stripe CLI.

You don't need to stripe login the module automatically uses the keys from your .env file.

This module will take care of proxying the webhooks to your local server, so you don't have to worry about it.

Configuration

A zero-config setup