El principal problema que probablemente tenga es cargar un script dentro de React.

Un enfoque es cargar el script de pago solo cuando sea necesario (suponiendo algún tipo de spa), luego llamarlo directamente. Esto es similar a la versión "personalizada" en la página de documentación: https://stripe.com/docs/checkout#integration-custom

Si ya está cargando checkout.js (por ejemplo, antes de su "app.js"), lo siguiente se puede simplificar un poco al no cargar manualmente en el script.

 import React from 'react'; export default class Cards extends React.Component { constructor(props:Object) { super(props); this.state = { loading: true, stripeLoading: true, }; } loadStripe(onload:Function) { if(! window.StripeCheckout) { const script = document.createElement('script'); script.onload = function () { console.info("Stripe script loaded"); onload(); }; script.src = 'https://checkout.stripe.com/checkout.js'; document.head.appendChild(script); } else { onload(); } } componentDidMount() { this.loadStripe(() => { this.stripehandler = window.StripeCheckout.configure({ key: 'pk_test_xxxxxxxxxxxxxxxxxxxxxxxx', image: 'https://stripe.com/img/documentation/checkout/marketplace.png', locale: 'auto', token: (token) => { this.setState({ loading: true }); axios.post('/your-server-side-code', { stripeToken: token.id, }); } }); this.setState({ stripeLoading: false }); }); } componentWillUnmount() { if(this.stripehandler) { this.stripehandler.close(); } } onStripeUpdate(e:Object) { this.stripehandler.open({ name: 'test', description: 'widget', panelLabel: 'Update Credit Card', allowRememberMe: false, }); e.preventDefault(); } render() { const { stripeLoading, loading } = this.state; return ( <div> {(loading || stripeLoading) ? <p>loading..</p> : <button onClick={this.onStripeUpdate}>Add CC</button> } </div> ); } }

La respuesta de Chris fue excelente, sin embargo, tuve que hacer algunos cambios menores para que el código funcionara. También eliminé los tipos de funciones de TypeScript (para aquellos de nosotros que no usamos TypeScript). Se agregan comentarios donde se han realizado cambios en la respuesta. Para su información, esta es mi primera publicación, avíseme si debería ser un comentario en lugar de una respuesta.

 export default class Cards extends React.Component { constructor(props) { super(props); this.state = { loading: true, stripeLoading: true, }; // onStripeUpdate must be bound or else clicking on button will produce error. this.onStripeUpdate = this.onStripeUpdate.bind(this); // binding loadStripe as a best practice, not doing so does not seem to cause error. this.loadStripe = this.loadStripe.bind(this); } loadStripe(onload) { if(! window.StripeCheckout) { const script = document.createElement('script'); script.onload = function () { console.info("Stripe script loaded"); onload(); }; script.src = 'https://checkout.stripe.com/checkout.js'; document.head.appendChild(script); } else { onload(); } } componentDidMount() { this.loadStripe(() => { this.stripeHandler = window.StripeCheckout.configure({ key: 'pk_test_xxxxxxxxxxxxxxxxxxxxxxxx', image: 'https://stripe.com/img/documentation/checkout/marketplace.png', locale: 'auto', token: (token) => { this.setState({ loading: true }); // use fetch or some other AJAX library here if you dont want to use axios axios.post('/your-server-side-code', { stripeToken: token.id, }); } }); this.setState({ stripeLoading: false, // loading needs to be explicitly set false so component will render in 'loaded' state. loading: false, }); }); } componentWillUnmount() { if(this.stripeHandler) { this.stripeHandler.close(); } } onStripeUpdate(e) { this.stripeHandler.open({ name: 'test', description: 'widget', panelLabel: 'Update Credit Card', allowRememberMe: false, }); e.preventDefault(); } render() { const { stripeLoading, loading } = this.state; return ( <div> {(loading || stripeLoading) ? <p>loading..</p> : <button onClick={this.onStripeUpdate}>Add CC</button> } </div> ); } }