1/* globals wc_mercadopago_custom_checkout_params, CheckoutElements, cardForm */ 2 3const CheckoutPage = { 4 setElementDisplay(element, operator) { 5 document.querySelector(CheckoutElements[element]).style.display = operator; 6 }, 7 8 setText(element, text) { 9 document.querySelector(CheckoutElements[element]).innerHTML = text; 10 }, 11 12 setValue(element, value) { 13 document.querySelector(CheckoutElements[element]).value = value; 14 }, 15 16 setBackground(element, background) { 17 document.querySelector(CheckoutElements[element]).style.setProperty('background', background, 'important'); 18 }, 19 20 setImageCard(secureThumbnail) { 21 this.setBackground('fcCardNumberContainer', 'url(' + secureThumbnail + ') 98% 50% no-repeat #fff'); 22 document 23 .querySelector(CheckoutElements.fcCardNumberContainer) 24 .style.setProperty('background-size', 'auto 32px', 'important'); 25 }, 26 27 findContainerField(field) { 28 let id = field === 'cardholderName' ? `#form-checkout__${field}` : `#form-checkout__${field}-container`; 29 30 return Object.keys(CheckoutElements).find((key) => CheckoutElements[key] === id); 31 }, 32 33 setDisplayOfError(elementName, operator, className, checkoutSelector = 'customContent') { 34 let checkoutContent = document.querySelector(CheckoutElements[checkoutSelector]); 35 let element = checkoutContent.querySelector(CheckoutElements[elementName]); 36 37 if (element) { 38 if (operator === 'add') { 39 element.classList.add(`${className}`); 40 } else { 41 element.classList.remove(`${className}`); 42 } 43 } 44 }, 45 46 setDisplayOfInputHelper(elementName, operator, checkoutSelector = 'customContent') { 47 let checkoutContent = document.querySelector(CheckoutElements[checkoutSelector]); 48 let divInputHelper = checkoutContent.querySelector(`input-helper[input-id=${elementName}-helper]`); 49 50 if (divInputHelper) { 51 let inputHelper = divInputHelper.querySelector('div'); 52 inputHelper.style.display = operator; 53 } 54 }, 55 56 setCvvHint(securityCode) { 57 var cvvText = wc_mercadopago_custom_checkout_params.cvvText; 58 cvvText = `${securityCode.length} ${cvvText} `; 59 cvvText += this.cvvLocationTranslate(securityCode.card_location); 60 this.setText('mpSecurityCodeInfo', cvvText); 61 }, 62 63 cvvLocationTranslate(location) {
64 let cvvFront = wc_mercadopago_custom_checkout_params.cvvHint['front']; 65 let cvvBack = wc_mercadopago_custom_checkout_params.cvvHint['back']; 66 return location === 'back' ? cvvBack : cvvFront; 67 }, 68 69 additionalInfoHandler(additionalInfoNeeded) { 70 if (additionalInfoNeeded.cardholder_name) { 71 this.setElementDisplay('fcCardholderName', 'block'); 72 } else { 73 this.setElementDisplay('fcCardholderName', 'none'); 74 } 75 76 if (additionalInfoNeeded.issuer) { 77 this.setElementDisplay('mpIssuerContainer', 'block'); 78 } else { 79 this.setElementDisplay('mpIssuerContainer', 'none'); 80 } 81 82 if (additionalInfoNeeded.cardholder_identification_type && additionalInfoNeeded.cardholder_identification_number) { 83 this.setElementDisplay('mpDocumentContainer', 'block'); 84 } else { 85 this.setElementDisplay('mpDocumentContainer', 'none'); 86 } 87 }, 88 89 getCountry() { 90 return wc_mercadopago_custom_checkout_params.site_id; 91 }, 92 93 changeCvvPlaceHolder(cvvLength) { 94 let text = ''; 95 96 for (let index = 0; index < cvvLength; index++) { 97 text += index + 1; 98 } 99 100 cardForm.update('securityCode', { placeholder: text }); 101 }, 102 103 clearTax() { 104 this.setElementDisplay('mpInputTaxCft', 'none'); 105 this.setText('mpTaxCftText', ''); 106 this.setText('mpTaxTeaText', ''); 107 }, 108 109 installment_amount(paymentTypeId) { 110 let element = document.querySelector(CheckoutElements.fcInstallments); 111 112 if (paymentTypeId === 'debit_card') { 113 element.setAttribute('disabled', 'disabled'); 114 } else { 115 element.removeAttribute('disabled'); 116 } 117 }, 118 119 formatCurrency(value) { 120 const formatter = new Intl.NumberFormat(wc_mercadopago_custom_checkout_params.intl, { 121 currency: wc_mercadopago_custom_checkout_params.currency, 122 style: 'currency', 123 currencyDisplay: 'narrowSymbol', 124 }); 125 126 return formatter.format(value); 127 }, 128 129 inputHelperName(field) { 130 let inputHelperName = { 131 cardNumber: CheckoutElements.mpCardNumber, 132 cardholderName: CheckoutElements.mpCardholderName, 133 expirationDate: CheckoutElements.mpExpirationDate, 134 securityCode: CheckoutElements.mpSecurityCode, 135 identificationNumber: CheckoutElements.mpIdentificationNumber, 136 }; 137 138 return inputHelperName[field]; 139 }, 140 141 removeAdditionFields() { 142 this.setElementDisplay('mpDocumentContainer', 'none'); 143 this.setElementDisplay('mpInstallments', 'none'); 144 this.setElementDisplay('mpIssuerContainer', 'none'); 145 this.setDisplayOfInputHelper('installments', 'none'); 146 this.setValue('cardInstallments', ''); 147 }, 148 149 clearInstallmentsComponent() { 150 const selectorInstallments = document.querySelector(CheckoutElements.mpInstallmentsContainer); 151 152 selectorInstallments.classList.remove(CheckoutElements.mpInstallmentsContainer); 153 154 if (selectorInstallments.firstElementChild) { 155 selectorInstallments.removeChild(selectorInstallments.firstElementChild); 156 } 157 }, 158 159 showInstallmentsComponent(child) { 160 const selectorInstallments = document.querySelector(CheckoutElements.mpInstallmentsContainer); 161 162 selectorInstallments.classList.add(CheckoutElements.mpInstallmentsContainer); 163 164 selectorInstallments.appendChild(child); 165 }, 166 167 getHelperMessage(field) { 168 let query = 'input-helper[input-id=' + this.inputHelperName(field) + '-helper]'; 169 let divInputHelper = document.querySelector(query); 170 171 return divInputHelper.querySelector('div[class=mp-helper-message]'); 172 }, 173 174 argentinaResolution(payerCosts) { 175 let dataInput = ''; 176 177 if (this.getCountry() === 'MLA') { 178 for (let l = 0; l < payerCosts.length; l++) { 179 if (payerCosts[l].indexOf('CFT_') !== -1) { 180 dataInput = payerCosts[l]; 181 } 182 } 183 } 184 185 return dataInput; 186 }, 187 188 hideErrors() {
189 let customContent = document.querySelector('.mp-checkout-custom-container'); 190 let inputHelpers = customContent.querySelectorAll('input-helper'); 191 192 inputHelpers.forEach((inputHelper) => { 193 inputHelper.querySelector('div').style.display = 'none'; 194 }); 195 }, 196 197 clearInputs() { 198 this.hideErrors(); 199 this.setBackground('fcCardNumberContainer', 'no-repeat #fff'); 200 this.setValue('fcCardholderName', ''); 201 this.setDisplayOfError('fcCardholderName', 'removed', 'mp-error'); 202 203 this.setValue('fcCardExpirationDateContainer', ''); 204 this.setDisplayOfError('fcCardExpirationDateContainer', 'removed', 'mp-error'); 205 206 this.setValue('fcSecurityNumberContainer', ''); 207 this.setDisplayOfError('fcSecurityNumberContainer', 'removed', 'mp-error'); 208 209 this.setValue('fcIdentificationNumber', ''); 210 this.setElementDisplay('mpDocumentContainer', 'none'); 211 this.setDisplayOfError('fcIdentificationNumberContainer', 'removed', 'mp-error'); 212 213 this.clearInstallmentsComponent(); 214 this.setElementDisplay('mpInstallments', 'none'); 215 216 document.querySelector('input[data-cy=input-document]').value = ''; 217 }, 218 219 verifyDocument() { 220 let input = document.querySelector(CheckoutElements.fcIdentificationNumber); 221 let inputContainer = document.querySelector(CheckoutElements.mpDocumentContainer); 222 223 if (inputContainer.style.display === 'none' || inputContainer.style.display === '') { 224 return true; 225 } 226 227 if (input.value === '-1' || input.value === '') { 228 return false; 229 } 230 231 let inputHelper = document.querySelector('input-helper[input-id=mp-doc-number-helper]'); 232 233 return inputHelper.querySelector('div').style.display !== 'flex'; 234 }, 235 236 loadAdditionalInfo(sdkAdditionalInfoNeeded) { 237 const additionalInfoNeeded = { 238 issuer: false, 239 cardholder_name: false, 240 cardholder_identification_type: false, 241 cardholder_identification_number: false, 242 }; 243 244 for (let i = 0; i < sdkAdditionalInfoNeeded.length; i++) { 245 if (sdkAdditionalInfoNeeded[i] === 'issuer_id') { 246 additionalInfoNeeded.issuer = true; 247 } 248 249 if (sdkAdditionalInfoNeeded[i] === 'cardholder_name') { 250 additionalInfoNeeded.cardholder_name = true; 251 } 252 253 if (sdkAdditionalInfoNeeded[i] === 'cardholder_identification_type') { 254 additionalInfoNeeded.cardholder_identification_type = true; 255 } 256 257 if (sdkAdditionalInfoNeeded[i] === 'cardholder_identification_number') { 258 additionalInfoNeeded.cardholder_identification_number = true; 259 } 260 } 261 return additionalInfoNeeded; 262 }, 263 264 verifyInstallments() { 265 if (document.querySelector(CheckoutElements.cardInstallments).value === '') { 266 CheckoutPage.setDisplayOfError('fcInputTableContainer', 'add', 'mp-error'); 267 this.setDisplayOfInputHelper('mp-installments', 'flex'); 268 return false; 269 } 270 271 CheckoutPage.setDisplayOfError('fcInputTableContainer', 'remove', 'mp-error'); 272 this.setDisplayOfInputHelper('mp-installments', 'none'); 273 274 return true; 275 }, 276 277 validateInputsCreateToken() { 278 let isInstallmentsValid = this.verifyInstallments(); 279 let isDocumentValid = this.verifyDocument(); 280 281 return isInstallmentsValid && isDocumentValid; 282 }, 283 284 showTaxes() {
285 let choCustomContent = document.querySelector('.mp-checkout-custom-container'); 286 287 const selectorInstallments = choCustomContent.querySelectorAll(CheckoutElements.mpInputRadio); 288 289 let tax = null; 290 let display = 'block'; 291 292 selectorInstallments.forEach((installment) => { 293 if (installment.checked) { 294 tax = installment.getAttribute('datarate'); 295 } 296 }); 297 298 let cft = ''; 299 let tea = ''; 300 301 if (tax != null) { 302 const tax_split = tax.split('|'); 303 304 cft = tax_split[0].replace('_', ' '); 305 tea = tax_split[1].replace('_', ' '); 306 307 if (cft === 'CFT 0,00%' && tea === 'TEA 0,00%') { 308 display = 'none'; 309 cft = ''; 310 tea = ''; 311 } 312 } 313 314 document.querySelector(CheckoutElements.mpInputTaxCft).style.display = display; 315 document.querySelector(CheckoutElements.mpTaxCftText).innerHTML = cft; 316 document.querySelector(CheckoutElements.mpTaxTeaText).innerHTML = tea; 317 }, 318 319 setupTaxEvents() { 320 const choCustomContent = document.querySelector(CheckoutElements.customContent); 321 const taxesElements = choCustomContent.getElementsByClassName('mp-input-table-label'); 322 323 for (var i = 0; i < taxesElements.length; i++) { 324 let installmentValue = taxesElements[i].getElementsByTagName('input')[0].value; 325 326 if (wc_mercadopago_custom_checkout_params.site_id === 'mla') { 327 taxesElements[i].addEventListener('click', this.showTaxes); 328 } 329 330 taxesElements[i].addEventListener('click', () => { 331 CheckoutPage.setDisplayOfError('fcInputTableContainer', 'remove', 'mp-error'); 332 this.setDisplayOfInputHelper('mp-installments', 'none'); 333 this.setValue('fcInstallments', installmentValue); 334 this.setValue('cardInstallments', installmentValue); 335 }); 336 } 337 }, 338 339 getBankInterestDisclaimerCountries(siteId) { 340 return siteId === 'mlc' || siteId === 'mco' || siteId === 'mpe'; 341 }, 342 343 getInstallments(response, bankInterestDisclaimer) { 344 let payerCosts = []; 345 const installments = []; 346 347 this.clearInstallmentsComponent(); 348 payerCosts = response.payer_costs; 349 if (payerCosts) { 350 this.setElementDisplay('mpInstallments', 'block'); 351 } 352 353 for (let j = 0; j < payerCosts.length; j++) { 354 const installment = payerCosts[j].installments; 355 const installmentRate = payerCosts[j].installment_rate === 0; 356 const installmentRateCollector = payerCosts[j].installment_rate_collector.includes('MERCADOPAGO'); 357 const installmentTotalAmount = this.formatCurrency(payerCosts[j].total_amount); 358 359 const backInterestText = bankInterestDisclaimer 360 ? `${installmentTotalAmount} + ${wc_mercadopago_custom_checkout_params.interestText}` 361 : installmentTotalAmount; 362 363 installments.push({ 364 id: `installment-${installment}`, 365 value: installment, 366 highlight: installmentRate && installmentRateCollector ? 'true' : '', 367 dataRate: this.argentinaResolution(payerCosts[j].labels), 368 rowText: payerCosts[j].recommended_message.split('(')[0], 369 rowObs: 370 installmentRate && installmentRateCollector 371 ? wc_mercadopago_custom_checkout_params.installmentObsFee 372 : backInterestText, 373 }); 374 } 375 376 return installments; 377 }, 378 379 setChangeEventOnInstallments(siteId, response) { 380 const bankInterestDisclaimer = this.getBankInterestDisclaimerCountries(siteId); 381 const installments = this.getInstallments(response, bankInterestDisclaimer); 382 383 const inputTable = document.createElement('input-table'); 384 inputTable.setAttribute('name', 'mp-installments'); 385 inputTable.setAttribute('button-name', wc_mercadopago_custom_checkout_params.installmentButton); 386 inputTable.setAttribute('columns', JSON.stringify(installments)); 387 388 if (bankInterestDisclaimer) { 389 inputTable.setAttribute('bank-interest-text', wc_mercadopago_custom_checkout_params.bankInterestText); 390 } 391 392 this.setElementDisplay('mpInstallments', 'block'); 393 this.showInstallmentsComponent(inputTable); 394 this.setupTaxEvents(); 395 396 let customContent = document.querySelector('.mp-checkout-custom-container'); 397 customContent.querySelector('#more-options').addEventListener('click', () => { 398 setTimeout(() => { 399 this.setupTaxEvents(); 400 }, 300); 401 }); 402 403 if (siteId === 'mla') { 404 this.clearTax(); 405 } 406 }, 407};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.