The Purpose of This Article
I’m trying to make other people’s coding journeys easier than mine by making tutorials of what I’ve learned. I recently had to integrate payments to monetize my website, so hope you can use what I learned!
I learned how to code by building my financial education business. Check it out if you’re interested: www.snowballfinances.com.
Please send me an email at firstname.lastname@example.org if you get stuck, or post in the comments below!
What You’ll Learn
- Use the Stripe client library in React to create an access token.
- Set up Stripe endpoint on a Node.js server to receive the token, process the payment, and send a response.
What You’ll Need
- A Stripe account created at www.stripe.com. Write down your Stripe Public and Secret TEST Keys. You’ll have to get your account approved if you want to start selling online (deployment instructions included).
- Node.js: https://nodejs.org/en/download/
- Create React App: https://reactjs.org/docs/create-a-new-react-app.html
Let’s get started!
Get your Stripe Public API key and follow the steps to set up your client-side application.
npx create-react-app name-of-your-app
npm i @stripe/react-stripe-js @stripe/stripe-js axios
Great! You’ve installed all the dependencies you need to handle the token creation (Stripe calls the token an “id”).
Now, let’s set up the folder structure. I’ve made it as simple as I could. You can create it by copying and pasting the following command, or by looking at the picture.
mkdir src/Stripe && touch src/Stripe/CheckoutForm.js && touch src/Stripe/StripeContainer.js
We’ll set up up the Stripe Container as it’s own component so that you can use it wherever you want in your application. Code all the components before running the app.
Inside the StripeContainer component, we’ll set up Stripe to wrap our CheckoutForm with the Elements component provided by Stripe. The Elements component provides the context to access Stripe methods within our CheckoutForm component.
IMPORTANT: Replace PUBLIC_KEY (StripeContainer.js line 7) with your own Stripe public key. Use the TEST public keys in development.
Finally, we set up our CheckoutForm. On line 2, you can see we’re importing useStripe and useElements. These are made available by the Elements wrapper on our StripeContainer. Copy the following lines of code into the CheckoutForm component.
If you run
npm start and go to your browser, you should see the Stripe CardElement from our CheckoutForm.js file being rendered. Stripe handles the form in order to avoid any bugs, exploits, etc.
If you enter Stripe’s test card data ( I’ve filled it below) and hit pay, you should receive a successful response back with the token (id).
The id created (“pm_1HBL8uF0FEBBFe….”) is the token. You’re ready to create the server to process a payment with that token!
Now we’ll send the token (id) from the client-side to our server and process the payment! This part is a bit trickier, but if you know how to use Node.js you should get it.
On a new project folder, input the following commands to create our server.
cd stripe-server && npm init -y
npm i stripe express cors dotenv body-parser
touch index.js .env
Copy the following code into index.js:
Also, on your .env file, add your Stripe secret key from your Stripe dashboard.
We’ve created a /stripe/charge route to process a Stripe payment. If you look at the route, the stripe.paymentsIntent.create() function is expecting an id and amount. These should be sent from the client to specify the amount you’re charging and the id (or token, I’m using these terms interchangeably).
You can read more about paymentIntents in the Stripe docs:
Stripe API Reference - PaymentIntents
Complete reference documentation for the Stripe API. Includes representative code snippets and examples for our Python…
Let’s edit our React Client to send these parameters so that the charge is successful.
- Import axios on line 3.
- If you’re not getting an error from the Client on line 16, send a POST request to the server with the id and the amount you’re charging.
Important note about amounts: Stripe handles amounts in minimum units (cents). So if you want to charge $1.00, the amount you send to Stripe is 100 cents. If you want to charge $20.00, your amount will be 2,000 (cents). In our case, we’re sending 999, the equivalent of $9.99. You can read more about this in their documentation.
Run your server:
Go to your client, fill in the credentials, and hit Pay. You should be getting a payment successful response!
If you look at your server logs, you should be getting a response similar to this one:
If you want to make sure the charge went through, go to your Stripe Dashboard. Toggle the button “Viewing Test Data” on the left side of the Dashboard. Now if you go to Payments, you should see the charge you created!
If you want to deploy your application and have Stripe working, you’ll have to do the following:
- Get your Stripe account approved.
- Client: StripeContainer.js line 7 change the public test key with the production public key Stripe gives you.
- Server: .env file line 2, create a STRIPE_SECRET_PRODUCTION=your_production_key and add the secret production key Stripe gives you.
- Server: index.js line 4, change the environment variable to STRIPE_SECRET_PRODUCTION.
- Deploy server (I use Heroku, here’s their guide on how to deploy a Node server : https://devcenter.heroku.com/articles/deploying-nodejs).
- Client: CheckoutForm.js line 23, change the endpoint from http://localhost:8080/stripe/charge to http://yourherokuserverendpoint.com/stripe/charge.
And you should be good to go!
You’ve successfully added Stripe payments to your application. Read the documentation to see all the different types of payments and information you can ask from users, or even add subscriptions!
And as always, happy coding!