From b04f03a778ab1b6b46d5ec1d12b4015148479b34 Mon Sep 17 00:00:00 2001
From: Luiz Tucillo <luiz.tucillo@mercadolivre.com>
Date: Wed, 20 Jul 2022 10:51:42 -0300
Subject: [PATCH] Release/magento 3.17.0 (#194)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Added new mask to avoid special characters in Document field

* fix: removed sponsor id from header (#233)

* feat: initial structure

* New Pix Screen Mobile Experience

* feat(PPWP-1090): added event to call initCardForm

* fix: :bug: Fix bug when buyer applies a discount

* fix: :bug: Fix placeOrder context exec

* fix: 馃悰 PPWP-1188 support php 8.1

* fix: 馃悰 PPWP-1188 add require ext-mbstring

* build(v3.17.0): 馃摝 New version v3.17.0 of Mercado Pago for Magento 2

Co-authored-by: Cleiton Aguiar Andrade <cleiton.andrade@mercadolivre.com>
Co-authored-by: hugodamm <hugo2008rj@hotmail.com>
Co-authored-by: Giovanni Cavallari <giovanni.cavallari@mercadolivre.com>
Co-authored-by: sleaof <stephanie.leao@mercadolivre.com>
Co-authored-by: Hugo Damm <hugo.damm@mercadolivre.com>
Co-authored-by: DouglasCorreiaMeli <douglas.correia@mercadolivre.com>
Co-authored-by: Fernando Lira <fernando.lira@mercadolivre.com>
---
 CHANGELOG.md                                  |   11 +
 README.md                                     |    2 +-
 composer.json                                 |    5 +-
 .../System/Config/InterestPayment/Button.php  |   18 +-
 .../System/Config/InterestPayment/Note.php    |   10 +-
 src/MercadoPago/Core/Helper/Data.php          |   32 +-
 src/MercadoPago/Core/Lib/RestClient.php       |   11 +-
 .../Core/Model/BasicConfigProvider.php        |    2 +-
 src/MercadoPago/Core/Model/Core.php           |   11 +-
 .../Core/Model/CustomBankTransfer/Payment.php |    2 +-
 .../Core/Model/CustomTicket/Payment.php       |    2 +-
 .../Core/Model/Preference/Basic.php           |    2 +-
 .../Core/Model/Preference/Wallet.php          |    9 +-
 src/MercadoPago/Core/composer.json            |    2 +-
 src/MercadoPago/Core/etc/module.xml           |    2 +-
 .../Core/view/frontend/requirejs-config.js    |   21 +-
 .../templates/custom_pix/success.phtml        |  100 +-
 .../view/frontend/web/css/style-success.css   | 1098 +++++++++++------
 .../Core/view/frontend/web/js/CreditCard.js   |   90 +-
 .../Core/view/frontend/web/js/Masks.js        |    5 +
 .../view/frontend/web/js/UpdateCardForm.js    |   30 +
 .../js/view/method-renderer/custom-method.js  |   84 +-
 .../payment/custom_bank_transfer.html         |    3 +-
 .../web/template/payment/custom_method.html   |    1 +
 24 files changed, 975 insertions(+), 578 deletions(-)
 create mode 100644 src/MercadoPago/Core/view/frontend/web/js/UpdateCardForm.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c10520ed..d7bc25d0 100755
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,17 @@ 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).
 
+## [3.17.0] - 2022-07-04
+
+### Added
+- Support to Magento 2.4.4 with PHP 8.1
+- Default success page of Magento support a Pix payment information
+
+### Fixed
+- Reload credit/debit card base amount on updated cart with coupon
+- Document input accept correct characters
+- Not sent sponsor id in header request
+
 ## [3.16.0] - 2022-05-05
 
 ### Added
diff --git a/README.md b/README.md
index 52de1012..57038807 100755
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
   </a>
 </p>
 
-# Magento 2 - Mercado Pago Module (v3.16.0)
+# Magento 2 - Mercado Pago Module (v3.17.0)
 
 The Mercado Pago plugin for Magento 2 allows you to expand the functionalities of your online store and offer a unique payment experience for your customers.
 
diff --git a/composer.json b/composer.json
index ec8381ca..cbeb4329 100755
--- a/composer.json
+++ b/composer.json
@@ -8,7 +8,7 @@
         }
     ],
     "type": "magento2-module",
-    "version": "3.16.0",
+    "version": "3.17.0",
     "license": [
         "OSL-3.0",
         "AFL-3.0"
@@ -28,6 +28,7 @@
         ]
     },
     "require": {
-        "ext-json": "*"
+        "ext-json": "*",
+        "ext-mbstring": "*"
     }
 }
diff --git a/src/MercadoPago/Core/Block/Adminhtml/System/Config/InterestPayment/Button.php b/src/MercadoPago/Core/Block/Adminhtml/System/Config/InterestPayment/Button.php
index 5c07498d..bf056019 100644
--- a/src/MercadoPago/Core/Block/Adminhtml/System/Config/InterestPayment/Button.php
+++ b/src/MercadoPago/Core/Block/Adminhtml/System/Config/InterestPayment/Button.php
@@ -74,13 +74,13 @@ public function render(AbstractElement $element)
     {
         $element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
 
-        $siteId = strtoupper(
-            $this->scopeConfig->getValue(
-                ConfigData::PATH_SITE_ID,
-                ScopeInterface::SCOPE_STORE
-            )
+        $getSiteId = $this->scopeConfig->getValue(
+            ConfigData::PATH_SITE_ID,
+            ScopeInterface::SCOPE_STORE
         );
 
+        $siteId = is_string($getSiteId) ? mb_strtoupper($getSiteId) : '';
+
         if ($this->hideInterestPayment($siteId, $element->getOriginalData())) {
             return "";
         }
@@ -136,9 +136,11 @@ public static function changeUrlByCountry()
     {
         $objectManager = ObjectManager::getInstance();
 
-        $siteId = strtoupper(
-            $objectManager->get('Magento\Framework\App\Config\ScopeConfigInterface')->getValue(ConfigData::PATH_SITE_ID)
-        );
+        $getSiteId = $objectManager
+            ->get('Magento\Framework\App\Config\ScopeConfigInterface')
+            ->getValue(ConfigData::PATH_SITE_ID);
+
+        $siteId = is_string($getSiteId) ? mb_strtoupper($getSiteId) : '';
 
         $country = Country::getCountryToMp($siteId);
 
diff --git a/src/MercadoPago/Core/Block/Adminhtml/System/Config/InterestPayment/Note.php b/src/MercadoPago/Core/Block/Adminhtml/System/Config/InterestPayment/Note.php
index c7e973ae..19022a83 100644
--- a/src/MercadoPago/Core/Block/Adminhtml/System/Config/InterestPayment/Note.php
+++ b/src/MercadoPago/Core/Block/Adminhtml/System/Config/InterestPayment/Note.php
@@ -52,13 +52,13 @@ public function __construct(
      */
     public function render(AbstractElement $element)
     {
-        $siteId = strtoupper(
-            $this->scopeConfig->getValue(
-                ConfigData::PATH_SITE_ID,
-                ScopeInterface::SCOPE_STORE
-            )
+        $getSiteId = $this->scopeConfig->getValue(
+            ConfigData::PATH_SITE_ID,
+            ScopeInterface::SCOPE_STORE
         );
 
+        $siteId = is_string($getSiteId) ? mb_strtoupper($getSiteId) : '';
+
         if ($this->hideInterestPayment($siteId, $element->getOriginalData())) {
             return "";
         }
diff --git a/src/MercadoPago/Core/Helper/Data.php b/src/MercadoPago/Core/Helper/Data.php
index 0e4f6ca8..5ab6a4b5 100644
--- a/src/MercadoPago/Core/Helper/Data.php
+++ b/src/MercadoPago/Core/Helper/Data.php
@@ -22,8 +22,6 @@
 use MercadoPago\Core\Lib\Api;
 use MercadoPago\Core\Lib\RestClient;
 use MercadoPago\Core\Logger\Logger;
-use MercadoPago\Core\Model\Custom\Payment;
-use MercadoPago\Core\Helper\PaymentPlaces;
 
 /**
  * Class Data
@@ -37,10 +35,12 @@ class Data extends \Magento\Payment\Helper\Data
      *api platform openplatform
      */
     const PLATFORM_OPENPLATFORM = 'openplatform';
+
     /**
      *api platform stdplatform
      */
     const PLATFORM_STD = 'std';
+
     /**
      *type
      */
@@ -50,6 +50,7 @@ class Data extends \Magento\Payment\Helper\Data
      * payment calculator
      */
     const STATUS_ACTIVE = 'active';
+
     const PAYMENT_TYPE_CREDIT_CARD = 'credit_card';
 
     /**
@@ -83,6 +84,10 @@ class Data extends \Magento\Payment\Helper\Data
      * @var Switcher
      */
     protected $_switcher;
+
+    /**
+     * @var ComposerInformation
+     */
     protected $_composerInformation;
 
     /**
@@ -151,9 +156,8 @@ public function __construct(
      */
     public function log($message, $name = "mercadopago", $array = null)
     {
-        //load admin configuration value, default is true
         $actionLog = $this->scopeConfig->getValue(
-            \MercadoPago\Core\Helper\ConfigData::PATH_ADVANCED_LOG,
+            ConfigData::PATH_ADVANCED_LOG,
             ScopeInterface::SCOPE_STORE
         );
 
@@ -166,7 +170,6 @@ public function log($message, $name = "mercadopago", $array = null)
             $message .= " - " . json_encode($array);
         }
 
-        //set log
         $this->_mpLogger->setName($name);
         $this->_mpLogger->debug($message);
     }
@@ -182,7 +185,6 @@ public function getApiInstance($accessToken = null)
             throw new LocalizedException(__('The ACCESS_TOKEN has not been configured, without this credential the module will not work correctly.'));
         }
 
-        //$api = new Api($accessToken);
         $api = $this->_api;
         $api->set_access_token($accessToken);
         $api->set_platform(self::PLATFORM_OPENPLATFORM);
@@ -192,9 +194,6 @@ public function getApiInstance($accessToken = null)
         RestClient::setUrlStore($this->getUrlStore());
         RestClient::setEmailAdmin($this->scopeConfig->getValue('trans_email/ident_sales/email', ScopeInterface::SCOPE_STORE));
         RestClient::setCountryInitial($this->getCountryInitial());
-        RestClient::setSponsorID($this->scopeConfig->getValue('payment/mercadopago/sponsor_id', ScopeInterface::SCOPE_STORE));
-
-        //$api->set_so((string)$this->_moduleContext->getVersion()); //TODO tracking
 
         return $api;
     }
@@ -202,7 +201,6 @@ public function getApiInstance($accessToken = null)
     /**
      * @param $accessToken
      * @return bool
-     * @throws LocalizedException
      */
     public function isValidAccessToken($accessToken)
     {
@@ -228,7 +226,7 @@ public function isValidAccessToken($accessToken)
      */
     public function getAccessToken($scopeCode = ScopeInterface::SCOPE_STORE)
     {
-        $accessToken = $this->scopeConfig->getValue(\MercadoPago\Core\Helper\ConfigData::PATH_ACCESS_TOKEN, $scopeCode);
+        $accessToken = $this->scopeConfig->getValue(ConfigData::PATH_ACCESS_TOKEN, $scopeCode);
         if (empty($accessToken)) {
             return false;
         }
@@ -272,11 +270,14 @@ public function setOrderSubtotals($data, $order)
     protected function _getMultiCardValue($data, $field)
     {
         $finalValue = 0;
+
         if (!isset($data[$field])) {
             return $finalValue;
         }
+
         $amountValues = explode('|', $data[$field]);
         $statusValues = explode('|', $data['status']);
+
         foreach ($amountValues as $key => $value) {
             $value = (float)str_replace(' ', '', $value);
             if (str_replace(' ', '', $statusValues[$key]) === 'approved') {
@@ -296,7 +297,6 @@ protected function _getMultiCardValue($data, $field)
      */
     public function getMercadoPagoPaymentMethods($accessToken)
     {
-        
         $this->log('GET /v1/payment_methods', 'mercadopago');
 
         try {
@@ -304,13 +304,13 @@ public function getMercadoPagoPaymentMethods($accessToken)
 
             $payment_methods = $mp->get("/v1/payment_methods");
 
-            $treated_payments_methods = []; 
+            $treated_payments_methods = [];
 
             foreach ($payment_methods['response'] as $payment_method) {
-                if (!isset($payment_method['payment_places'])) {         
+                if (is_array($payment_method) && isset($payment_method['id']) && !isset($payment_method['payment_places'])) {
                     $payment_method['payment_places'] = PaymentPlaces::getPaymentPlaces($payment_method['id']);
                 }
-                
+
                 array_push($treated_payments_methods, $payment_method);
             }
 
@@ -413,9 +413,11 @@ public function getFingerPrintLink($localization)
             'MPE' => 'https://www.mercadopago.com.pe/ayuda/terminos-y-politicas_194',
             'MCO' => 'https://www.mercadopago.com.co/ayuda/terminos-y-politicas_194',
         ];
+
         if (array_key_exists($localization, $site_id)) {
             return $site_id[$localization];
         }
+
         return $site_id['MLA'];
     }
 }
diff --git a/src/MercadoPago/Core/Lib/RestClient.php b/src/MercadoPago/Core/Lib/RestClient.php
index 5ff20516..6605ae59 100644
--- a/src/MercadoPago/Core/Lib/RestClient.php
+++ b/src/MercadoPago/Core/Lib/RestClient.php
@@ -7,12 +7,11 @@
 
 /**
  * MercadoPago cURL RestClient
- * 
+ *
  * @codeCoverageIgnore
  */
 class RestClient
 {
-
     /**
      * API URL
      */
@@ -68,7 +67,6 @@ private static function get_connect($uri, $method, $content_type, $extra_params
         return $connect;
     }
 
-
     /**
      * @param $connect
      * @param $data
@@ -187,7 +185,6 @@ public static function delete($uri, $content_type = "application/json", $extra_p
         return self::exec("DELETE", $uri, null, $content_type, $extra_params);
     }
 
-
     /**************
      *
      * Error implementation tracking
@@ -198,7 +195,6 @@ public static function delete($uri, $content_type = "application/json", $extra_p
     static $url_store = "";
     static $email_admin = "";
     static $country_initial = "";
-    static $sponsor_id = "";
     static $check_loop = 0;
 
     public static function getIntegratorID()
@@ -207,11 +203,6 @@ public static function getIntegratorID()
         return $objectManager->get('Magento\Framework\App\Config\ScopeConfigInterface')->getValue(ConfigData::PATH_ADVANCED_INTEGRATOR);
     }
 
-    public static function setSponsorID($sponsor_id)
-    {
-        self::$sponsor_id = $sponsor_id;
-    }
-
     public static function setModuleVersion($module_version)
     {
         self::$module_version = $module_version;
diff --git a/src/MercadoPago/Core/Model/BasicConfigProvider.php b/src/MercadoPago/Core/Model/BasicConfigProvider.php
index 82956ad8..3a6582ed 100644
--- a/src/MercadoPago/Core/Model/BasicConfigProvider.php
+++ b/src/MercadoPago/Core/Model/BasicConfigProvider.php
@@ -141,7 +141,7 @@ public function makeBannerCheckout()
             ScopeInterface::SCOPE_STORE
         );
 
-        $excludePaymentMethods = explode(",", $excludePaymentMethods);
+        $excludePaymentMethods = is_string($excludePaymentMethods) ? explode(",", $excludePaymentMethods) : [];
 
         try {
             $debit = 0;
diff --git a/src/MercadoPago/Core/Model/Core.php b/src/MercadoPago/Core/Model/Core.php
index 49aef2d6..871176b4 100644
--- a/src/MercadoPago/Core/Model/Core.php
+++ b/src/MercadoPago/Core/Model/Core.php
@@ -35,7 +35,7 @@
  * Class Core
  *
  * @package MercadoPago\Core\Model
- * 
+ *
  * @codeCoverageIgnore
  */
 class Core extends \Magento\Payment\Model\Method\AbstractMethod
@@ -397,17 +397,20 @@ public function getMessageByStatus($status, $status_detail)
      */
     protected function getCustomerInfo($customer, $order)
     {
-        $email = htmlentities($customer->getEmail());
+        $email = $customer->getEmail();
+        $email = is_string($email) ? htmlentities($email) : '';
         if ($email == "") {
             $email = $order['customer_email'];
         }
 
-        $first_name = htmlentities($customer->getFirstname());
+        $first_name = $customer->getFirstname();
+        $first_name = is_string($first_name) ? htmlentities($first_name) : '';
         if ($first_name == "") {
             $first_name = $order->getBillingAddress()->getFirstname();
         }
 
-        $last_name = htmlentities($customer->getLastname());
+        $last_name = $customer->getLastname();
+        $last_name = is_string($last_name) ? htmlentities($last_name) : '';
         if ($last_name == "") {
             $last_name = $order->getBillingAddress()->getLastname();
         }
diff --git a/src/MercadoPago/Core/Model/CustomBankTransfer/Payment.php b/src/MercadoPago/Core/Model/CustomBankTransfer/Payment.php
index 0543c3f3..275e4013 100644
--- a/src/MercadoPago/Core/Model/CustomBankTransfer/Payment.php
+++ b/src/MercadoPago/Core/Model/CustomBankTransfer/Payment.php
@@ -221,7 +221,7 @@ public function preparePostPayment($usingSecondCardInfo = null)
     public function getPaymentOptions()
     {
         $excludePaymentMethods = $this->_scopeConfig->getValue(\MercadoPago\Core\Helper\ConfigData::PATH_CUSTOM_EXCLUDE_PAYMENT_METHODS, \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
-        $listExclude           = explode(',', $excludePaymentMethods);
+        $listExclude           = is_string($excludePaymentMethods) ? explode(',', $excludePaymentMethods) : [];
         $payment_methods       = $this->_coreModel->getPaymentMethods();
         $paymentOptions        = [];
 
diff --git a/src/MercadoPago/Core/Model/CustomTicket/Payment.php b/src/MercadoPago/Core/Model/CustomTicket/Payment.php
index 36935975..8374b842 100644
--- a/src/MercadoPago/Core/Model/CustomTicket/Payment.php
+++ b/src/MercadoPago/Core/Model/CustomTicket/Payment.php
@@ -203,7 +203,7 @@ public function preparePostPayment($usingSecondCardInfo = null)
     public function getTicketsOptions()
     {
         $excludePaymentMethods = $this->_scopeConfig->getValue(\MercadoPago\Core\Helper\ConfigData::PATH_CUSTOM_EXCLUDE_PAYMENT_METHODS, \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
-        $listExclude = explode(",", $excludePaymentMethods);
+        $listExclude = is_string($excludePaymentMethods) ? explode(",", $excludePaymentMethods) : [];
 
         $payment_methods = $this->_coreModel->getPaymentMethods();
         $tickets = [];
diff --git a/src/MercadoPago/Core/Model/Preference/Basic.php b/src/MercadoPago/Core/Model/Preference/Basic.php
index 555e38bc..eff3b972 100644
--- a/src/MercadoPago/Core/Model/Preference/Basic.php
+++ b/src/MercadoPago/Core/Model/Preference/Basic.php
@@ -303,7 +303,7 @@ protected function getExcludedPaymentsMethods($config)
     {
         $excludedMethods          = [];
         $excluded_payment_methods = $config['exclude_payment_methods'];
-        $arr_epm                  = explode(",", $excluded_payment_methods);
+        $arr_epm                  = is_string($excluded_payment_methods) ? explode(",", $excluded_payment_methods) : [];
 
         if (count($arr_epm) > 0) {
             foreach ($arr_epm as $m) {
diff --git a/src/MercadoPago/Core/Model/Preference/Wallet.php b/src/MercadoPago/Core/Model/Preference/Wallet.php
index b1b0dd9a..c0716dff 100644
--- a/src/MercadoPago/Core/Model/Preference/Wallet.php
+++ b/src/MercadoPago/Core/Model/Preference/Wallet.php
@@ -429,12 +429,11 @@ protected function getPreference()
     protected function getExcludedPaymentMethods()
     {
         $excluded = [];
-        $configExcludedPaymentMethods = explode(
-            ',',
-            $this->getConfig(ConfigData::PATH_CUSTOM_EXCLUDE_PAYMENT_METHODS)
-        );
+        $configExcludedPaymentMethods = $this->getConfig(ConfigData::PATH_CUSTOM_EXCLUDE_PAYMENT_METHODS);
+        $excludedPaymentMethods = is_string($configExcludedPaymentMethods) ?
+             explode(',', $configExcludedPaymentMethods) : [];
 
-        foreach ($configExcludedPaymentMethods as $paymentMethod) {
+        foreach ($excludedPaymentMethods as $paymentMethod) {
             $excluded[] = ['id' => $paymentMethod];
         }
 
diff --git a/src/MercadoPago/Core/composer.json b/src/MercadoPago/Core/composer.json
index cfe98c65..01f50232 100644
--- a/src/MercadoPago/Core/composer.json
+++ b/src/MercadoPago/Core/composer.json
@@ -2,7 +2,7 @@
     "name": "mercadopago/core",
     "description": "Mercado Pago Magento 2 Plugin",
     "type": "magento2-module",
-    "version": "3.16.0",
+    "version": "3.17.0",
     "license": [
         "OSL-3.0",
         "AFL-3.0"
diff --git a/src/MercadoPago/Core/etc/module.xml b/src/MercadoPago/Core/etc/module.xml
index be9fb608..3924443c 100644
--- a/src/MercadoPago/Core/etc/module.xml
+++ b/src/MercadoPago/Core/etc/module.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
-    <module name="MercadoPago_Core" setup_version="3.16.0">
+    <module name="MercadoPago_Core" setup_version="3.17.0">
         <sequence>
             <module name="Magento_Sales"/>
             <module name="Magento_Payment"/>
diff --git a/src/MercadoPago/Core/view/frontend/requirejs-config.js b/src/MercadoPago/Core/view/frontend/requirejs-config.js
index 044a4b5d..23c5b0ec 100644
--- a/src/MercadoPago/Core/view/frontend/requirejs-config.js
+++ b/src/MercadoPago/Core/view/frontend/requirejs-config.js
@@ -3,12 +3,19 @@
  * @type {{ map: { "*": { Masks: string, CreditCard: string, Ticket: string, MPv2SDKJS: string } } }}
  */
 let config = {
-    map: {
-        '*': {
-          Masks: 'MercadoPago_Core/js/Masks',
-          Ticket: 'MercadoPago_Core/js/Ticket',
-          CreditCard: 'MercadoPago_Core/js/CreditCard',
-          MPv2SDKJS: 'https://sdk.mercadopago.com/js/v2'
-        }
+  map: {
+    '*': {
+      Masks: 'MercadoPago_Core/js/Masks',
+      Ticket: 'MercadoPago_Core/js/Ticket',
+      CreditCard: 'MercadoPago_Core/js/CreditCard',
+      MPv2SDKJS: 'https://sdk.mercadopago.com/js/v2',
     }
+  },
+  config: {
+    mixins: {
+      'Magento_SalesRule/js/view/payment/discount': {
+        'MercadoPago_Core/js/UpdateCardForm': true
+      }
+    }
+  }
 };
diff --git a/src/MercadoPago/Core/view/frontend/templates/custom_pix/success.phtml b/src/MercadoPago/Core/view/frontend/templates/custom_pix/success.phtml
index b3e58cf9..0e0226a0 100644
--- a/src/MercadoPago/Core/view/frontend/templates/custom_pix/success.phtml
+++ b/src/MercadoPago/Core/view/frontend/templates/custom_pix/success.phtml
@@ -56,42 +56,74 @@ $link_to_order = '<a href="' . $block->escapeUrl($this->getOrderUrl()) . '">' .
 
             </div>
 
-            <div class="mp-col-md-8 mp-text-center mp-pix-right">
-                <p class="mp-details-pix-amount">
-                    <span class="mp-details-pix-qr">
-                        <?php echo __('Value:'); ?>
-                    </span>
-                    <span class="mp-details-pix-qr-value">
-                    <?php echo __(' R$ '); ?> <?php echo number_format($paymentResponse['transaction_amount'], 2, ',', '.'); ?>
-                    </span>
-                </p>
-                <p class="mp-details-pix-qr-title">
-                    <?php echo __('Scan the QR code:'); ?>
-                </p>
-                <?php if (isset($paymentResponse['point_of_interaction']) && $paymentResponse['point_of_interaction']['transaction_data']['qr_code_base64']) { ?>
-                <img class="mp-details-pix-qr-img" src="data:image/jpeg;base64,<?php echo $paymentResponse['point_of_interaction']['transaction_data']['qr_code_base64']; ?>" />
-                <?php } ?>
-                <p class="mp-details-pix-qr-subtitle">
-                    <?php echo __('Code valid for '); ?><?php echo __($expirationInfo); ?>
-                </p>
-                <div class="mp-details-pix-container">
-                    <p class="mp-details-pix-qr-description">
-                        <?php echo __('If you prefer, you can pay by copying and pasting the following code'); ?>
-                    </p>
-                    <div class="mp-row-checkout-pix-container">
-                        <input id="mp-qr-code" value="<?php echo $paymentResponse['point_of_interaction']['transaction_data']['qr_code']; ?>" class="mp-qr-input"></input>
-                        <button onclick="copy_qr_code()" class="mp-details-pix-button" onclick="true"><?php echo __('Copy code'); ?></button>
-                        <script>
-                            function copy_qr_code() {
-                                var copyText = document.getElementById("mp-qr-code");
-                                copyText.select();
-                                copyText.setSelectionRange(0, 99999)
-                                document.execCommand("copy");
-                            }
-                        </script>
+            <div class="content-box">
+                <div class="content-box__row">
+                    <div id="banck-transfer-html">
+                        <div class="text-container mp-mb-16">
+                            <h2 class="heading-2 os-step__title">Quase l谩! Pague via Pix para concluir sua compra</h2>
+                        </div>
+                        <div class="mp-flex mp-stretch-item">
+                            <div class="mp-flex-item-round-border mp-ta-center mp-bg-light-grey mp-padding-24 mp-mr-8">
+                                <div class="mp-flex-item-column mp-fc-black mp-ta-center">
+                                    <div class="mp-lh-120 mp-mp-fw-normal mp-fs-16 mp-fc-black mp-mobile-fs-14">Valor:</div>
+                                        <div id=pix-amount class="mp-lh-120 mp-fw-600 mp-fs-24 mp-fc-black mp-mobile-fs-16">R$&nbsp;<?php echo number_format($paymentResponse['transaction_amount'], 2, ',', '.'); ?></div>
+                                    </div>
+                                </div>
+                            <div class="mp-flex-item-round-border mp-ta-center mp-bg-light-grey mp-padding-24">
+                                <div class="mp-flex-item-column mp-fc-black mp-ta-center">
+                                    <div class="mp-lh-120 mp-mp-fw-normal mp-fs-16 mp-fc-black mp-mobile-fs-14">Vencimento:</div>
+                                    <div id=pix-due-date class="mp-lh-120 mp-fw-600 mp-fs-24 mp-fc-black mp-mobile-fs-16"><?php echo __($expirationInfo); ?></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="text-container">
+                                <div class="mp-flex mp-mb-16">
+                                    <h3 class="heading-3">Escaneie este c贸digo QR para pagar</h3>
+                                    <div class="mp-tooltip mp-img-fix-width">
+                                        <img src="https://http2.mlstatic.com/static/org-img/mkt/email-mkt-assets/op-plugins/shopify/important.png" width="15.6px" height="15.6px" alt="Important" style="margin-left: 8.2px; margin-top: 16.0px">
+                                        <span class="mp-tooltiptext">
+                                            Antes de confirmar a compra, voc锚 ver谩 o valor a pagar e as informa莽玫es do vendedor.
+                                        </span>
+                                    </div>
+                                </div>
+                                <p class="mp-mt-0">1. Acesse o seu banco ou aplicativo de pagamentos</p>
+                                <p class="mp-mt-0">2. Escolha pagar via Pix com c贸digo QR</p>
+                                <p class="mp-mt-0">3. Escaneie o seguinte c贸digo</p>
+                            </div>
+                            <div>
+                                <?php if (isset($paymentResponse['point_of_interaction']) && $paymentResponse['point_of_interaction']['transaction_data']['qr_code_base64']) { ?>
+                                <img class="mp-img-center mp-details-pix-qr-img" src="data:image/jpeg;base64,<?php echo $paymentResponse['point_of_interaction']['transaction_data']['qr_code_base64']; ?>" />
+                                <?php } ?>
+                            </div>
+                            <hr class="mp-bottom-line mp-mt-24 mp-mb-24">
+                        </div>
+                        <div>
+                            <div class="text-container">
+                                <h3 class="heading-3 mp-mb-16">Ou pague com o c贸digo Pix Copia e Cola</h3>
+                                <p>Acesse o seu banco ou aplicativo de pagamentos e escolha pagar via Pix. Em seguida, cole o seguinte c贸digo de pagamento:</p>
+                            </div>
+                            <div class="mp-mt-16 mp-mb-16">
+                                <span class="mp-ta-center">
+                                    <input id="mp-qr-code" value="<?php echo $paymentResponse['point_of_interaction']['transaction_data']['qr_code']; ?>" class="mp-qr-input"></input>
+                                </span>
+                                <span class="mp-fade-out-gradient"></span>
+                            </div>
+                            <div class="mp-flex mp-stretch-item">
+                                <button onclick="copy_qr_code()" class="mp-details-pix-button" onclick="true"><?php echo __('Copy code'); ?></button>
+                                    <script>
+                                        function copy_qr_code() {
+                                            var copyText = document.getElementById("mp-qr-code");
+                                            copyText.select();
+                                            copyText.setSelectionRange(0, 99999)
+                                            document.execCommand("copy");
+                                        }
+                                    </script>
+                            </div>
+                        </div>
                     </div>
                 </div>
-          </div>
+            </div>
     </div>
 </div>
 
diff --git a/src/MercadoPago/Core/view/frontend/web/css/style-success.css b/src/MercadoPago/Core/view/frontend/web/css/style-success.css
index f6dd6c95..3d232156 100644
--- a/src/MercadoPago/Core/view/frontend/web/css/style-success.css
+++ b/src/MercadoPago/Core/view/frontend/web/css/style-success.css
@@ -1,426 +1,702 @@
 /* Styles for success page */
 
 .checkout-success #box-mercadopago {
-  width: 50%;
-  flex: none;
-}
-.checkout-success .mp-col-md-4 {
-  flex: none;
-  width: 100%;
-}
-
-.checkout-success .mp-col-md-8 {
-  flex: none;
-  width: 100%;
-}
-
-.checkout-success .mp-pix-right {
-  border-right: none;
-  border-top: solid 1px #e5e5e5;
-  margin-bottom: 32px;
-}
-
-.checkout-success .mp-qr-code {
-  width: 100%;
-  margin: 0 0 24px 0;
-}
-
-.checkout-success .mp-details-pix-button {
-  width: 100%;
-  display: inline-block;
-}
-
-.checkout-success .mp-row-checkout-pix-container {
-  display: block;
-}
-
-.checkout-success .mp-details-pix-img {
-  padding: 0;
-  margin: 64px auto 0;
-}
-
-.checkout-success .mp-details-pix-title {
-  margin: 40px auto 0;
-  text-align: center;
-  padding: 0;
-}
-
-.checkout-success .mp-qr-input {
-  height: 38px;
-  width: 95%;
-  margin-bottom: 24px;
-  padding: 6.3px 0 5.7px 12px;
-}
-
-#box-mercadopago, #logo-mercadopago {
-  padding: 0;
-  text-align: left;
-}
-
-#box-mercadopago>p {
-  text-transform: unset;
-  line-height: normal;
-}
-
-#box-mercadopago {
-  margin-top: 20px;
-}
-
-.mercadopago-title {
-  margin: 0 0 10px 0;
-  font-weight: bold;
-}
-
-.mercadopago-title-info-payment {
-  margin: 20px 0 10px 0;
-  text-transform: uppercase;
-}
-
-#btn-boleto-mercadopago {
-  font-size: 1.25em;
-  text-align: center;
-  line-height: 1.25em;
-  padding: 6px 12px;
-  font-family: 'Lato', sans-serif;
-  font-weight: 400;
-  background-color: #36A1F1;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36A1F1), color-stop(100%, #0F79C9));
-  background-image: -webkit-linear-gradient(#36A1F1, #0F79C9);
-  background-image: -moz-linear-gradient(#36A1F1, #0F79C9);
-  background-image: -o-linear-gradient(#36A1F1, #0F79C9);
-  background-image: linear-gradient(#36A1F1, #0F79C9);
-  -webkit-box-shadow: inset 0 1px #97DCFF;
-  box-shadow: 0 1px #97DCFF inset;
-  color: #FFF !important;
-  border: 1px solid #0D6FB9;
-  border-radius: 4px 4px 4px 4px;
-  cursor: pointer;
-  display: inline-block;
-  text-decoration: none;
-}
-
-#btn-boleto-mercadopago:hover {
-  background-color: #4CBFF8;
-  background-image: linear-gradient(#4CBFF8, #1699DF);
-  box-shadow: 0 1px #B6EBFF inset;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4CBFF8), color-stop(100%, #1699DF));
-  background-image: -webkit-linear-gradient(#4CBFF8, #1699DF);
-  background-image: -moz-linear-gradient(#4CBFF8, #1699DF);
-  background-image: -o-linear-gradient(#4CBFF8, #1699DF);
-  background-image: linear-gradient(#4CBFF8, #1699DF);
-  -webkit-box-shadow: inset 0 1px #B6EBFF;
-  border: 1px solid #1890D3;
-  color: #FFF;
-  text-decoration: none;
-}
-
-#logo-mercadopago {
-  margin: 20px 0;
-  width: 100px;
-  /*float: left;*/
-}
-
-#logo-mercadopago img {
-  /* float: left;*/
-  width: 100%;
-}
-
-.checkout-success .button-success {
-    display: none;
-}
-
-.button-success {
-  text-align: left;
-  margin: 20px 0 20px 0;
-}
-
-.mp-details-title {
+	width: 50%;
+	flex: none;
+  }
+  .checkout-success .mp-col-md-4 {
+	flex: none;
 	width: 100%;
-	margin: 32px 358px 32px 0px;
-	font-family: sans-serif;
-	font-size: 28px;
-	font-weight: normal;
-	font-stretch: normal;
-	font-style: normal;
-	line-height: normal;
-	letter-spacing: normal;
-	color: #333333;
-}
-
-.mp-details-pix {
+  }
+  
+  .checkout-success .mp-col-md-8 {
+	flex: none;
 	width: 100%;
-	height: auto;
-  display: inline-block;
-	border-radius: 6px;
-	box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.1);
-	background-color: #ffffff;
-	margin-bottom: 30px;
-}
-
-.mp-details-pix-title {
-	width:100%;
-	opacity: 0.8;
-	font-family: sans-serif;
-	font-size: 18px;
-	font-weight: bold;
-	font-stretch: normal;
-	font-style: normal;
-	line-height: 1.67;
-	letter-spacing: normal;
-	color: rgba(0, 0, 0, 0.8);
+  }
+  
+  .checkout-success .mp-pix-right {
+	border-right: none;
+	border-top: solid 1px #e5e5e5;
+	margin-bottom: 32px;
+  }
+  
+  .checkout-success .mp-qr-code {
+	width: 100%;
+	margin: 0 0 0 0;
+  }
+  
+  .checkout-success .mp-details-pix-button {
+	width: 100%;
+	display: inline-block;
+  }
+  
+  .checkout-success .mp-row-checkout-pix-container {
 	display: block;
-	margin: 40px 0 0 0;
-	padding: 0 0 0 32px;
-}
-
-.mp-pix-left {
-	padding: 0 0 0 32px;
-}
-
-.mp-details-list {
-	display: flex;
-  margin-bottom: 28px;
-}
-
-.mp-details-pix-number-p {
-	border-radius: 100%;
-	width: 26px;
-  height: 24px;
-  padding: 2px 0 0 0;
-	border: solid 1px #009ee3;
-	color: #009ee3;
+  }
+  
+  .checkout-success .mp-details-pix-img {
+	padding: 0;
+	margin: 64px auto 0;
+  }
+  
+  .checkout-success .mp-details-pix-title {
+	margin: 40px auto 0;
 	text-align: center;
-	font-size: 16px;
-	margin: 0 13px 0 0;
-	font-family: sans-serif;
-}
-
-.mp-details-list-description {
-  padding-top: 4px;
-	font-family: sans-serif;
-	font-size: 16px;
-	font-weight: normal;
-	font-stretch: normal;
-	font-style: normal;
+	padding: 0;
+  }
+  
+  .checkout-success .mp-qr-input {
+	height: 38px;
+	width: 95%;
+	margin-bottom: 24px;
+	padding: 6.3px 0 5.7px 12px;
+  }
+  
+  #box-mercadopago, #logo-mercadopago {
+	padding: 0;
+	text-align: left;
+  }
+  
+  #box-mercadopago>p {
+	text-transform: unset;
 	line-height: normal;
-	letter-spacing: normal;
-	color: rgba(0, 0, 0, 0.8);
-	display: block;
-	width: 70%;
-}
-
-.mp-col-md-4 {
-	flex: 0 0 33.333333%;
-	width: 33.333333%;
-	float: left;
-}
-
-.mp-col-md-8 {
-	flex: 0 0 66.666667%;
-  width: 65.666667%;
-  float: left;
-}
-
-.mp-text-center {
-	text-align: center !important;
-}
-
-.mp-pix-right {
-	border-left: solid 1px #e5e5e5;
-}
-
-.mp-details-pix-amount {
-	margin: 32px auto 0;
-  text-align: center;
-  width: 100%;
-	color: rgba(0, 0, 0, 0.8);
-	font-size: 18px;
-	font-family: sans-serif;
-}
-
-.mp-steps-congrats {
-	margin: 24px 0 16px 0 !important;
-	list-style-type: none;
-}
-
-
-
-.mp-details-pix-qr {
-	padding: 0 4px 0 0;
-}
-
-.mp-details-pix-qr-value {
-	font-weight: bold;
-
-}
-
-.mp-details-pix-qr-title {
-	margin: 24px 0 0 0;
-	font-family: sans-serif;
-	font-size: 16px;
-	font-weight: bold;
-	font-stretch: normal;
-	font-style: normal;
-	line-height: 1.88;
-	letter-spacing: normal;
-	text-align: center;
-	color: rgba(0, 0, 0, 0.8);
-}
-
-.mp-details-pix-qr-value {
-	font-weight: bold;
-}
-
-.mp-details-pix-qr-title {
-	margin: 24px 0 0 0;
-	font-family: sans-serif;
-	font-size: 16px;
+  }
+  
+  #box-mercadopago {
+	margin-top: 20px;
+  }
+  
+  .mercadopago-title {
+	margin: 0 0 10px 0;
 	font-weight: bold;
-	font-stretch: normal;
-	font-style: normal;
-	line-height: 1.88;
-	letter-spacing: normal;
-	text-align: center;
-	color: rgba(0, 0, 0, 0.8);
-}
-
-.mp-details-pix-qr-img {
-	width: 168px;
-	height: 168px;
-	display: block;
-	margin: 16px auto 0 auto;
-}
-
-.mp-details-pix-img {
-	width: 190px;
-	height: 56px;
-	object-fit: contain;
-	display: block;
-	margin: 64px 0 0 0;
-	padding: 0 0 0 32px;
-}
-
-.mp-details-pix-qr-subtitle {
-	margin: 12px 0 32px 0;
-	font-family: sans-serif;
-	font-size: 14px;
-	font-weight: normal;
-	font-stretch: normal;
-	font-style: normal;
-	line-height: 1.29;
-	letter-spacing: normal;
-	text-align: center;
-	color: rgba(0, 0, 0, 0.45);
-}
-
-.mp-details-pix-qr-description {
-	margin: 32px 15px 16px 16px;
-	font-family: sans-serif;
-	font-size: 16px;
-	font-weight: normal;
-	font-stretch: normal;
-	font-style: normal;
-	line-height: 1.25;
-	letter-spacing: normal;
+  }
+  
+  .mercadopago-title-info-payment {
+	margin: 20px 0 10px 0;
+	text-transform: uppercase;
+  }
+  
+  #btn-boleto-mercadopago {
+	font-size: 1.25em;
 	text-align: center;
-	color: rgba(0, 0, 0, 0.8);
-}
-
-.mp-row-checkout-pix {
+	line-height: 1.25em;
+	padding: 6px 12px;
+	font-family: 'Lato', sans-serif;
+	font-weight: 400;
+	background-color: #36A1F1;
+	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36A1F1), color-stop(100%, #0F79C9));
+	background-image: -webkit-linear-gradient(#36A1F1, #0F79C9);
+	background-image: -moz-linear-gradient(#36A1F1, #0F79C9);
+	background-image: -o-linear-gradient(#36A1F1, #0F79C9);
+	background-image: linear-gradient(#36A1F1, #0F79C9);
+	-webkit-box-shadow: inset 0 1px #97DCFF;
+	box-shadow: 0 1px #97DCFF inset;
+	color: #FFF !important;
+	border: 1px solid #0D6FB9;
+	border-radius: 4px 4px 4px 4px;
+	cursor: pointer;
+	display: inline-block;
+	text-decoration: none;
+  }
+  
+  #btn-boleto-mercadopago:hover {
+	background-color: #4CBFF8;
+	background-image: linear-gradient(#4CBFF8, #1699DF);
+	box-shadow: 0 1px #B6EBFF inset;
+	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4CBFF8), color-stop(100%, #1699DF));
+	background-image: -webkit-linear-gradient(#4CBFF8, #1699DF);
+	background-image: -moz-linear-gradient(#4CBFF8, #1699DF);
+	background-image: -o-linear-gradient(#4CBFF8, #1699DF);
+	background-image: linear-gradient(#4CBFF8, #1699DF);
+	-webkit-box-shadow: inset 0 1px #B6EBFF;
+	border: 1px solid #1890D3;
+	color: #FFF;
+	text-decoration: none;
+  }
+  
+  #logo-mercadopago {
+	margin: 20px 0;
+	width: 100px;
+	/*float: left;*/
+  }
+  
+  #logo-mercadopago img {
+	/* float: left;*/
 	width: 100%;
-}
-
-.mp-row-checkout-pix-container {
-	display: flex;
-	padding: 16px 47px 48px 47px;
-}
-
-.mp-qr-input {
-	width: 70%;
-	padding: 6.3px 0 5.7px 12px;
-	border-radius: 6px;
-	border: solid 1px rgba(0, 0, 0, 0.2);
-	background-color: #ffffff;
-	margin: 0 12px 0 0;
-}
-
-.mp-details-pix-button {
-	width: 30%;
-	height: 48px;
-	padding: 16px 24px;
-	border-radius: 6px;
-  box-shadow: none !important;
-	background-color: #009ee3;
-  border: 1px solid #009ee3 !important;
-	font-family: sans-serif;
-	font-size: 16px;
-	font-weight: 600;
-	font-stretch: normal;
-	font-style: normal;
-	line-height: 1;
-	letter-spacing: normal;
-	text-align: center;
-	color: #ffffff;
-}
-
-.mp-details-pix-button:hover {
-  background: #006bb4;
-  border: 1px solid #006bb4;
-  color: #fff;
-}
-
-@media (max-width: 767.98px) {
-  .checkout-success #box-mercadopago {
-    width: 100%;
-		flex: none;
   }
-
-	.mp-col-md-4 {
-		width: 100%;
-		flex: none;
-	}
-
-	.mp-col-md-8 {
-		width: 100%;
-		flex: none;
-	}
-
-	.mp-pix-right {
-		border-right: none;
-		border-top: solid 1px #e5e5e5;
-		margin-bottom: 32px;
-	}
-
-	.mp-qr-code {
-		width: 100%;
-		margin: 0 0 24px 0;
-	}
-
-	.mp-details-pix-button {
-		width: 100%;
-		display: inline-block;
-	}
-
-	.mp-row-checkout-pix-container {
-		display: block;
-	}
-
-	.mp-details-pix-img {
-		margin: 64px auto 0;
-		padding: 0;
-	}
-
-	.mp-details-pix-title {
-		margin: 40px auto 0;
+  
+  .checkout-success .button-success {
+	  display: none;
+  }
+  
+  .button-success {
+	text-align: left;
+	margin: 20px 0 20px 0;
+  }
+  
+  .mp-details-title {
+	  width: 100%;
+	  margin: 32px 358px 32px 0px;
+	  font-family: sans-serif;
+	  font-size: 28px;
+	  font-weight: normal;
+	  font-stretch: normal;
+	  font-style: normal;
+	  line-height: normal;
+	  letter-spacing: normal;
+	  color: #333333;
+  }
+  
+  .mp-details-pix {
+	  width: 100%;
+	  height: auto;
+	display: inline-block;
+	  border-radius: 6px;
+	  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.1);
+	  background-color: #ffffff;
+	  margin-bottom: 30px;
+  }
+  
+  .mp-details-pix-title {
+	  width:100%;
+	  opacity: 0.8;
+	  font-family: sans-serif;
+	  font-size: 18px;
+	  font-weight: bold;
+	  font-stretch: normal;
+	  font-style: normal;
+	  line-height: 1.67;
+	  letter-spacing: normal;
+	  color: rgba(0, 0, 0, 0.8);
+	  display: block;
+	  margin: 40px 0 0 0;
+	  padding: 0 0 0 32px;
+  }
+  
+  .mp-pix-left {
+	  padding: 0 0 0 32px;
+  }
+  
+  .mp-details-list {
+	  display: flex;
+	margin-bottom: 28px;
+  }
+  
+  .mp-details-pix-number-p {
+	  border-radius: 100%;
+	  width: 26px;
+	height: 24px;
+	padding: 2px 0 0 0;
+	  border: solid 1px #009ee3;
+	  color: #009ee3;
+	  text-align: center;
+	  font-size: 16px;
+	  margin: 0 13px 0 0;
+	  font-family: sans-serif;
+  }
+  
+  .mp-details-list-description {
+	padding-top: 4px;
+	  font-family: sans-serif;
+	  font-size: 16px;
+	  font-weight: normal;
+	  font-stretch: normal;
+	  font-style: normal;
+	  line-height: normal;
+	  letter-spacing: normal;
+	  color: rgba(0, 0, 0, 0.8);
+	  display: block;
+	  width: 70%;
+  }
+  
+  .mp-col-md-4 {
+	  flex: 0 0 33.333333%;
+	  width: 33.333333%;
+	  float: left;
+  }
+  
+  .mp-col-md-8 {
+	  flex: 0 0 66.666667%;
+	width: 65.666667%;
+	float: left;
+  }
+  
+  .mp-text-center {
+	  text-align: center !important;
+  }
+  
+  .mp-pix-right {
+	  border-left: solid 1px #e5e5e5;
+  }
+  
+  .mp-details-pix-amount {
+	  margin: 32px auto 0;
 		text-align: center;
-		padding: 0;
-	}
-
+		width: 100%;
+	  color: rgba(0, 0, 0, 0.8);
+	  font-size: 18px;
+	  font-family: sans-serif;
+  }
+  
+  .mp-steps-congrats {
+	  margin: 24px 0 16px 0 !important;
+	  list-style-type: none;
+  }
+  
+  
+  
+  .mp-details-pix-qr {
+	  padding: 0 4px 0 0;
+  }
+  
+  .mp-details-pix-qr-value {
+	  font-weight: bold;
+  
+  }
+  
+  .mp-details-pix-qr-title {
+	  margin: 24px 0 0 0;
+	  font-family: sans-serif;
+	  font-size: 16px;
+	  font-weight: bold;
+	  font-stretch: normal;
+	  font-style: normal;
+	  line-height: 1.88;
+	  letter-spacing: normal;
+	  text-align: center;
+	  color: rgba(0, 0, 0, 0.8);
+  }
+  
+  .mp-details-pix-qr-value {
+	  font-weight: bold;
+  }
+  
+  .mp-details-pix-qr-title {
+	  margin: 24px 0 0 0;
+	  font-family: sans-serif;
+	  font-size: 16px;
+	  font-weight: bold;
+	  font-stretch: normal;
+	  font-style: normal;
+	  line-height: 1.88;
+	  letter-spacing: normal;
+	  text-align: center;
+	  color: rgba(0, 0, 0, 0.8);
+  }
+  
+  .mp-details-pix-qr-img {
+	  width: 200px;
+	  height: 200px;
+	  display: block;
+	  margin: 16px auto 0 auto;
+  }
+  
+  .mp-details-pix-img {
+	  width: 190px;
+	  height: 56px;
+	  object-fit: contain;
+	  display: block;
+	  margin: 64px 0 0 0;
+	  padding: 0 0 0 32px;
+  }
+  
+  .mp-details-pix-qr-subtitle {
+	  margin: 12px 0 32px 0;
+	  font-family: sans-serif;
+	  font-size: 14px;
+	  font-weight: normal;
+	  font-stretch: normal;
+	  font-style: normal;
+	  line-height: 1.29;
+	  letter-spacing: normal;
+	  text-align: center;
+	  color: rgba(0, 0, 0, 0.45);
+  }
+  
+  .mp-details-pix-qr-description {
+	  margin: 32px 15px 16px 16px;
+	  font-family: sans-serif;
+	  font-size: 16px;
+	  font-weight: normal;
+	  font-stretch: normal;
+	  font-style: normal;
+	  line-height: 1.25;
+	  letter-spacing: normal;
+	  text-align: center;
+	  color: rgba(0, 0, 0, 0.8);
+  }
+  
+  .mp-row-checkout-pix {
+	  width: 100%;
+  }
+  
+  .mp-row-checkout-pix-container {
+	  display: flex;
+	  padding: 16px 47px 48px 47px;
+  }
+  
   .mp-qr-input {
-    width: 95%;
-    height: 38px;
-    padding: 6.3px 0 5.7px 12px;
-    margin-bottom: 24px;
+	  width: 70%;
+	  padding: 6.3px 0 5.7px 12px;
+	  border-radius: 6px;
+	  border: solid 1px rgba(0, 0, 0, 0.2);
+	  background-color: #ffffff;
+	  margin: 0 12px 0 0;
   }
-
-}
+  
+  .mp-details-pix-button {
+	  width: 30%;
+	  height: 48px;
+	  padding: 16px 24px;
+	  border-radius: 6px;
+	box-shadow: none !important;
+	  background-color: #009ee3;
+	border: 1px solid #009ee3 !important;
+	  font-family: sans-serif;
+	  font-size: 16px;
+	  font-weight: 600;
+	  font-stretch: normal;
+	  font-style: normal;
+	  line-height: 1;
+	  letter-spacing: normal;
+	  text-align: center;
+	  color: #ffffff;
+  }
+  
+  .mp-details-pix-button:hover {
+	background: #006bb4;
+	border: 1px solid #006bb4;
+	color: #fff;
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+	  font-weight: normal;
+	  margin: 0;
+	  /* line-height: 1em; */
+  }
+  
+  h2 {
+	  display: block;
+	  margin-block-start: 0.83em;
+	  margin-block-end: 0.83em;
+	  margin-inline-start: 0px;
+	  margin-inline-end: 0px;
+  }
+  
+  .mp-flex {
+	  display: flex;
+  }
+  
+  .mp-tooltip {
+	  display: inline-block;
+	  position: relative;
+  }
+  
+  .mp-img-fix-width {
+	  flex-basis: auto;
+	  flex-grow: 0;
+	  flex-shrink: 0;
+  }
+  
+  .mp-tooltip:hover .mp-tooltiptext {
+	opacity: 1;
+	visibility: visible;
+  }
+  
+  .mp-tooltip .mp-tooltiptext {
+	  background-color: #fff;
+	  border-radius: 6px;
+	  box-shadow: 0 0 6px rgb(0 0 0 / 10%), 0 6px 16px rgb(0 0 0 / 10%);
+	  color: #545454;
+	  left: -10px;
+	  padding: 16px;
+	  position: absolute;
+	  text-align: left;
+	  top: 150%;
+	  vertical-align: middle;
+	  visibility: hidden;
+	  width: 312px;
+	  z-index: 1;
+  }
+  
+  .mp-stretch-item {
+	  align-items: stretch;
+  }
+  
+  .background-default, .mp-flex-flow-row-wrap, .mp-stretch-item {
+	  background: #fff;
+  }
+  
+  .mp-flex-item-round-border {
+	  border-radius: 5px;
+	  flex: 1;
+  }
+  
+  .mp-ta-center {
+	  text-align: center;
+  }
+  
+  .mp-bg-light-grey {
+	  background: #f5f5f5;
+  }
+  
+  .mp-padding-24 {
+	  padding: 24px;
+  }
+  
+  .mp-mr-8 {
+	  margin-right: 8px;
+  }
+  
+  .mp-flex-item-column {
+	  display: inline-block;
+	  flex-direction: column;
+	  flex-grow: 1;
+	  width: auto;
+  }
+  
+  .mp-fc-black {
+	  color: rgba(0,0,0,.9);
+  }
+  
+  .mp-lh-120 {
+	  line-height: 120%;
+  }
+  
+  .mp-mp-fw-normal {
+	  font-weight: 400;
+  }
+  
+  .mp-fs-16 {
+	  font-size: 16px;
+  }
+  
+  .mp-fw-600 {
+	  font-weight: 600;
+  }
+  
+  .mp-fs-24 {
+	  font-size: 24px;
+  }
+  
+  .mp-bottom-line {
+	  background-color: #e6e6e6;
+	  border: none;
+	  color: #e6e6e6;
+	  height: 1px;
+  }
+  
+  .mp-mb-8 {
+	margin-bottom: 8px;
+  }
+  
+  .mp-mb-16 {
+	  margin-bottom: 16px;
+  }
+  
+  .mp-mt-16{
+	  margin-top: 16px;
+  }
+  
+  .mp-mb-24 {
+	margin-bottom: 24px;
+  }
+  
+  .mp-mt-24{
+	  margin-top: 24px;
+  }
+  
+  .content-box h3, .content-box .heading-3 {
+	  color: #333333;
+  }
+  
+  .content-box h2, .content-box .heading-2 {
+	  color: #333333;
+  }
+  
+  .main h2, .main .heading-2 {
+	  color: #333333;
+  }
+  
+  h2, .heading-2 {
+	  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+	  font-size: 1.2857142857em;
+	  line-height: 1.3em;
+  }
+  
+  h3, .heading-3 {
+	  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+	  font-size: 1em;
+	  font-weight: 500;
+	  line-height: 1.3em;
+  }
+  
+  h3 {
+	display: block;
+	font-size: 1.17em;
+	margin-block-start: 1em;
+	margin-block-end: 1em;
+	margin-inline-start: 0px;
+	margin-inline-end: 0px;
+	font-weight: bold;
+  }
+  
+  .mp-mt-0 {
+	  margin-top: 0!important;
+  }
+  
+  p {
+	line-height: 1.5em;
+  }
+  
+  p {
+	margin: 0;
+  }
+  
+  .mp-hidden-block {
+	  background-color: #fff;
+	  border: 1px solid #00000040;
+	  border-radius: 5px;
+	  overflow: hidden;
+	  padding: 18px 16px;
+	  position: relative;
+	  white-space: nowrap;
+  }
+  
+  .mp-fade-out-gradient {
+	  background-image: linear-gradient(90deg,hsla(0,0%,100%,0),#fff);
+	  height: 56px;
+	  position: absolute;
+	  right: 0;
+	  top: 0;
+	  width: 3em;
+  }
+  
+  .mp-img-center {
+	  display: block;
+	  margin-left: auto;
+	  margin-right: auto;
+  }
+  
+  .mp-width-100px {
+	  width: 100px;
+  }
+  
+  .mp-height-100px {
+	  height: 100px;
+  }
+  
+  .content-box__row:last-child {
+	  border-bottom-left-radius: 4px;
+	  border-bottom-right-radius: 4px;
+  }
+  .content-box__row:first-child {
+	  border-top-left-radius: 4px;
+	  border-top-right-radius: 4px;
+  }
+  .display-table .content-box__row {
+	  display: table;
+	  -webkit-box-sizing: border-box;
+	  box-sizing: border-box;
+	  width: 100%;
+  }
+  .content-box__row {
+	  padding: 1.1428571429em;
+	  position: relative;
+	  zoom: 1;
+  }
+  .content-box__row:after, .content-box__row:before {
+	  content: "";
+	  display: table;
+  }
+  .content-box__row:after {
+	  clear: both;
+  }
+  
+  .content-box {
+	  background: #fff;
+	  background-clip: padding-box;
+	  border: 1px solid;
+	  border-radius: 5px;
+	  color: #545454;
+  }
+  
+  .content-box, .content-box-spacing {
+	  margin-top: 1em;
+  }
+  
+  .main .content-box {
+	  border-color: #d9d9d9;
+  }
+  
+  .img {
+	width: 15.6px;
+	aspect-ratio: auto 15.6 / 15.6;
+	height: 15.6px;
+  }
+  
+  @media (max-width: 767.98px) {
+  
+	  .mp-mobile-fs-14 {
+		  font-size: 14px!important;
+	  }
+  
+	  .mp-mobile-fs-16 {
+		  font-size: 16px!important;
+	  }
+  
+		.checkout-success #box-mercadopago {
+	  width: 100%;
+		  flex: none;
+		}
+  
+	  .mp-col-md-4 {
+		  width: 100%;
+		  flex: none;
+	  }
+  
+	  .mp-col-md-8 {
+		  width: 100%;
+		  flex: none;
+	  }
+  
+	  .mp-pix-right {
+		  border-right: none;
+		  border-top: solid 1px #e5e5e5;
+		  margin-bottom: 32px;
+	  }
+  
+	  .mp-qr-code {
+		  width: 100%;
+		  margin: 0 0 0 0;
+	  }
+  
+	  .mp-details-pix-button {
+		  width: 100%;
+		  display: inline-block;
+	  }
+  
+	  .mp-row-checkout-pix-container {
+		  display: block;
+	  }
+  
+	  .mp-details-pix-img {
+		  margin: 64px auto 0;
+		  padding: 0;
+	  }
+  
+	  .mp-details-pix-title {
+		  margin: 40px auto 0;
+		  text-align: center;
+		  padding: 0;
+	  }
+  
+	.mp-qr-input {
+	  width: 95%;
+	  height: 38px;
+	  padding: 6.3px 0 5.7px 12px;
+	  margin-bottom: 24px;
+	}
+  
+  }
+  
\ No newline at end of file
diff --git a/src/MercadoPago/Core/view/frontend/web/js/CreditCard.js b/src/MercadoPago/Core/view/frontend/web/js/CreditCard.js
index 624a9773..635fa9c7 100644
--- a/src/MercadoPago/Core/view/frontend/web/js/CreditCard.js
+++ b/src/MercadoPago/Core/view/frontend/web/js/CreditCard.js
@@ -3,6 +3,88 @@
   window.cvvLength = null;
   window.additionalInfoNeeded = {};
 
+  var mp = null;
+  var mpCardForm = null;
+
+
+  window.initCardForm = function (pk, quote, processMode, country, customMethod) {
+    mp = new MercadoPago(pk);
+
+    // Instance SDK v2
+    mpCardForm = mp.cardForm({
+      amount: String(quote.totals().base_grand_total),
+      autoMount: true,
+      processingMode: processMode,
+      form: {
+        id: 'co-mercadopago-form',
+        cardNumber: { id: 'mpCardNumber' },
+        cardholderName: { id: 'mpCardholderName' },
+        cardExpirationMonth: { id: 'mpCardExpirationMonth' },
+        cardExpirationYear: { id: 'mpCardExpirationYear' },
+        securityCode: { id: 'mpSecurityCode' },
+        installments: { id: 'mpInstallments' },
+        identificationType: { id: 'mpDocType' },
+        identificationNumber: { id: 'mpDocNumber' },
+        issuer: { id: 'mpIssuer' }
+      },
+      callbacks: {
+        onFormMounted: error => {
+          if (error) return console.warn('FormMounted handling error: ', error);
+        },
+        onFormUnmounted: error => {
+          if (error) return console.warn('FormMounted handling error: ', error);
+          fullClearInputs()
+          setTimeout(() => {
+            initCardForm(pk, quote, processMode, country, customMethod)
+          }, 5000);
+        },
+        onIdentificationTypesReceived: (error, identificationTypes) => {
+          if (error) return console.warn('IdentificationTypes handling error: ', error);
+        },
+        onInstallmentsReceived: (error, installments) => {
+          if (error) {
+            return console.warn('Installments handling error: ', error)
+          }
+
+          setChangeEventOnInstallments(country, installments.payer_costs);
+        },
+        onCardTokenReceived: (error, token) => {
+          if (error) {
+            showErrors(error);
+            return console.warn('Token handling error: ', error);
+          }
+
+          customMethod.placeOrder();
+        },
+        onPaymentMethodsReceived: (error, paymentMethods) => {
+          clearInputs();
+
+          if (error) {
+            return console.warn('PaymentMethods handling error: ', error);
+          }
+
+          setImageCard(paymentMethods[0].thumbnail);
+          setCvvLength(paymentMethods[0].settings[0].security_code.length);
+          handleInstallments(paymentMethods[0].payment_type_id);
+          loadAdditionalInfo(paymentMethods[0].additional_info_needed);
+          additionalInfoHandler();
+        },
+      },
+    });
+  }
+
+  window.mpDeleteCardForm = function () {
+    mpCardForm.unmount()
+  }
+
+  window.getMpCardFormData = function () {
+    return mpCardForm.getCardFormData();
+  }
+
+  window.mpCreateCardToken = function () {
+    mpCardForm.createCardToken();
+  }
+
   window.getFormCustom = function () {
     return document.querySelector('#co-mercadopago-form');
   }
@@ -109,6 +191,12 @@
     document.getElementById('mpCardholderName').value = '';
   }
 
+  window.fullClearInputs = function () {
+    clearInputs()
+    document.getElementById('mpCardNumber').value = '';
+    document.getElementById("mpInstallments").value = ''
+  }
+
   window.validateFixedInputs = function () {
     var emptyInputs = false;
     var form = this.getFormCustom();
@@ -234,7 +322,7 @@
 
   window.handleInstallments = function (payment_type_id) {
     if (payment_type_id === 'debit_card') {
-      document.getElementById('mpInstallments').setAttribute("disabled","disabled");
+      document.getElementById('mpInstallments').setAttribute("disabled", "disabled");
     } else {
       document.getElementById('mpInstallments').removeAttribute("disabled");
     }
diff --git a/src/MercadoPago/Core/view/frontend/web/js/Masks.js b/src/MercadoPago/Core/view/frontend/web/js/Masks.js
index 0ec45ab2..51e76bc1 100644
--- a/src/MercadoPago/Core/view/frontend/web/js/Masks.js
+++ b/src/MercadoPago/Core/view/frontend/web/js/Masks.js
@@ -28,6 +28,11 @@
     return v.replace(/\D/g, '');
   }
 
+  // eslint-disable-next-line no-unused-vars -- hugo
+  window.mintegerletter = function (v) {
+    return v.replace(/[^A-Za-z0-9]+/g, '');
+  }
+
   // eslint-disable-next-line no-unused-vars
   window.mcc = function (v) {
     v = v.replace(/\D/g, '');
diff --git a/src/MercadoPago/Core/view/frontend/web/js/UpdateCardForm.js b/src/MercadoPago/Core/view/frontend/web/js/UpdateCardForm.js
new file mode 100644
index 00000000..cc82daf6
--- /dev/null
+++ b/src/MercadoPago/Core/view/frontend/web/js/UpdateCardForm.js
@@ -0,0 +1,30 @@
+define([
+  'Magento_SalesRule/js/action/set-coupon-code',
+  'Magento_SalesRule/js/action/cancel-coupon',
+  'Magento_SalesRule/js/model/coupon',
+], function (setCouponCodeAction, cancelCouponAction, coupon) {
+  'use strict';
+
+  var couponCode = coupon.getCouponCode();
+  var isApplied = coupon.getIsApplied();
+
+  var mixin = {
+    apply: function () {
+      if (this.validate()) {
+        setCouponCodeAction(couponCode(), isApplied);
+        mpDeleteCardForm();
+      }
+    },
+    cancel: function () {
+      if (this.validate()) {
+        couponCode('');
+        cancelCouponAction(isApplied);
+        mpDeleteCardForm();
+      }
+    },
+  }
+  return function (origin) {
+
+    return origin.extend(mixin);
+  };
+});
diff --git a/src/MercadoPago/Core/view/frontend/web/js/view/method-renderer/custom-method.js b/src/MercadoPago/Core/view/frontend/web/js/view/method-renderer/custom-method.js
index d10250c1..955f1a53 100644
--- a/src/MercadoPago/Core/view/frontend/web/js/view/method-renderer/custom-method.js
+++ b/src/MercadoPago/Core/view/frontend/web/js/view/method-renderer/custom-method.js
@@ -36,8 +36,7 @@ define(
   ) {
     'use strict';
 
-    var mp = null;
-    var mpCardForm = null;
+
 
     return Component.extend({
       defaults: {
@@ -52,64 +51,13 @@ define(
         if (window.checkoutConfig.payment[this.getCode()] !== undefined) {
           setChangeEventOnCardNumber();
           setChangeEventExpirationDate();
-
-          // Initialize SDK v2
-          mp = new MercadoPago(this.getPublicKey());
-
-          // Instance SDK v2
-          mpCardForm = mp.cardForm({
-            amount: String(this.getGrandTotal()),
-            autoMount: true,
-            processingMode: this.getProcessingMode(),
-            form: {
-              id: 'co-mercadopago-form',
-              cardNumber: { id: 'mpCardNumber' },
-              cardholderName: { id: 'mpCardholderName' },
-              cardExpirationMonth: { id: 'mpCardExpirationMonth' },
-              cardExpirationYear: { id: 'mpCardExpirationYear' },
-              securityCode: { id: 'mpSecurityCode' },
-              installments: { id: 'mpInstallments' },
-              identificationType: { id: 'mpDocType' },
-              identificationNumber: { id: 'mpDocNumber' },
-              issuer: { id: 'mpIssuer' }
-            },
-            callbacks: {
-              onFormMounted: error => {
-                if (error) return console.warn('FormMounted handling error: ', error);
-              },
-              onIdentificationTypesReceived: (error, identificationTypes) => {
-                if (error) return console.warn('IdentificationTypes handling error: ', error);
-              },
-              onInstallmentsReceived: (error, installments) => {
-                if (error) {
-                  return console.warn('Installments handling error: ', error)
-                }
-
-                setChangeEventOnInstallments(this.getCountry(), installments.payer_costs);
-              },
-              onCardTokenReceived: (error, token) => {
-                if (error) {
-                  showErrors(error);
-                  return console.warn('Token handling error: ', error);
-                }
-
-                this.placeOrder();
-              },
-              onPaymentMethodsReceived: (error, paymentMethods) => {
-                clearInputs();
-
-                if (error) {
-                  return console.warn('PaymentMethods handling error: ', error);
-                }
-
-                setImageCard(paymentMethods[0].thumbnail);
-                setCvvLength(paymentMethods[0].settings[0].security_code.length);
-                handleInstallments(paymentMethods[0].payment_type_id);
-                loadAdditionalInfo(paymentMethods[0].additional_info_needed);
-                additionalInfoHandler();
-              },
-            },
-          });
+          initCardForm(
+            this.getPublicKey(),
+            quote,
+            this.getProcessingMode(),
+            this.getCountry(),
+            this
+          );
         }
       },
 
@@ -261,7 +209,7 @@ define(
         var self = this;
 
         setPaymentInformationAction(this.messageContainer, { method: 'mercadopago_custom' }).done(() => {
-          $.getJSON('/mercadopago/wallet/preference').done(function (response){
+          $.getJSON('/mercadopago/wallet/preference').done(function (response) {
             var preferenceId = response.preference.id
             self.toogleWalletButton();
 
@@ -322,7 +270,7 @@ define(
        * @override
        */
       getData: function () {
-        var formData = mpCardForm.getCardFormData();
+        var formData = getMpCardFormData()
 
         var dataObj = {
           'method': this.item.method,
@@ -358,11 +306,11 @@ define(
           return false;
         }
 
-        if(!validateCvv()){
+        if (!validateCvv()) {
           return false;
         }
 
-        mpCardForm.createCardToken();
+        mpCreateCardToken()
       },
 
       placeOrder: function () {
@@ -433,11 +381,11 @@ define(
       },
 
       getProcessingMode: function () {
-          if (Number(this.getMpGatewayMode())) {
-            return 'gateway';
-          }
+        if (Number(this.getMpGatewayMode())) {
+          return 'gateway';
+        }
 
-          return 'aggregator';
+        return 'aggregator';
       },
     });
   }
diff --git a/src/MercadoPago/Core/view/frontend/web/template/payment/custom_bank_transfer.html b/src/MercadoPago/Core/view/frontend/web/template/payment/custom_bank_transfer.html
index 0ccb78a0..f59ab461 100644
--- a/src/MercadoPago/Core/view/frontend/web/template/payment/custom_bank_transfer.html
+++ b/src/MercadoPago/Core/view/frontend/web/template/payment/custom_bank_transfer.html
@@ -113,7 +113,8 @@
                                data-bind="attr: {
                               title: $t('Identification Number'),
                               'data-validate': JSON.stringify({required:true})
-                              }">
+                              }"
+                              onkeyup="maskInput(this, mintegerletter);">
                     </div> <!-- end .form-col-6 -->
                 </div><!-- end .form-row -->
 
diff --git a/src/MercadoPago/Core/view/frontend/web/template/payment/custom_method.html b/src/MercadoPago/Core/view/frontend/web/template/payment/custom_method.html
index d86cc4c9..7777c5a5 100644
--- a/src/MercadoPago/Core/view/frontend/web/template/payment/custom_method.html
+++ b/src/MercadoPago/Core/view/frontend/web/template/payment/custom_method.html
@@ -201,6 +201,7 @@
                             data-checkout="mpDocNumber"
                             name="mercadopago_custom[docNumber]"
                             autocomplete="off"
+                            onkeyup="maskInput(this, mintegerletter);"
                         />
 
                         <small id="mp-error-324" class="mp-form-error" data-main="#mpDocNumber"><!-- ko i18n: 'Invalid document number'--><!-- /ko --></small>