Need to accept online payments for a React web application in a PCI compliant manner? In this article, we’ll explore Stripe and how to integrate a payment form that collects credit card information into a React web application.
Stripe is a popular online payment service. Using Stripe to accept a credit card payment is a two-step process involving the client-side and the server-side.
This article will only explore the client-side using Stripe Checkout via react-stripe-checkout
. We'll cover Stripe.js & Elements and the server-side in future articles.
Stripe offers two primary means for accepting payments on the client-side:
- Stripe.js & Elements is a foundational JavaScript library for building payment flows requiring you to build you own payment form.
- Stripe Checkout provides a simple solution to accept payments. This solution will generate a payment form for you based on how you configure it.
In order to use Stripe, you’ll need to create a free account or use an existing one. Register to create a Stripe account.
Once you have successfully submitted the registration form, you’ll be sent an email to confirm your email address and you should be redirected to the dashboard.
Stripe dashboard of a new account.
An unnamed account is automatically created for you. You can add more than one account to each login. How you use this ability is up to you. One organizational strategy would to have an account for each website/web app.
In the side navigation, click Developers
followed by API keys
. The API keys page will list your publishable key
and your secret key
. You’ll need the publishable key
when configuring react-stripe-checkout
.
Stripe dashboard of API keys page.
Each Stripe account runs in one of two modes:
-
Live mode
-
Test mode
New accounts will begin in test mode. Each mode comes with its own pair of publishable
and secret
keys. In Test mode, no actual charges will be made.
Stripe Checkout
Stripe Checkout will generate a button that, when clicked, will open a modal payment information dialog. This dialog is highly configurable. The form can be configured to only collect an email and credit card information:
or it can be configured to collect billing address, shipping address, email, and credit card information:
The react-stripe-checkout
package is a thin wrapper around Stripe Checkout. It comes with a single React component that encapsulates Stripe Checkout. The component accepts almost two dozen props, most of which reflect Stripe Checkout configuration options. Only the token
and stripeKey
props are required.
Stripe uses a token-based mechanism to handle the sensitive card data. This ensures that no sensitive card data ever needs to touch your server, thus allowing your integration to operate in a PCI-compliant manner.
What this means technically is that once the user enters and submits the credit card information, Stripe Checkout will send the information to a Stripe server which then returns a short-lived token. This token effectively represents the entered credit card information. This is the reason for the token
property which is a callback that accepts the token created by Stripe and optionally accepts any address information the user may have entered.
Installation
Just add the react-stripe-checkout
package to your project using npm or Yarn:
$ npm install react-stripe-checkout
or
$ yarn add react-stripe-checkout
Usage
Using just the required props will result in a fairly plain button and payment form.
import React from 'react' import StripeCheckout from 'react-stripe-checkout'; export default class Checkout extends React.Component { onToken = (token, addresses) => { // TODO: Send the token information and any other // relevant information to your payment process // server, wait for the response, and update the UI // accordingly. How this is done is up to you. Using // XHR, fetch, or a GraphQL mutation is typical. }; render() { return ( <StripeCheckout stripeKey="your_PUBLISHABLE_stripe_key" token={this.onToken} /> ) } }
You can provide your user with a better experience by using the highly recommended props.
import React from 'react' import StripeCheckout from 'react-stripe-checkout'; export default class Checkout extends React.Component { onToken = ... render() { return ( <StripeCheckout amount="500" billingAddress description="Awesome Product" image="https://yourdomain.tld/images/logo.svg" locale="auto" name="YourDomain.tld" stripeKey="your_PUBLISHABLE_stripe_key" token={this.onToken} zipCode /> ) } }
With the label
prop, you can provide custom text for the initial button.
<StripeCheckout ... label="Pay with 💳" />
With the panelLabel
prop, you can provide custom text for the “submit” button in the dialog.
<StripeCheckout amount={900} ... panelLabel="Rent for {{amount}}" />
If you want to experiment with Stripe Checkout and react-stripe-checkout
, then setup a Stripe account, gather your publishable and secret key, and head over to CodeSandbox where we’ve setup two sandboxes you may fork and play with. In the client-side sandbox, click Fork
and enter your publishable key. In the server-side sandbox, click Fork
and enter your secret key.
🤑 Now you can start charging your customers for your products or services.