A react provider abstraction for loading the stripe.js file asynchronously to use with Stripe Elements

AsyncStripeProvider.js

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { StripeProvider } from 'react-stripe-elements';

export default class AsyncStripeProvider extends Component {
  static propTypes = {
    apiKey: PropTypes.string.isRequired
  };

  // constructor
  constructor(props) {
    super(props);
    this.state = {
      stripe: null
    };
  }

  // life-cycle
  componentDidMount() {
    this._mounted = true;
    const { apiKey } = this.props;

    const stripeJs = document.createElement('script');
    stripeJs.src = 'https://js.stripe.com/v3/';
    stripeJs.async = true;
    stripeJs.onload = () => {
      if (this._mounted) {
        this.setState({
          stripe: window.Stripe(apiKey)
        });
      }
    };
    document.body && document.body.appendChild(stripeJs);
  }

  componentWillUnmount() {
    this._mounted = false;
  }

  // render
  render() {
    const { stripe } = this.state;

    return (
      <StripeProvider stripe={stripe}>
        <>{this.props.children}</>
      </StripeProvider>
    );
  }
}

This is can be used in place of the Stripe Elements StripeProvider component, to asynchronously load the "stripe.js" file. It takes an apiKey as the only prop. Make sure in any direct stripe calls, like stripe.createSource(…) you verify that props.stripe is not null.

import AsyncStripeProvider from './AsyncStripeProvider';

export default () => {
  return (
    <AsyncStripeProvider apiKey={STRIPE_PUBLIC_KEY}>
      <MyApp />
    </AsyncStripeProvider>
  );
}

This is inspired by this Stripe async demo code.

Thanks!

This inspired me to write a Hooks version of this component: https://gist.github.com/daviseford/4a0ed622dc47090fe22c1870217d88d6

@daviseford awesome! 🎉