This sample project uses Stripe's client-only Checkout to charge for a one-time product or a recurring subscription and uses Netlify Functions to handle the payment succeeded webhook to the update our Userbase user status to paid.
- Create your
.envfile and add your secrets:
cp .env.example .env- Add your client-side identifiers to the public/client_config.js file.
Note: make sure not to mix up the public identifiers in the client_confi.js with the secret keys in the .env file. The content of the .env file needs to be kept secret and never commited to git. That's why we have .env in our .gitignore file.
-
Install the Stripe CLI & login with your Stripe account.
-
Start the webhook event forwarding:
stripe listen --forward-to http://localhost:34567/checkoutNote: The Stripe CLI will return your webhook signing secret: whsec_1234. Copy the secret and paste it into your .env file.
-
In a separate terminal window, install the Netlify cli
-
Install the dependencies for the function:
npm install- Run the Netlify dev server
netlify dev🎉 Watch your terminal windows for webhook events and error logs.
Your Netlify Function will have the following URL shape (https://your-project-name.netlify.com/.netlify/functions/checkout). Use this to create a live webhook endpoint in your Stripe dashboard.
Your live webhook will have a different signing secret, which you can retrieve from the webhook details page. Use this secret in your Netlify deploy settings.
The Netlify deploy command will not set up the variables from your .env file. You will need to set up your secrets manually in the Netlify build settings.
Now run:
netlify deploy --prod --functions=functions