I debugged and fixed Stripe Quickstart issues, so you don't have to

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...

Watch SSL Error on Dashcam

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!

Watch Uncaught runtime Error

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