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

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.

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.