Handle frontend validation

This commit is contained in:
Benjamin Beganović 2021-11-01 14:44:32 +01:00
parent 9f8346d67f
commit dcfc3fd827
3 changed files with 21 additions and 3 deletions

View File

@ -52,6 +52,7 @@ var StripeBrowserPay = /*#__PURE__*/function () {
}, { }, {
key: "handlePaymentRequestEvents", key: "handlePaymentRequestEvents",
value: function handlePaymentRequestEvents(stripe, clientSecret) { value: function handlePaymentRequestEvents(stripe, clientSecret) {
document.querySelector('#errors').hidden = true;
this.paymentRequest.on('paymentmethod', function (ev) { this.paymentRequest.on('paymentmethod', function (ev) {
stripe.confirmCardPayment(clientSecret, { stripe.confirmCardPayment(clientSecret, {
payment_method: ev.paymentMethod.id payment_method: ev.paymentMethod.id
@ -62,14 +63,17 @@ var StripeBrowserPay = /*#__PURE__*/function () {
if (confirmResult.error) { if (confirmResult.error) {
ev.complete('fail'); ev.complete('fail');
document.querySelector('#errors').innerText = confirmResult.error.message;
document.querySelector('#errors').hidden = false;
} else { } else {
ev.complete('success'); ev.complete('success');
if (confirmResult.paymentIntent.status === 'requires_action') { if (confirmResult.paymentIntent.status === 'requires_action') {
// Let Stripe.js handle the rest of the payment flow.
stripe.confirmCardPayment(clientSecret).then(function (result) { stripe.confirmCardPayment(clientSecret).then(function (result) {
if (result.error) { if (result.error) {
ev.complete('fail'); ev.complete('fail');
document.querySelector('#errors').innerText = result.error.message;
document.querySelector('#errors').hidden = false;
} else { } else {
document.querySelector('input[name="gateway_response"]').value = JSON.stringify(result.paymentIntent); document.querySelector('input[name="gateway_response"]').value = JSON.stringify(result.paymentIntent);
document.getElementById('server-response').submit(); document.getElementById('server-response').submit();

View File

@ -36,7 +36,7 @@
"/js/clients/payments/stripe-eps.js": "/js/clients/payments/stripe-eps.js?id=931615b2b2b2db8a8499", "/js/clients/payments/stripe-eps.js": "/js/clients/payments/stripe-eps.js?id=931615b2b2b2db8a8499",
"/js/clients/payments/stripe-ideal.js": "/js/clients/payments/stripe-ideal.js?id=be6fdb9bee464f76e4b4", "/js/clients/payments/stripe-ideal.js": "/js/clients/payments/stripe-ideal.js?id=be6fdb9bee464f76e4b4",
"/js/clients/payments/stripe-przelewy24.js": "/js/clients/payments/stripe-przelewy24.js?id=192de985bf3760040e5d", "/js/clients/payments/stripe-przelewy24.js": "/js/clients/payments/stripe-przelewy24.js?id=192de985bf3760040e5d",
"/js/clients/payments/stripe-browserpay.js": "/js/clients/payments/stripe-browserpay.js?id=0cd45a1e1c8601c991be", "/js/clients/payments/stripe-browserpay.js": "/js/clients/payments/stripe-browserpay.js?id=807059d285aa95449736",
"/css/app.css": "/css/app.css?id=0082f32acc108fdf80b3", "/css/app.css": "/css/app.css?id=0082f32acc108fdf80b3",
"/css/card-js.min.css": "/css/card-js.min.css?id=62afeb675235451543ad" "/css/card-js.min.css": "/css/card-js.min.css?id=62afeb675235451543ad"
} }

View File

@ -45,6 +45,8 @@ class StripeBrowserPay {
} }
handlePaymentRequestEvents(stripe, clientSecret) { handlePaymentRequestEvents(stripe, clientSecret) {
document.querySelector('#errors').hidden = true;
this.paymentRequest.on('paymentmethod', function (ev) { this.paymentRequest.on('paymentmethod', function (ev) {
stripe stripe
.confirmCardPayment( .confirmCardPayment(
@ -57,6 +59,11 @@ class StripeBrowserPay {
if (confirmResult.error) { if (confirmResult.error) {
ev.complete('fail'); ev.complete('fail');
document.querySelector('#errors').innerText =
confirmResult.error.message;
document.querySelector('#errors').hidden = false;
} else { } else {
ev.complete('success'); ev.complete('success');
@ -64,12 +71,19 @@ class StripeBrowserPay {
confirmResult.paymentIntent.status === confirmResult.paymentIntent.status ===
'requires_action' 'requires_action'
) { ) {
// Let Stripe.js handle the rest of the payment flow.
stripe stripe
.confirmCardPayment(clientSecret) .confirmCardPayment(clientSecret)
.then(function (result) { .then(function (result) {
if (result.error) { if (result.error) {
ev.complete('fail'); ev.complete('fail');
document.querySelector(
'#errors'
).innerText = result.error.message;
document.querySelector(
'#errors'
).hidden = false;
} else { } else {
document.querySelector( document.querySelector(
'input[name="gateway_response"]' 'input[name="gateway_response"]'