feat: add mask to card number fields on checkout

view/adminhtml/requirejs-config.js

@@ -2,8 +2,7 @@ const config = {
     map: {
         '*': {
             orderCharge: 'Pagarme_Pagarme/js/view/order/orderCharge',
-            creditCardAdminPagarme: 'Pagarme_Pagarme/js/view/form/creditCard',
-            pagarmeJqueryMask: 'Pagarme_Pagarme/js/jquery.mask.min'
+            creditCardAdminPagarme: 'Pagarme_Pagarme/js/view/form/creditCard'
         }
     }
 }

view/adminhtml/templates/form/creditcard.phtml

@@ -45,7 +45,8 @@ $code = $block->getMethodCode();
             <span><?= __('Credit Card Number'); ?></span>
         </label>
         <div class="admin__field-control control">
-            <input id="pagarme_cc_number" name="payment[cc_number]" class="hosted-control cc_number"/>
+            <input id="pagarme_cc_number" name="payment[cc_number]" class="hosted-control cc_number"
+                   inputmode="numeric"/>
             <div class="hosted-error"><?= __('Please, enter valid Credit Card Number'); ?></div>
         </div>
     </div>
@@ -91,7 +92,8 @@ $code = $block->getMethodCode();
                    type="number"
                    min="0"
                    name="payment[cc_cid]"
-                   class="hosted-control hosted-cid cc_cid"/>
+                   class="hosted-control hosted-cid cc_cid"
+                   inputmode="numeric"/>
 
             <div class="hosted-error">
                 <?= __('The cvv field must be a minimum length of 3 and a maximum length of 4.'); ?>

view/base/requirejs-config.js

@@ -1,7 +1,16 @@
 const config = {
     map: {
         '*': {
-            numberFormatter: 'Pagarme_Pagarme/js/helper/numberFormatter'
+            numberFormatter: 'Pagarme_Pagarme/js/helper/numberFormatter',
+            pagarmeJqueryMask: 'Pagarme_Pagarme/js/jquery.mask.min'
+        },
+        shim : {
+            'pagarmeJqueryMask' : {
+                deps : ['jquery']
+            },
+            'Pagarme_Pagarme/js/core/checkout/PaymentMethodController' : {
+                deps : ['pagarmeJqueryMask']
+            }
         }
     }
 }

view/frontend/web/js/core/checkout/CreditCardToken.js

@@ -3,7 +3,7 @@ define([], () => {
         constructor(formObject, documentNumber = null) {
             this.documentNumber = documentNumber;
             if (documentNumber != null) {
-                this.documentNumber = documentNumber.replace(/(\.|\/|\-)/g,"");
+                this.documentNumber = documentNumber.replace(/[^0-9]+/g, '');
             }
             this.formObject = formObject;
         }
@@ -12,7 +12,7 @@ define([], () => {
                 type: "card",
                 card : {
                     holder_name: this.formObject.creditCardHolderName.val(),
-                    number: this.formObject.creditCardNumber.val(),
+                    number: this.formObject.creditCardNumber.val().replace(/[^0-9]+/g, ''),
                     exp_month: this.formObject.creditCardExpMonth.val(),
                     exp_year: this.formObject.creditCardExpYear.val(),
                     cvv: this.formObject.creditCardCvv.val(),

view/frontend/web/js/core/checkout/PaymentMethodController.js

@@ -14,6 +14,7 @@ define([
     'Pagarme_Pagarme/js/core/models/BoletoCreditcardModel',
     'Pagarme_Pagarme/js/core/models/GooglePayModel',
     'Pagarme_Pagarme/js/core/validators/CustomerValidator',
+    'pagarmeJqueryMask'
 ], (
     $,
     PlatformConfig,
@@ -460,25 +461,18 @@ define([
             const paymentMethodController = this;
 
             formObject.creditCardNumber.unbind();
-            formObject.creditCardNumber.on('keydown', function () {
-                const element = $(this);
-                paymentMethodController.limitCharacters(element, 19);
-            });
 
             const binObj = new Bin();
 
-            formObject.creditCardNumber.on('keyup', function () {
-                const element = $(this);
-                paymentMethodController.clearLetters(element);
-            });
-
             formObject.creditCardNumber.on('change', function () {
                 const element = $(this);
 
                 setTimeout(function () {
                     paymentMethodController.setBin(binObj, element, formObject);
                 }, 300);
             });
+
+            formObject.creditCardNumber.mask('0000 0000 0000 0000');
         }
 
         twoCardsTotal(paymentMethod) {
@@ -841,15 +835,16 @@ define([
         setBin(binObj, creditCardNumberElement, formObject) {
 
             const bin = binObj;
-            const cardNumber = bin.formatNumber(creditCardNumberElement.val());
+            const cardNumber = creditCardNumberElement.val().replace(/[^0-9]+/g, '');
+            const cardBin = bin.formatNumber(cardNumber);
 
-            if (cardNumber.length < 4) {
+            if (cardBin.length < 4) {
                 return;
             }
 
-            const isNewBrand = bin.validate(cardNumber);
+            const isNewBrand = bin.validate(cardBin);
 
-            bin.init(cardNumber);
+            bin.init(cardBin);
 
             const formHandler = new FormHandler();
             formHandler.init(formObject);
@@ -862,20 +857,6 @@ define([
 
         }
 
-        limitCharacters(element, limit) {
-            const val = element.val();
-
-            if (val != "" && val.length > limit) {
-                element.val(val.substring(0, limit));
-            }
-        }
-
-        clearLetters(element) {
-            const val = element.val();
-            const newVal = val.replace(/[^0-9]+/g, '');
-            element.val(newVal);
-        }
-
         clearNumbers(element) {
             const val = element.val();
             const newVal = val.replace(/[0-9.-]+/g, '');

view/frontend/web/js/view/payment/default.js

@@ -51,15 +51,10 @@ define(
         $t,
         globalMessageList,
         urlBuilder,
-        PagarmeCore,
-        PaymentController,
-        PlatformPlaceOrder
+        PagarmeCore
     ) {
-
         return Component.extend({
             initPaymentMethod: function() {
-                var _self = this;
-
                 const platFormConfig = window.checkoutConfig;
                 platFormConfig.moduleUrls = {};
                 const installmentsUrl = installmentsAction();
@@ -125,12 +120,12 @@ define(
              */
             beforeplaceOrder: function(data, event){
 
-                var _self = this;
+                const _self = this;
 
                 PagarmeCore.platFormConfig.addresses.billingAddress = quote.billingAddress();
 
-                var PlatformPlaceOrder = {
-                    obj : _self,
+                const PlatformPlaceOrder = {
+                    obj: _self,
                     data: data,
                     event: event
                 };
@@ -145,9 +140,9 @@ define(
              * Select current payment token
              */
             selectPaymentMethod: function() {
-                var data = this.getData();
+                const data = this.getData();
                 if (data == undefined) {
-                    var platFormConfig = PagarmeCore.platFormConfig;
+                    const platFormConfig = PagarmeCore.platFormConfig;
                     PagarmeCore.init(this.getModel(), platFormConfig);
                 }
                 selectPaymentMethodAction(this.getData());
@@ -161,9 +156,9 @@ define(
                     this.oldInstallmentTax = 0;
                 }
 
-                var total = quote.getTotals()();
-                var subTotalIndex = null;
-                for (var i = 0, len = total.total_segments.length; i < len; i++) {
+                const total = quote.getTotals()();
+                let subTotalIndex = null;
+                for (let i = 0, len = total.total_segments.length; i < len; i++) {
                     if (total.total_segments[i].code == "grand_total") {
                         subTotalIndex = i;
                         continue;

view/frontend/web/template/payment/creditcard-form.html

@@ -55,12 +55,11 @@
     </label>
     <div class="control">
         <input
-                type="number"
-                min="0"
-                maxlength="19"
+                type="text"
+                inputmode="numeric"
                 name="payment[cc_number]"
                 class="input-text cc_number"
-                value=""
+                placeholder="0000 0000 0000 0000"
         />
     </div>
     <div class="field-error hidden-element">
@@ -116,14 +115,14 @@
         <span>CVV</span>
     </label>
     <div class="control _with-tooltip">
-        <input type="number"
+        <input type="text"
+               inputmode="numeric"
                autocomplete="off"
-               class="input-text cvv cc_cid"
                name="payment[cc_cid]"
-               value=""
+               class="input-text cvv cc_cid"
+               placeholder="000"
                oninput="this.value = this.value.replace(/[^0-9]/g, ''); if (this.value.length > 4) this.value = this.value.slice(0, 4);"
-               min="0"
-                />
+        />
         <div class="field-tooltip toggle">
             <span class="field-tooltip-action action-cvv"
                   tabindex="0"