Today I went through the Stripe Quickstart for the web (node + react). It wasn't a super smooth experienced, so if you also looked at this code and couldn't get it to work...I fixed it for all of us.
Quickstarts are awesome to get you from 0 to 100, very fast! 🏎️
Sometimes, however, things change, and tutorials' code (or libraries) fall a little behind. That causes me (and everyone else) some friction.
In this article, I will show you how I debugged the issues I found.
I am using Dashcam to explain (and show you) the issues I faced. I captured them as they were happening and...I show you how I resolved them.
I hope this unblocks you and help you build your first custom Stripe payment form!
Let's start
Navigate to the Stripe Quickstart page and download the zip file.
Once you download this, unzip it somewhere that makes it accessible for you.
For me, that folder is /Users/orlie/projects/stripe-sample-code/
Once in there, you want to install the dependencies.
npm install
You will then want to start the project by doing.
npm start
I immediately saw an error. Let's see how to fix this.
Yarn installation not found - How to debug and fix it
Watch missing yarn error on Dashcam
The error shown is:
/bin/sh: yarn: command not found
There are two solutions to this problem:
- Either you install yarn
- You replace the entries in package.json to use npm, the default package runner
I will opt for the second option, so open up package.json and edit lines 24 so it looks like this:
"start": "concurrently \"npm run start-client\" \"npm run start-server\""
Let's rerun the app; you will notice it's finally working. JK - well, we're now hitting another error!
SSL Error
This time the error has to do with SSL...
I found the solution after researching the error message (ChatGPT helps with this!):
To fix the error I need to pin the react-script library installed to a higher version (5 or higher):
I go ahead and edit package.json and change the line 10 to look like this
"react-scripts": "^5.0.0",
That should fix the issue - let's give it another go!
👉 Run npm start again
Uncaught runtime error
Relaunching the project using npm start - the localhost server goes up but...another error appears!
To make this error go away and continue with creating your first Stripe payment page, you can either comment out the inside CheckoutForm.jsx or fix it.
To fix, I changed the code in the following ways.
First I changed the <LinkAuthenticationElement> component to look like this in CheckoutForm.jsx:
<LinkAuthenticationElement
id="link-authentication-element"
onChange={handleChange}
/>
and secondly I added a function called handleChange
const handleChange = (e) => {
setEmail(e.value.email);
}
and voilà the code works!
Watch successful run on Dashcam
Why I used Dashcam to catch errors
Debugging software sucks, I get stuck, you get stuck, we start googling for answers - what a waste of time!
Dashcam tracks errors so not only I can get help faster, but I can show exactly what caused an error to someone with full context!
In this blogpost I use Dashcam. When I encountered any of these errors, Dashcam helps me play back the screen in sync with terminal, logs, and network requests.
This form of debugging is known as time-travel debugging. I can "rewind" my desktop, instead of having to reproduce the issue!
How set up time travel debugging with Dashcam
First every time I launch my app from the CLI, I use this command:
npm start 2>&1 | tee -a stripe-debug.log
What this command does is take all of the output that is shown on screen and write it using the tee command to a file.
In this example I called the file stripe-debug.log
Using this method you can use Dashcam to debug server Logs, you can use the Chrome extension to get console Logs from Chrome and Network Requests
Learn how to set up Dashcam to debug your local dev environment
Top comments (1)
Good read! Dashcam is seriously very helpful