From caa26e9648f32f28ce04cce35061eb8a9ad1629e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20Beganovi=C4=87?= Date: Fri, 25 Oct 2024 16:58:46 +0200 Subject: [PATCH 1/4] update first token preselecting --- .../payments/authorize-credit-card-payment.js | 7 + .../clients/payments/braintree-credit-card.js | 232 +++++++++++------- .../js/clients/payments/braintree-paypal.js | 215 ++++++++++------ .../clients/payments/checkout-credit-card.js | 13 +- .../js/clients/payments/eway-credit-card.js | 12 +- .../js/clients/payments/mollie-credit-card.js | 15 +- .../clients/payments/paytrace-credit-card.js | 177 ++++++------- .../payments/powerboard-credit-card.js | 7 +- .../js/clients/payments/square-credit-card.js | 55 +++-- .../js/clients/payments/stripe-credit-card.js | 7 + resources/js/clients/payments/stripe-sepa.js | 102 ++++---- 11 files changed, 504 insertions(+), 338 deletions(-) diff --git a/resources/js/clients/payments/authorize-credit-card-payment.js b/resources/js/clients/payments/authorize-credit-card-payment.js index 1c2c8d88b6..c227920b08 100644 --- a/resources/js/clients/payments/authorize-credit-card-payment.js +++ b/resources/js/clients/payments/authorize-credit-card-payment.js @@ -187,6 +187,13 @@ function boot() { /** @handle */ new AuthorizeAuthorizeCard(publicKey, loginId).handle(); + + /** @type {NodeListOf} */ + const tokens = document.querySelectorAll('input.toggle-payment-with-token'); + + if (tokens.length > 0) { + tokens[0].click(); + } } instant() ? boot() : wait('#authorize-net-credit-card-payment').then(() => boot()); diff --git a/resources/js/clients/payments/braintree-credit-card.js b/resources/js/clients/payments/braintree-credit-card.js index b959706dc9..56ea940597 100644 --- a/resources/js/clients/payments/braintree-credit-card.js +++ b/resources/js/clients/payments/braintree-credit-card.js @@ -5,36 +5,51 @@ * * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com) * - * @license https://www.elastic.co/licensing/elastic-license + * @license https://www.elastic.co/licensing/elastic-license */ import { wait, instant } from '../wait'; class BraintreeCreditCard { initBraintreeDataCollector() { - window.braintree.client.create({ - authorization: document.querySelector('meta[name=client-token]').content - }, function (err, clientInstance) { - window.braintree.dataCollector.create({ - client: clientInstance, - paypal: true - }, function (err, dataCollectorInstance) { - if (err) { - return; - } + window.braintree.client.create( + { + authorization: document.querySelector('meta[name=client-token]') + .content, + }, + function (err, clientInstance) { + window.braintree.dataCollector.create( + { + client: clientInstance, + paypal: true, + }, + function (err, dataCollectorInstance) { + if (err) { + return; + } - document.querySelector('input[name=client-data]').value = dataCollectorInstance.deviceData; - }); - }); + document.querySelector( + 'input[name=client-data]' + ).value = dataCollectorInstance.deviceData; + } + ); + } + ); } mountBraintreePaymentWidget() { - - window.braintree.dropin.create({ - authorization: document.querySelector('meta[name=client-token]').content, - container: '#dropin-container', - threeDSecure: document.querySelector('input[name=threeds_enable]').value.toLowerCase() === 'true' - }, this.handleCallback); + window.braintree.dropin.create( + { + authorization: document.querySelector('meta[name=client-token]') + .content, + container: '#dropin-container', + threeDSecure: + document + .querySelector('input[name=threeds_enable]') + .value.toLowerCase() === 'true', + }, + this.handleCallback + ); } handleCallback(error, dropinInstance) { @@ -44,58 +59,76 @@ class BraintreeCreditCard { } let payNow = document.getElementById('pay-now'); - let params = JSON.parse(document.querySelector('input[name=threeds]').value); + let params = JSON.parse( + document.querySelector('input[name=threeds]').value + ); payNow.addEventListener('click', () => { - dropinInstance.requestPaymentMethod({ - threeDSecure: { - challengeRequested: true, - amount: params.amount, - email: params.email, - billingAddress: { - givenName: params.billingAddress.givenName, // ASCII-printable characters required, else will throw a validation error - surname: params.billingAddress.surname, // ASCII-printable characters required, else will throw a validation error - phoneNumber: params.billingAddress.phoneNumber, - streetAddress: params.billingAddress.streetAddress, - extendedAddress: params.billingAddress.extendedAddress, - locality: params.billingAddress.locality, - region: params.billingAddress.region, - postalCode: params.billingAddress.postalCode, - countryCodeAlpha2: params.billingAddress.countryCodeAlpha2 + dropinInstance.requestPaymentMethod( + { + threeDSecure: { + challengeRequested: true, + amount: params.amount, + email: params.email, + billingAddress: { + givenName: params.billingAddress.givenName, // ASCII-printable characters required, else will throw a validation error + surname: params.billingAddress.surname, // ASCII-printable characters required, else will throw a validation error + phoneNumber: params.billingAddress.phoneNumber, + streetAddress: params.billingAddress.streetAddress, + extendedAddress: + params.billingAddress.extendedAddress, + locality: params.billingAddress.locality, + region: params.billingAddress.region, + postalCode: params.billingAddress.postalCode, + countryCodeAlpha2: + params.billingAddress.countryCodeAlpha2, + }, + }, + }, + function (err, payload) { + if (err) { + console.log(err); + dropin.clearSelectedPaymentMethod(); + alert( + 'There was a problem verifying this card, please contact your merchant' + ); + return; } + + if ( + document.querySelector('input[name=threeds_enable]') + .value === 'true' && + !payload.liabilityShifted + ) { + console.log('Liability did not shift', payload); + alert( + 'There was a problem verifying this card, please contact your merchant' + ); + return; + } + + payNow.disabled = true; + + payNow.querySelector('svg').classList.remove('hidden'); + payNow.querySelector('span').classList.add('hidden'); + + document.querySelector( + 'input[name=gateway_response]' + ).value = JSON.stringify(payload); + + let tokenBillingCheckbox = document.querySelector( + 'input[name="token-billing-checkbox"]:checked' + ); + + if (tokenBillingCheckbox) { + document.querySelector( + 'input[name="store_card"]' + ).value = tokenBillingCheckbox.value; + } + + document.getElementById('server-response').submit(); } - }, function (err, payload) { - if (err) { - console.log(err); - dropin.clearSelectedPaymentMethod(); - alert("There was a problem verifying this card, please contact your merchant"); - return; - } - - if (document.querySelector('input[name=threeds_enable]').value === 'true' && !payload.liabilityShifted) { - console.log('Liability did not shift', payload); - alert("There was a problem verifying this card, please contact your merchant"); - return; - } - - payNow.disabled = true; - - payNow.querySelector('svg').classList.remove('hidden'); - payNow.querySelector('span').classList.add('hidden'); - - document.querySelector('input[name=gateway_response]').value = JSON.stringify(payload); - - let tokenBillingCheckbox = document.querySelector( - 'input[name="token-billing-checkbox"]:checked' - ); - - if (tokenBillingCheckbox) { - document.querySelector('input[name="store_card"]').value = - tokenBillingCheckbox.value; - } - - document.getElementById('server-response').submit(); - }); + ); }); } @@ -103,43 +136,66 @@ class BraintreeCreditCard { this.initBraintreeDataCollector(); this.mountBraintreePaymentWidget(); - Array - .from(document.getElementsByClassName('toggle-payment-with-token')) - .forEach((element) => element.addEventListener('click', (element) => { - document.getElementById('dropin-container').classList.add('hidden'); - document.getElementById('save-card--container').style.display = 'none'; - document.querySelector('input[name=token]').value = element.target.dataset.token; + Array.from( + document.getElementsByClassName('toggle-payment-with-token') + ).forEach((element) => + element.addEventListener('click', (element) => { + document + .getElementById('dropin-container') + .classList.add('hidden'); + document.getElementById('save-card--container').style.display = + 'none'; + document.querySelector('input[name=token]').value = + element.target.dataset.token; - document.getElementById('pay-now-with-token').classList.remove('hidden'); + document + .getElementById('pay-now-with-token') + .classList.remove('hidden'); document.getElementById('pay-now').classList.add('hidden'); - })); + }) + ); document .getElementById('toggle-payment-with-credit-card') .addEventListener('click', (element) => { - document.getElementById('dropin-container').classList.remove('hidden'); - document.getElementById('save-card--container').style.display = 'grid'; - document.querySelector('input[name=token]').value = ""; + document + .getElementById('dropin-container') + .classList.remove('hidden'); + document.getElementById('save-card--container').style.display = + 'grid'; + document.querySelector('input[name=token]').value = ''; - document.getElementById('pay-now-with-token').classList.add('hidden'); + document + .getElementById('pay-now-with-token') + .classList.add('hidden'); document.getElementById('pay-now').classList.remove('hidden'); }); let payNowWithToken = document.getElementById('pay-now-with-token'); - payNowWithToken - .addEventListener('click', (element) => { - payNowWithToken.disabled = true; - payNowWithToken.querySelector('svg').classList.remove('hidden'); - payNowWithToken.querySelector('span').classList.add('hidden'); + payNowWithToken.addEventListener('click', (element) => { + payNowWithToken.disabled = true; + payNowWithToken.querySelector('svg').classList.remove('hidden'); + payNowWithToken.querySelector('span').classList.add('hidden'); - document.getElementById('server-response').submit(); - }); + document.getElementById('server-response').submit(); + }); } } function boot() { new BraintreeCreditCard().handle(); + + /** @type {NodeListOf} */ + const tokens = document.querySelectorAll('input.toggle-payment-with-token'); + + if (tokens.length > 0) { + tokens[0].click(); + } } -instant() ? boot() : wait('#braintree-credit-card-payment', 'meta[name=client-token]').then(() => boot()); +instant() + ? boot() + : wait('#braintree-credit-card-payment', 'meta[name=client-token]').then( + () => boot() + ); diff --git a/resources/js/clients/payments/braintree-paypal.js b/resources/js/clients/payments/braintree-paypal.js index 4f0a4965fd..a9c558ad70 100644 --- a/resources/js/clients/payments/braintree-paypal.js +++ b/resources/js/clients/payments/braintree-paypal.js @@ -5,33 +5,42 @@ * * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com) * - * @license https://www.elastic.co/licensing/elastic-license + * @license https://www.elastic.co/licensing/elastic-license */ import { wait, instant } from '../wait'; class BraintreePayPal { initBraintreeDataCollector() { - window.braintree.client.create({ - authorization: document.querySelector('meta[name=client-token]').content - }, function (err, clientInstance) { - window.braintree.dataCollector.create({ - client: clientInstance, - paypal: true - }, function (err, dataCollectorInstance) { - if (err) { - return; - } + window.braintree.client.create( + { + authorization: document.querySelector('meta[name=client-token]') + .content, + }, + function (err, clientInstance) { + window.braintree.dataCollector.create( + { + client: clientInstance, + paypal: true, + }, + function (err, dataCollectorInstance) { + if (err) { + return; + } - document.querySelector('input[name=client-data]').value = dataCollectorInstance.deviceData; - }); - }); + document.querySelector( + 'input[name=client-data]' + ).value = dataCollectorInstance.deviceData; + } + ); + } + ); } static getPaymentDetails() { return { flow: 'vault', - } + }; } static handleErrorMessage(message) { @@ -42,90 +51,134 @@ class BraintreePayPal { } handlePaymentWithToken() { - Array - .from(document.getElementsByClassName('toggle-payment-with-token')) - .forEach((element) => element.addEventListener('click', (element) => { - document.getElementById('paypal-button').classList.add('hidden'); - document.getElementById('save-card--container').style.display = 'none'; - document.querySelector('input[name=token]').value = element.target.dataset.token; + Array.from( + document.getElementsByClassName('toggle-payment-with-token') + ).forEach((element) => + element.addEventListener('click', (element) => { + document + .getElementById('paypal-button') + .classList.add('hidden'); + document.getElementById('save-card--container').style.display = + 'none'; + document.querySelector('input[name=token]').value = + element.target.dataset.token; - document.getElementById('pay-now-with-token').classList.remove('hidden'); + document + .getElementById('pay-now-with-token') + .classList.remove('hidden'); document.getElementById('pay-now').classList.add('hidden'); - })); + }) + ); let payNowWithToken = document.getElementById('pay-now-with-token'); - payNowWithToken - .addEventListener('click', (element) => { - payNowWithToken.disabled = true; - payNowWithToken.querySelector('svg').classList.remove('hidden'); - payNowWithToken.querySelector('span').classList.add('hidden'); + payNowWithToken.addEventListener('click', (element) => { + payNowWithToken.disabled = true; + payNowWithToken.querySelector('svg').classList.remove('hidden'); + payNowWithToken.querySelector('span').classList.add('hidden'); - document.getElementById('server-response').submit(); - }); + document.getElementById('server-response').submit(); + }); } handle() { this.initBraintreeDataCollector(); this.handlePaymentWithToken(); - braintree.client.create({ - authorization: document.querySelector('meta[name=client-token]').content, - }).then(function (clientInstance) { - return braintree.paypalCheckout.create({ - client: clientInstance + braintree.client + .create({ + authorization: document.querySelector('meta[name=client-token]') + .content, + }) + .then(function (clientInstance) { + return braintree.paypalCheckout.create({ + client: clientInstance, + }); + }) + .then(function (paypalCheckoutInstance) { + return paypalCheckoutInstance + .loadPayPalSDK({ + vault: true, + }) + .then(function (paypalCheckoutInstance) { + return paypal + .Buttons({ + fundingSource: paypal.FUNDING.PAYPAL, + + createBillingAgreement: function () { + return paypalCheckoutInstance.createPayment( + BraintreePayPal.getPaymentDetails() + ); + }, + + onApprove: function (data, actions) { + return paypalCheckoutInstance + .tokenizePayment(data) + .then(function (payload) { + document + .querySelector('#paypal-button') + ?.classList.add('hidden'); + document + .querySelector( + '#paypal-spinner' + ) + ?.classList.remove('hidden'); + + let tokenBillingCheckbox = + document.querySelector( + 'input[name="token-billing-checkbox"]:checked' + ); + + if (tokenBillingCheckbox) { + document.querySelector( + 'input[name="store_card"]' + ).value = + tokenBillingCheckbox.value; + } + + document.querySelector( + 'input[name=gateway_response]' + ).value = JSON.stringify(payload); + document + .getElementById( + 'server-response' + ) + .submit(); + }); + }, + + onCancel: function (data) { + // .. + }, + + onError: function (err) { + console.log(err.message); + + BraintreePayPal.handleErrorMessage( + err.message + ); + }, + }) + .render('#paypal-button'); + }); + }) + .catch(function (err) { + console.log(err.message); + + BraintreePayPal.handleErrorMessage(err.message); }); - }).then(function (paypalCheckoutInstance) { - return paypalCheckoutInstance.loadPayPalSDK({ - vault: true - }).then(function (paypalCheckoutInstance) { - return paypal.Buttons({ - fundingSource: paypal.FUNDING.PAYPAL, - - createBillingAgreement: function () { - return paypalCheckoutInstance.createPayment(BraintreePayPal.getPaymentDetails()); - }, - - onApprove: function (data, actions) { - return paypalCheckoutInstance.tokenizePayment(data).then(function (payload) { - document.querySelector('#paypal-button')?.classList.add('hidden'); - document.querySelector('#paypal-spinner')?.classList.remove('hidden'); - - let tokenBillingCheckbox = document.querySelector( - 'input[name="token-billing-checkbox"]:checked' - ); - - if (tokenBillingCheckbox) { - document.querySelector('input[name="store_card"]').value = - tokenBillingCheckbox.value; - } - - document.querySelector('input[name=gateway_response]').value = JSON.stringify(payload); - document.getElementById('server-response').submit(); - }); - }, - - onCancel: function (data) { - // .. - }, - - onError: function (err) { - console.log(err.message); - - BraintreePayPal.handleErrorMessage(err.message); - } - }).render('#paypal-button'); - }); - }).catch(function (err) { - console.log(err.message); - - BraintreePayPal.handleErrorMessage(err.message); - }); } } function boot() { new BraintreePayPal().handle(); + + /** @type {NodeListOf} */ + const tokens = document.querySelectorAll('input.toggle-payment-with-token'); + + if (tokens.length > 0) { + tokens[0].click(); + } } instant() ? boot() : wait('#braintree-paypal-payment').then(() => boot()); diff --git a/resources/js/clients/payments/checkout-credit-card.js b/resources/js/clients/payments/checkout-credit-card.js index ed07906efd..43ca695349 100644 --- a/resources/js/clients/payments/checkout-credit-card.js +++ b/resources/js/clients/payments/checkout-credit-card.js @@ -110,9 +110,14 @@ class CheckoutCreditCard { } function boot() { - new CheckoutCreditCard().handle() + new CheckoutCreditCard().handle(); + + /** @type {NodeListOf} */ + const tokens = document.querySelectorAll('input.toggle-payment-with-token'); + + if (tokens.length > 0) { + tokens[0].click(); + } } -instant() ? boot() : wait('#checkout-credit-card-payment').then(() => - new CheckoutCreditCard().handle() -); +instant() ? boot() : wait('#checkout-credit-card-payment').then(() => boot()); diff --git a/resources/js/clients/payments/eway-credit-card.js b/resources/js/clients/payments/eway-credit-card.js index c4ba16b2d1..c4fabcd264 100644 --- a/resources/js/clients/payments/eway-credit-card.js +++ b/resources/js/clients/payments/eway-credit-card.js @@ -497,8 +497,9 @@ class EwayRapid { document .getElementById('eway-secure-panel') .classList.remove('hidden'); - document.getElementById('save-card--container').style.display = - 'grid'; + document.getElementById( + 'save-card--container' + ).style.display = 'grid'; document.querySelector('input[name=token]').value = ''; document.getElementById('pay-now').disabled = true; }); @@ -523,6 +524,13 @@ class EwayRapid { function boot() { new EwayRapid().handle(); + + /** @type {NodeListOf} */ + const tokens = document.querySelectorAll('input.toggle-payment-with-token'); + + if (tokens.length > 0) { + tokens[0].click(); + } } instant() ? boot() : wait('#eway-credit-card-payment').then(() => boot()); diff --git a/resources/js/clients/payments/mollie-credit-card.js b/resources/js/clients/payments/mollie-credit-card.js index e81a2da34d..a4a91bde36 100644 --- a/resources/js/clients/payments/mollie-credit-card.js +++ b/resources/js/clients/payments/mollie-credit-card.js @@ -122,9 +122,8 @@ class _Mollie { tokenBillingCheckbox.value; } - document.querySelector( - 'input[name=gateway_response]' - ).value = token; + document.querySelector('input[name=gateway_response]').value = + token; document.querySelector('input[name=token]').value = ''; document.getElementById('server-response').submit(); @@ -168,9 +167,15 @@ class _Mollie { } } - function boot() { new _Mollie().handle(); + + /** @type {NodeListOf} */ + const tokens = document.querySelectorAll('input.toggle-payment-with-token'); + + if (tokens.length > 0) { + tokens[0].click(); + } } -instant() ? boot(): wait('#mollie-credit-card-payment').then(() => boot()); +instant() ? boot() : wait('#mollie-credit-card-payment').then(() => boot()); diff --git a/resources/js/clients/payments/paytrace-credit-card.js b/resources/js/clients/payments/paytrace-credit-card.js index 7d639bd2a3..f0ca1c6c61 100644 --- a/resources/js/clients/payments/paytrace-credit-card.js +++ b/resources/js/clients/payments/paytrace-credit-card.js @@ -19,80 +19,80 @@ class PayTraceCreditCard { get creditCardStyles() { return { - 'font_color': '#000', - 'border_color': '#a1b1c9', - 'border_style': 'dotted', - 'font_size': '13pt', - 'input_border_radius': '3px', - 'input_border_width': '1px', - 'input_font': 'Times New Roman, arial, fantasy', - 'input_font_weight': '400', - 'input_margin': '5px 0px 5px 0px', - 'input_padding': '0px 5px 0px 5px', - 'label_color': '#a0aec0', - 'label_size': '16px', - 'label_width': '150px', - 'label_font': 'Times New Roman, sans-serif, serif', - 'label_font_weight': 'light', - 'label_margin': '5px 0px 0px 0px', - 'label_padding': '0px 5px 0px 5px', - 'background_color': 'white', - 'height': '30px', - 'width': '370px', - 'padding_bottom': '0px' + font_color: '#000', + border_color: '#a1b1c9', + border_style: 'dotted', + font_size: '13pt', + input_border_radius: '3px', + input_border_width: '1px', + input_font: 'Times New Roman, arial, fantasy', + input_font_weight: '400', + input_margin: '5px 0px 5px 0px', + input_padding: '0px 5px 0px 5px', + label_color: '#a0aec0', + label_size: '16px', + label_width: '150px', + label_font: 'Times New Roman, sans-serif, serif', + label_font_weight: 'light', + label_margin: '5px 0px 0px 0px', + label_padding: '0px 5px 0px 5px', + background_color: 'white', + height: '30px', + width: '370px', + padding_bottom: '0px', }; } get codeStyles() { return { - 'font_color': '#000', - 'border_color': '#a1b1c9', - 'border_style': 'dotted', - 'font_size': '13pt', - 'input_border_radius': '2px', - 'input_border_width': '1px', - 'input_font': 'serif, cursive, fantasy', - 'input_font_weight': '700', - 'input_margin': '5px 0px 5px 20px', - 'input_padding': '0px 5px 0px 5px', - 'label_color': '#a0aec0', - 'label_size': '16px', - 'label_width': '150px', - 'label_font': 'sans-serif, arial, serif', - 'label_font_weight': 'bold', - 'label_margin': '5px 0px 0px 20px', - 'label_padding': '2px 5px 2px 5px', - 'background_color': 'white', - 'height': '30px', - 'width': '150px', - 'padding_bottom': '2px' + font_color: '#000', + border_color: '#a1b1c9', + border_style: 'dotted', + font_size: '13pt', + input_border_radius: '2px', + input_border_width: '1px', + input_font: 'serif, cursive, fantasy', + input_font_weight: '700', + input_margin: '5px 0px 5px 20px', + input_padding: '0px 5px 0px 5px', + label_color: '#a0aec0', + label_size: '16px', + label_width: '150px', + label_font: 'sans-serif, arial, serif', + label_font_weight: 'bold', + label_margin: '5px 0px 0px 20px', + label_padding: '2px 5px 2px 5px', + background_color: 'white', + height: '30px', + width: '150px', + padding_bottom: '2px', }; } get expStyles() { return { - 'font_color': '#000', - 'border_color': '#a1b1c9', - 'border_style': 'dashed', - 'font_size': '12pt', - 'input_border_radius': '0px', - 'input_border_width': '2px', - 'input_font': 'arial, cursive, fantasy', - 'input_font_weight': '400', - 'input_margin': '5px 0px 5px 0px', - 'input_padding': '0px 5px 0px 5px', - 'label_color': '#a0aec0', - 'label_size': '16px', - 'label_width': '150px', - 'label_font': 'arial, fantasy, serif', - 'label_font_weight': 'normal', - 'label_margin': '5px 0px 0px 0px', - 'label_padding': '2px 5px 2px 5px', - 'background_color': 'white', - 'height': '30px', - 'width': '85px', - 'padding_bottom': '2px', - 'type': 'dropdown' + font_color: '#000', + border_color: '#a1b1c9', + border_style: 'dashed', + font_size: '12pt', + input_border_radius: '0px', + input_border_width: '2px', + input_font: 'arial, cursive, fantasy', + input_font_weight: '400', + input_margin: '5px 0px 5px 0px', + input_padding: '0px 5px 0px 5px', + label_color: '#a0aec0', + label_size: '16px', + label_width: '150px', + label_font: 'arial, fantasy, serif', + label_font_weight: 'normal', + label_margin: '5px 0px 0px 0px', + label_padding: '2px 5px 2px 5px', + background_color: 'white', + height: '30px', + width: '85px', + padding_bottom: '2px', + type: 'dropdown', }; } @@ -139,7 +139,6 @@ class PayTraceCreditCard { errorsContainer.textContent = errors[0].description; errorsContainer.hidden = false; - button.querySelector('svg').classList.add('hidden'); button.querySelector('span').classList.remove('hidden'); @@ -167,9 +166,8 @@ class PayTraceCreditCard { document.getElementById('server_response').submit(); }) .catch((error) => { - document.getElementById( - 'errors' - ).textContent = JSON.stringify(error); + document.getElementById('errors').textContent = + JSON.stringify(error); document.getElementById('errors').hidden = false; button.querySelector('svg').classList.add('hidden'); @@ -192,7 +190,6 @@ class PayTraceCreditCard { } handle() { - Array.from( document.getElementsByClassName('toggle-payment-with-token') ).forEach((element) => @@ -200,9 +197,8 @@ class PayTraceCreditCard { document .getElementById('paytrace--credit-card-container') .classList.add('hidden'); - document.getElementById( - 'save-card--container' - ).style.display = 'none'; + document.getElementById('save-card--container').style.display = + 'none'; document.querySelector('input[name=token]').value = element.target.dataset.token; }) @@ -214,9 +210,8 @@ class PayTraceCreditCard { document .getElementById('paytrace--credit-card-container') .classList.remove('hidden'); - document.getElementById( - 'save-card--container' - ).style.display = 'grid'; + document.getElementById('save-card--container').style.display = + 'grid'; document.querySelector('input[name=token]').value = ''; this.setupPayTrace().then((instance) => { @@ -225,19 +220,20 @@ class PayTraceCreditCard { }); }); - document - .getElementById('pay-now') - .addEventListener('click', (e) => { - if ( - document.querySelector('input[name=token]').value === '' - ) { - return this.handlePaymentWithCreditCard(e); - } + document.getElementById('pay-now').addEventListener('click', (e) => { + if (document.querySelector('input[name=token]').value === '') { + return this.handlePaymentWithCreditCard(e); + } - return this.handlePaymentWithToken(e); - }); + return this.handlePaymentWithToken(e); + }); - if (Array.from(document.getElementsByClassName('toggle-payment-with-token')).length === 0 && !instant()) { + if ( + Array.from( + document.getElementsByClassName('toggle-payment-with-token') + ).length === 0 && + !instant() + ) { document.getElementById('toggle-payment-with-credit-card').click(); } } @@ -245,6 +241,13 @@ class PayTraceCreditCard { function boot() { new PayTraceCreditCard().handle(); + + /** @type {NodeListOf} */ + const tokens = document.querySelectorAll('input.toggle-payment-with-token'); + + if (tokens.length > 0) { + tokens[0].click(); + } } -instant() ? boot() : wait('#paytrace-credit-card-payment').then(() => boot()) +instant() ? boot() : wait('#paytrace-credit-card-payment').then(() => boot()); diff --git a/resources/js/clients/payments/powerboard-credit-card.js b/resources/js/clients/payments/powerboard-credit-card.js index cadd483723..0d632af604 100644 --- a/resources/js/clients/payments/powerboard-credit-card.js +++ b/resources/js/clients/payments/powerboard-credit-card.js @@ -158,10 +158,11 @@ function pay() { }) ); - const first = document.querySelector('input[name="payment-type"]'); + /** @type {NodeListOf} */ + const tokens = document.querySelectorAll('input.toggle-payment-with-token'); - if (first) { - first.click(); + if (tokens.length > 0) { + tokens[0].click(); } if (focusCreditCard) { diff --git a/resources/js/clients/payments/square-credit-card.js b/resources/js/clients/payments/square-credit-card.js index 3e14019281..80287906c4 100644 --- a/resources/js/clients/payments/square-credit-card.js +++ b/resources/js/clients/payments/square-credit-card.js @@ -80,12 +80,11 @@ class SquareCreditCard { verificationToken = verificationResults.token; } catch (typeError) { - e.target.parentElement.disabled = true + e.target.parentElement.disabled = true; } - document.querySelector( - 'input[name="verificationToken"]' - ).value = verificationToken; + document.querySelector('input[name="verificationToken"]').value = + verificationToken; if (result.status === 'OK') { document.getElementById('sourceId').value = result.token; @@ -147,26 +146,27 @@ class SquareCreditCard { } async handle() { - document.getElementById('payment-list').classList.add('hidden'); await this.init().then(() => { - document .getElementById('authorize-card') ?.addEventListener('click', (e) => this.completePaymentWithoutToken(e) ); - document.getElementById('pay-now')?.addEventListener('click', (e) => { - let tokenInput = document.querySelector('input[name=token]'); + document + .getElementById('pay-now') + ?.addEventListener('click', (e) => { + let tokenInput = + document.querySelector('input[name=token]'); - if (tokenInput.value) { - return this.completePaymentUsingToken(e); - } + if (tokenInput.value) { + return this.completePaymentUsingToken(e); + } - return this.completePaymentWithoutToken(e); - }); + return this.completePaymentWithoutToken(e); + }); Array.from( document.getElementsByClassName('toggle-payment-with-token') @@ -175,8 +175,9 @@ class SquareCreditCard { document .getElementById('card-container') .classList.add('hidden'); - document.getElementById('save-card--container').style.display = - 'none'; + document.getElementById( + 'save-card--container' + ).style.display = 'none'; document.querySelector('input[name=token]').value = element.target.dataset.token; }) @@ -188,29 +189,33 @@ class SquareCreditCard { document .getElementById('card-container') .classList.remove('hidden'); - document.getElementById('save-card--container').style.display = - 'grid'; + document.getElementById( + 'save-card--container' + ).style.display = 'grid'; document.querySelector('input[name=token]').value = ''; }); - Array.from( - document.getElementsByClassName('loader') - ).forEach((element) => { - + Array.from(document.getElementsByClassName('loader')).forEach( + (element) => { element.classList.add('hidden'); - - }); + } + ); document.getElementById('payment-list').classList.remove('hidden'); document.getElementById('toggle-payment-with-credit-card')?.click(); - }); - } } function boot() { new SquareCreditCard().handle(); + + /** @type {NodeListOf} */ + const tokens = document.querySelectorAll('input.toggle-payment-with-token'); + + if (tokens.length > 0) { + tokens[0].click(); + } } instant() ? boot() : wait('#square-credit-card-payment').then(() => boot()); diff --git a/resources/js/clients/payments/stripe-credit-card.js b/resources/js/clients/payments/stripe-credit-card.js index eb60acde54..46001d6b6f 100644 --- a/resources/js/clients/payments/stripe-credit-card.js +++ b/resources/js/clients/payments/stripe-credit-card.js @@ -248,6 +248,13 @@ function boot() { ); s.handle(); + + /** @type {NodeListOf} */ + const tokens = document.querySelectorAll('input.toggle-payment-with-token'); + + if (tokens.length > 0) { + tokens[0].click(); + } } instant() ? boot() : wait('#stripe-credit-card-payment').then(() => boot()); diff --git a/resources/js/clients/payments/stripe-sepa.js b/resources/js/clients/payments/stripe-sepa.js index d7f871c584..cc5a8ba003 100644 --- a/resources/js/clients/payments/stripe-sepa.js +++ b/resources/js/clients/payments/stripe-sepa.js @@ -18,13 +18,10 @@ class ProcessSEPA { } setupStripe = () => { - if (this.stripeConnect) { - this.stripe = Stripe(this.key, { stripeAccount: this.stripeConnect, }); - } else { this.stripe = Stripe(this.key); } @@ -33,7 +30,8 @@ class ProcessSEPA { var style = { base: { color: '#32325d', - fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif', + fontFamily: + '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif', fontSmoothing: 'antialiased', fontSize: '16px', '::placeholder': { @@ -63,8 +61,11 @@ class ProcessSEPA { this.iban = elements.create('iban', options); this.iban.mount('#sepa-iban'); - document.getElementById('sepa-name').value = document.querySelector('meta[name=client_name]').content; - document.getElementById('sepa-email-address').value = document.querySelector('meta[name=client_email]').content; + document.getElementById('sepa-name').value = document.querySelector( + 'meta[name=client_name]' + ).content; + document.getElementById('sepa-email-address').value = + document.querySelector('meta[name=client_email]').content; return this; }; @@ -98,19 +99,26 @@ class ProcessSEPA { }); document.getElementById('pay-now').addEventListener('click', (e) => { - - if (document.querySelector('input[name=token]').value.length !== 0) { - + if ( + document.querySelector('input[name=token]').value.length !== 0 + ) { document.getElementById('pay-now').disabled = true; - document.querySelector('#pay-now > svg').classList.remove('hidden'); - document.querySelector('#pay-now > span').classList.add('hidden'); + document + .querySelector('#pay-now > svg') + .classList.remove('hidden'); + document + .querySelector('#pay-now > span') + .classList.add('hidden'); this.stripe .confirmSepaDebitPayment( document.querySelector('meta[name=pi-client-secret') - .content, { - payment_method: document.querySelector('input[name=token]').value - } + .content, + { + payment_method: + document.querySelector('input[name=token]') + .value, + } ) .then((result) => { if (result.error) { @@ -119,9 +127,7 @@ class ProcessSEPA { return this.handleSuccess(result); }); - } else { - if (document.getElementById('sepa-name').value === '') { document.getElementById('sepa-name').focus(); errors.textContent = document.querySelector( @@ -131,7 +137,9 @@ class ProcessSEPA { return; } - if (document.getElementById('sepa-email-address').value === '') { + if ( + document.getElementById('sepa-email-address').value === '' + ) { document.getElementById('sepa-email-address').focus(); errors.textContent = document.querySelector( 'meta[name=translation-email-required]' @@ -140,7 +148,9 @@ class ProcessSEPA { return; } - if (!document.getElementById('sepa-mandate-acceptance').checked) { + if ( + !document.getElementById('sepa-mandate-acceptance').checked + ) { errors.textContent = document.querySelector( 'meta[name=translation-terms-required]' ).content; @@ -150,24 +160,29 @@ class ProcessSEPA { } document.getElementById('pay-now').disabled = true; - document.querySelector('#pay-now > svg').classList.remove('hidden'); - document.querySelector('#pay-now > span').classList.add('hidden'); + document + .querySelector('#pay-now > svg') + .classList.remove('hidden'); + document + .querySelector('#pay-now > span') + .classList.add('hidden'); this.stripe .confirmSepaDebitPayment( document.querySelector('meta[name=pi-client-secret') - .content, { - payment_method: { - sepa_debit: this.iban, - billing_details: { - name: document.getElementById('sepa-name') - .value, - email: document.getElementById( - 'sepa-email-address' - ).value, + .content, + { + payment_method: { + sepa_debit: this.iban, + billing_details: { + name: document.getElementById('sepa-name') + .value, + email: document.getElementById( + 'sepa-email-address' + ).value, + }, }, - }, - } + } ) .then((result) => { if (result.error) { @@ -176,16 +191,13 @@ class ProcessSEPA { return this.handleSuccess(result); }); - } - }); }; handleSuccess(result) { - document.querySelector( - 'input[name="gateway_response"]' - ).value = JSON.stringify(result.paymentIntent); + document.querySelector('input[name="gateway_response"]').value = + JSON.stringify(result.paymentIntent); let tokenBillingCheckbox = document.querySelector( 'input[name="token-billing-checkbox"]:checked' @@ -215,9 +227,8 @@ class ProcessSEPA { document.querySelector('#pay-now > span').classList.remove('hidden'); } handleSuccess(result) { - document.querySelector( - 'input[name="gateway_response"]' - ).value = JSON.stringify(result.paymentIntent); + document.querySelector('input[name="gateway_response"]').value = + JSON.stringify(result.paymentIntent); let tokenBillingCheckbox = document.querySelector( 'input[name="token-billing-checkbox"]:checked' @@ -234,15 +245,20 @@ class ProcessSEPA { function boot() { const publishableKey = - document.querySelector('meta[name="stripe-publishable-key"]')?.content ?? - ''; + document.querySelector('meta[name="stripe-publishable-key"]') + ?.content ?? ''; const stripeConnect = document.querySelector('meta[name="stripe-account-id"]')?.content ?? ''; new ProcessSEPA(publishableKey, stripeConnect).setupStripe().handle(); + + /** @type {NodeListOf} */ + const tokens = document.querySelectorAll('input.toggle-payment-with-token'); + + if (tokens.length > 0) { + tokens[0].click(); + } } instant() ? boot() : wait('#stripe-sepa-payment').then(() => boot()); - -instant() ? boot() : wait('#stripe-sepa-payment').then(() => boot()); \ No newline at end of file From eb697fa30c3af7dc5d325f6a96cc18922d1eab61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20Beganovi=C4=87?= Date: Fri, 25 Oct 2024 16:58:52 +0200 Subject: [PATCH 2/4] stripe sepa, fixes for spacing --- .../ninja2020/gateways/stripe/sepa/pay_livewire.blade.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/views/portal/ninja2020/gateways/stripe/sepa/pay_livewire.blade.php b/resources/views/portal/ninja2020/gateways/stripe/sepa/pay_livewire.blade.php index 95840d1342..ca60a54fa7 100644 --- a/resources/views/portal/ninja2020/gateways/stripe/sepa/pay_livewire.blade.php +++ b/resources/views/portal/ninja2020/gateways/stripe/sepa/pay_livewire.blade.php @@ -40,7 +40,7 @@ @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')]) @if (count($tokens) > 0) @foreach ($tokens as $token) -