I debugged and fixed Stripe Quickstart issues, so you don't have to
Tags: javascript, stripe, debug, dashcam
Published: 2023-08-03 20:31:59

---
title: I debugged and fixed Stripe Quickstart issues, so  you don't have to
published: true
description: Interactively debugging the Stripe Quickstart for the web
tags: #javascript #stripe #debug #dashcam
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kra8joxc3qncnsxmyni.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-07-21 17:24 +0000
---
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.

![Debug Stripe, make money](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmfkqj0zgcypri2f9ox1.gif)

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](https://dashcam.io/?ref=devto) 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](https://stripe.com/docs/payments/quickstart) and download the zip file.


![screenshot show button to download](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cae9g2domp12yqovxafk.png)


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.

```bash
npm install
```

You will then want to start the project by doing.

```bash
npm start
```

I immediately saw an error. Let's see how to fix this.

![](https://media0.giphy.com/media/nVTa8D8zJUc2A/giphy.gif)

## Yarn installation not found - How to debug and fix it


![npm start error](https://replayable-api-production.herokuapp.com/replay/64c16043dd259f0063b71d51/gif?shareKey=7P9UXCtEuug3gLCnWLIoA)

{% cta https://app.dashcam.io/replay/64c16043dd259f0063b71d51?share=7P9UXCtEuug3gLCnWLIoA %} Watch missing yarn error on Dashcam {% endcta %}

The error shown is:
```bash
/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:
```json
"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...

[![SSL Error](https://replayable-api-production.herokuapp.com/replay/64c16678dd259f0063b71d53/gif?shareKey=T9qPdODm15InGCv5hqKpw)](https://app.dashcam.io/replay/64c16678dd259f0063b71d53?share=T9qPdODm15InGCv5hqKpw) 
  
{% cta https://app.dashcam.io/replay/64c16678dd259f0063b71d53?share=T9qPdODm15InGCv5hqKpw %} Watch SSL Error on Dashcam {% endcta %}

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

```json
"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!

![Runtime Error](https://replayable-api-production.herokuapp.com/replay/64c18b6d1070e8006137e080/gif?shareKey=iF9GEYkDNnlsoeSmI2plQ)

{% cta https://app.dashcam.io/replay/64c18b6d1070e8006137e080?share=iF9GEYkDNnlsoeSmI2plQ %} Watch Uncaught runtime Error {% endcta %}

To make this error go away and continue with creating your first Stripe payment page, you can either comment out the <LinkAuthenticationElement> 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`:
```javascript
<LinkAuthenticationElement
  id="link-authentication-element"
  onChange={handleChange}
/>
```

and secondly I added a function called `handleChange`

```javascript
const  handleChange = (e) => {
  setEmail(e.value.email);
}
```

and voilà the code works!



![Stripe Payment Quickstart - Success!](https://replayable-api-production.herokuapp.com/replay/64cc0defe0d92f00651b72f6/gif?shareKey=2XkSllBZRoHfP4MiZI2Rw)

{% cta https://app.dashcam.io/replay/64cc0defe0d92f00651b72f6?shareKey=2XkSllBZRoHfP4MiZI2Rw %} Watch successful run on Dashcam {% endcta %}

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

{% cta https://docs.dashcam.io/replayable/log-and-error-tracking/getting-started-with-logs %} Learn how to set up Dashcam to debug your local dev environment {% endcta %}