@pelcro/react-pelcro-js 3.50.0 → 3.51.0

package/dist/index.cjs.js

@@ -11682,6 +11682,101 @@ function getFourDigitYear(lastTwoDigits) {
   return fourDigitYear;
 }
 
+/**
+ * Loads Braintree Drop-in UI script
+ * @returns {Promise} Promise that resolves when script is loaded
+ */
+function loadBraintreeScript() {
+  return new Promise((resolve, reject) => {
+    // Check if script is already loaded
+    if (window.braintree) {
+      console.log("Braintree script already loaded");
+      resolve(window.braintree);
+      return;
+    }
+    console.log("Loading Braintree script...");
+    const script = document.createElement("script");
+    script.src = "https://js.braintreegateway.com/web/dropin/1.45.1/js/dropin.js";
+    script.onload = () => {
+      console.log("Braintree script loaded successfully");
+      resolve(window.braintree);
+    };
+    script.onerror = error => {
+      console.error("Failed to load Braintree script:", error);
+      reject(new Error("Failed to load Braintree script"));
+    };
+    document.head.appendChild(script);
+  });
+}
+
+/**
+ * Creates Braintree Drop-in UI instance
+ * @param {string} authorization - Braintree authorization token
+ * @param {string} selector - CSS selector for the container
+ * @param {Object} options - Additional options for dropin creation
+ * @returns {Promise} Promise that resolves with the dropin instance
+ */
+function createBraintreeDropin(authorization, selector) {
+  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  console.log("Creating Braintree Drop-in with:", {
+    authorization: authorization ? "present" : "missing",
+    selector,
+    options
+  });
+  return loadBraintreeScript().then(() => {
+    console.log("Braintree script loaded, creating dropin...");
+    return new Promise((resolve, reject) => {
+      window.braintree.dropin.create({
+        authorization,
+        selector,
+        ...options
+      }, (err, instance) => {
+        if (err) {
+          console.error("Braintree dropin creation failed:", err);
+          reject(err);
+        } else {
+          console.log("Braintree dropin created successfully:", instance);
+          resolve(instance);
+        }
+      });
+    });
+  });
+}
+
+/**
+ * Requests payment method from Braintree Drop-in UI
+ * @param {Object} instance - Braintree dropin instance
+ * @returns {Promise} Promise that resolves with payment method payload
+ */
+function requestBraintreePaymentMethod(instance) {
+  return new Promise((resolve, reject) => {
+    instance.requestPaymentMethod((err, payload) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve(payload);
+      }
+    });
+  });
+}
+
+/**
+ * Requests payment method from Braintree Hosted Fields
+ * @param {Object} hostedFieldsInstance - Braintree hosted fields instance
+ * @returns {Promise} Promise that resolves with payment method payload
+ */
+function requestBraintreeHostedFieldsPaymentMethod(hostedFieldsInstance) {
+  return new Promise((resolve, reject) => {
+    hostedFieldsInstance.tokenize((err, payload) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve(payload);
+      }
+    });
+  });
+}
+
 /**
  * @typedef {Object} OptionsType
  * @property {boolean} loadPaymentSDKs
@@ -11792,6 +11887,7 @@ const loadPaymentSDKs = () => {
     //   "braintree-3D-secure-sdk"
     // );
     window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.99.0/js/hosted-fields.min.js", "braintree-hosted-fields-sdk");
+    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/dropin/1.45.1/js/dropin.js", "braintree-dropin-sdk");
   }
 
   // Load Vantiv SDKs
@@ -11836,16 +11932,16 @@ const initSecuritySdk = () => {
   });
 };
 const initGATracking = () => {
-  var _window, _window$Pelcro, _window$Pelcro$uiSett;
+  var _window, _window$Pelcro, _window$Pelcro$uiSett, _window2, _window2$Pelcro, _window2$Pelcro$uiSet;
   const enableReactGA4 = (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.enableReactGA4;
+  // Respect disablePageViewEvents flag from uiSettings
+  const disablePageViewEvents = ((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$Pelcro = _window2.Pelcro) === null || _window2$Pelcro === void 0 ? void 0 : (_window2$Pelcro$uiSet = _window2$Pelcro.uiSettings) === null || _window2$Pelcro$uiSet === void 0 ? void 0 : _window2$Pelcro$uiSet.disablePageViewEvents) || false;
   if (window.Pelcro.site.read().google_analytics_id) {
     if (enableReactGA4) {
-      // Initialize ReactGA4 with your tracking ID
-      ReactGA4.initialize(window.Pelcro.site.read().google_analytics_id);
-      // Enable e-commerce tracking
+      // Initialize ReactGA4 with your tracking ID and options, only once
       ReactGA4.initialize(window.Pelcro.site.read().google_analytics_id, {
         gaOptions: {
-          send_page_view: true,
+          send_page_view: disablePageViewEvents ? false : true,
           ecommerce: {
             enabled: true
           }
@@ -11859,8 +11955,8 @@ const initGATracking = () => {
   }
 };
 const dispatchModalDisplayEvents = modalName => {
-  var _window2, _window2$Pelcro, _window2$Pelcro$uiSet, _modalName$replace, _modalName$replace2;
-  const enableReactGA4 = (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$Pelcro = _window2.Pelcro) === null || _window2$Pelcro === void 0 ? void 0 : (_window2$Pelcro$uiSet = _window2$Pelcro.uiSettings) === null || _window2$Pelcro$uiSet === void 0 ? void 0 : _window2$Pelcro$uiSet.enableReactGA4;
+  var _window3, _window3$Pelcro, _window3$Pelcro$uiSet, _modalName$replace, _modalName$replace2;
+  const enableReactGA4 = (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$Pelcro = _window3.Pelcro) === null || _window3$Pelcro === void 0 ? void 0 : (_window3$Pelcro$uiSet = _window3$Pelcro.uiSettings) === null || _window3$Pelcro$uiSet === void 0 ? void 0 : _window3$Pelcro$uiSet.enableReactGA4;
   const formattedAction = modalName === null || modalName === void 0 ? void 0 : (_modalName$replace = modalName.replace("pelcro-", "")) === null || _modalName$replace === void 0 ? void 0 : _modalName$replace.replaceAll("-", " ");
   if (enableReactGA4) {
     ReactGA4.event(`${formattedAction} viewed`, {
@@ -16454,10 +16550,6 @@ var es_13 = es.StripeProvider;
 
 function _classPrivateFieldInitSpec$1(obj, privateMap, value) { _checkPrivateRedeclaration$1(obj, privateMap); privateMap.set(obj, value); }
 function _checkPrivateRedeclaration$1(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-/**
- * @TODO: All payment related business logic should end up moving
- * to this service, and out of react components.
- */
 
 /**
  * Enum for payment types
@@ -16593,6 +16685,16 @@ class StripeGateway {
           console.error("Unsupported payment method: Stripe Gateway");
       }
     });
+    _defineProperty$3(this, "createDropin", function (authorization, selector) {
+      let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      return createBraintreeDropin(authorization, selector, options);
+    });
+    _defineProperty$3(this, "requestPaymentMethod", instance => {
+      return requestBraintreePaymentMethod(instance);
+    });
+    _defineProperty$3(this, "loadScript", () => {
+      return loadBraintreeScript();
+    });
     _classPrivateFieldInitSpec$1(this, _createSubscription, {
       writable: true,
       value: (options, callback) => {
@@ -17836,6 +17938,79 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     });
     updateTotalAmountWithTax();
   }, []);
+  // Helper function to calculate total amount for payment methods
+  const calculateTotalAmount = (state, plan, invoice, order) => {
+    var _ref2, _ref3, _state$updatedPrice;
+    const getOrderItemsTotal = () => {
+      if (!order) {
+        return null;
+      }
+      const isQuickPurchase = !Array.isArray(order);
+      if (isQuickPurchase) {
+        return order.price * order.quantity;
+      }
+      if (order.length === 0) {
+        return null;
+      }
+      return order.reduce((total, item) => {
+        return total + item.price * item.quantity;
+      }, 0);
+    };
+    return (_ref2 = (_ref3 = (_state$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref3 !== void 0 ? _ref3 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref2 !== void 0 ? _ref2 : getOrderItemsTotal();
+  };
+
+  // Helper function to get currency from the appropriate source
+  const getCurrencyFromPaymentType = (plan, order, invoice) => {
+    if (plan) {
+      return plan.currency;
+    } else if (order) {
+      var _order$;
+      // Handle both single order and array of orders
+      const isQuickPurchase = !Array.isArray(order);
+      return isQuickPurchase ? order.currency : (_order$ = order[0]) === null || _order$ === void 0 ? void 0 : _order$.currency;
+    } else if (invoice) {
+      return invoice.currency;
+    }
+    return "USD"; // Default fallback
+  };
+
+  // Helper function to get payment label
+  const getPaymentLabel = (plan, order, invoice) => {
+    var _window$Pelcro$site$r;
+    if (plan) {
+      return plan.nickname || plan.description || "Subscription";
+    } else if (order) {
+      // Handle both single order and array of orders
+      const isQuickPurchase = !Array.isArray(order);
+      if (isQuickPurchase) {
+        return order.name || "Order";
+      } else {
+        return order.length === 1 ? order[0].name : "Order";
+      }
+    } else if (invoice) {
+      return `Invoice #${invoice.id}`;
+    }
+    return ((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.name) || "Payment";
+  };
+
+  // Helper function to format amount for payment methods (Apple Pay, Google Pay)
+  const formatPaymentAmount = function (totalAmount, currency) {
+    var _window$Pelcro2, _window$Pelcro2$utils, _window$Pelcro2$utils2, _currency$toUpperCase;
+    let paymentMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
+    if (!totalAmount) return "0.00";
+    const isZeroDecimal = ((_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$utils = _window$Pelcro2.utils) === null || _window$Pelcro2$utils === void 0 ? void 0 : (_window$Pelcro2$utils2 = _window$Pelcro2$utils.isCurrencyZeroDecimal) === null || _window$Pelcro2$utils2 === void 0 ? void 0 : _window$Pelcro2$utils2.call(_window$Pelcro2$utils, currency)) || ["BIF", "CLP", "DJF", "GNF", "JPY", "KMF", "KRW", "MGA", "PYG", "RWF", "UGX", "VND", "VUV", "XAF", "XOF", "XPF"].includes(currency === null || currency === void 0 ? void 0 : (_currency$toUpperCase = currency.toUpperCase) === null || _currency$toUpperCase === void 0 ? void 0 : _currency$toUpperCase.call(currency));
+
+    // Payment methods expect amount in major currency unit (dollars, not cents)
+    let finalAmount;
+    if (isZeroDecimal) {
+      finalAmount = Math.round(totalAmount).toString();
+    } else {
+      // Convert from cents to dollars and format with 2 decimal places
+      finalAmount = (totalAmount / 100).toFixed(2);
+    }
+    console.log(`${paymentMethod} amount:`, finalAmount, "currency:", currency, "type:", type);
+    return String(finalAmount);
+  };
 
   /* ====== Start Cybersource integration ======== */
   const cybersourceErrorHandle = err => {
@@ -17845,10 +18020,10 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       const errorMessages = [];
 
       // enumerable error (ex: validation errors)
-      Object.values(err === null || err === void 0 ? void 0 : (_err$details2 = err.details) === null || _err$details2 === void 0 ? void 0 : (_err$details2$respons = _err$details2.responseStatus) === null || _err$details2$respons === void 0 ? void 0 : _err$details2$respons.details).forEach(_ref2 => {
+      Object.values(err === null || err === void 0 ? void 0 : (_err$details2 = err.details) === null || _err$details2 === void 0 ? void 0 : (_err$details2$respons = _err$details2.responseStatus) === null || _err$details2$respons === void 0 ? void 0 : _err$details2$respons.details).forEach(_ref4 => {
         let {
           message
-        } = _ref2;
+        } = _ref4;
         errorMessages.push(message);
       });
 
@@ -18066,10 +18241,10 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   // No longer needed - microform instance is stored directly in initCybersourceScript
 
   const appendCybersourceFingerprintScripts = () => {
-    var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro$site$r4;
+    var _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro$site$r4, _window$Pelcro$site$r5;
     const uniqueId = crypto.randomUUID();
-    const sessionID = ((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : (_window$Pelcro$site$r2 = _window$Pelcro$site$r.cybersource_gateway_settings) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.merchant_id) + uniqueId;
-    const orgID = (_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : (_window$Pelcro$site$r4 = _window$Pelcro$site$r3.cybersource_gateway_settings) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.org_id;
+    const sessionID = ((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : (_window$Pelcro$site$r3 = _window$Pelcro$site$r2.cybersource_gateway_settings) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.merchant_id) + uniqueId;
+    const orgID = (_window$Pelcro$site$r4 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : (_window$Pelcro$site$r5 = _window$Pelcro$site$r4.cybersource_gateway_settings) === null || _window$Pelcro$site$r5 === void 0 ? void 0 : _window$Pelcro$site$r5.org_id;
     const fingerPrintScript = document.querySelector(`script[src="https://h.online-metrix.net/fp/tags.js?org_id=${orgID}&session_id=${sessionID}"]`);
     const fingerPringIframe = document.querySelector(`iframe[src="https://h.online-metrix.net/fp/tags?org_id=${orgID}&session_id=${sessionID}"]`);
     if (!fingerPrintScript && !fingerPringIframe) {
@@ -18175,7 +18350,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
 
   /* ====== Start Tap integration ======== */
   const submitUsingTap = state => {
-    var _ref3, _ref4, _ref5, _state$updatedPrice;
+    var _ref5, _ref6, _ref7, _state$updatedPrice2;
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
     if (isUsingExistingPaymentMethod) {
       // no need to create a new source using tap
@@ -18199,7 +18374,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         return total + item.price * item.quantity;
       }, 0);
     };
-    const totalAmount = (_ref3 = (_ref4 = (_ref5 = (_state$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref5 !== void 0 ? _ref5 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref4 !== void 0 ? _ref4 : getOrderItemsTotal()) !== null && _ref3 !== void 0 ? _ref3 : 10;
+    const totalAmount = (_ref5 = (_ref6 = (_ref7 = (_state$updatedPrice2 = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice2 !== void 0 ? _state$updatedPrice2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref7 !== void 0 ? _ref7 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref6 !== void 0 ? _ref6 : getOrderItemsTotal()) !== null && _ref5 !== void 0 ? _ref5 : 10;
     tapInstanceRef.current.createToken(tapInstanceCard.current).then(function (result) {
       if (result.error) {
         // Inform the user if there was an error
@@ -18409,8 +18584,8 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
   }
   const initTapScript = () => {
-    var _window$Pelcro$site$r5;
-    const tapKey = window.Tapjsli((_window$Pelcro$site$r5 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r5 === void 0 ? void 0 : _window$Pelcro$site$r5.tap_gateway_settings.publishable_key);
+    var _window$Pelcro$site$r6;
+    const tapKey = window.Tapjsli((_window$Pelcro$site$r6 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r6 === void 0 ? void 0 : _window$Pelcro$site$r6.tap_gateway_settings.publishable_key);
     let elements = tapKey.elements({});
     let style = {
       base: {
@@ -18460,8 +18635,8 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   };
   /* ====== End Tap integration ======== */
 
-  /* ====== Start Braintree integration  ======== */
-  const braintreeInstanceRef = React__default['default'].useRef(null);
+  /* ====== Start Braintree Drop-in UI integration ======== */
+  const braintreeDropinRef = React__default['default'].useRef(null);
   function getClientToken() {
     return new Promise((resolve, reject) => {
       window.Pelcro.payment.generateClientToken({
@@ -18480,18 +18655,46 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   async function initializeBraintree() {
     if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
     if (cardProcessor === "braintree" && !selectedPaymentMethodId) {
+      // Clear container before initializing
+      const dropinContainer = document.getElementById("dropin-container");
+      if (dropinContainer) dropinContainer.innerHTML = "";
       const braintreeToken = await getClientToken();
       const isBraintreeEnabled = Boolean(braintreeToken);
       if (!isBraintreeEnabled) {
         console.error("Braintree integration is currently not enabled on this site's config");
         return;
       }
+      console.log("braintreeToken", plan);
       if (type !== "updatePaymentSource") {
-        braintreeInstanceRef.current = new window.braintree.client.create({
-          authorization: braintreeToken
-        }).then(clientInstance => {
-          const options = {
-            authorization: braintreeToken,
+        console.log("Setting skeleton loader to true at start of Braintree initialization");
+        dispatch({
+          type: SKELETON_LOADER,
+          payload: true
+        });
+        try {
+          var _window$Pelcro$site$r7, _window$Pelcro$site$r8;
+          // Ensure the DOM element exists before creating Drop-in UI
+          const dropinContainer = document.querySelector("#dropin-container");
+          if (!dropinContainer) {
+            console.error("Drop-in container not found. Waiting for DOM to be ready...");
+            dispatch({
+              type: SKELETON_LOADER,
+              payload: false
+            });
+            return;
+          }
+
+          // Small delay to ensure DOM is fully rendered
+          await new Promise(resolve => setTimeout(resolve, 100));
+
+          // Calculate Google Pay amount using the same logic as Apple Pay
+          const totalAmount = calculateTotalAmount(state, plan, invoice, order);
+          const currency = getCurrencyFromPaymentType(plan, order, invoice);
+          const googlePayAmount = formatPaymentAmount(totalAmount, currency, "Google Pay");
+
+          // Create Braintree Drop-in UI instance
+          braintreeDropinRef.current = await createBraintreeDropin(braintreeToken, "#dropin-container", {
+            // Customize the Drop-in UI appearance
             styles: {
               input: {
                 "font-size": "14px"
@@ -18503,48 +18706,85 @@ const PaymentMethodContainerWithoutStripe = _ref => {
                 color: "green"
               }
             },
-            fields: {
-              number: {
-                container: "#card-number",
-                placeholder: "4111 1111 1111 1111"
-              },
-              cvv: {
-                container: "#cvv",
-                placeholder: "123"
+            // Disable PayPal to avoid conflicts with existing PayPal SDK
+            // paypal: {
+            //   flow: "vault"
+            // },
+            // Enable Apple Pay if available
+            applePay: {
+              displayName: ((_window$Pelcro$site$r7 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r7 === void 0 ? void 0 : _window$Pelcro$site$r7.name) || "Pelcro",
+              paymentRequest: {
+                total: {
+                  label: getPaymentLabel(plan, order, invoice),
+                  amount: (() => {
+                    const totalAmount = calculateTotalAmount(state, plan, invoice, order);
+                    const currency = getCurrencyFromPaymentType(plan, order, invoice);
+                    return formatPaymentAmount(totalAmount, currency, "Apple Pay");
+                  })()
+                }
+              }
+            },
+            // Enable Google Pay for both orders and subscriptions
+            googlePay: {
+              googlePayVersion: 2,
+              merchantId: (_window$Pelcro$site$r8 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r8 === void 0 ? void 0 : _window$Pelcro$site$r8.google_merchant_id,
+              transactionInfo: {
+                totalPriceStatus: "FINAL",
+                totalPrice: googlePayAmount,
+                currencyCode: (() => {
+                  const currency = getCurrencyFromPaymentType(plan, order, invoice);
+                  return (currency === null || currency === void 0 ? void 0 : currency.toUpperCase()) || "USD";
+                })()
               },
-              expirationDate: {
-                container: "#expiration-date",
-                placeholder: "10/2022"
+              // Add button configuration
+              button: {
+                color: "black",
+                type: type === "createPayment" ? "subscribe" : "buy"
               }
             }
-          };
+          });
+          console.log("Setting skeleton loader to false after successful Braintree initialization");
           dispatch({
             type: SKELETON_LOADER,
-            payload: true
+            payload: false
           });
-          return window.braintree.hostedFields.create(options);
-        });
-        braintreeInstanceRef.current.then(hostedFieldInstance => {
-          hostedFieldInstance.on("notEmpty", function (event) {
-            const field = event.fields[event.emittedBy];
-            if (field.isPotentiallyValid) {
-              field.container.classList.remove("pelcro-input-invalid");
+
+          // Clear any error alerts that were shown during initialization
+          dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: ""
             }
           });
-          hostedFieldInstance.on("validityChange", function (event) {
-            const field = event.fields[event.emittedBy];
-
-            // Remove any previously applied error or warning classes
-            field.container.classList.remove("is-valid");
-            field.container.classList.remove("pelcro-input-invalid");
-            if (field.isValid) {
-              field.container.classList.add("is-valid");
-            } else if (field.isPotentiallyValid) ; else {
-              field.container.classList.add("pelcro-input-invalid");
-            }
+        } catch (error) {
+          var _error$message, _error$message2, _error$message3, _error$message4;
+          console.error("Failed to initialize Braintree Drop-in UI:", error);
+
+          // Check if it's a Google Pay specific error
+          if (error !== null && error !== void 0 && (_error$message = error.message) !== null && _error$message !== void 0 && _error$message.includes("OR_BIBED_06") || error !== null && error !== void 0 && (_error$message2 = error.message) !== null && _error$message2 !== void 0 && _error$message2.includes("Google Pay")) {
+            console.warn("Google Pay configuration issue detected. " + `Transaction type: ${type}. ` + "This might be due to merchant settings or unsupported payment flow.");
+          }
+          dispatch({
+            type: SKELETON_LOADER,
+            payload: false
           });
-        });
+
+          // Don't show error to user for Google Pay configuration issues
+          // as it's expected for subscriptions
+          if (!(error !== null && error !== void 0 && (_error$message3 = error.message) !== null && _error$message3 !== void 0 && _error$message3.includes("OR_BIBED_06")) && !(error !== null && error !== void 0 && (_error$message4 = error.message) !== null && _error$message4 !== void 0 && _error$message4.includes("Google Pay"))) {
+            dispatch({
+              type: SHOW_ALERT,
+              payload: {
+                type: "error",
+                content: "Failed to initialize payment form. Please refresh and try again."
+              }
+            });
+          }
+        }
       } else if (type == "updatePaymentSource" && paymentMethodToEdit) {
+        // For updating payment methods, we still use hosted fields
+        // as Drop-in UI doesn't support partial updates
         const {
           properties
         } = paymentMethodToEdit !== null && paymentMethodToEdit !== void 0 ? paymentMethodToEdit : {};
@@ -18552,9 +18792,14 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           exp_month: expMonth,
           exp_year: expYear
         } = properties !== null && properties !== void 0 ? properties : {};
-        braintreeInstanceRef.current = new window.braintree.client.create({
-          authorization: braintreeToken
-        }).then(clientInstance => {
+        dispatch({
+          type: SKELETON_LOADER,
+          payload: true
+        });
+        try {
+          const clientInstance = await new window.braintree.client.create({
+            authorization: braintreeToken
+          });
           const options = {
             client: clientInstance,
             styles: {
@@ -18576,41 +18821,28 @@ const PaymentMethodContainerWithoutStripe = _ref => {
               expirationYear: {
                 container: "#expiration-year",
                 prefill: expYear
+              },
+              cvv: {
+                container: "#cvv"
               }
             }
           };
+          braintreeDropinRef.current = await window.braintree.hostedFields.create(options);
+
+          // dispatch({
+          //   type: SKELETON_LOADER,
+          //   payload: false
+          // });
+        } catch (error) {
+          console.error("Failed to initialize Braintree hosted fields:", error);
           dispatch({
             type: SKELETON_LOADER,
-            payload: true
-          });
-          return window.braintree.hostedFields.create(options);
-        });
-        braintreeInstanceRef.current.then(hostedFieldInstance => {
-          hostedFieldInstance.on("notEmpty", function (event) {
-            const field = event.fields[event.emittedBy];
-            if (field.isPotentiallyValid) {
-              field.container.classList.remove("pelcro-input-invalid");
-            }
-          });
-          hostedFieldInstance.on("validityChange", function (event) {
-            const field = event.fields[event.emittedBy];
-
-            // Remove any previously applied error or warning classes
-            field.container.classList.remove("is-valid");
-            field.container.classList.remove("pelcro-input-invalid");
-            if (field.isValid) {
-              field.container.classList.add("is-valid");
-            } else if (field.isPotentiallyValid) ; else {
-              field.container.classList.add("pelcro-input-invalid");
-            }
+            payload: false
           });
-        });
+        }
       }
     }
   }
-  React.useEffect(() => {
-    initializeBraintree();
-  }, [selectedPaymentMethodId, paymentMethodToEdit]);
   const braintreeErrorHandler = tokenizeErr => {
     var _tokenizeErr$details, _tokenizeErr$details2;
     const cardNumber = document.querySelector("#card-number");
@@ -18673,51 +18905,55 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       // no need to create a new source using braintree
       return handleBraintreePayment(null, state.couponCode);
     }
-    if (!braintreeInstanceRef.current) {
-      return console.error("Braintree sdk script wasn't loaded, you need to load braintree sdk before rendering the braintree payment flow");
-    }
-    braintreeInstanceRef.current.then(hostedFieldInstance => {
-      hostedFieldInstance.tokenize((tokenizeErr, payload) => {
-        if (tokenizeErr) {
-          dispatch({
-            type: DISABLE_SUBMIT,
-            payload: false
-          });
-          dispatch({
-            type: LOADING,
-            payload: false
-          });
-          return dispatch({
-            type: SHOW_ALERT,
-            payload: {
-              type: "error",
-              content: braintreeErrorHandler(tokenizeErr)
-            }
-          });
+    if (!braintreeDropinRef.current) {
+      console.error("Braintree Drop-in UI wasn't initialized, please try again");
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: false
+      });
+      dispatch({
+        type: LOADING,
+        payload: false
+      });
+      return dispatch({
+        type: SHOW_ALERT,
+        payload: {
+          type: "error",
+          content: "Braintree Drop-in UI wasn't initialized, please try again"
         }
-
-        // Directly handle the payment with the tokenized payload
-        handleBraintreePayment(payload, state.couponCode);
       });
+    }
+    dispatch({
+      type: LOADING,
+      payload: true
+    });
+    dispatch({
+      type: DISABLE_SUBMIT,
+      payload: true
+    });
+
+    // Use appropriate method based on payment type
+    const paymentMethodPromise = type === "updatePaymentSource" ? requestBraintreeHostedFieldsPaymentMethod(braintreeDropinRef.current) : requestBraintreePaymentMethod(braintreeDropinRef.current);
+    paymentMethodPromise.then(payload => {
+      // Drop-in UI handles 3D Secure automatically, just proceed with payment
+      handleBraintreePayment(payload, state.couponCode);
     }).catch(error => {
-      if (error) {
-        console.error(error);
-        dispatch({
-          type: DISABLE_SUBMIT,
-          payload: false
-        });
-        dispatch({
-          type: LOADING,
-          payload: false
-        });
-        return dispatch({
-          type: SHOW_ALERT,
-          payload: {
-            type: "error",
-            content: "There was a problem with your request."
-          }
-        });
-      }
+      console.error("Braintree payment error:", error);
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: false
+      });
+      dispatch({
+        type: LOADING,
+        payload: false
+      });
+      return dispatch({
+        type: SHOW_ALERT,
+        payload: {
+          type: "error",
+          content: braintreeErrorHandler(error)
+        }
+      });
     });
   };
   const handleBraintreePayment = (braintreePaymentRequest, couponCode) => {
@@ -18767,7 +19003,6 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             content: t("messages.sourceCreated")
           }
         });
-        refreshUser();
         onSuccess(res);
       });
     }
@@ -19236,9 +19471,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   React.useEffect(() => {
     if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
     if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
-      var _window$Pelcro$site$r6, _window$Pelcro$site$r7;
-      const payPageId = (_window$Pelcro$site$r6 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r6 === void 0 ? void 0 : _window$Pelcro$site$r6.vantiv_gateway_settings.pay_page_id;
-      const reportGroup = (_window$Pelcro$site$r7 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r7 === void 0 ? void 0 : _window$Pelcro$site$r7.vantiv_gateway_settings.report_group;
+      var _window$Pelcro$site$r9, _window$Pelcro$site$r10;
+      const payPageId = (_window$Pelcro$site$r9 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r9 === void 0 ? void 0 : _window$Pelcro$site$r9.vantiv_gateway_settings.pay_page_id;
+      const reportGroup = (_window$Pelcro$site$r10 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r10 === void 0 ? void 0 : _window$Pelcro$site$r10.vantiv_gateway_settings.report_group;
       vantivInstanceRef.current = new window.EprotectIframeClient({
         paypageId: payPageId,
         reportGroup: reportGroup,
@@ -19302,13 +19537,13 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       });
 
       // When Google pay / Apple pay source created
-      paymentRequest.on("source", _ref6 => {
+      paymentRequest.on("source", _ref8 => {
         var _source$card;
         let {
           complete,
           source,
           ...data
-        } = _ref6;
+        } = _ref8;
         dispatch({
           type: DISABLE_COUPON_BUTTON,
           payload: true
@@ -19323,11 +19558,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         });
         complete("success");
         if ((source === null || source === void 0 ? void 0 : (_source$card = source.card) === null || _source$card === void 0 ? void 0 : _source$card.three_d_secure) === "required") {
-          return generate3DSecureSource(source).then(_ref7 => {
+          return generate3DSecureSource(source).then(_ref9 => {
             let {
               source,
               error
-            } = _ref7;
+            } = _ref9;
             if (error) {
               return handlePaymentError(error);
             }
@@ -19358,9 +19593,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
    * Updates the total amount after adding taxes only if site taxes are enabled
    */
   const updateTotalAmountWithTax = () => {
-    var _window$Pelcro$site$r8;
+    var _window$Pelcro$site$r11;
     if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
-    const taxesEnabled = (_window$Pelcro$site$r8 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r8 === void 0 ? void 0 : _window$Pelcro$site$r8.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r11 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r11 === void 0 ? void 0 : _window$Pelcro$site$r11.taxes_enabled;
     if (taxesEnabled && type === "createPayment") {
       dispatch({
         type: DISABLE_SUBMIT,
@@ -19979,7 +20214,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       cardExpirationMonth: state === null || state === void 0 ? void 0 : state.month,
       cardExpirationYear: state === null || state === void 0 ? void 0 : state.year
     }, (err, orderResponse) => {
-      var _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro2$user$;
+      var _window$Pelcro3, _window$Pelcro3$user, _window$Pelcro3$user$;
       if (err) {
         toggleAuthenticationSuccessPendingView(false);
         dispatch({
@@ -20010,7 +20245,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         });
       }
       window.Pelcro.user.refresh({
-        auth_token: (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : (_window$Pelcro2$user$ = _window$Pelcro2$user.read()) === null || _window$Pelcro2$user$ === void 0 ? void 0 : _window$Pelcro2$user$.auth_token
+        auth_token: (_window$Pelcro3 = window.Pelcro) === null || _window$Pelcro3 === void 0 ? void 0 : (_window$Pelcro3$user = _window$Pelcro3.user) === null || _window$Pelcro3$user === void 0 ? void 0 : (_window$Pelcro3$user$ = _window$Pelcro3$user.read()) === null || _window$Pelcro3$user$ === void 0 ? void 0 : _window$Pelcro3$user$.auth_token
       }, (err, res) => {
         dispatch({
           type: DISABLE_SUBMIT,
@@ -20049,11 +20284,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   const createPaymentSource = (state, dispatch) => {
     return stripe.createSource({
       type: "card"
-    }).then(_ref8 => {
+    }).then(_ref10 => {
       let {
         source,
         error
-      } = _ref8;
+      } = _ref10;
       if (error) {
         return handlePaymentError(error);
       }
@@ -20167,11 +20402,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     } = paymentMethodToDelete;
     return stripe.createSource({
       type: "card"
-    }).then(_ref9 => {
+    }).then(_ref11 => {
       let {
         source,
         error
-      } = _ref9;
+      } = _ref11;
       if (error) {
         return handlePaymentError(error);
       }
@@ -20271,12 +20506,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
     stripe.createSource({
       type: "card"
-    }).then(_ref10 => {
-      var _ref11, _ref12, _state$updatedPrice2;
+    }).then(_ref12 => {
+      var _ref13, _ref14, _state$updatedPrice3;
       let {
         source,
         error
-      } = _ref10;
+      } = _ref12;
       if (error) {
         return handlePaymentError(error);
       }
@@ -20295,7 +20530,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           return total + item.price * item.quantity;
         }, 0);
       };
-      (_ref11 = (_ref12 = (_state$updatedPrice2 = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice2 !== void 0 ? _state$updatedPrice2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref12 !== void 0 ? _ref12 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref11 !== void 0 ? _ref11 : getOrderItemsTotal();
+      (_ref13 = (_ref14 = (_state$updatedPrice3 = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice3 !== void 0 ? _state$updatedPrice3 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref14 !== void 0 ? _ref14 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref13 !== void 0 ? _ref13 : getOrderItemsTotal();
       return handlePayment(source);
     }).catch(error => {
       return handlePaymentError(error);
@@ -20307,11 +20542,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
    * @return {Promise}
    */
   const resolveTaxCalculation = () => {
-    var _window$Pelcro$site$r9;
+    var _window$Pelcro$site$r12;
     if (type === "invoicePayment") {
       return new Promise(resolve => resolve());
     }
-    const taxesEnabled = (_window$Pelcro$site$r9 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r9 === void 0 ? void 0 : _window$Pelcro$site$r9.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r12 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r12 === void 0 ? void 0 : _window$Pelcro$site$r12.taxes_enabled;
     return new Promise((resolve, reject) => {
       // resolve early if taxes isn't enabled
       if (!taxesEnabled) {
@@ -20669,6 +20904,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         return state;
     }
   }, initialState$l);
+  React.useEffect(() => {
+    initializeBraintree();
+  }, [selectedPaymentMethodId, paymentMethodToEdit, state.updatedPrice]);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
@@ -20971,32 +21209,21 @@ const CheckoutForm = _ref => {
       }, "Expiration Year *"), /*#__PURE__*/React__default['default'].createElement("div", {
         id: "expiration-year",
         className: "pelcro-input-field plc-h-12 plc-bg-white"
+      })), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("label", {
+        htmlFor: "cvv"
+      }, "CVV *"), /*#__PURE__*/React__default['default'].createElement("div", {
+        id: "cvv",
+        className: "pelcro-input-field plc-h-12 plc-bg-white"
       })))) : /*#__PURE__*/React__default['default'].createElement("div", {
         className: "plc-w-full plc-h-40 plc-bg-gray-300 plc-rounded plc-animate-pulse"
       }));
     }
-    return /*#__PURE__*/React__default['default'].createElement("div", null, isSkeletonLoaded ? /*#__PURE__*/React__default['default'].createElement("div", {
+    return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
       className: "plc-max-w-[50em]"
-    }, /*#__PURE__*/React__default['default'].createElement("label", {
-      htmlFor: "card-number"
-    }, "Card Number *"), /*#__PURE__*/React__default['default'].createElement("div", {
-      id: "card-number",
-      className: "pelcro-input-field plc-h-12 plc-bg-white"
-    }), /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "plc-flex plc-items-start plc-space-x-8 plc-my-6"
-    }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("label", {
-      htmlFor: "expiration-date"
-    }, "Expiration Date *"), /*#__PURE__*/React__default['default'].createElement("div", {
-      id: "expiration-date",
-      className: "pelcro-input-field plc-h-12 plc-bg-white"
-    })), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("label", {
-      htmlFor: "cvv"
-    }, "CVC *"), /*#__PURE__*/React__default['default'].createElement("div", {
-      id: "cvv",
-      className: "pelcro-input-field plc-h-12 plc-bg-white"
-    })))) : /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "plc-w-full plc-h-40 plc-bg-gray-300 plc-rounded plc-animate-pulse"
-    }));
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      id: "dropin-container",
+      className: "plc-w-full plc-min-h-[300px]"
+    })));
   }
   if (cardProcessor === "stripe") {
     if (type === "updatePaymentSource") {
@@ -22214,7 +22441,7 @@ function PaymentMethodView(_ref) {
     label: t("labels.isDefault")
   }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-grid plc-mt-4 plc-gap-y-2"
-  }, /*#__PURE__*/React__default['default'].createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && !supportsVantiv && !supportsCybersource && !supportsTap ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : null, showApplePayButton && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ApplePayButton, null)) : null)))));
+  }, /*#__PURE__*/React__default['default'].createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && cardProcessor === "braintree" && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, !supportsVantiv && !supportsCybersource && !supportsTap && /*#__PURE__*/React__default['default'].createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)), showApplePayButton && supportsVantiv && /*#__PURE__*/React__default['default'].createElement(ApplePayButton, null))))));
 }
 
 const SubscriptionRenewView = _ref => {