У меня есть проект laravel, в который я вношу небольшие изменения, но перехожу с Angular Framework, есть некоторая путаница, с которой я сталкиваюсь при попытке проверить и отправить форму из внешнего js-файла.
У меня есть 2 формы в папке лезвия laravel. Одним из идентификаторов формы является платеж, который является исходной формой, собирающей информацию о пользователе. Эту форму я пытаюсь проверить и отправить во внешний js-файл. Я предоставлю форму ниже.
форма оплаты в блейд-файле:
У меня также есть еще одна форма оплаты Clover, в которой есть iframe для оплаты. В этой форме используется HTML-код, используемый здесь, и ссылается на то, что отправка и обработка формы управляются во внешнем js-файле с именем clover-checkout.js, который имеет вид:
$.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('/')[1];
$.post('/dinengo/processOrderAndPayment/' + result.token + '/' + 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',
total: {
label: 'Demo total',
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('/')[1];
$.post('/dinengo/processOrderAndPayment/' + result.token + '/' + un, function (response) {
// handle your response here
//alert(result.token);
$('#payment').submit();
});
}
}).catch(function (data) {
console.log(data);
});
}
}
Я пытаюсь выполнить несколько задач, но у меня возникают проблемы. Во-первых, я хочу, чтобы во внешнем js он проверял отсутствие ошибок в форме с идентификатором «платеж» перед обработкой формы с идентификатором «платежная форма». Как только эта форма оплаты будет завершена, я хочу отправить и обработать форму с идентификатором платежа, который является исходной формой laravel.
Хотя я могу щелкнуть форму оплаты из внешнего js, Мне нужен способ сначала проверить, что форма оплаты действительна, обработать платеж, а затем успешно отправить форму оплаты laravel.
Примечание: в настоящее время, когда $('#pay').submit (); вызывается, он возвращает и, как мне кажется, возникает ошибка из-за того, что у него больше нет контекста. Может ли кто-нибудь помочь мне решить эту проблему, а также понять причину и решение?
Кроме того, обработка ошибок должна быть без изменений. Если существует ошибка, необходимо установить эту ошибку, как это было ранее при отправке формы.
У меня есть проект laravel, в который я вношу небольшие изменения, но перехожу с Angular Framework, есть некоторая путаница, с которой я сталкиваюсь при попытке проверить и отправить форму из внешнего js-файла. У меня есть 2 формы в папке лезвия laravel. Одним из идентификаторов формы является платеж, который является исходной формой, собирающей информацию о пользователе. Эту форму я пытаюсь проверить и отправить во внешний js-файл. Я предоставлю форму ниже. форма оплаты в блейд-файле: [code] @if ($errors->any())
[list] @foreach ($errors->all() as $error) [*]{{ $error }} @endforeach [/list]
[/code] У меня также есть еще одна форма оплаты Clover, в которой есть iframe для оплаты. В этой форме используется HTML-код, используемый здесь, и ссылается на то, что отправка и обработка формы управляются во внешнем js-файле с именем clover-checkout.js, который имеет вид: [code]$.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);
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('/')[1];
$.post('/dinengo/processOrderAndPayment/' + result.token + '/' + un, function (response) { // handle your response here //alert(result.token); $('#payment').submit(); }); } }).catch(function (data) { console.log(data); }); }
}
[/code] Я пытаюсь выполнить несколько задач, но у меня возникают проблемы. Во-первых, я хочу, чтобы во внешнем js он проверял отсутствие ошибок в форме с идентификатором «платеж» перед обработкой формы с идентификатором «платежная форма». Как только эта форма оплаты будет завершена, я хочу отправить и обработать форму с идентификатором платежа, который является исходной формой laravel. Хотя я могу щелкнуть форму оплаты из внешнего js, Мне нужен способ сначала проверить, что форма оплаты действительна, обработать платеж, а затем успешно отправить форму оплаты laravel. Примечание: в настоящее время, когда $('#pay').submit (); вызывается, он возвращает и, как мне кажется, возникает ошибка из-за того, что у него больше нет контекста. Может ли кто-нибудь помочь мне решить эту проблему, а также понять причину и решение? Кроме того, обработка ошибок должна быть без изменений. Если существует ошибка, необходимо установить эту ошибку, как это было ранее при отправке формы.
Мобильная версия