tf-checkout-react 1.0.99 → 1.0.100-beta.2

package/src/components/stripePayment/index.tsx

@@ -1,253 +1,258 @@
-import React, { useState, useEffect } from 'react'
-import {
-  useStripe,
-  useElements,
-  CardNumberElement,
-  CardExpiryElement,
-  CardCvcElement,
-} from '@stripe/react-stripe-js'
-import { StripeCardNumberElementOptions } from '@stripe/stripe-js'
-import _identity from 'lodash/identity'
-import _get from 'lodash/get'
-import { CheckboxField } from '../common/index'
-
-import './style.css'
-import { getCurrencySymbolByCurrency } from '../../normalizers'
-import CircularProgress from '@mui/material/CircularProgress'
-
-const options: StripeCardNumberElementOptions = {
-  style: {
-    base: {
-      backgroundColor: '#000',
-      fontSize: '18px',
-      color: '#ffffff',
-      letterSpacing: '1px',
-      ':-webkit-autofill': {
-        color: '#ffffff',
-      },
-      '::placeholder': {
-        color: 'rgba(201, 201, 201, 0.5)',
-      },
-    },
-    invalid: {
-      color: '#E53935',
-    },
-  },
-}
-
-export interface ICheckoutForm {
-  total: string;
-  currency: string;
-  onSubmit: (error: any) => Promise<any>;
-  error?: string | null;
-  stripeCardOptions?: StripeCardNumberElementOptions;
-  stripe_client_secret: string;
-  billing_info: { [key: string]: any };
-  isLoading: any;
-  handleSetLoading: (loading: any) => void;
-  conditions: any;
-  disableZipSection: boolean;
-}
-
-interface AddressTypes {
-  city: string;
-  line1: string;
-  state: string;
-  postal_code?: string;
-}
-
-const CheckoutForm = ({
-  total,
-  onSubmit = _identity,
-  stripeCardOptions = {},
-  error = null,
-  stripe_client_secret,
-  currency,
-  billing_info,
-  isLoading = false,
-  handleSetLoading = () => {},
-  conditions = [],
-  disableZipSection,
-}: ICheckoutForm) => {
-  const stripe = useStripe()
-  const elements = useElements()
-  const [postalCode, setPostalCode] = useState<any>('')
-  const [stripeError, setStripeError] = useState<any>(null)
-  const [checkboxes, setCheckboxes] = useState<any>([])
-  const [allowSubmit, setAllowSubmit] = useState(false)
-
-  const handleSubmit = async (event: React.SyntheticEvent) => {
-    handleSetLoading(true)
-    try {
-      event.preventDefault()
-
-      if (!postalCode && !disableZipSection) {
-        setStripeError('Please enter your zip code.')
-        handleSetLoading(false)
-        return
-      }
-
-      if (!stripe || !elements) {
-        // Stripe.js has not loaded yet. Make sure to disable
-        // form submission until Stripe.js has loaded.
-        handleSetLoading(false)
-        return
-      }
-
-      const card = elements.getElement(CardNumberElement)
-
-      const address: AddressTypes = {
-        city: billing_info.city,
-        line1: billing_info.street_address,
-        state: billing_info.state,
-      }
-      
-      if (!disableZipSection) {
-        address.postal_code = postalCode
-      }
-
-      const paymentMethodReq = await stripe.createPaymentMethod({
-        type: 'card',
-        card: card || { token: '' },
-        billing_details: {
-          address,
-        },
-      })
-
-      if (paymentMethodReq.error) {
-        setStripeError(paymentMethodReq.error.message || null)
-        handleSetLoading(false)
-        return
-      }
-
-      const { error } = await stripe.confirmCardPayment(stripe_client_secret, {
-        payment_method: paymentMethodReq.paymentMethod.id,
-      })
-
-      if (error) {
-        setStripeError(error.message)
-        handleSetLoading(false)
-        return
-      }
-
-      onSubmit(null)
-    } catch (e) {
-      onSubmit(e)
-    }
-  }
-
-  const handleCheckboxes = (e: any) => {
-    const checkbox = e.target
-    const updatedCheckedState = checkboxes.map((item: any) => {
-      const value = item.id === checkbox.name ? !item.checked : item.checked
-      return {
-        ...item,
-        checked: value,
-      }
-    })
-    setCheckboxes(updatedCheckedState)
-  }
-
-  const onChangePostalCode = (e: any) => {
-    setPostalCode(e.target.value)
-  }
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const userData = JSON.parse(
-        window.localStorage.getItem('user_data') || ''
-      )
-      const zipCode = _get(userData, 'zip', '')
-      zipCode && setPostalCode(zipCode)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (conditions.length) {
-      setCheckboxes(conditions)
-    }
-  }, [conditions])
-
-  useEffect(() => {
-    if (checkboxes.length) {
-      const allChecked = checkboxes.every(
-        (item: any) => item?.checked === true
-      )
-      setAllowSubmit(allChecked)
-    } else {
-      setAllowSubmit(true)
-    }
-  }, [checkboxes])
-
-  const buttonIsDiabled = !stripe || !!error || isLoading || !allowSubmit
-
-  return (
-    <div className="stripe_payment_container">
-      {!!stripeError && (
-        <div className="checkout_error_block">{stripeError}</div>
-      )}
-      <form onSubmit={handleSubmit}>
-        <div className="card_form_inner">
-          <label className="card_number_element">
-            <span className="card_label_text">Card number</span>
-            <CardNumberElement
-              options={{ ...options, ...stripeCardOptions, }}
-              onReady={_identity}
-              onChange={_identity}
-              onBlur={_identity}
-              onFocus={_identity}
-            />
-          </label>
-          <label className="expiration_element">
-            <span className="card_label_text">Expiration date</span>
-            <CardExpiryElement options={{ ...options, ...stripeCardOptions }} />
-          </label>
-          <label className="cvc_element">
-            <span className="card_label_text">CVC</span>
-            <CardCvcElement options={{ ...options, ...stripeCardOptions }} />
-          </label>
-          {!disableZipSection && (
-            <label className="zip_element">
-              <p className="card_label_text">ZIP</p>
-              <input
-                type="text"
-                value={postalCode}
-                onChange={onChangePostalCode}
-                placeholder="ZIP"
-              />
-            </label>
-          )}
-        </div>
-        {checkboxes?.map((checkbox: any) => (
-          <div
-            className={'billing-info-container__singleField'}
-            key={checkbox.id}
-          >
-            <div className="conditions-block">
-              <CheckboxField
-                name={checkbox.id}
-                label={checkbox.text}
-                required={true}
-                onChange={handleCheckboxes}
-                checked={checkbox.checked}
-              />
-            </div>
-          </div>
-        ))}
-        <div
-          className={`payment_button ${buttonIsDiabled ? 'disabled-payment-button' : ''}`}
-        >
-          <button disabled={buttonIsDiabled} type="submit">
-            {isLoading ? (
-              <CircularProgress size={26} />
-            ) : (
-              `Pay ${getCurrencySymbolByCurrency(currency)}${total}`
-            )}
-          </button>
-        </div>
-      </form>
-    </div>
-  )
-}
-
-export default CheckoutForm
+import React, { useState, useEffect } from 'react'
+import {
+  useStripe,
+  useElements,
+  CardNumberElement,
+  CardExpiryElement,
+  CardCvcElement,
+} from '@stripe/react-stripe-js'
+import { StripeCardNumberElementOptions } from '@stripe/stripe-js'
+import _identity from 'lodash/identity'
+import _get from 'lodash/get'
+import { CheckboxField } from '../common/index'
+
+import './style.css'
+import { getCurrencySymbolByCurrency } from '../../normalizers'
+import CircularProgress from '@mui/material/CircularProgress'
+
+const options: StripeCardNumberElementOptions = {
+  style: {
+    base: {
+      backgroundColor: '#000',
+      fontSize: '18px',
+      color: '#ffffff',
+      letterSpacing: '1px',
+      ':-webkit-autofill': {
+        color: '#ffffff',
+      },
+      '::placeholder': {
+        color: 'rgba(201, 201, 201, 0.5)',
+      },
+    },
+    invalid: {
+      color: '#E53935',
+    },
+  },
+}
+
+export interface ICheckoutForm {
+  total: string;
+  currency: string;
+  onSubmit: (error: any) => Promise<any>;
+  error?: string | null;
+  stripeCardOptions?: StripeCardNumberElementOptions;
+  stripe_client_secret: string;
+  billing_info: { [key: string]: any };
+  isLoading: any;
+  handleSetLoading: (loading: any) => void;
+  conditions: any;
+  disableZipSection: boolean;
+  paymentButtonText?: string;
+}
+
+interface AddressTypes {
+  city: string;
+  line1: string;
+  state: string;
+  postal_code?: string;
+}
+
+const CheckoutForm = ({
+  total,
+  onSubmit = _identity,
+  stripeCardOptions = {},
+  error = null,
+  stripe_client_secret,
+  currency,
+  billing_info,
+  isLoading = false,
+  handleSetLoading = () => { },
+  conditions = [],
+  disableZipSection,
+  paymentButtonText
+}: ICheckoutForm) => {
+  const stripe = useStripe()
+  const elements = useElements()
+  const [postalCode, setPostalCode] = useState<any>('')
+  const [stripeError, setStripeError] = useState<any>(null)
+  const [checkboxes, setCheckboxes] = useState<any>([])
+  const [allowSubmit, setAllowSubmit] = useState(false)
+
+  const handleSubmit = async (event: React.SyntheticEvent) => {
+    setStripeError(null)
+    try {
+      event.preventDefault()
+
+      if (!postalCode && !disableZipSection) {
+        setStripeError('Please enter your zip code.')
+        handleSetLoading(false)
+        return
+      }
+
+      if (!stripe || !elements) {
+        // Stripe.js has not loaded yet. Make sure to disable
+        // form submission until Stripe.js has loaded.
+        handleSetLoading(false)
+        return
+      }
+
+      const card = elements.getElement(CardNumberElement)
+
+      const address: AddressTypes = {
+        city: billing_info.city,
+        line1: billing_info.street_address,
+        state: billing_info.state,
+      }
+
+      if (!disableZipSection) {
+        address.postal_code = postalCode
+      }
+
+      const paymentMethodReq = await stripe.createPaymentMethod({
+        type: 'card',
+        card: card || { token: '' },
+        billing_details: {
+          address,
+        },
+      })
+
+      if (paymentMethodReq.error) {
+        setStripeError(paymentMethodReq.error.message || null)
+        handleSetLoading(false)
+        return
+      }
+
+      handleSetLoading(true)
+      const { error } = await stripe.confirmCardPayment(stripe_client_secret, {
+        payment_method: paymentMethodReq.paymentMethod.id,
+      })
+
+      if (error) {
+        setStripeError(error.message)
+        handleSetLoading(false)
+        return
+      }
+
+      onSubmit(null)
+    } catch (e) {
+      onSubmit(e)
+    }
+  }
+
+  const handleCheckboxes = (e: any) => {
+    const checkbox = e.target
+    const updatedCheckedState = checkboxes.map((item: any) => {
+      const value = item.id === checkbox.name ? !item.checked : item.checked
+      return {
+        ...item,
+        checked: value,
+      }
+    })
+    setCheckboxes(updatedCheckedState)
+  }
+
+  const onChangePostalCode = (e: any) => {
+    setPostalCode(e.target.value)
+  }
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const userData = JSON.parse(
+        window.localStorage.getItem('user_data') || ''
+      )
+      const zipCode = _get(userData, 'zip', '')
+      zipCode && setPostalCode(zipCode)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (conditions.length) {
+      setCheckboxes(conditions)
+    }
+  }, [conditions])
+
+  useEffect(() => {
+    if (checkboxes.length) {
+      const allChecked = checkboxes.every(
+        (item: any) => item?.checked === true
+      )
+      setAllowSubmit(allChecked)
+    } else {
+      setAllowSubmit(true)
+    }
+  }, [checkboxes])
+
+  const buttonIsDiabled = !stripe || !!error || isLoading || !allowSubmit
+
+  return (
+    <div className="stripe_payment_container">
+      {!!stripeError && (
+        <div className="checkout_error_block">{stripeError}</div>
+      )}
+      <form onSubmit={handleSubmit}>
+        <div className="card_form_inner">
+          <div className="card_number_element">
+            <span className="card_label_text">Card number</span>
+            <CardNumberElement
+              options={{ ...options, ...stripeCardOptions, }}
+              onReady={_identity}
+              onChange={_identity}
+              onBlur={_identity}
+              onFocus={_identity}
+            />
+          </div>
+          <div className="elements">
+            <div className="expiration_element">
+              <span className="card_label_text">Expiration date</span>
+              <CardExpiryElement options={{ ...options, ...stripeCardOptions }} />
+            </div>
+            <div className="cvc_element">
+              <span className="card_label_text">CVC</span>
+              <CardCvcElement options={{ ...options, ...stripeCardOptions }} />
+            </div>
+          </div>
+          {!disableZipSection && (
+            <div className="zip_element">
+              <p className="card_label_text">ZIP</p>
+              <input
+                type="text"
+                value={postalCode}
+                onChange={onChangePostalCode}
+                placeholder="ZIP"
+              />
+            </div>
+          )}
+        </div>
+        {checkboxes?.map((checkbox: any) => (
+          <div
+            className={'billing-info-container__singleField'}
+            key={checkbox.id}
+          >
+            <div className="conditions-block">
+              <CheckboxField
+                name={checkbox.id}
+                label={checkbox.text}
+                required={true}
+                onChange={handleCheckboxes}
+                checked={checkbox.checked}
+              />
+            </div>
+          </div>
+        ))}
+        <div
+          className={`payment_button ${buttonIsDiabled ? 'disabled-payment-button' : ''}`}
+        >
+          <button disabled={buttonIsDiabled} type="submit">
+            {isLoading ? (
+              <CircularProgress size={26} />
+            ) : (
+              `${paymentButtonText ? paymentButtonText : 'Pay'} ${getCurrencySymbolByCurrency(currency)}${total}`
+            )}
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+export default CheckoutForm

package/src/components/stripePayment/style.css

@@ -1,60 +1,60 @@
-.card_form_inner {
-  background: #232323;
-  border-radius: 8px;
-  padding: 15px;
-  width: 50%;
-  margin: 0 auto;
-  min-width: 325px;
-  margin-bottom: 20px;
-}
-.card_form_inner .card_label_text {
-  color: #fff;
-}
-.card_form_inner .StripeElement {
-  margin: 5px 0 10px;
-}
-.card_label_text {
-  color: #fff;
-}
-.payment_button {
-  text-align: center;
-  padding-top: 15px;
-}
-.payment_button button {
-  background-color: #212529;
-  font-size: 26px;
-  cursor: pointer;
-  padding: 15px 30px;
-  width: 200px;
-  border-radius: 8px;
-  color: #fff;
-  transition: opacity 0.5s;
-}
-.payment_button button:hover {
-  opacity: 0.7;
-}
-
-.disabled-payment-button button{
-  user-select: none;
-  pointer-events:none;
-  opacity: 0.3;
-}
-
-.checkout_error_block {
-  color: #e53935;
-  padding: 15px 0;
-  font-weight: 600;
-}
-
-.zip_element p {
-  margin-bottom: 0;
-}
-.zip_element input {
-  background-color: #000;
-  outline: none;
-  border: none;
-  font-size: 18px;
-  margin-top: 5px;
-  color: #ffffff;
-  width: 100%;
-}
+.card_form_inner {
+  background: #232323;
+  border-radius: 8px;
+  padding: 15px;
+  width: 50%;
+  margin: 0 auto;
+  min-width: 325px;
+  margin-bottom: 20px;
+}
+.card_form_inner .card_label_text {
+  color: #fff;
+}
+.card_form_inner .StripeElement {
+  margin: 5px 0 10px;
+}
+.card_label_text {
+  color: #fff;
+}
+.payment_button {
+  text-align: center;
+  padding-top: 15px;
+}
+.payment_button button {
+  background-color: #212529;
+  font-size: 26px;
+  cursor: pointer;
+  padding: 15px 30px;
+  width: 200px;
+  border-radius: 8px;
+  color: #fff;
+  transition: opacity 0.5s;
+}
+.payment_button button:hover {
+  opacity: 0.7;
+}
+
+.disabled-payment-button button {
+  user-select: none;
+  pointer-events: none;
+  opacity: 0.3;
+}
+
+.checkout_error_block {
+  color: #e53935;
+  padding: 15px 0;
+  font-weight: 600;
+}
+
+.zip_element p {
+  margin-bottom: 0;
+}
+.zip_element input {
+  background-color: #000;
+  outline: none;
+  border: none;
+  font-size: 18px;
+  margin-top: 5px;
+  color: #ffffff;
+  width: 100%;
+}