Setting Up Stripe Webhooks for Development Environment Testing

I love using Stripe

Saying that is not an understatement but lately I encountered a problem when integrating it with an e-commerce store.

What if a customer is charged but their order isn't properly recorded due to form submission issues or database errors?

A user pays and doesn't receive anything. Sounds like a lawsuit waiting to happen.

Luckily you can use stripe webhooks to sort this problem out, your application will receive response events whenever stripe receives a particular event, such as a payment.charge or succeeded.

However there is one problem, getting this working locally

Recently, while working on my portfolio project, I faced this issue. Testing Stripe webhooks locally became tricky, complicating development. However, I found a workaround that could benefit others struggling with Stripe integration. By testing payment processes locally before deployment, troubleshooting becomes much easier.

This walkthrough assumes you have a stripe account set up already but if not simply visit Stripe

Once created visit the developer section.

1. Visit the developer tab and navigated to webhooks

Here, you can incorporate a local listener. Click the button here for some demo instructions.

2. Install Stripe on your computer.

brew install stripe/stripe-cli/stripe

3. Log into Stripe via the CLI

stripe login

After you have authenticated you can proceed with setup up your webhook

4. Listen to stripe events

Load up a new local terminal in your project and run the command

 stripe listen --forward-to localhost:8000/checkout/wh/

Here, you're instructing Stripe to monitor your localhost server running on port 8000. I am specifically targeting my webhook URL related to checkout, with the /wh/.

When you run this command Stripe will tell you when its ready and deliver you a webhook signing secret in the terminal. The secret should look something similar to:

*whsec_c103c941xxxxxxxxx

Use this secret when authenticating your stripe webhook requests.

In the dashboard you should be able to see the live local webhook.

By doing so, you receive all responses triggered by Stripe based on the wh events you've chosen to monitor.

5. Monitor Webhook Events

In my case, I've opted to listen to all events, which revealed an error.

Clicking on the accompanying code allows you to directly access the error on the Stripe dashboard.

This makes it so much easier to understand the reasoning for an error and making debugging so much more straightforward.

6. Debug your errors locally!

Here i can see which event failed, and I can click in to find the reasoning of the failure.

Debugging on easy mode!

Learning this made my life 10 times less stressful when finishing my final diploma portfolio project so I hope others find this well!

Happy coding!