Cutlery/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2025-07-09 03:14:30 -04:00
Code Issues Packages Projects Releases Wiki Activity

Credit card: Javascript

Browse Source
This commit is contained in:
Benjamin Beganović 2021-06-21 14:04:45 +02:00
parent f160b7e1a9
commit 0234a8bdff
1 changed files with 194 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
resources/js/clients/payments/wepay-credit-card.js vendored Normal file
View File

@ -0,0 +1,194 @@
/**
* Invoice Ninja (https://invoiceninja.com).
*
* @link https://github.com/invoiceninja/invoiceninja source repository
*
* @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
*
* @license https://www.elastic.co/licensing/elastic-license
*/
let action = document.querySelector('meta[name="wepay-action"]')?.content;
class WePayCreditCard {
constructor(action = 'payment') {
this.action = action;
this.errors = document.getElementById('errors');
}
initializeWePay() {
let environment = document.querySelector('meta[name="wepay-environment"]')?.content;
WePay.set_endpoint(environment === 'staging' ? 'stage' : 'production');
return this;
}
validateCreditCardFields() {
this.myCard = $('#my-card');
if (document.getElementById('cardholder_name') === "") {
document.getElementById('cardholder_name').focus();
this.errors.textContent = "Cardholder name required.";
this.errors.hidden = false;
return;
} else if (this.myCard.CardJs('cardNumber') === "") {
document.getElementById('card_number').focus();
this.errors.textContent = "Card number required.";
this.errors.hidden = false;
return;
} else if (this.myCard.CardJs('cvc') === "") {
document.getElementById('cvv').focus();
this.errors.textContent = "CVV number required.";
this.errors.hidden = false;
return;
} else if (this.myCard.CardJs('expiryMonth') === "") {
// document.getElementById('expiry_month').focus();
this.errors.textContent = "Expiry Month number required.";
this.errors.hidden = false;
return;
} else if (this.myCard.CardJs('expiryYear') === "") {
// document.getElementById('expiry_year').focus();
this.errors.textContent = "Expiry Year number required.";
this.errors.hidden = false;
return;
}
return true;
}
handleAuthorization() {
if (!this.validateCreditCardFields()) {
return;
}
let cardButton = document.getElementById('card_button');
cardButton.disabled = true;
cardButton.querySelector('svg').classList.remove('hidden');
cardButton.querySelector('span').classList.add('hidden');
WePay.credit_card.create({
client_id: document.querySelector('meta[name=wepay-client-id]').content,
user_name: document.getElementById('cardholder_name').value,
email: document.querySelector('meta[name=contact-email]').content,
cc_number: this.myCard.CardJs('cardNumber'),
cvv: this.myCard.CardJs('cvc'),
expiration_month: this.myCard.CardJs('expiryMonth'),
expiration_year: this.myCard.CardJs('expiryYear'),
address: {
postal_code: document.querySelector(['meta[name=client-postal-code']).content,
}
}, (data) => {
if (data.error) {
cardButton = document.getElementById('card_button');
cardButton.disabled = false;
cardButton.querySelector('svg').classList.add('hidden');
cardButton.querySelector('span').classList.remove('hidden');
this.errors.textContent = '';
this.errors.textContent = data.error_description;
this.errors.hidden = false;
} else {
document.querySelector('input[name="credit_card_id"]').value = data.credit_card_id;
document.getElementById('server_response').submit();
}
})
}
completePaymentUsingToken(token) {
document.querySelector('input[name="credit_card_id"]').value = null;
document.querySelector('input[name="token"]').value = token;
document.getElementById('server-response').submit();
}
completePaymentWithoutToken() {
if (!this.validateCreditCardFields()) {
return;
}
WePay.credit_card.create({
client_id: document.querySelector('meta[name=wepay-client-id]').content,
user_name: document.getElementById('cardholder_name').value,
email: document.querySelector('meta[name=contact-email]').content,
cc_number: this.myCard.CardJs('cardNumber'),
cvv: this.myCard.CardJs('cvc'),
expiration_month: this.myCard.CardJs('expiryMonth'),
expiration_year: this.myCard.CardJs('expiryYear'),
address: {
postal_code: document.querySelector(['meta[name=client-postal-code']).content,
}
}, (data) => {
if (data.error) {
this.payNowButton.disabled = false;
this.payNowButton.querySelector('svg').classList.add('hidden');
this.payNowButton.querySelector('span').classList.remove('hidden');
this.errors.textContent = '';
this.errors.textContent = data.error_description;
this.errors.hidden = false;
} else {
document.querySelector('input[name="credit_card_id"]').value = data.credit_card_id;
document.querySelector('input[name="token"]').value = null;
document.getElementById('server-response').submit();
}
})
}
handle() {
this.initializeWePay();
if (this.action === 'authorize') {
document
.getElementById('card_button')
.addEventListener('click', () => this.handleAuthorization());
} else if (this.action === 'payment') {
Array
.from(document.getElementsByClassName('toggle-payment-with-token'))
.forEach((element) => element.addEventListener('click', (e) => {
document.getElementById('save-card--container').style.display = 'none';
document.getElementById('wepay--credit-card-container').style.display = 'none';
document.getElementById('token').value = e.target.dataset.token;
}));
document
.getElementById('toggle-payment-with-credit-card')
.addEventListener('click', (e) => {
document.getElementById('save-card--container').style.display = 'grid';
document.getElementById('wepay--credit-card-container').style.display = 'flex';
document.getElementById('token').value = null;
});
document
.getElementById('pay-now')
.addEventListener('click', () => {
this.payNowButton = document.getElementById('pay-now');
this.payNowButton.disabled = true;
this.payNowButton.querySelector('svg').classList.remove('hidden');
this.payNowButton.querySelector('span').classList.add('hidden');
let tokenInput = document.querySelector('input[name=token]');
let storeCard = document.querySelector('input[name=token-billing-checkbox]:checked');
if (storeCard) {
document.getElementById("store_card").value = storeCard.value;
}
if (tokenInput.value) {
return this.completePaymentUsingToken(tokenInput.value);
}
return this.completePaymentWithoutToken();
});
}
}
}
new WePayCreditCard(action).handle();