How to add Stripe.js script in React component

Question

I would like to create a Payment form using Stripe as payment provider.

In Stripe.js Reference the procedure to create the form component is described using jQuery including the external script in the page. How is it possible to include it in my React component? What is the best way? By far i have the following:

import React, { Component } from 'react';

class PaymentForm extends Component {
 constructor(props) {
  super(props);
 }

 componentDidMount() {
   Stripe.setPublishableKey('THE-PUBLIC-KEY');
 }

 handleSubmit(e) {
   e.preventDefault();
   Stripe.card.createToken(e.currentTarget, (status, response) => {
    console.log( status, response );
   });
 }

 render() {
   //THE PAYMENT FORM
 }
}

Note1: I would not like to use ReactScriptLoader as it is not actively updated.

Note2: Also saw dangerouslySetInnerHTML solution which i don't think it is good practice.

Answer 1

Stripe has officially released react-stripe-elements module with React components that help you add Stripe Elements to your React app.

Answer 2

While there is an NPM module for Stripe, they do not support using it for client-side applications. You'll have to add the stripe.js library via script tag to your index.html page (Or wherever you generate the HTML element that React will mount to and import the React scripts):

<script src="https://js.stripe.com/v3/"></script>

This is the recommended method from the Stripe documentation. It will create the Stripe object in global scope, where it will be accessible to your React code.

I would be very wary of using a library for payments in any way other than that supported by its developer - think you're right to avoid ReactScriptLoader and dangerouslySetInnerHtml for this purpose.

If you use ESLint, you can specify a global at the top of your JSX file to stop the warning:

/* global Stripe */