minor fixeS

This commit is contained in:
David Bomba 2024-09-04 17:36:26 +10:00
parent 72c818bed0
commit 492577f9db
5 changed files with 160 additions and 214 deletions

View File

@ -11,7 +11,6 @@
import { wait, instant } from '../wait'; import { wait, instant } from '../wait';
class AuthorizeAuthorizeCard { class AuthorizeAuthorizeCard {
constructor(publicKey, loginId) { constructor(publicKey, loginId) {
this.publicKey = publicKey; this.publicKey = publicKey;
this.loginId = loginId; this.loginId = loginId;
@ -36,28 +35,34 @@ class AuthorizeAuthorizeCard {
} }
handleAuthorization = () => { handleAuthorization = () => {
if (
this.cvvRequired == '1' &&
document.getElementById('cvv').value.length < 3
) {
const $errors = document.getElementById('errors');
if (cvvRequired == "1" && document.getElementById("cvv").value.length < 3) { if ($errors) {
var $errors = $('#errors'); $errors.innerText = 'CVV is required';
$errors.show().html("<p>CVV is required</p>"); $errors.style.display = 'block';
}
document.getElementById('pay-now').disabled = false; document.getElementById('pay-now').disabled = false;
document.querySelector('#pay-now > svg').classList.add('hidden'); document.querySelector('#pay-now > svg').classList.add('hidden');
document.querySelector('#pay-now > span').classList.remove('hidden'); document
.querySelector('#pay-now > span')
.classList.remove('hidden');
return; return;
} }
var myCard = $('#my-card');
var authData = {}; var authData = {};
authData.clientKey = this.publicKey; authData.clientKey = this.publicKey;
authData.apiLoginID = this.loginId; authData.apiLoginID = this.loginId;
var cardData = {}; var cardData = {};
cardData.cardNumber = myCard.CardJs('cardNumber').replace(/[^\d]/g, ''); cardData.cardNumber = this.sc.value('number')?.replace(/[^\d]/g, '');
cardData.month = myCard.CardJs('expiryMonth').replace(/[^\d]/g, ''); cardData.month = this.sc.value('month')?.replace(/[^\d]/g, '');
cardData.year = myCard.CardJs('expiryYear').replace(/[^\d]/g, ''); cardData.year = `20${this.sc.value('year')?.replace(/[^\d]/g, '')}`;
cardData.cardCode = document.getElementById("cvv").value.replace(/[^\d]/g, ''); cardData.cardCode = this.sc.value('cvv')?.replace(/[^\d]/g, '');
var secureData = {}; var secureData = {};
secureData.authData = authData; secureData.authData = authData;
@ -77,102 +82,111 @@ class AuthorizeAuthorizeCard {
Accept.dispatchData(secureData, this.responseHandler); Accept.dispatchData(secureData, this.responseHandler);
return false; return false;
};
}
handlePayNowAction(token_hashed_id) { handlePayNowAction(token_hashed_id) {
document.getElementById('pay-now').disabled = true; document.getElementById('pay-now').disabled = true;
document.querySelector('#pay-now > svg').classList.remove('hidden'); document.querySelector('#pay-now > svg').classList.remove('hidden');
document.querySelector('#pay-now > span').classList.add('hidden'); document.querySelector('#pay-now > span').classList.add('hidden');
document.getElementById("token").value = token_hashed_id; document.getElementById('token').value = token_hashed_id;
document.getElementById("server_response").submit(); document.getElementById('server_response').submit();
} }
responseHandler = (response) => { responseHandler = (response) => {
if (response.messages.resultCode === "Error") { if (response.messages.resultCode === 'Error') {
var i = 0; var i = 0;
var $errors = $('#errors'); // get the reference of the div const $errors = document.getElementById('errors'); // get the reference of the div
$errors.show().html("<p>" + response.messages.message[i].code + ": " + response.messages.message[i].text + "</p>");
if ($errors) {
$errors.innerText = `${response.messages.message[i].code}: ${response.messages.message[i].text}`;
$errors.style.display = 'block';
}
document.getElementById('pay-now').disabled = false; document.getElementById('pay-now').disabled = false;
document.querySelector('#pay-now > svg').classList.add('hidden'); document.querySelector('#pay-now > svg').classList.add('hidden');
document.querySelector('#pay-now > span').classList.remove('hidden'); document
} else if (response.messages.resultCode === "Ok") { .querySelector('#pay-now > span')
.classList.remove('hidden');
} else if (response.messages.resultCode === 'Ok') {
document.getElementById('dataDescriptor').value =
response.opaqueData.dataDescriptor;
document.getElementById('dataValue').value =
response.opaqueData.dataValue;
document.getElementById("dataDescriptor").value = response.opaqueData.dataDescriptor; let storeCard = document.querySelector(
document.getElementById("dataValue").value = response.opaqueData.dataValue; 'input[name=token-billing-checkbox]:checked'
);
let storeCard = document.querySelector('input[name=token-billing-checkbox]:checked');
if (storeCard) { if (storeCard) {
document.getElementById("store_card").value = storeCard.value; document.getElementById('store_card').value = storeCard.value;
} }
document.getElementById("server_response").submit(); document.getElementById('server_response').submit();
} }
return false; return false;
} };
handle = () => { handle = () => {
Array Array.from(
.from(document.getElementsByClassName('toggle-payment-with-token')) document.getElementsByClassName('toggle-payment-with-token')
.forEach((element) => element.addEventListener('click', (e) => { ).forEach((element) =>
document element.addEventListener('click', (e) => {
.getElementById('save-card--container').style.display = 'none'; document.getElementById('save-card--container').style.display =
document 'none';
.getElementById('authorize--credit-card-container').style.display = 'none'; document.getElementById(
'authorize--credit-card-container'
).style.display = 'none';
document document.getElementById('token').value = e.target.dataset.token;
.getElementById('token').value = e.target.dataset.token; })
})); );
let payWithCreditCardToggle = document.getElementById('toggle-payment-with-credit-card'); let payWithCreditCardToggle = document.getElementById(
'toggle-payment-with-credit-card'
);
if (payWithCreditCardToggle) { if (payWithCreditCardToggle) {
payWithCreditCardToggle payWithCreditCardToggle.addEventListener('click', () => {
.addEventListener('click', () => { document.getElementById('save-card--container').style.display =
document 'grid';
.getElementById('save-card--container').style.display = 'grid'; document.getElementById(
document 'authorize--credit-card-container'
.getElementById('authorize--credit-card-container').style.display = 'flex'; ).style.display = 'flex';
document document.getElementById('token').value = null;
.getElementById('token').value = null; });
});
} }
let payNowButton = document.getElementById('pay-now'); let payNowButton = document.getElementById('pay-now');
if (payNowButton) { if (payNowButton) {
payNowButton payNowButton.addEventListener('click', (e) => {
.addEventListener('click', (e) => { let token = document.getElementById('token');
let token = document.getElementById('token');
token.value token.value
? this.handlePayNowAction(token.value) ? this.handlePayNowAction(token.value)
: this.handleAuthorization(); : this.handleAuthorization();
}); });
} }
return this; return this;
} };
} }
const publicKey = document.querySelector( function boot() {
'meta[name="authorize-public-key"]' const publicKey = document.querySelector(
).content; 'meta[name="authorize-public-key"]'
).content;
const loginId = document.querySelector( const loginId = document.querySelector(
'meta[name="authorize-login-id"]' 'meta[name="authorize-login-id"]'
).content; ).content;
const cvvRequired = document.querySelector( /** @handle */
'meta[name="authnet-require-cvv"]' new AuthorizeAuthorizeCard(publicKey, loginId).handle();
).content; }
/** @handle */ instant() ? boot() : wait('#authorize-net-credit-card-payment').then(() => boot());
new AuthorizeAuthorizeCard(publicKey, loginId).handle();

View File

@ -8,6 +8,7 @@
* @license https://www.elastic.co/licensing/elastic-license * @license https://www.elastic.co/licensing/elastic-license
*/ */
import { wait, instant } from '../wait';
class BraintreeCreditCard { class BraintreeCreditCard {
initBraintreeDataCollector() { initBraintreeDataCollector() {
@ -43,40 +44,39 @@ class BraintreeCreditCard {
} }
let payNow = document.getElementById('pay-now'); let payNow = document.getElementById('pay-now');
let params = JSON.parse(document.querySelector('input[name=threeds]').value);
params = JSON.parse(document.querySelector('input[name=threeds]').value);
payNow.addEventListener('click', () => { payNow.addEventListener('click', () => {
dropinInstance.requestPaymentMethod({ dropinInstance.requestPaymentMethod({
threeDSecure: { threeDSecure: {
challengeRequested:true, challengeRequested: true,
amount: params.amount, amount: params.amount,
email: params.email, email: params.email,
billingAddress: { billingAddress: {
givenName: params.billingAddress.givenName, // ASCII-printable characters required, else will throw a validation error 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 surname: params.billingAddress.surname, // ASCII-printable characters required, else will throw a validation error
phoneNumber: params.billingAddress.phoneNumber, phoneNumber: params.billingAddress.phoneNumber,
streetAddress: params.billingAddress.streetAddress, streetAddress: params.billingAddress.streetAddress,
extendedAddress: params.billingAddress.extendedAddress, extendedAddress: params.billingAddress.extendedAddress,
locality: params.billingAddress.locality, locality: params.billingAddress.locality,
region: params.billingAddress.region, region: params.billingAddress.region,
postalCode: params.billingAddress.postalCode, postalCode: params.billingAddress.postalCode,
countryCodeAlpha2: params.billingAddress.countryCodeAlpha2 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;
} }
}, 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) { if (document.querySelector('input[name=threeds_enable]').value === 'true' && !payload.liabilityShifted) {
console.log('Liability did not shift', payload); console.log('Liability did not shift', payload);
alert("There was a problem verifying this card, please contact your merchant"); alert("There was a problem verifying this card, please contact your merchant");
return; return;
} }
payNow.disabled = true; payNow.disabled = true;
@ -138,4 +138,8 @@ class BraintreeCreditCard {
} }
} }
new BraintreeCreditCard().handle(); function boot() {
new BraintreeCreditCard().handle();
}
instant() ? boot() : wait('#braintree-credit-card-payment', 'meta[name=client-token]').then(() => boot());

View File

@ -8,6 +8,8 @@
* @license https://opensource.org/licenses/AAL * @license https://opensource.org/licenses/AAL
*/ */
import { wait, instant } from '../wait';
class ForteAuthorizeACH { class ForteAuthorizeACH {
constructor(apiLoginId) { constructor(apiLoginId) {
this.apiLoginId = apiLoginId; this.apiLoginId = apiLoginId;
@ -73,9 +75,13 @@ class ForteAuthorizeACH {
}; };
} }
const apiLoginId = document.querySelector( function boot() {
'meta[name="forte-api-login-id"]' const apiLoginId = document.querySelector(
).content; 'meta[name="forte-api-login-id"]'
).content;
/** @handle */ /** @handle */
new ForteAuthorizeACH(apiLoginId).handle(); new ForteAuthorizeACH(apiLoginId).handle();
}
instant() ? boot() : wait('#force-ach-payment').then(() => boot());

View File

@ -29,14 +29,12 @@ class ForteAuthorizeCard {
} }
handleAuthorization = () => { handleAuthorization = () => {
var myCard = $('#my-card'); const data = {
var data = {
api_login_id: this.apiLoginId, api_login_id: this.apiLoginId,
card_number: myCard.CardJs('cardNumber').replace(/[^\d]/g, ''), card_number: this.sc.value('number')?.replace(/[^\d]/g, ''),
expire_year: myCard.CardJs('expiryYear').replace(/[^\d]/g, ''), expire_year: `20${this.sc.value('year')?.replace(/[^\d]/g, '')}`,
expire_month: myCard.CardJs('expiryMonth').replace(/[^\d]/g, ''), expire_month: this.sc.value('month')?.replace(/[^\d]/g, ''),
cvv: document.getElementById('cvv').value.replace(/[^\d]/g, ''), cvv: this.sc.value('cvv')?.replace(/[^\d]/g, ''),
}; };
let payNowButton = document.getElementById('pay-now'); let payNowButton = document.getElementById('pay-now');
@ -55,18 +53,8 @@ class ForteAuthorizeCard {
}; };
successResponseHandler = (response) => { successResponseHandler = (response) => {
document.getElementById('payment_token').value = response.onetime_token; document.getElementById('payment_token').value = response.onetime_token;
document.getElementById('card_brand').value = response.card_brand; document.getElementById('card_brand').value = response.card_type;
document.getElementById('expire_year').value = response.expire_year;
document.getElementById('expire_month').value = response.expire_month;
document.getElementById('last_4').value = response.last_4;
let storeCard = document.querySelector('input[name=token-billing-checkbox]:checked');
if (storeCard) {
document.getElementById("store_card").value = storeCard.value;
}
document.getElementById('server_response').submit(); document.getElementById('server_response').submit();
@ -86,99 +74,26 @@ class ForteAuthorizeCard {
return false; return false;
}; };
handlePayNowAction(token_hashed_id) {
document.getElementById('pay-now').disabled = true;
document.querySelector('#pay-now > svg').classList.remove('hidden');
document.querySelector('#pay-now > span').classList.add('hidden');
document.getElementById("token").value = token_hashed_id;
document.getElementById("server_response").submit();
}
handle = () => { handle = () => {
Array
.from(document.getElementsByClassName('toggle-payment-with-token'))
.forEach((element) => element.addEventListener('click', (e) => {
document
.getElementById('save-card--container').style.display = 'none';
document
.getElementById('forte--credit-card-container').style.display = 'none';
document
.getElementById('token').value = e.target.dataset.token;
}));
let payWithCreditCardToggle = document.getElementById('toggle-payment-with-credit-card');
if (payWithCreditCardToggle) {
payWithCreditCardToggle
.addEventListener('click', () => {
document
.getElementById('save-card--container').style.display = 'grid';
document
.getElementById('forte--credit-card-container').style.display = 'flex';
document
.getElementById('token').value = null;
});
}
let payNowButton = document.getElementById('pay-now'); let payNowButton = document.getElementById('pay-now');
if (payNowButton) { if (payNowButton) {
payNowButton payNowButton.addEventListener('click', (e) => {
.addEventListener('click', (e) => { this.handleAuthorization();
let token = document.getElementById('token'); });
token.value
? this.handlePayNowAction(token.value)
: this.handleAuthorization();
});
} }
return this; return this;
} };
} }
const apiLoginId = document.querySelector( function boot() {
'meta[name="forte-api-login-id"]' const apiLoginId = document.querySelector(
).content; 'meta[name="forte-api-login-id"]'
).content;
/** @handle */ /** @handle */
new ForteAuthorizeCard(apiLoginId).handle(); new ForteAuthorizeCard(apiLoginId).handle();
}
instant() ? boot() : wait('#forte-credit-card-payment').then(() => boot());

View File

@ -8,6 +8,8 @@
* @license https://www.elastic.co/licensing/elastic-license * @license https://www.elastic.co/licensing/elastic-license
*/ */
import { wait, instant } from '../wait';
class _Mollie { class _Mollie {
constructor() { constructor() {
this.mollie = Mollie( this.mollie = Mollie(
@ -26,7 +28,7 @@ class _Mollie {
let cardHolderError = document.getElementById('card-holder-error'); let cardHolderError = document.getElementById('card-holder-error');
cardHolder.addEventListener('change', function(event) { cardHolder.addEventListener('change', function (event) {
if (event.error && event.touched) { if (event.error && event.touched) {
cardHolderError.textContent = event.error; cardHolderError.textContent = event.error;
} else { } else {
@ -43,7 +45,7 @@ class _Mollie {
let cardNumberError = document.getElementById('card-number-error'); let cardNumberError = document.getElementById('card-number-error');
cardNumber.addEventListener('change', function(event) { cardNumber.addEventListener('change', function (event) {
if (event.error && event.touched) { if (event.error && event.touched) {
cardNumberError.textContent = event.error; cardNumberError.textContent = event.error;
} else { } else {
@ -60,7 +62,7 @@ class _Mollie {
let expiryDateError = document.getElementById('expiry-date-error'); let expiryDateError = document.getElementById('expiry-date-error');
expiryDate.addEventListener('change', function(event) { expiryDate.addEventListener('change', function (event) {
if (event.error && event.touched) { if (event.error && event.touched) {
expiryDateError.textContent = event.error; expiryDateError.textContent = event.error;
} else { } else {
@ -77,7 +79,7 @@ class _Mollie {
let verificationCodeError = document.getElementById('cvv-error'); let verificationCodeError = document.getElementById('cvv-error');
verificationCode.addEventListener('change', function(event) { verificationCode.addEventListener('change', function (event) {
if (event.error && event.touched) { if (event.error && event.touched) {
verificationCodeError.textContent = event.error; verificationCodeError.textContent = event.error;
} else { } else {
@ -97,7 +99,7 @@ class _Mollie {
return document.getElementById('server-response').submit(); return document.getElementById('server-response').submit();
} }
this.mollie.createToken().then(function(result) { this.mollie.createToken().then(function (result) {
let token = result.token; let token = result.token;
let error = result.error; let error = result.error;
@ -166,4 +168,9 @@ class _Mollie {
} }
} }
new _Mollie().handle();
function boot() {
new _Mollie().handle();
}
instant() ? boot() : wait('#mollie-credit-card-payment').then(() => boot());