This video is available to students only

How to Build a Stripe React Payment Form

We'll continue from what we've done in the previous lesson by looking to capture a user's credit or debit card information when a booking is to be made, with the help of the React Stripe Elements library.

Displaying the Payment Form with React Stripe Elements#

📝 The Stripe Elements for the web documentation referenced in this lesson can be found - here.
📝 The Stripe Elements in React documentation referenced in this lesson can be found - here.
📝 Documentation on Test card numbers and tokens that can be used within a test Stripe environment can be found - here.

With the <ListingCreateBookingModal /> now presented and shown when a user attempts to request a booking, let's attempt to present the UI element where we'll be able to capture a user's credit or debit card information.

Stripe provides a library known as Stripe Elements which are prebuilt UI components that help capture payment information from users. Stripe Elements provides many different UI elements to capture debit/credit card information, apple pay, bank information, etc. In our app, we're only going to be accepting debit or card credit information from a user interested in making a booking.

The Stripe Elements examples are often shown with HTML, CSS, and normal JavaScript. However, Stripe does offer a React component library that provides these Stripe elements as React components - Stripe Elements in React. We'll be using the React library to introduce a Stripe component element to capture debit/credit card information.

Here are some of the steps that can be taken to introduce a Stripe React element as documented in the Stripe Elements in React documentation.

  1. We'll need to install the react-stripe-elements library.

  2. When the react-stripe-elements is installed, we're told to add a <script /> tag in the index.html file of the public/ folder of our React application to load the Stripe library. This is for PCI (i.e. Payment Card Industry) compliance and we're told we must load the Stripe.js library directly from Stripe’s servers at runtime and not install it from npm or as an app dependency.

  3. The next step is to create the payment form. The react-stripe-elements library gives us a <CardElement/ > component and an injectStripe() higher-order function.

  • The <CardElement/> component is the card element we'll want to show the user.

  • The injectStripe() function allows us to create a higher-order component that provides an injected stripe prop object we can use to determine the details of the payment.

  1. In the uppermost parent component, we should have our app contained within a <StripeProvider /> component from react-stripe-elements which initializes Stripe and accepts an API key with which we'll pass the publishable key of our Stripe account.

  2. We can then use the <Elements /> component from react-stripe-elements to wrap the payment form. The documentation tells us the <Elements /> component is to wrap the parent that is to contain the different Stripe components.

  3. Finally, when a payment is made from the client, we can retrieve the token information from the injected stripe object prop with which the id will be the source information that we'll pass into our server from our client to dictate the payment source that was made.

  4. The rest of the documentation talks about how the server will then conduct the charge - with which we've already done.

For more details on the steps above, be sure to check out the Using Stripe Elements in React documentation.

Let's achieve the above step by step. First, we'll install the react-stripe-elements library in our client application. We'll also install the community prepared typings from the DefinitelyTyped repository.

We'll then head over to the public/index.html file in our client app and load the Stripe library directly from Stripe's servers.

In our root level <App /> component file (src/index.tsx), we'll import the <StripeProvider /> and <Elements /> components from the react-stripe-elements library.

In the return statement of our parent <App /> component, we'll wrap our entire app with the <StripeProvider /> component to have stripe available everywhere. For the apiKey prop of <StripeProvider />, we'll provide the value of the REACT_APP_S_PUBLISHABLE_KEY environment variable we have in our client project.

TypeScript will warn us that the apiKey prop should be a string and the environment variable we provide can either be a string or undefined. In this case, we'll assume when our app starts, the key will always be available as a string from the environment configuration. With that said, we'll cast the type as a string.

The <Elements /> component from react-stripe-elements should be the parent of all Stripe components we'll want to display. We'll only display the Stripe <CardElement /> component within the <Listing /> section component so with that said - we'll wrap the <Listing /> component rendered in the /listing/:id route of our <App /> component with <Elements />.

Start a new discussion. All notification go to the author.