Biblioteca Mechado Pago não permite enviar novo campo do formulário
Copiei o código abaixo do documentação do Mercado Pago e desde então estou tentando adaptar, mas não estou conseguindo entender o funcionamento Gostaria de entender como funciona o envio dos campos do formulário pois acrescentei um campo order que envia o número do pedido e por nada ele chega no PHP.
Gostaria também de retirar um campo amount, que imagino se referir ao valor total do pedido, imagino porque na documentação não explica, mas quando retiro, a biblioteca reclama que precisa do campo. No entanto, o valor eu não costumo enviar via formulário mas sim capturo com uma consulta ao banco de dados. No entanto, não dá para fazer essa pesquisa pois dependo do número do pedido e não estou sabendo como enviá-lo.
Estou seguinte essa documentação:
https://www.mercadopago.com.br/developers/pt/guides/online-payments/checkout-api/v2/receiving-payment-by-card
E aqui a biblioteca:
https://sdk.mercadopago.com/js/v2
E cheguei nesse código:
Segue o formulário:
Gostara muito de entender esse mistério.
Gostaria também de retirar um campo amount, que imagino se referir ao valor total do pedido, imagino porque na documentação não explica, mas quando retiro, a biblioteca reclama que precisa do campo. No entanto, o valor eu não costumo enviar via formulário mas sim capturo com uma consulta ao banco de dados. No entanto, não dá para fazer essa pesquisa pois dependo do número do pedido e não estou sabendo como enviá-lo.
Estou seguinte essa documentação:
https://www.mercadopago.com.br/developers/pt/guides/online-payments/checkout-api/v2/receiving-payment-by-card
E aqui a biblioteca:
https://sdk.mercadopago.com/js/v2
E cheguei nesse código:
const mp = new MercadoPago('SAND_BOX');
var cardNumber = document.querySelector('#form-checkout__cardNumber');
var brand = document.querySelector('.brand');
cardNumber.addEventListener("keyup", function() {
if (cardNumber.value.length < 6) {
brand.style.display = "none";
}
});
const cardForm = mp.cardForm({
amount: "100.5", //Desnecessário aqui, remover
autoMount: true, //Desnecessário aqui, remover
form: {
id: "form-checkout",
cardholderName: {
id: "form-checkout__cardholderName",
placeholder: "Titular do cartão",
},
cardholderEmail: {
id: "form-checkout__cardholderEmail",
placeholder: "E-mail",
},
cardNumber: {
id: "form-checkout__cardNumber",
placeholder: "Número do cartão",
},
cardExpirationMonth: {
id: "form-checkout__cardExpirationMonth",
placeholder: "Mês de vencimento",
},
cardExpirationYear: {
id: "form-checkout__cardExpirationYear",
placeholder: "Ano de vencimento",
},
securityCode: {
id: "form-checkout__securityCode",
placeholder: "Código de segurança",
},
installments: {
id: "form-checkout__installments",
placeholder: "Parcelas",
},
identificationType: {
id: "form-checkout__identificationType",
placeholder: "Tipo de documento",
},
identificationNumber: {
id: "form-checkout__identificationNumber",
placeholder: "Número do documento",
},
issuer: {
id: "form-checkout__issuer",
placeholder: "Banco emissor",
},
order: {
id: "form-checkout__order",
placeholder: "Id do pedido",
},
},
callbacks: {
onFormMounted: error => {
if (error) return console.warn("Form Mounted handling error: ", error);
console.log("Form mounted");
},
onSubmit: event => {
event.preventDefault();
console.log(cardForm.getCardFormData());
const {
paymentMethodId: payment_method_id,
issuerId: issuer_id,
cardholderEmail: email,
amount,
token,
installments,
identificationNumber,
identificationType,
order : order, //necessário enviar mas não está chegando no PHP
} = cardForm.getCardFormData();
fetch("/loja/process_payment", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
token,
issuer_id,
payment_method_id,
transaction_amount: Number(amount),
installments: Number(installments),
description: "Descrição do produto",
email,
type: identificationType,
number: identificationNumber,
order: order, //necessário enviar mas não está chegando no PHP
//order: $("#form-checkout__order").value,
}),
}).then(function(response) {
response.json().then(function(json) {
if (json.status == "approved") {
window.location.href = "ok.php";
console.log(json.status);
} else
console.log(json);
});
});
},
onPaymentMethodsReceived: (error, paymentMethods) => {
if (error) return console.warn('paymentMethods handling error: ', error);
if (cardNumber.value.length >= 6) {
brand.style.display = "flex";
brand.innerHTML="<img src='" + paymentMethods[0].thumbnail + "' alt='Bandeira do Cartão'>";
}
},
onFetching: (resource) => {
console.log("Fetching resource: ", resource);
// Animate progress bar
const progressBar = document.querySelector(".progress-bar");
progressBar.removeAttribute("value");
return () => {
progressBar.setAttribute("value", "0");
};
},
},
});Segue o formulário:
<form id="form-checkout" > <input type="text" name="cardNumber" id="form-checkout__cardNumber" /> <div class="brand"></div> <input type="text" name="cardExpirationMonth" id="form-checkout__cardExpirationMonth" /> <input type="text" name="cardExpirationYear" id="form-checkout__cardExpirationYear" /> <input type="text" name="securityCode" id="form-checkout__securityCode" /> <input type="text" name="cardholderName" id="form-checkout__cardholderName"/> <input type="email" name="cardholderEmail" id="form-checkout__cardholderEmail"/> <select name="issuer" id="form-checkout__issuer"></select> <select name="identificationType" id="form-checkout__identificationType"></select> <input type="text" name="identificationNumber" id="form-checkout__identificationNumber"/> <select name="installments" id="form-checkout__installments"></select> <input type="hidden" name="order" id="form-checkout__order" value="68" /> <button type="submit" id="form-checkout__submit">Pagar</button> <progress value="0" class="progress-bar">Carregando...</progress> </form>
Gostara muito de entender esse mistério.
Carlos Rocha
Curtidas 0