10

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.

2
  • 3
    Did you ever figure out a way to do this? Commented Mar 1, 2017 at 21:41
  • @AndrewPhilpott you can check my answer below! Commented Jul 18, 2018 at 12:52

2 Answers 2

3

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

Sign up to request clarification or add additional context in comments.

2 Comments

That's awesome - still seems like you need the stripe.js tag in the page though (According to the readme file).
Thats true @MattHolland.
1

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

1 Comment

Client side you can use this library officially from stripe: github.com/stripe/react-stripe-elements

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.