Make card icon solid.

Author: thorsten-stripe

components/ElementsForm.tsx

@@ -1,15 +1,16 @@
-import React, { useState } from 'react'
+import React, { useState } from 'react';
 
-import CustomDonationInput from '../components/CustomDonationInput'
-import PrintObject from '../components/PrintObject'
+import CustomDonationInput from '../components/CustomDonationInput';
+import PrintObject from '../components/PrintObject';
 
-import { fetchPostJSON } from '../utils/api-helpers'
-import { formatAmountForDisplay } from '../utils/stripe-helpers'
-import * as config from '../config'
+import { fetchPostJSON } from '../utils/api-helpers';
+import { formatAmountForDisplay } from '../utils/stripe-helpers';
+import * as config from '../config';
 
-import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js'
+import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
 
 const CARD_OPTIONS = {
+  iconStyle: 'solid' as const,
   style: {
     base: {
       iconColor: '#6772e5',
@@ -19,102 +20,102 @@ const CARD_OPTIONS = {
       fontSize: '16px',
       fontSmoothing: 'antialiased',
       ':-webkit-autofill': {
-        color: '#fce883',
+        color: '#fce883'
       },
       '::placeholder': {
-        color: '#6772e5',
-      },
+        color: '#6772e5'
+      }
     },
     invalid: {
       iconColor: '#ef2961',
-      color: '#ef2961',
-    },
-  },
-}
+      color: '#ef2961'
+    }
+  }
+};
 
 const ElementsForm: React.FunctionComponent = () => {
   const [input, setInput] = useState({
     customDonation: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP),
-    cardholderName: '',
-  })
-  const [payment, setPayment] = useState({ status: 'initial' })
-  const [errorMessage, setErrorMessage] = useState('')
-  const stripe = useStripe()
-  const elements = useElements()
+    cardholderName: ''
+  });
+  const [payment, setPayment] = useState({ status: 'initial' });
+  const [errorMessage, setErrorMessage] = useState('');
+  const stripe = useStripe();
+  const elements = useElements();
 
   const PaymentStatus = ({ status }: { status: string }) => {
     switch (status) {
       case 'processing':
       case 'requires_payment_method':
       case 'requires_confirmation':
-        return <h2>Processing...</h2>
+        return <h2>Processing...</h2>;
 
       case 'requires_action':
-        return <h2>Authenticating...</h2>
+        return <h2>Authenticating...</h2>;
 
       case 'succeeded':
-        return <h2>Payment Succeeded 🥳</h2>
+        return <h2>Payment Succeeded 🥳</h2>;
 
       case 'error':
         return (
           <>
             <h2>Error 😭</h2>
             <p className="error-message">{errorMessage}</p>
           </>
-        )
+        );
 
       default:
-        return null
+        return null;
     }
-  }
+  };
 
   const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = e =>
     setInput({
       ...input,
-      [e.currentTarget.name]: e.currentTarget.value,
-    })
+      [e.currentTarget.name]: e.currentTarget.value
+    });
 
   const handleSubmit: React.FormEventHandler<HTMLFormElement> = async e => {
-    e.preventDefault()
+    e.preventDefault();
     // Abort if form isn't valid
-    if (!e.currentTarget.reportValidity()) return
-    setPayment({ status: 'processing' })
+    if (!e.currentTarget.reportValidity()) return;
+    setPayment({ status: 'processing' });
 
     // Create a PaymentIntent with the specified amount.
     const response = await fetchPostJSON('/api/payment_intents', {
-      amount: input.customDonation,
-    })
-    setPayment(response)
+      amount: input.customDonation
+    });
+    setPayment(response);
 
     if (response.statusCode === 500) {
-      setPayment({ status: 'error' })
-      setErrorMessage(response.message)
-      return
+      setPayment({ status: 'error' });
+      setErrorMessage(response.message);
+      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.
-    const cardElement = elements!.getElement(CardElement)
+    const cardElement = elements!.getElement(CardElement);
 
     // Use your card Element with other Stripe.js APIs
     const { error, paymentIntent } = await stripe!.confirmCardPayment(
       response.client_secret,
       {
         payment_method: {
           card: cardElement!,
-          billing_details: { name: input.cardholderName },
-        },
+          billing_details: { name: input.cardholderName }
+        }
       }
-    )
+    );
 
     if (error) {
-      setPayment({ status: 'error' })
-      setErrorMessage(error.message ?? 'An unknown error occured')
+      setPayment({ status: 'error' });
+      setErrorMessage(error.message ?? 'An unknown error occured');
     } else if (paymentIntent) {
-      setPayment(paymentIntent)
+      setPayment(paymentIntent);
     }
-  }
+  };
 
   return (
     <>
@@ -144,8 +145,10 @@ const ElementsForm: React.FunctionComponent = () => {
               options={CARD_OPTIONS}
               onChange={e => {
                 if (e.error) {
-                  setPayment({ status: 'error' })
-                  setErrorMessage(e.error.message ?? 'An unknown error occured')
+                  setPayment({ status: 'error' });
+                  setErrorMessage(
+                    e.error.message ?? 'An unknown error occured'
+                  );
                 }
               }}
             />
@@ -165,7 +168,7 @@ const ElementsForm: React.FunctionComponent = () => {
       <PaymentStatus status={payment.status} />
       <PrintObject content={payment} />
     </>
-  )
-}
+  );
+};
 
-export default ElementsForm
+export default ElementsForm;