From 2b15075be558c1b89e6517134c99b153cab73f33 Mon Sep 17 00:00:00 2001
From: Jake Zimmerman <zimmerman.jake@gmail.com>
Date: Mon, 22 Jan 2018 13:25:57 -0800
Subject: [PATCH] Avoid race condition in async sample code (#155)

---
 README.md | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 2fd5095..f6d476e 100644
--- a/README.md
+++ b/README.md
@@ -342,10 +342,14 @@ class App extends React.Component {
     this.state = {stripe: null};
   }
   componentDidMount() {
-    document.querySelector('#stripe-js').addEventListener('load', () => {
-      // Create Stripe instance once Stripe.js loads
+    if (window.Stripe) {
       this.setState({stripe: window.Stripe('pk_test_12345')});
-    });
+    } else {
+      document.querySelector('#stripe-js').addEventListener('load', () => {
+        // Create Stripe instance once Stripe.js loads
+        this.setState({stripe: window.Stripe('pk_test_12345')});
+      });
+    }
   }
   render() {
     // this.state.stripe will either be null or a Stripe instance
@@ -368,6 +372,12 @@ a Stripe instance. React will re-render `<InjectedCheckoutForm>` when
 You can find a working demo of this strategy in [async.js](demo/async/async.js).
 If you run the demo locally, you can view it at <http://localhost:8080/async/>.
 
+For alternatives to calling `setState`in `componentDidMount`, consider using a
+`setTimeout()`, moving the `if/else` statement to the `constructor`, or
+dynamically injecting a script tag in `componentDidMount`. For more
+information, see [stripe/react-stripe-elements][issue-154].
+
+[issue-154]: https://github.com/stripe/react-stripe-elements/issues/154
 
 
 ### Server-side rendering (SSR)