Eu tenho um projeto laravel no qual estou fazendo uma pequena mudança, mas mudando da estrutura angular. Estou enfrentando alguma confusão ao tentar validar e enviar um formulário de um registro js extrínseco.
Eu tenho 2 formulários na pasta laravel blade. Um ID de formulário é o pagamento, que é o formulário original que coleta informações do usuário. Levante formulário é o que estou tentando validar e enviar no registro js extrínseco. Fornecerei o formulário aquém.
formulário de pagamento em registro blade:
Também tenho outro formulário de pagamento trevo que possui um iframe para pagamento. Levante formulário usa o html usado cá e faz referência ao envio e processamento do formulário é gerenciado em um registro js extrínseco chamado clover-checkout.js que é:
$.ajax({
url: "http://localhost:4000/api/cloverPay/getapikey",
type: "GET",
headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json',
'Authorization': 'Bearer JSON.parse(window.userBe.replace(/"/g,'"')).token
},
success: function (result) {
setupCloverIframe(result.pakms);
},
error:function(data)
{
console.log('error ', data);
}
});
function setupCloverIframe(pakms) {
const clover = new Clover(pakms.apiAccessKey, {
merchantId: pakms.merchantId
});
const elements = clover.elements();
const styles = {
body: {
fontFamily: 'Roboto, Open Sans, sans-serif',
fontSize: '16px',
},
input: {
fontSize: '16px',
width: '80%',
},
};
const cardNumber = elements.create('CARD_NUMBER', styles);
const cardDate = elements.create('CARD_DATE', styles);
const cardCvv = elements.create('CARD_CVV', styles);
const cardPostalCode = elements.create('CARD_POSTAL_CODE', styles);
cardNumber.mount('#card-number');
cardDate.mount('#card-date');
cardCvv.mount('#card-cvv');
cardPostalCode.mount('#card-postal-code');
const cardResponse = document.getElementById('card-response');
const displayCardNumberError = document.getElementById('card-number-errors');
const displayCardDateError = document.getElementById('card-date-errors');
const displayCardCvvError = document.getElementById('card-cvv-errors');
const displayCardPostalCodeError = document.getElementById('card-postal-code-errors');
// Handle real-time validation errors from the card Element.
cardNumber.addEventListener('change', function (event) {
console.log(`cardNumber changed ${JSON.stringify(event)}`);
});
cardNumber.addEventListener('blur', function (event) {
console.log(`cardNumber blur ${JSON.stringify(event)}`);
});
cardDate.addEventListener('change', function (event) {
console.log(`cardDate changed ${JSON.stringify(event)}`);
});
cardDate.addEventListener('blur', function (event) {
console.log(`cardDate blur ${JSON.stringify(event)}`);
});
cardCvv.addEventListener('change', function (event) {
console.log(`cardCvv changed ${JSON.stringify(event)}`);
});
cardCvv.addEventListener('blur', function (event) {
console.log(`cardCvv blur ${JSON.stringify(event)}`);
});
cardPostalCode.addEventListener('change', function (event) {
console.log(`cardPostalCode changed ${JSON.stringify(event)}`);
});
cardPostalCode.addEventListener('blur', function (event) {
console.log(`cardPostalCode blur ${JSON.stringify(event)}`);
});
// TODO: Register event handlers
const form = document.getElementById('payment-form');
form.addEventListener('submit', function (event) {
event.preventDefault();
clover.createToken()
.then(function (result) {
if (result.errors) {
Object.values(result.errors).forEach(function (value) {
console.log(value);
});
} else {
let un = window.location.pathname.split("https://stackoverflow.com/")[1];
$.post('/dinengo/processOrderAndPayment/' + result.token + "https://stackoverflow.com/" + un, function (response) {
// handle your response here
$('#payment')[0].submit();
alert("result.token");
});
}
}).catch(function (data) {
console.log(data);
});
});
const paymentReqData = {
country: 'US',
currency: 'usd',
totalidade: {
label: 'Demo totalidade',
amount: 1099,
},
requestPayerName: true,
requestPayerEmail: true,
};
const paymentRequest = clover.paymentRequest(paymentReqData);
const paymentRequestButton = elements.create('PAYMENT_REQUEST_BUTTON', {
paymentReqData
});
// Check the availability of the Payment Request API first.
paymentRequest.canMakePayment().then(function (result) {
if (result) {
paymentRequestButton.mount('#payment-request-button');
} else {
document.getElementById('payment-request-button').style.display = 'none';
}
});
paymentRequestButton.addEventListener('paymentMethod', function (ev) {
alert(JSON.stringify(ev));
})
// Submit the form with the token ID.
function cloverTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'cloverToken');
hiddenInput.setAttribute('value', token);
form.appendChild(hiddenInput);
alert(token);
// Submit the form
// form.submit();
}
function processCloverIframPayment(event) {
event.preventDefault();
debugger;
console.log('in button click ', event);
clover.createToken()
.then(function (result) {
if (result.errors) {
Object.values(result.errors).forEach(function (value) {
console.log(value);
});
} else {
debugger;
let un = window.location.pathname.split("https://stackoverflow.com/")[1];
$.post('/dinengo/processOrderAndPayment/' + result.token + "https://stackoverflow.com/" + un, function (response) {
// handle your response here
//alert(result.token);
$('#payment').submit();
});
}
}).catch(function (data) {
console.log(data);
});
}
}
Há algumas coisas que estou tentando realizar, mas estou enfrentando problemas. Primeiramente quero que no js extrínseco valide que o formulário com id ‘pagamento’ não tem erros antes de processar o formulário com id “formulário de pagamento”. Mal o formulário de pagamento for preenchido, libido enviar e processar o formulário com o ID de pagamento, que é o formulário laravel original.
Embora eu possa clicar no formulário de pagamento do js extrínseco, preciso primeiro validar se o formulário de pagamento é válido, processar o pagamento e, em seguida, enviar com vitória o formulário de pagamento laravel.
Nota: atualmente, quando $(‘#payment’).submit(); é chamado, ele retorna e erro, acredito, por não ter mais contexto. Alguém pode me ajudar a resolver esse problema, muito porquê entender a pretexto e a solução.
Outrossim, o tratamento de erros deve estar inviolado. Se viver um erro, ele deverá definir esse erro porquê fez anteriormente ao enviar o formulário.
Tags:
Crédito: Manancial Original