@pelcro/react-pelcro-js 3.26.0-beta.79 → 3.26.0-beta.80

package/dist/index.cjs.js

@@ -12032,6 +12032,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
@@ -12134,6 +12229,8 @@ const loadPaymentSDKs = () => {
   }
   if (supportsBraintree) {
     window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.99.0/js/three-d-secure.min.js", "braintree-3D-secure-sdk");
+    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/dropin/1.45.1/js/dropin.js", "braintree-dropin-sdk");
+    // Keep hosted fields for payment method updates
     window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.99.0/js/hosted-fields.min.js", "braintree-hosted-fields-sdk");
   }
 
@@ -17440,10 +17537,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
@@ -18528,6 +18621,16 @@ class BraintreeGateway {
           console.error("Unsupported payment method: braintree 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, _createSubscription6, {
       writable: true,
       value: (options, callback) => {
@@ -18854,6 +18957,80 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     });
   };
 
+  // Helper function to calculate total amount for payment methods
+  const calculateTotalAmount = (state, plan, invoice, order) => {
+    var _ref3, _ref4, _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 (_ref3 = (_ref4 = (_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 && _ref4 !== void 0 ? _ref4 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref3 !== void 0 ? _ref3 : 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$Pelcro5, _window$Pelcro5$utils, _window$Pelcro5$utils2, _currency$toUpperCase;
+    let paymentMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
+    if (!totalAmount) return "0.00";
+    const isZeroDecimal = ((_window$Pelcro5 = window.Pelcro) === null || _window$Pelcro5 === void 0 ? void 0 : (_window$Pelcro5$utils = _window$Pelcro5.utils) === null || _window$Pelcro5$utils === void 0 ? void 0 : (_window$Pelcro5$utils2 = _window$Pelcro5$utils.isCurrencyZeroDecimal) === null || _window$Pelcro5$utils2 === void 0 ? void 0 : _window$Pelcro5$utils2.call(_window$Pelcro5$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 => {
     var _err$details, _err$details$response, _err$details$response2;
@@ -18862,10 +19039,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(_ref3 => {
+      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(_ref5 => {
         let {
           message
-        } = _ref3;
+        } = _ref5;
         errorMessages.push(message);
       });
 
@@ -19083,10 +19260,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) {
@@ -19192,7 +19369,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
 
   /* ====== Start Tap integration ======== */
   const submitUsingTap = state => {
-    var _ref4, _ref5, _getPlanAmount;
+    var _ref6, _ref7, _getPlanAmount;
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
     if (isUsingExistingPaymentMethod) {
       // no need to create a new source using tap
@@ -19224,7 +19401,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         return plan.amount;
       }
     }
-    const totalAmount = (_ref4 = (_ref5 = (_getPlanAmount = getPlanAmount()) !== null && _getPlanAmount !== void 0 ? _getPlanAmount : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref5 !== void 0 ? _ref5 : getOrderItemsTotal()) !== null && _ref4 !== void 0 ? _ref4 : 10;
+    const totalAmount = (_ref6 = (_ref7 = (_getPlanAmount = getPlanAmount()) !== null && _getPlanAmount !== void 0 ? _getPlanAmount : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref7 !== void 0 ? _ref7 : getOrderItemsTotal()) !== null && _ref6 !== void 0 ? _ref6 : 10;
     tapInstanceRef.current.createToken(tapInstanceCard.current).then(function (result) {
       if (result.error) {
         // Inform the user if there was an error
@@ -19434,8 +19611,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: {
@@ -19485,8 +19662,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);
   const braintree3DSecureInstanceRef = React__default['default'].useRef(null);
   function getClientToken() {
     return new Promise((resolve, reject) => {
@@ -19506,18 +19683,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"
@@ -19529,54 +19734,93 @@ 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"
               }
             }
-          };
-          dispatch({
-            type: SKELETON_LOADER,
-            payload: true
           });
+
+          // Initialize 3D Secure for additional security
           braintree3DSecureInstanceRef.current = new window.braintree.threeDSecure.create({
             version: 2,
             authorization: braintreeToken
           }).then(threeDSecureInstance => {
             return threeDSecureInstance;
           });
-          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");
-            }
+          console.log("Setting skeleton loader to false after successful Braintree initialization");
+          dispatch({
+            type: SKELETON_LOADER,
+            payload: false
           });
-          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");
+
+          // Clear any error alerts that were shown during initialization
+          dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: ""
             }
           });
-        });
+        } 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 : {};
@@ -19584,9 +19828,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: {
@@ -19608,41 +19857,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");
@@ -19700,14 +19936,29 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
   };
   const submitUsingBraintree = (state, dispatch) => {
-    var _ref6, _ref7, _state$updatedPrice;
+    var _ref8, _ref9, _state$updatedPrice2;
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
     if (isUsingExistingPaymentMethod) {
       // 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");
+    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"
+        }
+      });
     }
     const getOrderItemsTotal = () => {
       if (!order) {
@@ -19724,41 +19975,36 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         return total + item.price * item.quantity;
       }, 0);
     };
-    const totalAmount = (_ref6 = (_ref7 = (_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 && _ref7 !== void 0 ? _ref7 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref6 !== void 0 ? _ref6 : getOrderItemsTotal();
-    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 (type == "updatePaymentSource" || type == "deletePaymentSource") {
-          handleBraintreePayment(payload, state.couponCode);
-        } else {
+    const totalAmount = (_ref8 = (_ref9 = (_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 && _ref9 !== void 0 ? _ref9 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref8 !== void 0 ? _ref8 : getOrderItemsTotal();
+    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 => {
+      if (type == "updatePaymentSource" || type == "deletePaymentSource") {
+        handleBraintreePayment(payload, state.couponCode);
+      } else {
+        // For new payments, use 3D Secure if available
+        if (braintree3DSecureInstanceRef.current) {
           braintree3DSecureInstanceRef.current.then(threeDSecureInstance => {
             threeDSecureInstance.verifyCard({
               onLookupComplete: function (data, next) {
                 next();
               },
-              amount: totalAmount !== null && totalAmount !== void 0 ? totalAmount : "0.00",
+              amount: totalAmount ? (totalAmount / 100).toFixed(2) : "0.00",
               nonce: payload.nonce,
               bin: payload.details.bin
-            }).then(payload => {
-              if (payload.liabilityShifted) {
-                handleBraintreePayment(payload, state.couponCode);
-              } else if (payload.liabilityShiftPossible) {
+            }).then(securePayload => {
+              if (securePayload.liabilityShifted) {
+                handleBraintreePayment(securePayload, state.couponCode);
+              } else if (securePayload.liabilityShiftPossible) {
                 dispatch({
                   type: DISABLE_SUBMIT,
                   payload: false
@@ -19811,13 +20057,28 @@ const PaymentMethodContainerWithoutStripe = _ref => {
               });
             });
           });
+        } else {
+          // If 3D Secure is not available, proceed with regular payment
+          handleBraintreePayment(payload, state.couponCode);
         }
-      });
-    }).catch(error => {
-      if (error) {
-        console.error(error);
-        return;
       }
+    }).catch(error => {
+      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) => {
@@ -20335,9 +20596,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,
@@ -20409,13 +20670,13 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       });
 
       // When Google pay / Apple pay source created
-      paymentRequest.on("source", _ref8 => {
+      paymentRequest.on("source", _ref10 => {
         var _source$card;
         let {
           complete,
           source,
           ...data
-        } = _ref8;
+        } = _ref10;
         dispatch({
           type: DISABLE_COUPON_BUTTON,
           payload: true
@@ -20430,11 +20691,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(_ref9 => {
+          return generate3DSecureSource(source).then(_ref11 => {
             let {
               source,
               error
-            } = _ref9;
+            } = _ref11;
             if (error) {
               handlePaymentError(error);
               fireBugSnag({
@@ -20470,9 +20731,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,
@@ -20630,7 +20891,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           address_id: selectedAddressId
         }, handleCouponResponse);
       } else if (type === "orderCreate") {
-        var _window$Pelcro$site$r9;
+        var _window$Pelcro$site$r12;
         const isQuickPurchase = !Array.isArray(order);
         const mappedOrderItems = isQuickPurchase ? [{
           sku_id: order.id,
@@ -20643,7 +20904,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           items: mappedOrderItems,
           coupon_code: couponCode
         };
-        if ((_window$Pelcro$site$r9 = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r9 !== void 0 && _window$Pelcro$site$r9.taxes_enabled) {
+        if ((_window$Pelcro$site$r12 = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r12 !== void 0 && _window$Pelcro$site$r12.taxes_enabled) {
           orderSummaryParams.address_id = selectedAddressId;
         }
         window.Pelcro.ecommerce.order.createSummary(orderSummaryParams, handleCouponResponse);
@@ -20733,15 +20994,15 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             notifyBugsnag(() => {
               // eslint-disable-next-line no-undef
               Bugsnag.notify(`Payment ${res.error}`, event => {
-                var _error$response3, _error$response3$data, _error$response3$data2, _window$Pelcro5, _window$Pelcro5$site, _window$Pelcro6, _window$Pelcro6$user, _window$Pelcro7;
+                var _error$response3, _error$response3$data, _error$response3$data2, _window$Pelcro6, _window$Pelcro6$site, _window$Pelcro7, _window$Pelcro7$user, _window$Pelcro8;
                 event.addMetadata("Stripe Error MetaData", {
                   message: res.error.message,
                   type: res.error.type,
                   code: res.error.code,
                   error_message: error === null || error === void 0 ? void 0 : (_error$response3 = error.response) === null || _error$response3 === void 0 ? void 0 : (_error$response3$data = _error$response3.data) === null || _error$response3$data === void 0 ? void 0 : (_error$response3$data2 = _error$response3$data.error) === null || _error$response3$data2 === void 0 ? void 0 : _error$response3$data2.message,
-                  site: (_window$Pelcro5 = window.Pelcro) === null || _window$Pelcro5 === void 0 ? void 0 : (_window$Pelcro5$site = _window$Pelcro5.site) === null || _window$Pelcro5$site === void 0 ? void 0 : _window$Pelcro5$site.read(),
-                  user: (_window$Pelcro6 = window.Pelcro) === null || _window$Pelcro6 === void 0 ? void 0 : (_window$Pelcro6$user = _window$Pelcro6.user) === null || _window$Pelcro6$user === void 0 ? void 0 : _window$Pelcro6$user.read(),
-                  environment: (_window$Pelcro7 = window.Pelcro) === null || _window$Pelcro7 === void 0 ? void 0 : _window$Pelcro7.environment
+                  site: (_window$Pelcro6 = window.Pelcro) === null || _window$Pelcro6 === void 0 ? void 0 : (_window$Pelcro6$site = _window$Pelcro6.site) === null || _window$Pelcro6$site === void 0 ? void 0 : _window$Pelcro6$site.read(),
+                  user: (_window$Pelcro7 = window.Pelcro) === null || _window$Pelcro7 === void 0 ? void 0 : (_window$Pelcro7$user = _window$Pelcro7.user) === null || _window$Pelcro7$user === void 0 ? void 0 : _window$Pelcro7$user.read(),
+                  environment: (_window$Pelcro8 = window.Pelcro) === null || _window$Pelcro8 === void 0 ? void 0 : _window$Pelcro8.environment
                 });
               });
             });
@@ -20790,7 +21051,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           notifyBugsnag(() => {
             // eslint-disable-next-line no-undef
             Bugsnag.notify(`Payment ${error}`, event => {
-              var _error$response4, _error$response5, _error$response5$data, _error$response5$data2, _window$Pelcro8, _window$Pelcro8$site, _window$Pelcro9, _window$Pelcro9$user, _window$Pelcro10;
+              var _error$response4, _error$response5, _error$response5$data, _error$response5$data2, _window$Pelcro9, _window$Pelcro9$site, _window$Pelcro10, _window$Pelcro10$user, _window$Pelcro11;
               event.addMetadata("MetaData", {
                 name: error === null || error === void 0 ? void 0 : error.name,
                 message: error === null || error === void 0 ? void 0 : error.message,
@@ -20798,9 +21059,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
                 code: error === null || error === void 0 ? void 0 : error.code,
                 status: error === null || error === void 0 ? void 0 : (_error$response4 = error.response) === null || _error$response4 === void 0 ? void 0 : _error$response4.status,
                 error_message: error === null || error === void 0 ? void 0 : (_error$response5 = error.response) === null || _error$response5 === void 0 ? void 0 : (_error$response5$data = _error$response5.data) === null || _error$response5$data === void 0 ? void 0 : (_error$response5$data2 = _error$response5$data.error) === null || _error$response5$data2 === void 0 ? void 0 : _error$response5$data2.message,
-                site: (_window$Pelcro8 = window.Pelcro) === null || _window$Pelcro8 === void 0 ? void 0 : (_window$Pelcro8$site = _window$Pelcro8.site) === null || _window$Pelcro8$site === void 0 ? void 0 : _window$Pelcro8$site.read(),
-                user: (_window$Pelcro9 = window.Pelcro) === null || _window$Pelcro9 === void 0 ? void 0 : (_window$Pelcro9$user = _window$Pelcro9.user) === null || _window$Pelcro9$user === void 0 ? void 0 : _window$Pelcro9$user.read(),
-                environment: (_window$Pelcro10 = window.Pelcro) === null || _window$Pelcro10 === void 0 ? void 0 : _window$Pelcro10.environment
+                site: (_window$Pelcro9 = window.Pelcro) === null || _window$Pelcro9 === void 0 ? void 0 : (_window$Pelcro9$site = _window$Pelcro9.site) === null || _window$Pelcro9$site === void 0 ? void 0 : _window$Pelcro9$site.read(),
+                user: (_window$Pelcro10 = window.Pelcro) === null || _window$Pelcro10 === void 0 ? void 0 : (_window$Pelcro10$user = _window$Pelcro10.user) === null || _window$Pelcro10$user === void 0 ? void 0 : _window$Pelcro10$user.read(),
+                environment: (_window$Pelcro11 = window.Pelcro) === null || _window$Pelcro11 === void 0 ? void 0 : _window$Pelcro11.environment
               });
             });
           });
@@ -20819,14 +21080,14 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       notifyBugsnag(() => {
         // eslint-disable-next-line no-undef
         Bugsnag.notify(`Payment ${error}`, event => {
-          var _error$response6, _error$response6$data, _error$response6$data2, _window$Pelcro11, _window$Pelcro11$site, _window$Pelcro12, _window$Pelcro12$user, _window$Pelcro13;
+          var _error$response6, _error$response6$data, _error$response6$data2, _window$Pelcro12, _window$Pelcro12$site, _window$Pelcro13, _window$Pelcro13$user, _window$Pelcro14;
           event.addMetadata("UnexpectedError", {
             message: error.message,
             stack: error.stack,
             error_message: error === null || error === void 0 ? void 0 : (_error$response6 = error.response) === null || _error$response6 === void 0 ? void 0 : (_error$response6$data = _error$response6.data) === null || _error$response6$data === void 0 ? void 0 : (_error$response6$data2 = _error$response6$data.error) === null || _error$response6$data2 === void 0 ? void 0 : _error$response6$data2.message,
-            site: (_window$Pelcro11 = window.Pelcro) === null || _window$Pelcro11 === void 0 ? void 0 : (_window$Pelcro11$site = _window$Pelcro11.site) === null || _window$Pelcro11$site === void 0 ? void 0 : _window$Pelcro11$site.read(),
-            user: (_window$Pelcro12 = window.Pelcro) === null || _window$Pelcro12 === void 0 ? void 0 : (_window$Pelcro12$user = _window$Pelcro12.user) === null || _window$Pelcro12$user === void 0 ? void 0 : _window$Pelcro12$user.read(),
-            environment: (_window$Pelcro13 = window.Pelcro) === null || _window$Pelcro13 === void 0 ? void 0 : _window$Pelcro13.environment
+            site: (_window$Pelcro12 = window.Pelcro) === null || _window$Pelcro12 === void 0 ? void 0 : (_window$Pelcro12$site = _window$Pelcro12.site) === null || _window$Pelcro12$site === void 0 ? void 0 : _window$Pelcro12$site.read(),
+            user: (_window$Pelcro13 = window.Pelcro) === null || _window$Pelcro13 === void 0 ? void 0 : (_window$Pelcro13$user = _window$Pelcro13.user) === null || _window$Pelcro13$user === void 0 ? void 0 : _window$Pelcro13$user.read(),
+            environment: (_window$Pelcro14 = window.Pelcro) === null || _window$Pelcro14 === void 0 ? void 0 : _window$Pelcro14.environment
           });
         });
       });
@@ -21160,7 +21421,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$Pelcro14, _window$Pelcro14$user, _window$Pelcro14$user2;
+      var _window$Pelcro15, _window$Pelcro15$user, _window$Pelcro15$user2;
       if (err) {
         toggleAuthenticationSuccessPendingView(false);
         dispatch({
@@ -21191,7 +21452,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         });
       }
       window.Pelcro.user.refresh({
-        auth_token: (_window$Pelcro14 = window.Pelcro) === null || _window$Pelcro14 === void 0 ? void 0 : (_window$Pelcro14$user = _window$Pelcro14.user) === null || _window$Pelcro14$user === void 0 ? void 0 : (_window$Pelcro14$user2 = _window$Pelcro14$user.read()) === null || _window$Pelcro14$user2 === void 0 ? void 0 : _window$Pelcro14$user2.auth_token
+        auth_token: (_window$Pelcro15 = window.Pelcro) === null || _window$Pelcro15 === void 0 ? void 0 : (_window$Pelcro15$user = _window$Pelcro15.user) === null || _window$Pelcro15$user === void 0 ? void 0 : (_window$Pelcro15$user2 = _window$Pelcro15$user.read()) === null || _window$Pelcro15$user2 === void 0 ? void 0 : _window$Pelcro15$user2.auth_token
       }, (err, res) => {
         dispatch({
           type: DISABLE_SUBMIT,
@@ -21253,11 +21514,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   const createPaymentSource = (state, dispatch) => {
     return stripe.createSource({
       type: "card"
-    }).then(_ref10 => {
+    }).then(_ref12 => {
       let {
         source,
         error
-      } = _ref10;
+      } = _ref12;
       if (error) {
         return handlePaymentError(error);
       }
@@ -21371,11 +21632,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     } = paymentMethodToDelete;
     return stripe.createSource({
       type: "card"
-    }).then(_ref11 => {
+    }).then(_ref13 => {
       let {
         source,
         error
-      } = _ref11;
+      } = _ref13;
       if (error) {
         return handlePaymentError(error);
       }
@@ -21519,12 +21780,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
     stripe.createSource({
       type: "card"
-    }).then(_ref12 => {
-      var _ref13, _ref14, _state$updatedPrice2;
+    }).then(_ref14 => {
+      var _ref15, _ref16, _state$updatedPrice3;
       let {
         source,
         error
-      } = _ref12;
+      } = _ref14;
       if (error) {
         return handlePaymentError(error);
       }
@@ -21543,7 +21804,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           return total + item.price * item.quantity;
         }, 0);
       };
-      (_ref13 = (_ref14 = (_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 && _ref14 !== void 0 ? _ref14 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref13 !== void 0 ? _ref13 : getOrderItemsTotal();
+      (_ref15 = (_ref16 = (_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 && _ref16 !== void 0 ? _ref16 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref15 !== void 0 ? _ref15 : getOrderItemsTotal();
       return handlePayment(source);
     }).catch(error => {
       return handlePaymentError(error);
@@ -21555,11 +21816,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
    * @return {Promise}
    */
   const resolveTaxCalculation = () => {
-    var _window$Pelcro$site$r10;
+    var _window$Pelcro$site$r13;
     if (type === "invoicePayment") {
       return new Promise(resolve => resolve());
     }
-    const taxesEnabled = (_window$Pelcro$site$r10 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r10 === void 0 ? void 0 : _window$Pelcro$site$r10.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r13 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r13 === void 0 ? void 0 : _window$Pelcro$site$r13.taxes_enabled;
     return new Promise((resolve, reject) => {
       // resolve early if taxes isn't enabled
       if (!taxesEnabled) {
@@ -21960,6 +22221,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         return state;
     }
   }, initialState$l);
+  React.useEffect(() => {
+    initializeBraintree();
+  }, [selectedPaymentMethodId, paymentMethodToEdit, state.updatedPrice]);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
@@ -22255,32 +22519,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") {
@@ -23511,7 +23764,7 @@ function PaymentMethodView(_ref) {
     label: t("labels.isDefault")
   }, props)), /*#__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 => {