tf-checkout-react 1.7.8 → 1.7.13

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.8",
+  "version": "1.7.13",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/billing-info-container/hooks/useStripePayment.ts

@@ -36,20 +36,13 @@ export const useStripePayment = ({
     if (!isFreeTickets) {
       if (!stripeRef.current) {
         setError('Stripe is not ready')
-        console.log('Stripe is not ready in billing-info-container')
         return null
       }
 
-      console.log('Stripe confirmPayment in billing-info-container')
-
       // Step 1: Submit elements first
       const { error: submitError } = await elementsRef.current.submit()
       if (submitError) {
         setError('' + submitError?.message)
-        console.log(
-          'Stripe elements.submit() error in billing-info-container',
-          submitError
-        )
         return null
       }
 
@@ -68,28 +61,33 @@ export const useStripePayment = ({
       localStorage.setItem('stripe_payment_context', JSON.stringify(paymentContext))
 
       // Step 3: Confirm payment with current page return URL
+      const confirmParams: any = {
+        return_url:
+          window.location.href +
+          (window.location.href.includes('?') ? '&' : '?') +
+          'payment_return=true',
+      }
+      if (values?.phone) {
+        const rawPhone = String(values.phone).replace(/[\s\-().]/g, '')
+        const e164Phone = rawPhone.startsWith('+') ? rawPhone : `+${rawPhone}`
+        confirmParams.payment_method_data = {
+          billing_details: { phone: e164Phone },
+        }
+      }
       const { error: confirmError } = await stripeRef.current.confirmPayment({
         clientSecret:
           paymentDataResponse.data.attributes.payment_method.stripe_client_secret,
         elements: elementsRef.current,
-        confirmParams: {
-          return_url:
-            window.location.href +
-            (window.location.href.includes('?') ? '&' : '?') +
-            'payment_return=true',
-        },
+        confirmParams,
         redirect: 'if_required',
       })
 
       if (confirmError) {
         setError('' + confirmError?.message)
-        console.log('Stripe confirmPayment error in billing-info-container')
         return null
       }
     }
 
-    console.log('Stripe confirmPayment success in billing-info-container')
-
     // Handle payment middleware for non-redirect payments
     let paymentResponse = null
     await handlePaymentMiddleWare(

package/src/components/billing-info-container/index.tsx

@@ -517,7 +517,7 @@ const BillingInfoContainer = React.memo(
     const orderIsFree = !Number(checkoutData?.total)
 
     useEffect(() => {
-      const hasUniqueId = _get(dataWithUniqueIds, '[0].uniqueId')
+      const hasUniqueId = _get(data, '[0].uniqueId')
       const isEqualData = _isEqual(prevData.current, data)
       if (!hasUniqueId || !isEqualData) {
         setDataWithUniqueIds(assingUniqueIds(data))
@@ -525,7 +525,7 @@ const BillingInfoContainer = React.memo(
           prevData.current = data
         }
       }
-    }, [dataWithUniqueIds, data])
+    }, [data])
 
     const getQuantity = useCallback((cart: any = []) => {
       let qty = 0
@@ -1575,6 +1575,7 @@ const BillingInfoContainer = React.memo(
                         checkoutData={checkoutData}
                         elementsOptions={elementsOptions}
                         paymentElementOptions={{
+                          fields: { billingDetails: { phone: 'never' } },
                           wallets: {
                             applePay:
                               checkoutUpdateData?.additional_payment_information

package/src/components/paymentContainer/index.tsx

@@ -43,9 +43,11 @@ import { PaymentPlanSection } from './PaymentPlanSection'
 const StripeWrapper = ({
   options,
   onStripeReady,
+  onPaymentElementChange,
 }: {
   options?: StripePaymentElementOptions;
   onStripeReady: (stripe: any, elements: any) => void;
+  onPaymentElementChange?: (event: any) => void;
 }) => {
   const stripe = useStripe()
   const elements = useElements()
@@ -56,7 +58,7 @@ const StripeWrapper = ({
     }
   }, [stripe, elements, onStripeReady])
 
-  return <PaymentElement options={options} />
+  return <PaymentElement options={options} onChange={onPaymentElementChange} />
 }
 
 export interface IPaymentPage {
@@ -86,6 +88,7 @@ export interface IPaymentPage {
   stripePublishableKey?: string;
   stripeAccountId?: string;
   onStripeReady?: (stripe: any, elements: any) => void;
+  onPaymentElementChange?: (event: any) => void;
   enablePaymentPlan?: boolean;
 }
 
@@ -166,6 +169,7 @@ export const PaymentContainer = ({
   stripePublishableKey,
   stripeAccountId,
   onStripeReady = _identity,
+  onPaymentElementChange,
   enablePaymentPlan = true,
 }: IPaymentPage) => {
   const [reviewData, setReviewData] = useState(initialReviewValues)
@@ -599,6 +603,7 @@ export const PaymentContainer = ({
                       <StripeWrapper
                         onStripeReady={onStripeReady}
                         options={paymentElementOptions}
+                        onPaymentElementChange={onPaymentElementChange}
                       />
                     </Elements>
                   )}