Examples and README updates (#22)

* make readme less hooks centric

* Update all examples to use loadStripe; add more class based examples

* requested changes; prb fixes

* pass through disabled

Author: dweedon-stripe

.storybook/example.stories.js

@@ -3,47 +3,14 @@
 import {storiesOf, module} from '@storybook/react';
 import React, {useEffect, useState} from 'react';
 
-const SyncExample = ({file}) => {
+const ExampleComponent = ({file}) => {
   // force iframe to reload on each example
   if (window.reload) {
     window.location.href = window.location.href;
   }
 
   const [example, setExample] = useState(null);
 
-  // We need to dynamically load Stripe.js, since
-  // we want to demo async loading and we don't want to
-  // have it preloaded for those demos.
-  //
-  // To effectively model sync loading, we need to load the script,
-  // and only after it has loaded we can dynamically import a
-  // demo that assumes Stripe has been synchronously loaded.
-  useEffect(() => {
-    const stripeJs = document.createElement('script');
-    stripeJs.src = 'https://js.stripe.com/v3/';
-    stripeJs.async = true;
-    stripeJs.onload = () => {
-      import(`../examples/${file}`).then(({default: Example}) => {
-        setExample(<Example />);
-        window.reload = true;
-      });
-    };
-    document.body.appendChild(stripeJs);
-  }, []);
-
-  return example;
-};
-
-const AsyncExample = ({file}) => {
-  // force iframe to reload on each example
-  if (window.reload) {
-    window.location.href = window.location.href;
-  }
-
-  const [example, setExample] = useState(null);
-
-  // For async demos, we don't need to preload Stripe before
-  // loading the module, since this is done inside the demo.
   useEffect(() => {
     import(`../examples/${file}`).then(({default: Example}) => {
       setExample(<Example />);
@@ -54,17 +21,13 @@ const AsyncExample = ({file}) => {
   return example;
 };
 
-const ASYNC_EXAMPLES = ['Card Async'];
-
 const addDemo = (directory, file, stories) => {
   const name = file
     .replace('.js', '')
     .split('-')
     .slice(1)
     .join(' ');
 
-  const async = ASYNC_EXAMPLES.indexOf(name) !== -1;
-  const ExampleComponent = async ? AsyncExample : SyncExample;
   stories.add(name, () => <ExampleComponent file={`${directory}/${file}`} />);
 };
 

README.md

@@ -20,20 +20,24 @@ React components for [Stripe.js](https://stripe.com/docs/stripe-js) and
 
 ### Minimal Example
 
+```sh
+npm install @stripe/react-stripe-js @stripe/stripe-js
+```
+
+#### Using Hooks
+
 ```jsx
 import React from 'react';
 import ReactDOM from 'react-dom';
-
+import {loadStripe} from '@stripe/react-stripe-js';
 import {
   CardElement,
   Elements,
   useStripe,
   useElements,
 } from '@stripe/react-stripe-js';
 
-const stripe = window.Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
-
-const MyCheckoutForm = () => {
+const CheckoutForm = () => {
   const stripe = useStripe();
   const elements = useElements();
 
@@ -48,29 +52,79 @@ const MyCheckoutForm = () => {
   return (
     <form onSubmit={handleSubmit}>
       <CardElement />
-      <button type="submit">Pay</button>
+      <button type="submit" disabled={!stripe}>
+        Pay
+      </button>
     </form>
   );
 };
 
-const App = () => {
-  return (
-    <Elements stripe={stripe}>
-      <MyCheckoutForm />
-    </Elements>
-  );
-};
+const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
+
+const App = () => (
+  <Elements stripe={stripePromise}>
+    <CheckoutForm />
+  </Elements>
+);
+
+ReactDOM.render(<App />, document.body);
+```
+
+#### Using Class Components
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {loadStripe} from '@stripe/react-stripe-js';
+import {CardElement, Elements, ElementsConsumer} from '@stripe/react-stripe-js';
+
+class CheckoutForm extends React.Component {
+  handleSubmit = async (event) => {
+    event.preventDefault();
+    const {stripe, elements} = this.props;
+    const {error, paymentMethod} = await stripe.createPaymentMethod({
+      type: 'card',
+      card: elements.getElement(CardElement),
+    });
+  };
+
+  render() {
+    const {stripe} = this.props;
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <CardElement />
+        <button type="submit" disabled={!stripe}>
+          Pay
+        </button>
+      </form>
+    );
+  }
+}
+
+const InjectedCheckoutForm = () => (
+  <ElementsConsumer>
+    {({stripe, elements}) => (
+      <CheckoutForm stripe={stripe} elements={elements} />
+    )}
+  </ElementsConsumer>
+);
+
+const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
+
+const App = () => (
+  <Elements stripe={stripePromise}>
+    <InjectedCheckoutForm />
+  </Elements>
+);
 
 ReactDOM.render(<App />, document.body);
 ```
 
 ### Minimum Requirements
 
-React Stripe.js depends on the
-[React Hooks API](https://reactjs.org/docs/hooks-intro.html). The minimum
-supported version of React is v16.8. If you use an older version, upgrade React
-to use this library. If you prefer not to upgrade your React version, we
-recommend using legacy
+The minimum supported version of React is v16.8. If you use an older version,
+upgrade React to use this library. If you prefer not to upgrade your React
+version, we recommend using legacy
 [`react-stripe-elements`](https://github.com/stripe/react-stripe-elements).
 
 ### Contributing

examples/.eslintrc.yml

@@ -0,0 +1,4 @@
+---
+extends: '../.eslintrc.yml'
+rules:
+  import/no-extraneous-dependencies: 0

examples/class-components/0-Card-Minimal.js

@@ -1,16 +1,23 @@
 // @noflow
 
 import React from 'react';
+import {loadStripe} from '@stripe/stripe-js';
 import {CardElement, Elements, ElementsConsumer} from '../../src';
 import '../styles/common.css';
 
-class MyCheckoutForm extends React.Component {
+class CheckoutForm extends React.Component {
   handleSubmit = async (event) => {
     // Block native form submission.
     event.preventDefault();
 
     const {stripe, elements} = this.props;
 
+    if (!stripe || !elements) {
+      // Stripe.js has not loaded yet. Make sure to disable
+      // form submission until Stripe.js has loaded.
+      return;
+    }
+
     // Get a reference to a mounted CardElement. Elements knows how
     // to find your CardElement because there can only ever be one of
     // each type of element.
@@ -29,6 +36,7 @@ class MyCheckoutForm extends React.Component {
   };
 
   render() {
+    const {stripe} = this.props;
     return (
       <form onSubmit={this.handleSubmit}>
         <CardElement
@@ -47,7 +55,9 @@ class MyCheckoutForm extends React.Component {
             },
           }}
         />
-        <button type="submit">Pay</button>
+        <button type="submit" disabled={!stripe}>
+          Pay
+        </button>
       </form>
     );
   }
@@ -57,17 +67,17 @@ const InjectedCheckoutForm = () => {
   return (
     <ElementsConsumer>
       {({elements, stripe}) => (
-        <MyCheckoutForm elements={elements} stripe={stripe} />
+        <CheckoutForm elements={elements} stripe={stripe} />
       )}
     </ElementsConsumer>
   );
 };
 
-const stripe = window.Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
+const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
 
 const App = () => {
   return (
-    <Elements stripe={stripe}>
+    <Elements stripe={stripePromise}>
       <InjectedCheckoutForm />
     </Elements>
   );