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.

Did you ever figure out a way to do this? – Andrew Philpott Mar 01 '17 at 21:41 — Andrew Philpott, Mar 01 '17 at 21:41
@AndrewPhilpott you can check my answer below! – sstauross Jul 18 '18 at 12:52 — sstauross, Jul 18 '18 at 12:52

score 3 · Accepted Answer · answered Jul 03 '17 at 13:34

3

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

answered Jul 03 '17 at 13:34

sstauross

2,602
2
30
50

2

That's awesome - still seems like you need the stripe.js tag in the page though (According to the readme file). – Matt Holland Jul 04 '17 at 17:00
Thats true @MattHolland. – sstauross Jul 05 '17 at 09:48

score 1 · Answer 2 · answered Jun 30 '17 at 22:16

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 */

Client side you can use this library officially from stripe: https://github.com/stripe/react-stripe-elements — sstauross, Jul 03 '17 at 13:35

How to add Stripe.js script in React component

2 Answers2