Missing Stripe documentation

[suuunly]

Is your improvement request related to a specific problem in the code or project structure? Please describe. 👨‍💻 Currently, it may be hard to run the application locally, as the application requires you to run a test stripe environment, with the added tunnel from your local machine to the stripe servers.

Additionally, there are 3 .env variables that are not well documented, and might be difficult to understand at first glance.

Describe the improvement or refactor you would like 🎯 This should be in the README file. Containing the following:

1. How to setup a Test Stripe account (without having to provide banking information)
2. How to populate the .env variables (all of which are done from your stripe account):
   3. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
   4. STRIPE_SECRET_KEY
   5. WEBHOOK_SECRET
3. The prerequisites required to run the command stripe:listen command in the package.json a. By that I mean, installing the stripe cli for example
4. Finally, update the run locally section to include the stripe:listen command

Additional context or comments Most of this can most likely be done by referencing Stripe's own documentation 🤔

[themujahidkhan]

Hi @suuunly!

I would like to work on this issue,

1. For setting up a Test Stripe account, would you want me to add a step-by-step guide or an article link that demonstrates how to set up Test Stripe account

2. If we include the article link, populating the .env file will be easy. Otherwise, we need to explain it in a readme file, But I think the readme file will be lengthy.

3. There is an extension available in the VS Code marketplace for Stripe CLI, which makes it easier for anyone to setup Stripe commands

Let me know what do you think?

[suuunly]

@themujahidkhan by all means! ❤️

1. Yes, I agree, that it would be better to link to their documentation about Setting up a Test Stripe Account;

2. Again, I agree, that linking to their documentation on populating the two .env variables (public key and secret) is a good idea; perhaps we can link to a related section within a guide relating "Connecting Stripe to NextJS" to simplify the process?

3. Currently there is a script in the package.json, called stripe:listen, which will automatically start listening for callbacks from Stripe. When you run the command, it also automatically displays the final .env key (the webhook related one) - that the user can plop right in to the .env file. However, it does require the user to have the stripe cli installed. One danger about relying on vs code extensions, is that not everyone uses vs code, given the rise of new IDEs 😳

   • One note on why the stripe:listen command is favoured, is because it also auto routes the callback to an endpoint within the app 😄
   • Granted, this also means we need to specify that the stripe:listen command as the 8th step in the run locally numeric guide:

[themujahidkhan]

Hey @suuunly

Screenshot for the Setting up Stripe account

Screenshot for Running locally section

[suuunly]

Looks good 😄 The only changes I would suggest, are:

1. Instead of going through the lengthy process of explaining how to get the webhook secret, you can say "run the yarn stripe:listen command in the project - this will reveal the webhook secret"
2. The final step in the Run locally section, should use yarn instead of npm run, and could be shortened to: "Run yarn stripe:listen in a separate terminal to listen for stripe changes"

[themujahidkhan]

Looks good 😄 The only changes I would suggest, are:

1. Instead of going through the lengthy process of explaining how to get the webhook secret, you can say "run the yarn stripe:listen command in the project - this will reveal the webhook secret"
2. The final step in the Run locally section, should use yarn instead of npm run, and could be shortened to: "Run yarn stripe:listen in a separate terminal to listen for stripe changes"

Done the changes,

Screenshot for Stripe

Screenshot for Run locally

[suuunly]

Oh, sorry for the confusion. I meant that when you run the yarn stripe:listen command, it shows you your webhook key. Like so:

So in step 8 of your first screenshot, you can flip the two tasks. 😛 Run the command, and theeen then fill out the WEBHOOK_SECRET 👍

Also, just a minor thing, regarding your second screenshot, could you simplify the final line to just say yarn stripe:listen, and maybe make it inline. It is mostly just to keep the format across the 8 steps consistent 😁

But other than that, it looks good 🥳

[suuunly]

oh one detail that is missing, is the prerequisite that you need to have the CLI installed on your machine 🤔 You can make it a quick one liner saying install the Stripe CLI on your machine, and refer to this link: https://docs.stripe.com/stripe-cli

[themujahidkhan]

I've made changes as suggested,

Prerequisite

Setting up stripe account

Run Locally

[suuunly]

That looks great. The absolute fiiiinal note would be to mention the WEBHOOK_SECRET in the step 8, in the stripe account screenshot 😁 If that is done, then I'd say it is done 🥳

[themujahidkhan]

8. Run yarn stripe:listen in your terminal to retrieve the WEBHOOK_SECRET value directly in the terminal.

Would that work for you? Or need changes?

[suuunly]

That is perfect! 👍🎉

[themujahidkhan]

Done, I've opened a PR

[suuunly]

It has been approved and merged in 😄