Payments with Stripe Checkout and React

Danny Hurlburt

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:

  1. Stripe.js & Elements is a foundational JavaScript library for building payment flows requiring you to build you own payment form.
  2. 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.
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.
Stripe dashboard of API keys page.

Each Stripe account runs in one of two modes:

  1. Live mode

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

Default Stripe checkout button.   Simple Stripe checkout dialog.

or it can be configured to collect billing address, shipping address, email, and credit card information:

Complex Stripe checkout dialog - page 1.   Complex Stripe checkout dialog - page 2.


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}
      />
    )
  }
}

Default Stripe checkout button.   Plain Stripe checkout dialog.

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
      />
    )
  }
}

Spruced-up Stripe checkout dialog - page 1.   Spruced-up Stripe checkout dialog - page 2.

With the label prop, you can provide custom text for the initial button.

<StripeCheckout
  ...
  label="Pay with 💳"
/>
Custom Stripe Checkout button.

With the panelLabel prop, you can provide custom text for the “submit” button in the dialog.

<StripeCheckout
  amount={900}
  ...
  panelLabel="Rent for {{amount}}"
/>
Custom Stripe Checkout submit button.

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.

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#