//Código da página

import { controleDeCartaoDeCredito, setValorDaVenda } from 'public/checkout/cartaoDeC

redito'

$w.onReady(function () {

controleDeCartaoDeCredito()
setValorDaVenda('700')//Esta função define o valor da venda

});

//public/cartaoDeCredito.js
import { aplicarMascara } from 'public/mascaras'
import { sincronzar, sincronizarDropdown } from 'public/checkout/controle'
import { pagarComCartao } from 'backend/mercadoPago'
import { validarEmail, validarDocumento } from 'backend/validador'
import { bandeiras } from 'public/checkout/bandeiras'

let paymentMethod = ''

let bancoCod
let valorDaVenda

export function controleDeCartaoDeCredito() {

//Ação do botão
$w('#btnPagar').onClick(() => {
$w('#stateBoxBotaoPagar').changeState('loading')
$w('#htmlSdkMercadoPago').postMessage({ 'id': 'submit' })
})

//Iniciando o DocType
$w('#htmlSdkMercadoPago').postMessage({ 'id': 'docType', 'value': 'CPF' })

listarAnos()

aplicarMascara($w('#tbNumeroCartao'), 'cartão')
aplicarMascara($w('#tbNumeroDoDocumento'), 'cpf')

sincronzar($w('#tbNumeroCartao'), 'cardNumber')
sincronzar($w('#tbCvv'), 'securityCode')
sincronizarDropdown($w('#ddMesExpiracao'), 'cardExpirationMonth')
sincronizarDropdown($w('#ddAnoExpiracao'), 'cardExpirationYear')

sincronzar($w('#tbEmail'), 'email')
sincronzar($w('#tbTitular'), 'cardholderName')

sincronizarDropdown($w('#ddTipoDocumento'), 'docType')
sincronzar($w('#tbNumeroDoDocumento'), 'docNumber')

$w('#ddTipoDocumento').onChange(() => {
 if ($w('#ddTipoDocumento').value === 'CPF') {
$w('#tbNumeroDoDocumento').maxLength = 13
aplicarMascara($w('#tbNumeroDoDocumento'), 'cpf')
} else {
$w('#tbNumeroDoDocumento').maxLength = 18
aplicarMascara($w('#tbNumeroDoDocumento'), 'cnpj')
}
})

$w('#htmlSdkMercadoPago').onMessage((event) => {
tratamentoDeDados(event.data)
})

function tratamentoDeDados(dado) {

switch (dado.tipo) {
case 'paymentMethod':

paymentMethod = dado.valor

if (typeof bandeiras[dado.valor] !== 'undefined') {

$w('#imgPngFlag').src = bandeiras[dado.valor].image
setTimeout(() => {
$w('#imgPngFlag').show()
}, 1500);

} else {
$w('#imgPngFlag').hide()
}

break;
case 'parcelas':
$w('#ddParcelas').options = dado.valor
$w('#ddParcelas').value = dado.valor[0].value
$w('#ddParcelas').enable()
break;
case 'bancos':
bancoCod = dado.valor
break;
case 'erro':
tratamentoDeErros(dado, 'form')
break;
case 'sucesso':
gerarPagamento(dado.token)
break;

default:
break;
}

function tratamentoDeErros(erro, saida) {

console.log(erro.codigo)
switch (erro.codigo) {
case '001':
$w('#txtErro').text = erro.mensagem
break;
 case 'E301':
$w('#txtErro').text = 'Número do cartão inválido'
$w('#imgPngFlag').hide()
$w('#imgVecFlag').hide()
break;
case '205':
$w('#txtErro, #txtErroFinal').text = 'Número do cartão não informado'
break;
case 'E302':
$w('#txtErro, #txtErroFinal').text = 'Código de segurança do cartão invál
ido'
break;
case '208':
$w('#txtErro, #txtErroFinal').text = 'Mês de expiração do cartão inválido
'
break;
case '209':
$w('#txtErro, #txtErroFinal').text = 'Ano de expiração do cartão inválido
'
break;
case '221':
$w('#txtErro, #txtErroFinal').text = 'Nome do titular do cartão inválido'
break;
case '214':
$w('#txtErro, #txtErroFinal').text = 'Número do ' + $w('#ddTipoDocumento'
).options[$w('#ddTipoDocumento').selectedIndex].label.toLowerCase() + ' inválido'
break;
case '316':
$w('#txtErro, #txtErroFinal').text = 'Nome do proprietário do cartão invá
lido!'
break;
case '2131':
//-----------------------------------------------------------------------
----
$w('#txtErro, #txtErroFinal').text = 'Não foi possível processar o pageme
nto com este cartão'
break;
case '000':
//-----------------------------------------------------------------------
----
$w('#txtErro, #txtErroFinal').text = 'Ocorreu um erro interno, tente nova
mente com outro cartão ou tente novamente mais tarde!'
break;
default:
console.log(erro)
break;
}

mostrarErro(saida)

function mostrarErro(saida) {

if (saida === 'final') {

$w('#stateBoxPagamentos').changeState('erro')
} else {
 setTimeout(() => {
$w('#boxErro').show()

$w('#stateBoxBotaoPagar').changeState('botao')
}, 1000)
}
}

function gerarPagamento(token) {

validarEmail($w('#tbEmail').value)
.then((validEmail) => {

console.log('EMAIL', validEmail)

if (validEmail) {

validarDocumento($w('#ddTipoDocumento').value.toLowerCase(), $w('
#tbNumeroDoDocumento').value.replace('.', '').replace('.', '').replace('.', '').repla
ce('-', '').replace('/', ''))
.then((data) => {

if (data) {
$w('#stateBoxPagamentos').changeState('processandoPag
amento')
finalizar()
} else {
$w('#htmlSdkMercadoPago').postMessage({ 'id': 'submit
Erro' })
$w('#txtErro').text = 'O ' + $w('#ddTipoDocumento').v
alue.toLowerCase() + ' é inválido'
mostrarErro()
}

})

} else {
$w('#htmlSdkMercadoPago').postMessage({ 'id': 'submitErro' })
$w('#txtErro').text = 'E-mail inválido'
mostrarErro()
}
})

function finalizar() {
let data = {
token: token,
paymentMethodId: paymentMethod,
issuer_id: bancoCod,
email: $w('#tbEmail').value,
docType: $w('#ddTipoDocumento').value,
parcelas: $w('#ddParcelas').value,
valor: Number(valorDaVenda),
docNumber: $w('#tbNumeroDoDocumento').value.replace('.', '').replace(
'.', '').replace('.', '').replace('-', '').replace('/', '')
}

pagarComCartao(data)
.then((data) => {
 console.log('RETORNO', data)

if (data.tipo === 'erro') {

$w('#htmlSdkMercadoPago').postMessage({ 'id': 'submitErro' })
tratamentoDeErros({ 'codigo': data.valor.cause.length > 0 ? S
tring(data.valor.cause[0].code) : '000' }, 'final')

} else {
if (data.valor.body.status === 'approved') {
$w('#stateBoxPagamentos').changeState('sucesso')
} else {
$w('#stateBoxPagamentos').changeState('processamento')
}
}

})
}

function listarAnos() {

let anoAtual = new Date().getFullYear()

let op = [{ 'value': String(anoAtual), 'label': String(anoAtual) }]

for (let i = anoAtual; i < anoAtual + 10; i++) {

op.push({ 'value': String(i).substr(2, 2), 'label': String(i) })

if (i === (anoAtual + 10) - 1) {

$w('#ddAnoExpiracao').options = op
}
}
}
}

export function setValorDaVenda(valor) {

valorDaVenda = valor
$w('#htmlSdkMercadoPago').postMessage({ 'id': 'transactionAmount', 'value': valor
})
}

//public/mascaras.js
export function mascara(tipo, campoInput) {

switch (tipo) {
case "telefone": {
campoInput.value = campoInput.value.replace(/\D/g, ""); //Remove tudo o que n
ão é dígito
campoInput.value = campoInput.value.replace(/^(\d{2})(\d)/g, "($1) $2"); //Co
loca parênteses em volta dos dois primeiros dígitos
campoInput.value = campoInput.value.replace(/(\d)(\d{4})$/, "$1-
$2"); //Coloca hífen entre o quarto e o quinto dígitos
 break;
}
case "cpf": {
campoInput.value = campoInput.value.replace(/\D/g, ""); //Remove tudo o que n
ão é dígito
campoInput.value = campoInput.value.replace(/^(\d{3})(\d)/g, "$1.$2");
campoInput.value = campoInput.value.replace(/(\d)(\d{5})$/, "$1.$2");
campoInput.value = campoInput.value.replace(/(\d)(\d{2})$/, "$1-$2");
break;
}
case "cnpj": {
campoInput.value = campoInput.value.replace(/\D/g, "")
campoInput.value = campoInput.value.replace(/^(\d{2})(\d)/, "$1.$2")
campoInput.value = campoInput.value.replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$
3")
campoInput.value = campoInput.value.replace(/\.(\d{3})(\d)/, ".$1/$2")
campoInput.value = campoInput.value.replace(/(\d{4})(\d)/, "$1-$2")
break;
}

case "cep": {
campoInput.value = campoInput.value.replace(/\D/g, "")
campoInput.value = campoInput.value.replace(/^(\d{5})(\d)/, "$1-$2")
break;
}

case "moeda": {
campoInput.value = campoInput.value.replace(/\D/g, "")
var tmp = campoInput.value + '';
tmp = tmp.replace(/([0-9]{2})$/g, ",$1");
if (tmp.length > 6)
tmp = tmp.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");
// campoInput.value = campoInput.value.replace(/(\d)(\d{2})$/,"$1.$2") //Desc
omentar para usar pontos
campoInput.value = 'R$ ' + tmp
break;
}

case "data": {
campoInput.value = campoInput.value.replace(/\D/g, "")
campoInput.value = campoInput.value.replace(/(\d{2})(\d)/, "$1/$2")
campoInput.value = campoInput.value.replace(/(\d{2})(\d)/, "$1/$2")
break;
}

case "placa": {
//campoInput.value = campoInput.value.replace(/\D/g, "")
campoInput.value = campoInput.value.replace(/^(\d{3})(\d)/, "$1-$2")
break;
}

case "cartão": {

let v = campoInput.value
v = v.replace(/\D/g, "");
v = v.replace(/^(\d{4})(\d)/g, "$1 $2");
v = v.replace(/^(\d{4})\s(\d{4})(\d)/g, "$1 $2 $3");
v = v.replace(/^(\d{4})\s(\d{4})\s(\d{4})(\d)/g, "$1 $2 $3 $4");
 campoInput.value = v;
}

}
}

let alinhar

export function aplicarMascara($input, tipo) {

mascara(tipo, $input)

$input.onKeyPress(() => {

$w('#boxErro').hide()

if (alinhar) {
clearTimeout(alinhar)
}

alinhar = 'undefined'

alinhar = setTimeout(() => {

mascara(tipo, $input)
}, 600);

})

//public/checkout/controle
//checkout é uma pasta

// Filename: public/Checkout/controle.js

// Code written in public files is shared by your site's

// Backend, page code, and site code environments.

let alinhar
export function sincronzar($input, campoDoForm) {

$input.onKeyPress(() => {

$w('#boxErro').hide()

if (alinhar) {
clearTimeout(alinhar)
}

alinhar = 'undefined'

alinhar = setTimeout(() => {

if (campoDoForm === 'cardNumber') {
 $w('#htmlSdkMercadoPago').postMessage({ 'id': campoDoForm, 'value': $
input.value.split(' ').join('') })
} else if (campoDoForm === 'docNumber') {
$w('#htmlSdkMercadoPago').postMessage({ 'id': campoDoForm, 'value': $
input.value.replace('.','').replace('.','').replace('.','').replace('-
','').replace('/','')})
} else {
$w('#htmlSdkMercadoPago').postMessage({ 'id': campoDoForm, 'value': $
input.value })
}
console.log($input.value)
}, 600);

})

export function sincronizarDropdown($input, campoDoForm) {

$input.onChange(() => {

$w('#boxErro').hide()

$w('#htmlSdkMercadoPago').postMessage({ 'id': campoDoForm, 'value': $input.va

lue })

})

//backend/mercadoPago
export async function pagarComCartao(dataVenda) {

var mercadopago = require('mercadopago');

mercadopago.configurations.setAccessToken("SUA CREDENCIAL");

var payment_data = {
transaction_amount: dataVenda.valor,
token: dataVenda.token,
description: "produto teste",
installments: Number(dataVenda.parcelas),
payment_method_id: dataVenda.paymentMethodId,
issuer_id: dataVenda.issuer_id,
payer: {
email: dataVenda.email,
identification: {
type: dataVenda.docType,
number: dataVenda.docNumber
}
}
};

return await mercadopago.payment.save(payment_data)

.then(async function (response) {
 console.log(response)
return await { 'tipo': 'sucesso', 'valor': await response }

})
.catch(async function (error) {
console.log(error)
return await { 'tipo': 'erro', 'valor': await error }
});

export function verificarPagamentoEfetuado(id) {

var mercadopago = require('mercadopago');

mercadopago.configurations.setAccessToken(SUA CREDENCIAL');

let paymentId = id;

mercadopago.payment.capture(paymentId, mercadopago, (error, response) => {

if (error) {
console.log('ERRO', error);
} else {
console.log('DATA', response)
}
});

//backend/validador
//Instalar o pacote NPM 'cpf-cnpj-
//validator'
import { cpf } from 'cpf-cnpj-validator';
import { cnpj } from 'cpf-cnpj-validator';

export async function validarEmail(email) {

var validator = require('validator');

return await validator.isEmail(email);

}

export async function validarDocumento(tipo, numero) {

if (tipo === 'cpf') {

return await cpf.isValid(numero)
} else {
return await cnpj.isValid(numero)
}

}
//public/bandeiras.js
export let bandeiras = {

"diners": {
"image": "https://static.wixstatic.com/media/3a8958_a03eed01e3ee455795a26fc56
cda40e4~mv2.gif"
},
"elo": {
"image": "https://static.wixstatic.com/media/3a8958_4a729431d4a94525bfe9b6a0d
b5f5bff~mv2.gif"
},
"hiper": {
"image": "https://static.wixstatic.com/media/3a8958_a12bb5929a21489088de1ef42
b61c34f~mv2.gif"
},
"hipercard": {
"image": "https://static.wixstatic.com/media/3a8958_a12bb5929a21489088de1ef42
b61c34f~mv2.gif"
},
"master": {
"image": "https://static.wixstatic.com/media/3a8958_5434ebffae0547b99bfe6d73c
88f6fbe~mv2.gif"
},
"visa": {
"image": "https://static.wixstatic.com/media/3a8958_4b3630817760468ba1a592c59
f4aaf8f~mv2.gif"
},
"amex": {
"image": "https://static.wixstatic.com/media/3a8958_3e5cd8f3cdd240f79f2c11086
d76010c~mv2.gif"
},
}

//html Sdk MercadoPago

<!DOCTYPE html>
<html>

<head>

</head>

<body style="overflow: hidden;">

<img src="https://yt3.googleusercontent.com/cmFrex7B0vUrC-Tu_dD1EyFDpamtb-
SmV45S9lbisLjCZtYMVi79E-hpb9O3x5-c1u-UZgTS=s900-c-k-c0x00ffffff-no-rj"
width="100%" height="auto" />

<!--INICIALIZAÇÃO DO SDK MERCADO PAGO-->

<script
src="https://secure.mlstatic.com/sdk/javascript/v1/mercadopago.js"></script>

<!--CONFIGURAÇÃO DA PUBLIC KEY MERCADO PAGO-->

<script>
 window.Mercadopago.setPublishableKey("SUA API KEY");

</script>

<form action="/process_payment" method="post" id="paymentForm">

<!--DOCUMENTOS-->
<input id="email" name="email" type="hidden" />
<select id="docType" name="docType" data-checkout="docType" style="display:
none;">
<option value="CPF">cpf</option>
<option value="CNPJ">cpf</option>
</select>
<input id="docNumber" name="docNumber" data-checkout="docNumber"
type="hidden" />

<!--NOME DO TITULAR NO CARTÃO-->

<input id="cardholderName" data-checkout="cardholderName" type="hidden">

<!--DATA DE EXPIRAÇÃO-->
<input type="hidden" placeholder="MM" id="cardExpirationMonth" data-
checkout="cardExpirationMonth">
<input type="hidden" placeholder="YY" id="cardExpirationYear" data-
checkout="cardExpirationYear">

<!--NÚMERO DO CARTÃO-->
<input type="hidden" id="cardNumber" data-checkout="cardNumber">

<!--CVV DO CARTÃO-->
<input id="securityCode" data-checkout="securityCode" type="hidden">

<!--BANCO-->
<select id="issuer" name="issuer" data-checkout="issuer" style="display:
none;"></select>

<!--PARCELAS-->
<select style="display: none;" id="installments"
name="installments"></select>

<!--DADOS EXTRAS-->
<input type="hidden" name="transactionAmount" id="transactionAmount" />
<input type="hidden" name="paymentMethodId" id="paymentMethodId" />
<input type="hidden" name="description" id="description" />

<br>
<button type="submit" id="finalPagar" style="display: none;">Pagar</button>
<br>
</div>
</div>
</form>

<script type="text/javascript">

window.onmessage = function (event) {

console.log('CAPTURANDO ENTRADA', event)
capturarEntrada(event.data.id, event.data.value)
}
 function capturarEntrada(id, value) {

if (id === 'submit') {

const element = document.querySelector('#finalPagar');
element.click();
} else if (id === 'submitErro') {
doSubmit = false
} else {

let element = document.getElementById(id).value = value;

if (id === 'cardNumber') {

guessPaymentMethod()
}
}

window.Mercadopago.getIdentificationTypes();

document.getElementById('cardNumber').addEventListener('keyup',
guessPaymentMethod);

//IDENTIFICAÇÃO DA BANDEIRA DO CARTÃO

function guessPaymentMethod() {
let cardnumber = document.getElementById("cardNumber").value;
if (cardnumber.length >= 6) {
let bin = cardnumber.substring(0, 6);
window.Mercadopago.getPaymentMethod({
"bin": bin
}, setPaymentMethod);
}
};

function setPaymentMethod(status, response) {

//reconhecimento da bandeira do cartão
if (status == 200) {
let paymentMethod = response[0];

document.getElementById('paymentMethodId').value = paymentMethod.id;

window.parent.postMessage({ 'tipo': 'paymentMethod', 'valor':

paymentMethod.id, 'bandeira': paymentMethod.thumbnail }, '*')

getIssuers(paymentMethod.id);
} else {
window.parent.postMessage({ 'tipo': 'erro', 'codigo': '001',
'mensagem': 'Número do cartão inválido' }, '*')
}
}

//Modelo de objeto - paymentMethod

/*{
"id": "master",
"name": "Mastercard",
"payment_type_id": "credit_card",
"status": "active",
 "secure_thumbnail": "https://www.mercadopago.com/org-
img/MP3/API/logos/master.gif",
"thumbnail": "https://www.mercadopago.com/org-
img/MP3/API/logos/master.gif",
"deferred_capture": "supported",
"settings": [
{
"security_code": {
"mode": "mandatory",
"card_location": "back",
"length": 3
},
"card_number": {
"length": 16,
"validation": "standard"
},
"bin": {
"pattern":
"^(5|(2(221|222|223|224|225|226|227|228|229|23|24|25|26|27|28|29|3|4|5|6|70|71|720)))
",
"installments_pattern":
"^(?!(525823|525824|525834|527660|529133|529205|536390|513368|539131|529053|538450|53
8455|515675|549636|524886|546616|529115|511623|521580|527308|527648|528841|530551|533
728|534300|539181|549622|528590|542865|538454|543299|549622|533728|230653|516129|5276
48|533519|557996|533433|511623|522157|529518|530551|546001|506704|506706|506761|50988
7|506754|509882|506760|506764|506755|509881|506758|506702|506700|506770|509880|506768
|506766|506716|506771|506767|506762|506735|506699|506756|506723|509884|506772|506713|
506773|506710|506765|509901|509885|509815|506763|506734|506714|506712|506711|509894|5
09812|506769|506759|506757|506701))",
"exclusion_pattern":
"^(506704|545377|506706|506761|509887|526968|550207|528635|542652|502121|506721|50672
2|506776|536969|589916|(50670[7-8])|(506715)|(50671[7-9])|(50672[0-1])|(50672[4-
9])|(50673[0-3])|(506739)|(50674[0-8])|(50675[0-3])|(50677[4-8])|(50900[0-
9])|(50901[3-9])|(50902[0-9])|(50903[1-5])|(50903[8-9])|(50904[0-9])|(50905[0-
9])|(50906[0-4])|(50906[6-9])|(50907[0-2])|(50907[4-5])|(504175)|(50907[6-
9])|(50908[0-9])|(509[0-7][0-9]{2})|(509[8]0[0-9])|(50983[1-9])|(5098[4-6][0-
9])|(5098[7][0-7])|(50989[7-9])|(509900)|(50991[8-9])|(5099[2-5][0-9])|(5099[6][0-
4])|(50997[1-9])|(50998[0-6])|(50999[5-9])|509810)"
}
},
{
"security_code": {
"mode": "mandatory",
"card_location": "back",
"length": 3
},
"card_number": {
"length": 19,
"validation": "standard"
},
"bin": {
"pattern": "^(532884)",
"installments_pattern":
"^(?!(549622|533728|230653|516129|527648|533519|557996|533433|511623|522157|529518|53
0551|546001))",
"exclusion_pattern":
"^(506704|545377|506706|506761|509887|506754|509882|506760|506764|506755|509881|50675
8|506702|506700|506770|509880|506768|506766|506716|506771|506767|506762|506735|506699
|506756|506723|509884|506772|506713|506773|506710|506765|509901|509885|509815|506763|
506734|506714|506712|506711|509894|509812|506769|506759|506757|506701)"
}
}
],
"additional_info_needed": [
"cardholder_name",
"cardholder_identification_type",
"cardholder_identification_number"
],
"min_allowed_amount": 0.5,
"max_allowed_amount": 60000,
"accreditation_time": 2880,
"financial_institutions": [],
"processing_modes": [
"aggregator"
]
}*/

function getIssuers(paymentMethodId) {
window.Mercadopago.getIssuers(
paymentMethodId,
setIssuers
);
}

function setIssuers(status, response) {

if (status == 200) {
let issuerSelect = document.getElementById('issuer');

response.forEach((issuer, i) => {
let opt = document.createElement('option');
opt.text = issuer.name;
opt.value = issuer.id;
issuerSelect.appendChild(opt);

if (i === response.length - 1) {
window.parent.postMessage({ 'tipo': 'bancos', 'valor':
issuer.id }, '*')
}

});

getInstallments(
document.getElementById('paymentMethodId').value,
document.getElementById('transactionAmount').value,
issuerSelect.value
);
} else {
alert(`issuers method info error: ${response}`);
}
}

function getInstallments(paymentMethodId, transactionAmount, issuerId) {

window.Mercadopago.getInstallments({
"payment_method_id": paymentMethodId,
 "amount": parseFloat(transactionAmount),
"issuer_id": parseInt(issuerId)
}, setInstallments);
}

function setInstallments(status, response) {

if (status == 200) {
document.getElementById('installments').options.length = 0;

let optOutput = []

response[0].payer_costs.forEach((payerCost, i) => {
let opt = document.createElement('option');
opt.text = payerCost.recommended_message;
opt.value = payerCost.installments;
document.getElementById('installments').appendChild(opt);

optOutput.push({ 'value': String(payerCost.installments),

'label': payerCost.recommended_message })

if (i === response[0].payer_costs.length - 1) {
window.parent.postMessage({ 'tipo': 'parcelas', 'valor':
optOutput }, '*')
}

});

} else {
alert(`installments method info error: ${response}`);
}
}

doSubmit = false;
document.getElementById('paymentForm').addEventListener('submit',
getCardToken);
function getCardToken(event) {
event.preventDefault();
if (!doSubmit) {
let $form = document.getElementById('paymentForm');
window.Mercadopago.createToken($form, setCardTokenAndPay);
return false;
}
};

function setCardTokenAndPay(status, response) {

if (status == 200 || status == 201) {
let form = document.getElementById('paymentForm');
let card = document.createElement('input');
card.setAttribute('name', 'token');
card.setAttribute('type', 'hidden');
card.setAttribute('value', response.id);
form.appendChild(card);
doSubmit = true;
window.parent.postMessage({ 'tipo': 'sucesso', 'token': response.id
}, '*')
} else {
 window.parent.postMessage({ 'tipo': 'erro', 'codigo':
response.cause[0].code, 'mensagem': response.cause[0].description }, '*')
}
};
</script>

</body>

</html>