mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-05-24 02:14:21 -04:00
Extract scripts into separate file
This commit is contained in:
Benjamin Beganović
parent
99da2128d1
commit
2065145ffb
136
resources/js/clients/payments/square-credit-card.js
vendored
Normal file
136
resources/js/clients/payments/square-credit-card.js
vendored
Normal file
@ -0,0 +1,136 @@
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
|
||||
class SquareCreditCard {
|
||||
constructor() {
|
||||
this.appId = document.querySelector('meta[name=square-appId]').content;
|
||||
this.locationId = document.querySelector(
|
||||
'meta[name=square-locationId]'
|
||||
).content;
|
||||
this.isLoaded = false;
|
||||
}
|
||||
|
||||
async init() {
|
||||
this.payments = Square.payments(this.appId, this.locationId);
|
||||
|
||||
this.card = await this.payments.card();
|
||||
|
||||
await this.card.attach('#card-container');
|
||||
|
||||
this.isLoaded = true;
|
||||
|
||||
let iframeContainer = document.querySelector(
|
||||
'.sq-card-iframe-container'
|
||||
);
|
||||
|
||||
if (iframeContainer) {
|
||||
iframeContainer.setAttribute('style', '150px !important');
|
||||
}
|
||||
|
||||
let toggleWithToken = document.querySelector(
|
||||
'.toggle-payment-with-token'
|
||||
);
|
||||
|
||||
if (toggleWithToken) {
|
||||
document.getElementById('card-container').classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
async completePaymentWithoutToken(e) {
|
||||
document.getElementById('errors').hidden = true;
|
||||
e.target.parentElement.disabled = true;
|
||||
|
||||
let result = await this.card.tokenize();
|
||||
|
||||
if (result.status === 'OK') {
|
||||
document.getElementById('sourceId').value = result.token;
|
||||
|
||||
let tokenBillingCheckbox = document.querySelector(
|
||||
'input[name="token-billing-checkbox"]:checked'
|
||||
);
|
||||
|
||||
if (tokenBillingCheckbox) {
|
||||
document.querySelector('input[name="store_card"]').value =
|
||||
tokenBillingCheckbox.value;
|
||||
}
|
||||
|
||||
return document.getElementById('server_response').submit();
|
||||
}
|
||||
|
||||
document.getElementById('errors').textContent =
|
||||
result.errors[0].message;
|
||||
document.getElementById('errors').hidden = false;
|
||||
|
||||
e.target.parentElement.disabled = false;
|
||||
}
|
||||
|
||||
async completePaymentUsingToken(e) {
|
||||
e.target.parentElement.disabled = true;
|
||||
|
||||
return document.getElementById('server_response').submit();
|
||||
}
|
||||
|
||||
async handle() {
|
||||
document
|
||||
.getElementById('authorize-card')
|
||||
?.addEventListener('click', (e) =>
|
||||
this.completePaymentWithoutToken(e)
|
||||
);
|
||||
|
||||
document.getElementById('pay-now').addEventListener('click', (e) => {
|
||||
let tokenInput = document.querySelector('input[name=token]');
|
||||
|
||||
if (tokenInput.value) {
|
||||
return this.completePaymentUsingToken(e);
|
||||
}
|
||||
|
||||
return this.completePaymentWithoutToken(e);
|
||||
});
|
||||
|
||||
Array.from(
|
||||
document.getElementsByClassName('toggle-payment-with-token')
|
||||
).forEach((element) =>
|
||||
element.addEventListener('click', (element) => {
|
||||
document
|
||||
.getElementById('card-container')
|
||||
.classList.add('hidden');
|
||||
document.getElementById('save-card--container').style.display =
|
||||
'none';
|
||||
document.querySelector('input[name=token]').value =
|
||||
element.target.dataset.token;
|
||||
})
|
||||
);
|
||||
|
||||
document
|
||||
.getElementById('toggle-payment-with-credit-card')
|
||||
.addEventListener('click', async (element) => {
|
||||
document
|
||||
.getElementById('card-container')
|
||||
.classList.remove('hidden');
|
||||
document.getElementById('save-card--container').style.display =
|
||||
'grid';
|
||||
document.querySelector('input[name=token]').value = '';
|
||||
|
||||
if (!this.isLoaded) {
|
||||
await this.init();
|
||||
}
|
||||
});
|
||||
|
||||
let toggleWithToken = document.querySelector(
|
||||
'.toggle-payment-with-token'
|
||||
);
|
||||
|
||||
if (!toggleWithToken) {
|
||||
document.getElementById('toggle-payment-with-credit-card').click();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
new SquareCreditCard().handle();
|
||||
@ -32,48 +32,5 @@
|
||||
<script type="text/javascript" src="https://web.squarecdn.com/v1/square.js"></script>
|
||||
@endif
|
||||
|
||||
<script>
|
||||
class SquareCreditCard {
|
||||
constructor() {
|
||||
this.appId = document.querySelector('meta[name=square-appId]').content;
|
||||
this.locationId = document.querySelector('meta[name=square-locationId]').content;
|
||||
}
|
||||
|
||||
async init() {
|
||||
this.payments = Square.payments(this.appId, this.locationId);
|
||||
|
||||
this.card = await this.payments.card();
|
||||
|
||||
await this.card.attach('#card-container');
|
||||
}
|
||||
|
||||
async completePaymentWithoutToken(e) {
|
||||
document.getElementById('errors').hidden = true;
|
||||
e.target.parentElement.disabled = true;
|
||||
|
||||
let result = await this.card.tokenize();
|
||||
|
||||
if (result.status === 'OK') {
|
||||
document.getElementById('sourceId').value = result.token;
|
||||
|
||||
return document.getElementById('server_response').submit();
|
||||
}
|
||||
|
||||
document.getElementById('errors').textContent = result.errors[0].message;
|
||||
document.getElementById('errors').hidden = false;
|
||||
|
||||
e.target.parentElement.disabled = false;
|
||||
}
|
||||
|
||||
async handle() {
|
||||
await this.init();
|
||||
|
||||
document
|
||||
.getElementById('authorize-card')
|
||||
?.addEventListener('click', (e) => this.completePaymentWithoutToken(e));
|
||||
}
|
||||
}
|
||||
|
||||
new SquareCreditCard().handle();
|
||||
</script>
|
||||
<script src="{{ asset('js/clients/payments/square-credit-card.js') }}"></script>
|
||||
@endsection
|
||||
|
||||
@ -63,114 +63,5 @@
|
||||
<script type="text/javascript" src="https://web.squarecdn.com/v1/square.js"></script>
|
||||
@endif
|
||||
|
||||
<script>
|
||||
class SquareCreditCard {
|
||||
constructor() {
|
||||
this.appId = document.querySelector('meta[name=square-appId]').content;
|
||||
this.locationId = document.querySelector('meta[name=square-locationId]').content;
|
||||
this.isLoaded = false;
|
||||
}
|
||||
|
||||
async init() {
|
||||
this.payments = Square.payments(this.appId, this.locationId);
|
||||
|
||||
this.card = await this.payments.card();
|
||||
|
||||
await this.card.attach('#card-container');
|
||||
|
||||
this.isLoaded = true;
|
||||
|
||||
let iframeContainer = document.querySelector('.sq-card-iframe-container');
|
||||
|
||||
if (iframeContainer) {
|
||||
iframeContainer.setAttribute('style', '150px !important');
|
||||
}
|
||||
|
||||
let toggleWithToken = document.querySelector('.toggle-payment-with-token');
|
||||
|
||||
if (toggleWithToken) {
|
||||
document.getElementById('card-container').classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
async completePaymentWithoutToken(e) {
|
||||
document.getElementById('errors').hidden = true;
|
||||
e.target.parentElement.disabled = true;
|
||||
|
||||
let result = await this.card.tokenize();
|
||||
|
||||
if (result.status === 'OK') {
|
||||
document.getElementById('sourceId').value = result.token;
|
||||
|
||||
let tokenBillingCheckbox = document.querySelector(
|
||||
'input[name="token-billing-checkbox"]:checked'
|
||||
);
|
||||
|
||||
if (tokenBillingCheckbox) {
|
||||
document.querySelector('input[name="store_card"]').value =
|
||||
tokenBillingCheckbox.value;
|
||||
}
|
||||
|
||||
return document.getElementById('server_response').submit();
|
||||
}
|
||||
|
||||
document.getElementById('errors').textContent = result.errors[0].message;
|
||||
document.getElementById('errors').hidden = false;
|
||||
|
||||
e.target.parentElement.disabled = false;
|
||||
}
|
||||
|
||||
async completePaymentUsingToken(e) {
|
||||
e.target.parentElement.disabled = true;
|
||||
|
||||
return document.getElementById('server_response').submit();
|
||||
}
|
||||
|
||||
async handle() {
|
||||
document
|
||||
.getElementById('authorize-card')
|
||||
?.addEventListener('click', (e) => this.completePaymentWithoutToken(e));
|
||||
|
||||
document
|
||||
.getElementById('pay-now')
|
||||
.addEventListener('click', (e) => {
|
||||
let tokenInput = document.querySelector('input[name=token]');
|
||||
|
||||
if (tokenInput.value) {
|
||||
return this.completePaymentUsingToken(e);
|
||||
}
|
||||
|
||||
return this.completePaymentWithoutToken(e);
|
||||
});
|
||||
|
||||
Array
|
||||
.from(document.getElementsByClassName('toggle-payment-with-token'))
|
||||
.forEach((element) => element.addEventListener('click', (element) => {
|
||||
document.getElementById('card-container').classList.add('hidden');
|
||||
document.getElementById('save-card--container').style.display = 'none';
|
||||
document.querySelector('input[name=token]').value = element.target.dataset.token;
|
||||
}));
|
||||
|
||||
document
|
||||
.getElementById('toggle-payment-with-credit-card')
|
||||
.addEventListener('click', async (element) => {
|
||||
document.getElementById('card-container').classList.remove('hidden');
|
||||
document.getElementById('save-card--container').style.display = 'grid';
|
||||
document.querySelector('input[name=token]').value = "";
|
||||
|
||||
if (!this.isLoaded) {
|
||||
await this.init();
|
||||
}
|
||||
});
|
||||
|
||||
let toggleWithToken = document.querySelector('.toggle-payment-with-token');
|
||||
|
||||
if (!toggleWithToken) {
|
||||
document.getElementById('toggle-payment-with-credit-card').click();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
new SquareCreditCard().handle();
|
||||
</script>
|
||||
<script src="{{ asset('js/clients/payments/square-credit-card.js') }}"></script>
|
||||
@endsection
|
||||
|
||||
4
webpack.mix.js
vendored
4
webpack.mix.js
vendored
@ -89,6 +89,10 @@ mix.js("resources/js/app.js", "public/js")
|
||||
.js(
|
||||
"resources/js/clients/payments/mollie-credit-card.js",
|
||||
"public/js/clients/payments/mollie-credit-card.js"
|
||||
)
|
||||
.js(
|
||||
"resources/js/clients/payments/square-credit-card.js",
|
||||
"public/js/clients/payments/square-credit-card.js"
|
||||
);
|
||||
|
||||
mix.copyDirectory('node_modules/card-js/card-js.min.css', 'public/css/card-js.min.css');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user