fix: lint errors in StripeCard, add stripe js lib

Signed-off-by: Alvaro Bueno <alvaro.bueno@mailchimp.com>
reactioncommerce · Aug 4, 2021 · e0140f1 · e0140f1
1 parent d10380f
commit e0140f1
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 40 deletions.
diff --git a/components/StripeCard/StripeCard.js b/components/StripeCard/StripeCard.js
@@ -9,8 +9,8 @@ import StripeInput from "./StripeInput";
 const useStyles = makeStyles(() => ({
   stripeForm: {
     display: "flex",
-    flexDirection: "column",
-  },
+    flexDirection: "column"
+  }
 }));
 
 function SplitForm(
@@ -20,7 +20,7 @@ function SplitForm(
     onReadyForSaveChange,
     stripeCardNumberInputLabel = "Card Number",
     stripeCardExpirationDateInputLabel = "Exp.",
-    stripeCardCVCInputLabel = "CVC",
+    stripeCardCVCInputLabel = "CVC"
   },
   ref
 ) {
@@ -32,9 +32,9 @@ function SplitForm(
       showIcon: true,
       style: {
         base: {
-          fontSize: "18px",
-        },
-      },
+          fontSize: "18px"
+        }
+      }
     }),
     []
   );
@@ -43,7 +43,7 @@ function SplitForm(
   const [formCompletionState, setFormCompletionState] = useState({
     cardNumber: false,
     cardExpiry: false,
-    cardCvc: false,
+    cardCvc: false
   });
 
   const [isConfirmationInFlight, setIsConfirmationInFlight] = useState(false);
@@ -67,7 +67,7 @@ function SplitForm(
       if (formCompletionState[elementType] !== complete) {
         setFormCompletionState({
           ...formCompletionState,
-          [elementType]: complete,
+          [elementType]: complete
         });
       }
     },
@@ -94,8 +94,8 @@ function SplitForm(
       const result = await stripe.confirmCardPayment(paymentIntentClientSecret, {
         // eslint-disable-next-line camelcase
         payment_method: {
-          card: elements.getElement(CardNumberElement),
-        },
+          card: elements.getElement(CardNumberElement)
+        }
       });
 
       setIsConfirmationInFlight(false);
@@ -104,26 +104,21 @@ function SplitForm(
         // Show error to your customer (e.g., insufficient funds)
         console.error(result.error.message); // eslint-disable-line
         setError(result.error.message);
+      } else if (result.paymentIntent.status === "succeeded" || result.paymentIntent.status === "requires_capture") {
+        // Show a success message to your customer
+        // There's a risk of the customer closing the window before callback
+        // execution. Set up a webhook or plugin to listen for the
+        // payment_intent.succeeded event that handles any business critical
+        // post-payment actions.
+        const { amount, id } = result.paymentIntent;
+        onSubmit({
+          amount: amount ? parseFloat(amount / 100) : null,
+          data: { stripePaymentIntentId: id },
+          displayName: "Stripe Payment"
+        });
       } else {
-        // The payment has been processed!
-        if (result.paymentIntent.status === "succeeded" || result.paymentIntent.status === "requires_capture") {
-          // Show a success message to your customer
-          // There's a risk of the customer closing the window before callback
-          // execution. Set up a webhook or plugin to listen for the
-          // payment_intent.succeeded event that handles any business critical
-          // post-payment actions.
-
-          const { amount, id } = result.paymentIntent;
-
-          onSubmit({
-            amount: amount ? parseFloat(amount / 100) : null,
-            data: { stripePaymentIntentId: id },
-            displayName: "Stripe Payment",
-          });
-        } else {
-          console.error("Payment was not successful"); // eslint-disable-line
-          setError("Payment was not successful");
-        }
+        console.error("Payment was not successful"); // eslint-disable-line
+        setError("Payment was not successful");
       }
     },
     [createStripePaymentIntent, onSubmit, stripe, setError, isConfirmationInFlight, setIsConfirmationInFlight]
@@ -132,7 +127,7 @@ function SplitForm(
   useImperativeHandle(ref, () => ({
     submit() {
       handleSubmit();
-    },
+    }
   }));
 
   return (
@@ -157,11 +152,11 @@ function SplitForm(
                       inputComponent: StripeInput,
                       inputProps: {
                         component: CardNumberElement,
-                        options,
-                      },
+                        options
+                      }
                     }}
                     InputLabelProps={{
-                      shrink: true,
+                      shrink: true
                     }}
                     onChange={onInputChange}
                     required
@@ -178,11 +173,11 @@ function SplitForm(
                       inputComponent: StripeInput,
                       inputProps: {
                         component: CardExpiryElement,
-                        options,
-                      },
+                        options
+                      }
                     }}
                     InputLabelProps={{
-                      shrink: true,
+                      shrink: true
                     }}
                     onChange={onInputChange}
                     required
@@ -199,11 +194,11 @@ function SplitForm(
                       inputComponent: StripeInput,
                       inputProps: {
                         component: CardCvcElement,
-                        options,
-                      },
+                        options
+                      }
                     }}
                     InputLabelProps={{
-                      shrink: true,
+                      shrink: true
                     }}
                     onChange={onInputChange}
                     required

diff --git a/package.json b/package.json
@@ -98,7 +98,8 @@
     "reacto-form": "~1.4.0",
     "styled-components": "^5.0.1",
     "subscriptions-transport-ws": "~0.9.15",
-    "swr": "^0.1.18"
+    "swr": "^0.1.18",
+    "@stripe/react-stripe-js": "^1.4.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",

diff --git a/yarn.lock b/yarn.lock
@@ -1886,6 +1886,13 @@
   resolved "https://registry.npmjs.org/@snyk/gemfile/-/gemfile-1.1.0.tgz"
   integrity sha512-mLwF+ccuvRZMS0SxUAxA3dAp8mB3m2FxIsBIUWFTYvzxl+E4XTZb8uFrUqXHbcxhZH1Z8taHohNTbzXZn3M8ag==
 
+"@stripe/react-stripe-js@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@stripe/react-stripe-js/-/react-stripe-js-1.4.1.tgz#884d59286fff00ba77389b32c045516f65d7a340"
+  integrity sha512-FjcVrhf72+9fUL3Lz3xi02ni9tzH1A1x6elXlr6tvBDgSD55oPJuodoP8eC7xTnBIKq0olF5uJvgtkJyDCdzjA==
+  dependencies:
+    prop-types "^15.7.2"
+
 "@testing-library/dom@^7.9.0":
   version "7.16.1"
   resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-7.16.1.tgz"