CODEWITHSUNDEEP
reactjsnpmstripe-paymentschild-process
Jan Omacka
Jan Omacka

Reputation: 1840

Stripe with React JS

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

Upvotes: 9

Views: 8741

Answers (5)

Carlos Vieira
Carlos Vieira

Reputation: 607

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(

Upvotes: 0

Anuj
Anuj

Reputation: 106

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)

Upvotes: 0

tim-montague
tim-montague

Reputation: 17382

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).

Upvotes: 0

Robin Wieruch
Robin Wieruch

Reputation: 15898

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.

Upvotes: 2

Dan Prince
Dan Prince

Reputation: 29999

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.

Upvotes: 16

Related Questions