Setting Up Stripe Webhooks Locally

To test Stripe payments locally, we need to set up a webhook that Stripe can use to communicate with our local development server.

Note: If you have multiple Stripe projects, make sure to run stripe login first and select the correct project. This ensures your webhook listener connects to the right Stripe account.

Steps to Set Up Stripe Webhook

1. Open a New Terminal Window: Keep your Supabase and Next.js development server running in separate terminals.

2. Start Stripe CLI Webhook Listener: Run the following command:

   stripe listen --forward-to localhost:3000/api/stripe/webhook

   This will output a webhook signing secret. Copy this secret.

3. Update Environment Variables: In your apps/web/.env.local file, update the STRIPE_WEBHOOK_SECRET with the secret you just copied:

   STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret_here

Testing Stripe Payments

Now that we have our local environment set up with Supabase and Stripe webhooks, let's test a payment:

1. Sign In: Go to http://localhost:3000/login and sign in using either a magic link or Google sign-in.

   • If using magic link, you can check the inmail bucket server at http://127.0.0.1:54324/monitor to retrieve the login link.
   • After signing in, you will be redirected to http://localhost:3000/onboarding if you haven't subscribed yet. Here, you can choose a plan.
   • If you have already subscribed, you will be redirected to http://localhost:3000/dashboard.

2. Make a Test Payment: Navigate to your payment page and use one of Stripe's test cards to make a payment. For example:

   • Card number: 4242 4242 4242 4242
   • Expiry date: Any future date.
   • CVC: Any 3 digits.
   • ZIP: Any 5 digits.

   You can find more test card numbers in the Stripe documentation.

3. Verify the Payment:

   • Check your Next.js terminal for logs about the payment process.
   • Open your local Supabase Studio http://localhost:54323 and check the relevant tables to see if the payment information has been recorded.
   • Look at the Stripe CLI terminal to see the webhook events being sent to your application.

By following these steps, you can now develop and test your entire payment flow locally, including Stripe webhook events.

Remember, this setup is for local development only. When you're ready to accept real payments, you'll need to configure your production environment accordingly.