Stripe with React JS

Question

I need to create token with Stripe.js in React JS, but I can't find any easy way. In node.js I would do something like this:

   stripeClient.tokens.create({
      card: {
        number: '4242424242424242',
        exp_month: 12,
        exp_year: 2050,
        cvc: '123'
      }

But the Stripe npm module doesn't work for me in React JS. I'm getting error:

Cannot resolve module 'child_process'

So since this is node pibrary obviously, I would like to use

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

But I'm not sure what should be the best practice to implement external libraries in React

May

Answer 1

You can just go ahead and add it like any other client side library, like you might have done in the past.

Include this script tag:

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

Then use the global that it exposes inside your code.

import React from 'react';

// we didn't have to import stripe, because it's already
// in our global namespace.
Stripe.setPublishableKey('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

It's not as clean as being able to require it from NPM, but it will work just fine.

Apicella

Thank you totally worked, just my linter is not happy about that. – May

You should be able to provide your linter with a list of globals to ignore. For example, with ESlint: eslint.org/docs/user-guide/configuring#specifying-globals – Apicella

Answer 2

For those who are looking for guidance when using Stripe in React: Accept Stripe Payments with React and Express is an article with a straight forward implementation of Stripe in React (create-react-app) and a minimal Express server that handles your payment requests and forwards them to the Stripe platform. The article keeps the boilerplate to a minimum and comes with an open source project that you can simply try out on your own.

Twinkling

Answer 3

Switch to BrainTree
They support a client-side NPM package which can be used with create-react-app (Webpack / Browserify): https://developers.braintreepayments.com/guides/client-sdk/setup/javascript/v3#npm

npm install --save braintree-web

Unfortunately Stripe and React don't fit well together
The version of Stripe on NPM is for server-side use only; so even if you Webpack / Browserify the library (as provided by create-react-app), then client-side features for configuring the public-key and tokenizing the credit-card information are missing.
For the client-side, Stripe prefers "stripe.js" to be used from an external URL: https://js.stripe.com/v3/. Unfortunately, external URLs aren't well-suited for create-react-app - for example, ES6 import can't be used, and the external file is not bundled by Webpack. Furthermore, version (v3) forces users to use an elements method and query the DOM (basically going against React).

Mosquito

Answer 4

You can add direct link in html file but the other side of this, It will load every time even if their is no requirement. So i would suggest you to add stripe library via your code to stay with lazy lodaing concept.

            const script = document.createElement("script");
            script.src = "https://js.stripe.com/v3/";
            script.async = true;
            document.body.appendChild(script); 

Then

Stripe = Stripe('your keys').

After this Stripe.createToken('add any of your card element').then(setOutcome)

Liquidator

Answer 5

Please try this apporach... In public index.html

<script src="https://js.stripe.com/v2/"></script>
    <title>React App</title>
</head>

and in the component

componentDidMount() {
    if(window.Stripe.setPublishableKey){
        window.Stripe.setPublishableKey('pk_test_LkK8cMTD4YXUImjZquRnAqXb');
    }
}

Its working for me...

Then in calling Stripe methods you just need to do:

!window.Stripe.card.validateCardNumber(

Ernst