tf-checkout-react 1.7.8 → 1.7.13

package/dist/components/paymentContainer/index.d.ts

@@ -33,6 +33,7 @@ export interface IPaymentPage {
     stripePublishableKey?: string;
     stripeAccountId?: string;
     onStripeReady?: (stripe: any, elements: any) => void;
+    onPaymentElementChange?: (event: any) => void;
     enablePaymentPlan?: boolean;
 }
-export declare const PaymentContainer: ({ paymentFields, handlePayment, formTitle, errorText, checkoutData, onErrorClose, onGetPaymentDataSuccess, onGetPaymentDataError, onPaymentError, themeOptions, elementsOptions, paymentElementOptions, onCountdownFinish, enableTimer, orderInfoLabel, paymentInfoLabel, displayPaymentButton, hidePaymentForm, hideFieldsBlock, isSinglePageCheckout, stripePublishableKey, stripeAccountId, onStripeReady, enablePaymentPlan, }: IPaymentPage) => JSX.Element;
+export declare const PaymentContainer: ({ paymentFields, handlePayment, formTitle, errorText, checkoutData, onErrorClose, onGetPaymentDataSuccess, onGetPaymentDataError, onPaymentError, themeOptions, elementsOptions, paymentElementOptions, onCountdownFinish, enableTimer, orderInfoLabel, paymentInfoLabel, displayPaymentButton, hidePaymentForm, hideFieldsBlock, isSinglePageCheckout, stripePublishableKey, stripeAccountId, onStripeReady, onPaymentElementChange, enablePaymentPlan, }: IPaymentPage) => JSX.Element;

package/dist/tf-checkout-react.cjs.development.js

@@ -5641,7 +5641,8 @@ var PaymentPlanSection = function PaymentPlanSection(props) {
 // Wrapper component to access Stripe hooks inside Elements context
 var StripeWrapper = function StripeWrapper(_ref) {
   var options = _ref.options,
-    onStripeReady = _ref.onStripeReady;
+    onStripeReady = _ref.onStripeReady,
+    onPaymentElementChange = _ref.onPaymentElementChange;
   var stripe = reactStripeJs.useStripe();
   var elements = reactStripeJs.useElements();
   React.useEffect(function () {
@@ -5650,7 +5651,8 @@ var StripeWrapper = function StripeWrapper(_ref) {
     }
   }, [stripe, elements, onStripeReady]);
   return React__default.createElement(reactStripeJs.PaymentElement, {
-    options: options
+    options: options,
+    onChange: onPaymentElementChange
   });
 };
 var initialPaymentPlanConfiguration = {
@@ -5742,6 +5744,7 @@ var PaymentContainer = function PaymentContainer(_ref2) {
     stripeAccountId = _ref2.stripeAccountId,
     _ref2$onStripeReady = _ref2.onStripeReady,
     onStripeReady = _ref2$onStripeReady === void 0 ? _identity : _ref2$onStripeReady,
+    onPaymentElementChange = _ref2.onPaymentElementChange,
     _ref2$enablePaymentPl = _ref2.enablePaymentPlan,
     enablePaymentPlan = _ref2$enablePaymentPl === void 0 ? true : _ref2$enablePaymentPl;
   var _useState = React.useState(initialReviewValues),
@@ -6125,7 +6128,8 @@ var PaymentContainer = function PaymentContainer(_ref2) {
     options: elementsOptions
   }, React__default.createElement(StripeWrapper, {
     onStripeReady: onStripeReady,
-    options: paymentElementOptions
+    options: paymentElementOptions,
+    onPaymentElementChange: onPaymentElementChange
   })))) : displayPaymentButton ? React__default.createElement("div", {
     className: "payment_button " + (paymentIsLoading ? 'disabled-payment-button' : '')
   }, React__default.createElement("button", {
@@ -6442,38 +6446,34 @@ var useStripePayment = function useStripePayment(_ref) {
     isBrowser = _ref.isBrowser;
   var processPayment = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(paymentDataResponse, values, formikHelpers, checkoutResponse, checkoutUpdateResponse, paymentData) {
-      var attributes, isFreeTickets, updatedOrderData, eventId, _yield$elementsRef$cu, submitError, paymentContext, _yield$stripeRef$curr, confirmError, paymentResponse;
+      var attributes, isFreeTickets, updatedOrderData, eventId, _yield$elementsRef$cu, submitError, paymentContext, confirmParams, rawPhone, e164Phone, _yield$stripeRef$curr, confirmError, paymentResponse;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             attributes = paymentData.attributes, isFreeTickets = paymentData.isFreeTickets, updatedOrderData = paymentData.updatedOrderData, eventId = paymentData.eventId;
             if (isFreeTickets) {
-              _context.next = 25;
+              _context.next = 23;
               break;
             }
             if (stripeRef.current) {
-              _context.next = 6;
+              _context.next = 5;
               break;
             }
             setError('Stripe is not ready');
-            console.log('Stripe is not ready in billing-info-container');
             return _context.abrupt("return", null);
-          case 6:
-            console.log('Stripe confirmPayment in billing-info-container');
-            // Step 1: Submit elements first
-            _context.next = 9;
+          case 5:
+            _context.next = 7;
             return elementsRef.current.submit();
-          case 9:
+          case 7:
             _yield$elementsRef$cu = _context.sent;
             submitError = _yield$elementsRef$cu.error;
             if (!submitError) {
-              _context.next = 15;
+              _context.next = 12;
               break;
             }
             setError('' + (submitError == null ? void 0 : submitError.message));
-            console.log('Stripe elements.submit() error in billing-info-container', submitError);
             return _context.abrupt("return", null);
-          case 15:
+          case 12:
             // Step 2: Store payment context before potential redirect
             paymentContext = {
               attributes: attributes,
@@ -6488,30 +6488,38 @@ var useStripePayment = function useStripePayment(_ref) {
             };
             localStorage.setItem('stripe_payment_context', JSON.stringify(paymentContext));
             // Step 3: Confirm payment with current page return URL
-            _context.next = 19;
+            confirmParams = {
+              return_url: window.location.href + (window.location.href.includes('?') ? '&' : '?') + 'payment_return=true'
+            };
+            if (values != null && values.phone) {
+              rawPhone = String(values.phone).replace(/[\s\-().]/g, '');
+              e164Phone = rawPhone.startsWith('+') ? rawPhone : "+" + rawPhone;
+              confirmParams.payment_method_data = {
+                billing_details: {
+                  phone: e164Phone
+                }
+              };
+            }
+            _context.next = 18;
             return 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: confirmParams,
               redirect: 'if_required'
             });
-          case 19:
+          case 18:
             _yield$stripeRef$curr = _context.sent;
             confirmError = _yield$stripeRef$curr.error;
             if (!confirmError) {
-              _context.next = 25;
+              _context.next = 23;
               break;
             }
             setError('' + (confirmError == null ? void 0 : confirmError.message));
-            console.log('Stripe confirmPayment error in billing-info-container');
             return _context.abrupt("return", null);
-          case 25:
-            console.log('Stripe confirmPayment success in billing-info-container');
+          case 23:
             // Handle payment middleware for non-redirect payments
             paymentResponse = null;
-            _context.next = 29;
+            _context.next = 26;
             return handlePaymentMiddleWare(null, {}, {
               reviewData: attributes,
               isFreeTickets: isFreeTickets,
@@ -6529,9 +6537,9 @@ var useStripePayment = function useStripePayment(_ref) {
                 throw error;
               }
             });
-          case 29:
+          case 26:
             return _context.abrupt("return", paymentResponse);
-          case 30:
+          case 27:
           case "end":
             return _context.stop();
         }
@@ -7018,7 +7026,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref6) {
     setSingleCheckoutAddOns = _useState25[1];
   var orderIsFree = !Number(checkoutData == null ? void 0 : checkoutData.total);
   React.useEffect(function () {
-    var hasUniqueId = _get(dataWithUniqueIds, '[0].uniqueId');
+    var hasUniqueId = _get(data, '[0].uniqueId');
     var isEqualData = _isEqual(prevData.current, data);
     if (!hasUniqueId || !isEqualData) {
       setDataWithUniqueIds(assingUniqueIds(data));
@@ -7026,7 +7034,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref6) {
         prevData.current = data;
       }
     }
-  }, [dataWithUniqueIds, data]);
+  }, [data]);
   var getQuantity = React.useCallback(function (cart) {
     if (cart === void 0) {
       cart = [];
@@ -7982,6 +7990,11 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref6) {
       checkoutData: checkoutData,
       elementsOptions: elementsOptions,
       paymentElementOptions: {
+        fields: {
+          billingDetails: {
+            phone: 'never'
+          }
+        },
         wallets: {
           applePay: (checkoutUpdateData == null ? void 0 : (_checkoutUpdateData$a6 = checkoutUpdateData.additional_payment_information) == null ? void 0 : (_checkoutUpdateData$a7 = _checkoutUpdateData$a6.stripe_wallets) == null ? void 0 : _checkoutUpdateData$a7.applePay) || 'never',
           googlePay: (checkoutUpdateData == null ? void 0 : (_checkoutUpdateData$a8 = checkoutUpdateData.additional_payment_information) == null ? void 0 : (_checkoutUpdateData$a9 = _checkoutUpdateData$a8.stripe_wallets) == null ? void 0 : _checkoutUpdateData$a9.googlePay) || 'never'