Stripe CLI - Nuxt Stripe

Refer to the official Stripe documentation for more information.

Pro Tip

In a devcontainer you can use the Stripe CLI feature:

.devcontainer/devcontainer.json

{
  "features": {
    "ghcr.io/nullcoder/devcontainer-features/stripe-cli:1": {}
  }
}

First you need to install the Stripe CLI.

This step is platform dependant however here's quick instructions for Windows and Docker:

Terminal

docker run --rm -it stripe/stripe-cli:latest

The webhook secret will is printed in the terminal when you run the project during development.

To retrive the webhook secret, navigate to the Stripe Dashboard and click on the Developers tab then click the Test in a local environment button, or just follow the direct link to the Stripe Test Webhooks Dashboard.

Add the webhook secret to your .env file:

.env

NUXT_STRIPE_WEBHOOK_SECRET="whsec_"

You are now ready to receive webhooks events during development, the module will take care of running the Stripe CLI for you.

You must set the NUXT_STRIPE_WEBHOOK_SECRET in your .env otherwise the webhook signatures will not match.

Caveats

When local testing, there are some things to consider.

Stripe might rotate the CLI webhook secret after some time, keep an eye on the logs and be aware of this.

You might not see all the events in the terminal, this is intentional to avoid clogging your workspace.

Instead, print the stripe event yourself in the webhook handler like so:

server/api/stripe/webhook.ts

export default stripeWebhookHandler((event) => {
  if (import.meta.dev) {
    console.dir(event, { depth: null, colors: true })
  }
})

Be aware you are gonna get bombarded with events, so use this if you need some tinkering or debugging.

useStripe()

A Vue composable to create a Stripe instance.

Custom Webhook

Welcome to Nuxt Stripe.