Support React StrictMode (#292)

Author: bmathews-stripe

.storybook/example.stories.js

@@ -4,17 +4,11 @@ import {storiesOf, module} from '@storybook/react';
 import React, {useEffect, useState} from 'react';
 
 const ExampleComponent = ({file}) => {
-  // force iframe to reload on each example
-  if (window.reload) {
-    window.location.href = window.location.href;
-  }
-
   const [example, setExample] = useState(null);
 
   useEffect(() => {
     import(`../examples/${file}`).then(({default: Example}) => {
       setExample(<Example />);
-      window.reload = true;
     });
   }, []);
 

.storybook/main.js

@@ -1,3 +1,6 @@
 module.exports = {
   stories: ['./example.stories.js'],
+  reactOptions: {
+    strictMode: true,
+  },
 };

README.md

@@ -8,9 +8,6 @@ React components for
 
 ## Requirements
 
-We don't currently support React 18, but plan to
-([#273](https://github.com/stripe/react-stripe-js/issues/273)).
-
 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

examples/class-components/1-Card-Detailed.js

@@ -5,6 +5,8 @@
 import React from 'react';
 import {loadStripe} from '@stripe/stripe-js';
 import {CardElement, Elements, ElementsConsumer} from '../../src';
+
+import '../styles/common.css';
 import '../styles/2-Card-Detailed.css';
 
 const CARD_OPTIONS = {

examples/hooks/1-Card-Detailed.js

@@ -5,6 +5,8 @@
 import React, {useState} from 'react';
 import {loadStripe} from '@stripe/stripe-js';
 import {CardElement, Elements, useElements, useStripe} from '../../src';
+
+import '../styles/common.css';
 import '../styles/2-Card-Detailed.css';
 
 const CARD_OPTIONS = {

examples/hooks/9-Payment-Element.js

@@ -0,0 +1,129 @@
+// This example shows you how to set up React Stripe.js and use Elements.
+// Learn how to accept a payment using the official Stripe docs.
+// https://stripe.com/docs/payments/accept-a-payment#web
+
+import React from 'react';
+import {loadStripe} from '@stripe/stripe-js';
+import {PaymentElement, Elements, useElements, useStripe} from '../../src';
+
+import '../styles/common.css';
+
+const CheckoutForm = () => {
+  const [status, setStatus] = React.useState();
+  const [loading, setLoading] = React.useState(false);
+  const stripe = useStripe();
+  const elements = useElements();
+
+  const handleSubmit = async (event) => {
+    // Block native form submission.
+    event.preventDefault();
+
+    if (!stripe || !elements) {
+      // Stripe.js has not loaded yet. Make sure to disable
+      // form submission until Stripe.js has loaded.
+      return;
+    }
+
+    setLoading(true);
+
+    stripe
+      .confirmPayment({
+        elements,
+        redirect: 'if_required',
+        confirmParams: {return_url: window.location.href},
+      })
+      .then((res) => {
+        setLoading(false);
+        if (res.error) {
+          console.error(res.error);
+          setStatus(res.error.message);
+        } else {
+          setStatus(res.paymentIntent.status);
+        }
+      });
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <PaymentElement />
+      <button type="submit" disabled={!stripe || loading}>
+        {loading ? 'Processing...' : 'Pay'}
+      </button>
+      {status && <p>{status}</p>}
+    </form>
+  );
+};
+
+const THEMES = ['stripe', 'flat', 'none'];
+
+const App = () => {
+  const [pk, setPK] = React.useState(
+    window.sessionStorage.getItem('react-stripe-js-pk') || ''
+  );
+  const [clientSecret, setClientSecret] = React.useState('');
+
+  React.useEffect(() => {
+    window.sessionStorage.setItem('react-stripe-js-pk', pk || '');
+  }, [pk]);
+
+  const [stripePromise, setStripePromise] = React.useState();
+  const [theme, setTheme] = React.useState('stripe');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setStripePromise(loadStripe(pk));
+  };
+
+  const handleThemeChange = (e) => {
+    setTheme(e.target.value);
+  };
+
+  const handleUnload = () => {
+    setStripePromise(null);
+    setClientSecret(null);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit}>
+        <label>
+          Intent client_secret
+          <input
+            value={clientSecret}
+            onChange={(e) => setClientSecret(e.target.value)}
+          />
+        </label>
+        <label>
+          Publishable key{' '}
+          <input value={pk} onChange={(e) => setPK(e.target.value)} />
+        </label>
+        <button style={{marginRight: 10}} type="submit">
+          Load
+        </button>
+        <button type="button" onClick={handleUnload}>
+          Unload
+        </button>
+        <label>
+          Theme
+          <select onChange={handleThemeChange}>
+            {THEMES.map((val) => (
+              <option key={val} value={val}>
+                {val}
+              </option>
+            ))}
+          </select>
+        </label>
+      </form>
+      {stripePromise && clientSecret && (
+        <Elements
+          stripe={stripePromise}
+          options={{clientSecret, appearance: {theme}}}
+        >
+          <CheckoutForm />
+        </Elements>
+      )}
+    </>
+  );
+};
+
+export default App;

examples/styles/2-Card-Detailed.css

@@ -2,37 +2,16 @@
   box-sizing: border-box;
 }
 
-input,
-button {
+.AppWrapper input,
+.AppWrapper button {
+  all: unset;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   outline: none;
   border-style: none;
 }
 
-html {
-  background-color: #6772e5;
-  font-size: 16px;
-  font-family: Roboto, Open Sans, Segoe UI, sans-serif;
-  font-weight: 500;
-  font-style: normal;
-  text-rendering: optimizeLegibility;
-  height: 100%;
-}
-
-body {
-  height: 100%;
-  margin: 0;
-}
-
-#root {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .AppWrapper {
   width: 500px;
   height: 400px;
@@ -50,11 +29,11 @@ body {
   }
 }
 
-.Form {
+.AppWrapper .Form {
   animation: fade 200ms ease-out;
 }
 
-.FormGroup {
+.AppWrapper .FormGroup {
   margin: 0 15px 20px;
   padding: 0;
   border-style: none;
@@ -65,7 +44,7 @@ body {
   border-radius: 4px;
 }
 
-.FormRow {
+.AppWrapper .FormRow {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
@@ -74,11 +53,12 @@ body {
   border-top: 1px solid #819efc;
 }
 
-.FormRow:first-child {
+.AppWrapper .FormRow:first-child {
   border-top: none;
 }
 
-.FormRowLabel {
+.AppWrapper .FormRowLabel {
+  all: unset;
   width: 15%;
   min-width: 70px;
   padding: 11px 0;
@@ -94,14 +74,14 @@ body {
     opacity: 1;
   }
 }
-.FormRowInput:-webkit-autofill {
+.AppWrapper .FormRowInput:-webkit-autofill {
   -webkit-text-fill-color: #fce883;
   /* Hack to hide the default webkit autofill */
   transition: background-color 100000000s;
   animation: 1ms void-animation-out;
 }
 
-.FormRowInput {
+.AppWrapper .FormRowInput {
   font-size: 16px;
   width: 100%;
   padding: 11px 15px 11px 0;
@@ -110,20 +90,23 @@ body {
   animation: 1ms void-animation-out;
 }
 
-.FormRowInput::placeholder {
+.AppWrapper .FormRowInput::placeholder {
   color: #87bbfd;
 }
 
-.StripeElement--webkit-autofill {
+.AppWrapper .StripeElement--webkit-autofill {
   background: transparent !important;
 }
 
-.StripeElement {
+.AppWrapper .StripeElement {
   width: 100%;
   padding: 11px 15px 11px 0;
+  margin: 0;
+  background: none;
 }
 
-.SubmitButton {
+.AppWrapper .SubmitButton {
+  text-align: center;
   display: block;
   font-size: 16px;
   width: calc(100% - 30px);
@@ -140,28 +123,28 @@ body {
   will-change: transform, background-color, box-shadow;
 }
 
-.SubmitButton:active {
+.AppWrapper .SubmitButton:active {
   background-color: #d782d9;
   box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08),
     inset 0 1px 0 #e298d8;
   transform: scale(0.99);
 }
 
-.SubmitButton.SubmitButton--error {
+.AppWrapper .SubmitButton.SubmitButton--error {
   transform: translateY(15px);
 }
-.SubmitButton.SubmitButton--error:active {
+.AppWrapper .SubmitButton.SubmitButton--error:active {
   transform: scale(0.99) translateY(15px);
 }
 
-.SubmitButton:disabled {
+.AppWrapper .SubmitButton:disabled {
   opacity: 0.5;
   cursor: default;
   background-color: #7795f8;
   box-shadow: none;
 }
 
-.ErrorMessage {
+.AppWrapper .ErrorMessage {
   color: #fff;
   position: absolute;
   display: flex;
@@ -178,25 +161,25 @@ body {
   will-change: opacity, transform;
 }
 
-.ErrorMessage svg {
+.AppWrapper .ErrorMessage svg {
   margin-right: 10px;
 }
 
-.Result {
+.AppWrapper .Result {
   margin-top: 50px;
   text-align: center;
   animation: fade 200ms ease-out;
 }
 
-.ResultTitle {
+.AppWrapper .ResultTitle {
   color: #fff;
   font-weight: 500;
   margin-bottom: 8px;
   font-size: 17px;
   text-align: center;
 }
 
-.ResultMessage {
+.AppWrapper .ResultMessage {
   color: #9cdbff;
   font-size: 14px;
   font-weight: 400;
@@ -205,7 +188,7 @@ body {
   text-align: center;
 }
 
-.ResetButton {
+.AppWrapper .ResetButton {
   border: 0;
   cursor: pointer;
   background: transparent;

examples/styles/common.css

@@ -60,7 +60,8 @@ button[disabled] {
   opacity: 0.6;
 }
 
-input {
+input,
+select {
   display: block;
   border: none;
   font-size: 18px;