Merge pull request #399 from mercadopago/release/8.4.4

Release v8.4.4

Author: SalehKhalilMP

CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [8.4.4] - 2025-08-11
+### Fixed
+- Does not block payment if email is not filled in
+
+## [8.4.3] - 2025-08-11
+### Changed
+- Ensure that it uses the same SDK instance in transparent checkout
+### Fixed
+- Prevents clickable areas from being removed when the fast pay flow is not fully loaded
+
 ## [8.4.2] - 2025-08-07
 ### Fixed
 - Sync CardForm ID with checkout context for pay-for-order compatibility

assets/js/checkouts/custom/entities/card-form.js

@@ -14,14 +14,16 @@ class MPCardForm {
             this.createLoadSpinner();
         }
 
-        const mp = new MercadoPago(wc_mercadopago_custom_checkout_params.public_key, {
-            locale: wc_mercadopago_custom_checkout_params.locale,
-        });
+        if (!window.mpSdkInstance) {
+            const mp = new MercadoPago(wc_mercadopago_custom_checkout_params.public_key, {
+                locale: wc_mercadopago_custom_checkout_params.locale,
+            });
 
-        window.mpSdkInstance = mp;
+            window.mpSdkInstance = mp;
+        }
 
         return new Promise((resolve, reject) => {
-            this.form = mp.cardForm({
+            this.form = window.mpSdkInstance.cardForm({
                 amount: amount,
                 iframe: true,
                 form: this.getCardFormConfig(),

assets/js/checkouts/custom/entities/card-form.min.js

@@ -3,7 +3,8 @@
 class MPCustomCheckoutHandler {
   static FORM_SELECTORS = {
     CLASSIC: 'form[name=checkout]',
-    BLOCKS: '.wc-block-components-form.wc-block-checkout__form'
+    BLOCKS: '.wc-block-components-form.wc-block-checkout__form',
+    ORDER_REVIEW: 'form#order_review',
   };
 
   static FORM_IDS = {
@@ -20,8 +21,8 @@ class MPCustomCheckoutHandler {
     this.init();
   }
 
-  init() {
-    this.setupFormConfiguration();
+  async init() {
+    await this.setupFormConfiguration();
 
     if (!this.eventHandler.triggeredPaymentMethodSelectedEvent) {
       jQuery('body').trigger('payment_method_selected');
@@ -30,38 +31,67 @@ class MPCustomCheckoutHandler {
     this.eventHandler.bindEvents();
   }
 
-  setupFormConfiguration() {
-    const formConfig = this.getFormConfig();
-    
-    if (formConfig.element) {
-      formConfig.element.id = formConfig.formId;
-    }
+  async setupFormConfiguration() {
+    try {
+      const formConfig = await this.getFormConfig();
+      
+      if (formConfig.element) {
+        formConfig.element.id = formConfig.formId;
+      }
 
-    this.syncFormIds(formConfig.formId);
+      this.syncFormIds(formConfig.formId);
+    } catch (error) {
+      console.error('Failed to configure checkout form:', error);
+    }
   }
 
   getFormConfig() {
-    const classicForm = document.querySelector(MPCustomCheckoutHandler.FORM_SELECTORS.CLASSIC);
-    const blocksForm = document.querySelector(MPCustomCheckoutHandler.FORM_SELECTORS.BLOCKS);
+    return new Promise((resolve, reject) => {
+      const maxTries = 10;
+      const intervalMs = 500;
+      let tries = 0;
 
-    if (classicForm) {
-      return {
-        element: classicForm,
-        formId: MPCustomCheckoutHandler.FORM_IDS.CLASSIC_CHECKOUT,
-      };
-    }
+      const tryFindForm = () => {
+        tries++;
+
+        const classicForm = document.querySelector(MPCustomCheckoutHandler.FORM_SELECTORS.CLASSIC);
+        const blocksForm = document.querySelector(MPCustomCheckoutHandler.FORM_SELECTORS.BLOCKS);
+        const orderReviewForm = document.querySelector(MPCustomCheckoutHandler.FORM_SELECTORS.ORDER_REVIEW);
 
-    if (blocksForm) {
-      return {
-        element: blocksForm,
-        formId: MPCustomCheckoutHandler.FORM_IDS.BLOCKS_CHECKOUT,
+        if (classicForm) {
+          resolve({
+            element: classicForm,
+            formId: MPCustomCheckoutHandler.FORM_IDS.CLASSIC_CHECKOUT,
+          });
+          return;
+        }
+
+        if (blocksForm) {
+          resolve({
+            element: blocksForm,
+            formId: MPCustomCheckoutHandler.FORM_IDS.BLOCKS_CHECKOUT,
+          });
+          return;
+        }
+
+        if (orderReviewForm) {
+          resolve({
+            element: orderReviewForm,
+            formId: MPCustomCheckoutHandler.FORM_IDS.PAY_FOR_ORDER,
+          });
+          return;
+        }
+
+        if (tries >= maxTries) {
+          reject(new Error(`No checkout form found after ${maxTries} attempts`));
+          return;
+        }
+
+        setTimeout(tryFindForm, intervalMs);
       };
-    }
 
-    return {
-      element: null,
-      formId: MPCustomCheckoutHandler.FORM_IDS.PAY_FOR_ORDER,
-    };
+      tryFindForm();
+    });
   }
 
   syncFormIds(formId) {

assets/js/checkouts/custom/mp-custom-checkout.js

@@ -14,6 +14,7 @@ class MPSuperTokenTriggerHandler {
     wcBuyerEmail = null;
     currentAmount = null;
     isAlreadyListeningForm = false;
+    isAuthenticating = false;
 
     // Dependencies
     mpSuperTokenAuthenticator = null;
@@ -28,6 +29,7 @@ class MPSuperTokenTriggerHandler {
 
     reset() {
         this.removeClickableAreas();
+        this.isAuthenticating = false;
     }
 
     amountHasChanged() {
@@ -138,14 +140,24 @@ class MPSuperTokenTriggerHandler {
     }
 
     onTrigger() {
-        this.removeClickableAreas();
+        if (this.isAuthenticating) {
+            return;
+        }
+
+        this.isAuthenticating = true;
 
         const buyerEmail = this.wcBuyerEmail || this.wcEmailListener.getEmail();
         if (!buyerEmail) {
+            this.isAuthenticating = false;
+            this.removeClickableAreas();
             return;
         }
 
-        this.mpSuperTokenAuthenticator.authenticate(this.currentAmount, buyerEmail);
+        this.mpSuperTokenAuthenticator.authenticate(this.currentAmount, buyerEmail)
+            .finally(() => {
+                this.isAuthenticating = false;
+                this.removeClickableAreas();
+            });
     }
 
     resetFlow() {
@@ -167,9 +179,8 @@ class MPSuperTokenTriggerHandler {
     resetSuperTokenOnError() {
         if (document.querySelector('#mp_checkout_type')?.value === 'super_token') {
             console.log('Resetting ST flow due to checkout error');
-
             this.resetCustomCheckout();
-
+            this.isAuthenticating = false;
             document.querySelector('#mp_checkout_type').value = '';
         }
     }

assets/js/checkouts/custom/mp-custom-checkout.min.js

@@ -1,6 +1,16 @@
 CHANGELOG:
 == Changelog ==
 
+= v8.4.4 (11/08/2025) =
+* Fixed
+- Does not block payment if email is not filled in
+
+= v8.4.3 (11/08/2025) =
+* Changed
+- Ensure that it uses the same SDK instance in transparent checkout
+* Fixed
+- Prevents clickable areas from being removed when the fast pay flow is not fully loaded
+
 = v8.4.2 (07/08/2025) =
 * Fixed
 - Sync CardForm ID with checkout context for pay-for-order compatibility