Make container ID as optional prop

src/bricks/brand/brand.test.tsx

@@ -26,4 +26,20 @@ describe('Test Brand Brick Component', () => {
 
     expect(element.container.querySelector('#brandBrick_container')).toBeTruthy();
   });
+  test('should found the id of Brand Brick div if specified', async () => {
+    MercadoPagoInstance.publicKey = 'PUBLIC_KEY';
+    const element = await render(
+      <Brand
+        customization={{
+          text: {
+            valueProp: 'payment_methods_logos',
+          },
+        }}
+        divId="customBrandBrick_container"
+        onReady={() => console.log('Brick is ready!')}
+      />,
+    );
+
+    expect(element.container.querySelector('#customBrandBrick_container')).toBeTruthy();
+  });
 });

src/bricks/brand/index.tsx

@@ -24,7 +24,12 @@ import { TBrand } from './types';
  *
  * @see {@link https://www.mercadopago.com.ar/developers/en/docs/checkout-bricks/brand-brick/introduction Brand Brick documentation} for more information.
  */
-const Brand = ({ onReady = onReadyDefault, customization, locale }: TBrand) => {
+const Brand = ({
+  onReady = onReadyDefault,
+  customization,
+  locale,
+  divId = 'brandBrick_container',
+}: TBrand) => {
   useEffect(() => {
     // Brand uses a debounce to prevent unnecessary reRenders.
     let timer: ReturnType<typeof setTimeout>;
@@ -37,7 +42,7 @@ const Brand = ({ onReady = onReadyDefault, customization, locale }: TBrand) => {
         },
       },
       name: 'brand',
-      divId: 'brandBrick_container',
+      divId,
       controller: 'brandBrickController',
     };
 
@@ -50,7 +55,7 @@ const Brand = ({ onReady = onReadyDefault, customization, locale }: TBrand) => {
       window.brandBrickController?.unmount();
     };
   }, [customization, onReady]);
-  return <div id="brandBrick_container"></div>;
+  return <div id={divId}></div>;
 };
 
 export default Brand;

src/bricks/brand/types.ts

@@ -18,6 +18,10 @@ export type TBrand = {
    * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/additional-content/select-language Bricks language customization} documentation.
    */
   locale?: 'es-AR' | 'es-CL' | 'es-CO' | 'es-MX' | 'es-VE' | 'es-UY' | 'es-PE' | 'pt-BR' | 'en-US';
+  /**
+   * Optional. Container ID where the Brick will be rendered. Default: 'walletBrick_container'
+   */
+  divId?: string;
 };
 
 export interface IBrandCustomization {

src/bricks/cardPayment/cardPayment.test.tsx

@@ -17,4 +17,18 @@ describe('Test Card Payment Brick Component', () => {
 
     expect(element.container.querySelector('#cardPaymentBrick_container')).toBeTruthy();
   });
+  test('should found the id of Card Payment Brick div if specified', async () => {
+    MercadoPagoInstance.publicKey = 'PUBLIC_KEY';
+    const element = await render(
+      <CardPayment
+        divId="customCardPaymentBrick_container"
+        initialization={{ amount: 100 }}
+        onSubmit={async (param) => {
+          console.log(param);
+        }}
+      />,
+    );
+
+    expect(element.container.querySelector('#customCardPaymentBrick_container')).toBeTruthy();
+  });
 });

src/bricks/cardPayment/index.tsx

@@ -42,6 +42,7 @@ const CardPayment = ({
   initialization,
   customization,
   locale,
+  divId = 'cardPaymentBrick_container',
 }: TCardPayment) => {
   useEffect(() => {
     // CardPayment uses a debounce to prevent unnecessary reRenders.
@@ -59,7 +60,7 @@ const CardPayment = ({
         locale,
       },
       name: 'cardPayment',
-      divId: 'cardPaymentBrick_container',
+      divId,
       controller: 'cardPaymentBrickController',
     };
     timer = setTimeout(() => {
@@ -72,7 +73,7 @@ const CardPayment = ({
     };
   }, [initialization, customization, onBinChange, onReady, onError, onSubmit]);
 
-  return <div id="cardPaymentBrick_container"></div>;
+  return <div id={divId}></div>;
 };
 
 const useCardPaymentBrick = () => {

src/bricks/cardPayment/type.ts

@@ -100,6 +100,10 @@ export type TCardPayment = {
      */
     visual?: object;
   };
+  /**
+   * Optional. Container ID where the Brick will be rendered. Default: 'walletBrick_container'
+   */
+  divId?: string;
 };
 
 export interface ICardPaymentBrickPayer {

src/bricks/payment/index.tsx

@@ -49,6 +49,7 @@ const Payment = ({
   initialization,
   customization,
   locale,
+  divId = 'paymentBrick_container',
 }: TPaymentType) => {
   useEffect(() => {
     // Payment uses a debounce to prevent unnecessary reRenders.
@@ -70,7 +71,7 @@ const Payment = ({
         },
       },
       name: 'payment',
-      divId: 'paymentBrick_container',
+      divId,
       controller: 'paymentBrickController',
     };
     timer = setTimeout(() => {
@@ -83,7 +84,7 @@ const Payment = ({
     };
   }, [initialization, customization, onReady, onError, onSubmit, onBinChange]);
 
-  return <div id="paymentBrick_container"></div>;
+  return <div id={divId}></div>;
 };
 
 const usePaymentBrick = () => {

src/bricks/payment/payment.test.tsx

@@ -27,4 +27,28 @@ describe('Test Payment Brick Component', () => {
 
     expect(element.container.querySelector('#paymentBrick_container')).toBeTruthy();
   });
+  test('should found the id of Payment Brick divif specified', async () => {
+    MercadoPagoInstance.publicKey = 'PUBLIC_KEY';
+    const element = await render(
+      <BrickPayment
+        initialization={{ amount: 100 }}
+        customization={{
+          paymentMethods: {
+            bankTransfer: ['pix'],
+            ticket: 'all',
+            atm: 'all',
+            creditCard: 'all',
+            debitCard: 'all',
+            mercadoPago: 'all',
+          },
+        }}
+        divId="customPaymentBrick_container"
+        onSubmit={async (param) => {
+          console.log(param);
+        }}
+      />,
+    );
+
+    expect(element.container.querySelector('#customPaymentBrick_container')).toBeTruthy();
+  });
 });

src/bricks/payment/type.ts

@@ -97,6 +97,10 @@ export type TPaymentType = {
    * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/additional-content/select-language General Customizations # Select Language} documentation.
    */
   locale?: string;
+  /**
+   * Optional. Container ID where the Brick will be rendered. Default: 'walletBrick_container'
+   */
+  divId?: string;
 };
 export interface IReviewConfirmItems {
   /**

src/bricks/statusScreen/index.tsx

@@ -35,6 +35,7 @@ const StatusScreen = ({
   customization,
   initialization,
   locale,
+  divId = 'statusScreenBrick_container',
 }: IStatusScreenBrickSettings) => {
   useEffect(() => {
     // Status Screen uses a debounce to prevent unnecessary reRenders.
@@ -50,7 +51,7 @@ const StatusScreen = ({
         },
       },
       name: 'statusScreen',
-      divId: 'statusScreenBrick_container',
+      divId,
       controller: 'statusScreenBrickController',
     };
     timer = setTimeout(() => {
@@ -62,7 +63,7 @@ const StatusScreen = ({
       window.statusScreenBrickController?.unmount();
     };
   }, [initialization, customization, onReady, onError]);
-  return <div id="statusScreenBrick_container"></div>;
+  return <div id={divId}></div>;
 };
 
 export default StatusScreen;

src/bricks/statusScreen/statusScreenBrick.test.tsx

@@ -10,4 +10,15 @@ describe('Test Status Screen Brick Component', () => {
 
     expect(element.container.querySelector('#statusScreenBrick_container')).toBeTruthy();
   });
+  test('should found the id of Status Screen Brick div if specified', async () => {
+    MercadoPagoInstance.publicKey = 'PUBLIC_KEY';
+    const element = await render(
+      <StatusScreen
+        divId="customStatusScreenBrick_container"
+        initialization={{ paymentId: '<PAYMENT_ID>' }}
+      />,
+    );
+
+    expect(element.container.querySelector('#customStatusScreenBrick_container')).toBeTruthy();
+  });
 });

src/bricks/statusScreen/types.ts

@@ -28,6 +28,10 @@ export interface IStatusScreenBrickSettings extends IStatusScreenBrickCallbacks
    * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/additional-content/select-language General Customization # Select Language} documentation.
    */
   locale?: 'es-AR' | 'es-CL' | 'es-CO' | 'es-MX' | 'es-VE' | 'es-UY' | 'es-PE' | 'pt-BR' | 'en-US';
+  /**
+   * Optional. Container ID where the Brick will be rendered. Default: 'walletBrick_container'
+   */
+  divId?: string;
 }
 
 export interface IStatusScreenBrickInitialization {

src/bricks/wallet/index.tsx

@@ -32,6 +32,7 @@ const Wallet = ({
   initialization,
   brand,
   locale,
+  divId = 'walletBrick_container',
 }: TWallet) => {
   useEffect(() => {
     // CardPayment uses a debounce to prevent unnecessary reRenders.
@@ -49,7 +50,7 @@ const Wallet = ({
         },
       },
       name: 'wallet',
-      divId: 'walletBrick_container',
+      divId,
       controller: 'walletBrickController',
     };
 
@@ -62,7 +63,7 @@ const Wallet = ({
       window.walletBrickController?.unmount();
     };
   }, [customization, initialization, onReady, onError, onSubmit]);
-  return <div id="walletBrick_container"></div>;
+  return <div id={divId}></div>;
 };
 
 export default Wallet;

src/bricks/wallet/types.ts

@@ -137,6 +137,10 @@ export interface PreferenceOnSubmit extends IBrickSettings {
    * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/additional-content/select-language Bricks language customization} documentation.
    */
   locale?: 'es-AR' | 'es-CL' | 'es-CO' | 'es-MX' | 'es-VE' | 'es-UY' | 'es-PE' | 'pt-BR' | 'en-US';
+  /**
+   * Optional. Container ID where the Brick will be rendered. Default: 'walletBrick_container'
+   */
+  divId?: string;
 }
 
 export interface PreferenceOnInitialization extends IBrickSettings {
@@ -175,6 +179,10 @@ export interface PreferenceOnInitialization extends IBrickSettings {
    * @see {@link https://www.mercadopago.com/developers/en/docs/checkout-bricks/additional-content/select-language Bricks language customization} documentation.
    */
   locale?: 'es-AR' | 'es-CL' | 'es-CO' | 'es-MX' | 'es-VE' | 'es-UY' | 'es-PE' | 'pt-BR' | 'en-US';
+  /**
+   * Optional. Container ID where the Brick will be rendered. Default: 'walletBrick_container'
+   */
+  divId?: string;
 }
 
 export type TWallet = PreferenceOnInitialization | PreferenceOnSubmit;

src/bricks/wallet/walletBrick.test.tsx

@@ -12,4 +12,15 @@ describe('Test Wallet Brick Component', () => {
 
     expect(element.container.querySelector('#walletBrick_container')).toBeTruthy();
   });
+  test('should found the id of Wallet Brick div if specified', async () => {
+    MercadoPagoInstance.publicKey = 'PUBLIC_KEY';
+    const element = await render(
+      <WalletBrick
+        initialization={{ preferenceId: '<PREFERENCE_ID>' }}
+        divId="customWalletBrick_container"
+      />,
+    );
+
+    expect(element.container.querySelector('#customWalletBrick_container')).toBeTruthy();
+  });
 });