How to add Stripe.js script in React component
<p>I would like to create a Payment form using <a href="https://stripe.com/" rel="noreferrer">Stripe </a> as payment provider.</p>

<p>In <a href="https://stripe.com/docs/stripe.js" rel="noreferrer">Stripe.js Reference</a> 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:</p>

<pre><code>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) =&gt; {
    console.log( status, response );
   });
 }

 render() {
   //THE PAYMENT FORM
 }
}
</code></pre>

<p>Note1: I would not like to use <a href="https://github.com/yariv/ReactScriptLoader" rel="noreferrer">ReactScriptLoader</a> as it is not actively updated.</p>

<p>Note2: Also saw <a href="https://stackoverflow.com/questions/34759735/async-loading-script-within-react-component">dangerouslySetInnerHTML</a> solution which i don't think it is good practice.</p>