We implemented the async Stripe loading following the README and example. However users found that the Stripe form did not always load properly and required a few page refreshes for it to load.

We discovered an improvement that fixes this issue by checking if the script had already finished loading before the component was created. For example if the Stripe form is on another container from the home page.

The change we made was:

  componentDidMount() {
    if (window.Stripe) {
      this.state = { stripe: window.Stripe(this.props.stripeConfig.key) };
    } else {
      document.querySelector('#stripe-js').addEventListener('load', () => {
        this.setState({ stripe: window.Stripe(this.props.stripeConfig.key) });
      });
    }
  }

/cc @tonyd256