mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-05-24 02:14:21 -04:00
Extract credit card scripts into standalone JS file
This commit is contained in:
Benjamin Beganović
parent
484e6923d4
commit
373f169b39
2
public/js/clients/payments/mollie-credit-card.js
vendored
Normal file
2
public/js/clients/payments/mollie-credit-card.js
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
/*! For license information please see mollie-credit-card.js.LICENSE.txt */
|
||||
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=21)}({21:function(e,t,n){e.exports=n("i12I")},i12I:function(e,t){function n(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}(new(function(){function e(){var t,n;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.mollie=Mollie(null===(t=document.querySelector("meta[name=mollie-publicId]"))||void 0===t?void 0:t.content,{testmode:null===(n=document.querySelector("meta[name=mollie-testmode]"))||void 0===n?void 0:n.content})}var t,r,o;return t=e,(r=[{key:"createCardHolderInput",value:function(){var e=this.mollie.createComponent("cardHolder");e.mount("#card-holder");var t=document.getElementById("card-holder-error");return e.addEventListener("change",(function(e){e.error&&e.touched?t.textContent=e.error:t.textContent=""})),this}},{key:"createCardNumberInput",value:function(){var e=this.mollie.createComponent("cardNumber");e.mount("#card-number");var t=document.getElementById("card-number-error");return e.addEventListener("change",(function(e){e.error&&e.touched?t.textContent=e.error:t.textContent=""})),this}},{key:"createExpiryDateInput",value:function(){var e=this.mollie.createComponent("expiryDate");e.mount("#expiry-date");var t=document.getElementById("expiry-date-error");return e.addEventListener("change",(function(e){e.error&&e.touched?t.textContent=e.error:t.textContent=""})),this}},{key:"createCvvInput",value:function(){var e=this.mollie.createComponent("verificationCode");e.mount("#cvv");var t=document.getElementById("cvv-error");return e.addEventListener("change",(function(e){e.error&&e.touched?t.textContent=e.error:t.textContent=""})),this}},{key:"handlePayNowButton",value:function(){if(document.getElementById("pay-now").disabled=!0,""!==document.querySelector("input[name=token]").value)return document.querySelector("input[name=gateway_response]").value="",document.getElementById("server-response").submit();this.mollie.createToken().then((function(e){var t=e.token,n=e.error;if(n){document.getElementById("pay-now").disabled=!1;var r=document.getElementById("errors");return r.innerText=n.message,void(r.hidden=!1)}var o=document.querySelector('input[name="token-billing-checkbox"]:checked');o&&(document.querySelector('input[name="store_card"]').value=o.value),document.querySelector("input[name=gateway_response]").value=t,document.querySelector("input[name=token]").value="",document.getElementById("server-response").submit()}))}},{key:"handle",value:function(){var e=this;this.createCardHolderInput().createCardNumberInput().createExpiryDateInput().createCvvInput(),Array.from(document.getElementsByClassName("toggle-payment-with-token")).forEach((function(e){return e.addEventListener("click",(function(e){document.getElementById("mollie--payment-container").classList.add("hidden"),document.getElementById("save-card--container").style.display="none",document.querySelector("input[name=token]").value=e.target.dataset.token}))})),document.getElementById("toggle-payment-with-credit-card").addEventListener("click",(function(e){document.getElementById("mollie--payment-container").classList.remove("hidden"),document.getElementById("save-card--container").style.display="grid",document.querySelector("input[name=token]").value=""})),document.getElementById("pay-now").addEventListener("click",(function(){return e.handlePayNowButton()}))}}])&&n(t.prototype,r),o&&n(t,o),e}())).handle()}});
|
||||
@ -0,0 +1,9 @@
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
@ -11,6 +11,7 @@
|
||||
"/js/clients/payments/braintree-paypal.js": "/js/clients/payments/braintree-paypal.js?id=c35db3cbb65806ab6a8a",
|
||||
"/js/clients/payments/card-js.min.js": "/js/clients/payments/card-js.min.js?id=5469146cd629ea1b5c20",
|
||||
"/js/clients/payments/checkout-credit-card.js": "/js/clients/payments/checkout-credit-card.js?id=065e5450233cc5b47020",
|
||||
"/js/clients/payments/mollie-credit-card.js": "/js/clients/payments/mollie-credit-card.js?id=b2c01dd61bd9e9ba7a70",
|
||||
"/js/clients/payments/stripe-ach.js": "/js/clients/payments/stripe-ach.js?id=81c2623fc1e5769b51c7",
|
||||
"/js/clients/payments/stripe-alipay.js": "/js/clients/payments/stripe-alipay.js?id=665ddf663500767f1a17",
|
||||
"/js/clients/payments/stripe-credit-card.js": "/js/clients/payments/stripe-credit-card.js?id=f1719b79a2bb274d3f64",
|
||||
|
||||
168
resources/js/clients/payments/mollie-credit-card.js
vendored
Normal file
168
resources/js/clients/payments/mollie-credit-card.js
vendored
Normal file
@ -0,0 +1,168 @@
|
||||
/**
|
||||
* 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 _Mollie {
|
||||
constructor() {
|
||||
this.mollie = Mollie(
|
||||
document.querySelector('meta[name=mollie-publicId]')?.content,
|
||||
{
|
||||
testmode: document.querySelector('meta[name=mollie-testmode]')
|
||||
?.content,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
createCardHolderInput() {
|
||||
let cardHolder = this.mollie.createComponent('cardHolder');
|
||||
cardHolder.mount('#card-holder');
|
||||
|
||||
let cardHolderError = document.getElementById('card-holder-error');
|
||||
|
||||
cardHolder.addEventListener('change', function(event) {
|
||||
if (event.error && event.touched) {
|
||||
cardHolderError.textContent = event.error;
|
||||
} else {
|
||||
cardHolderError.textContent = '';
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
createCardNumberInput() {
|
||||
let cardNumber = this.mollie.createComponent('cardNumber');
|
||||
cardNumber.mount('#card-number');
|
||||
|
||||
let cardNumberError = document.getElementById('card-number-error');
|
||||
|
||||
cardNumber.addEventListener('change', function(event) {
|
||||
if (event.error && event.touched) {
|
||||
cardNumberError.textContent = event.error;
|
||||
} else {
|
||||
cardNumberError.textContent = '';
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
createExpiryDateInput() {
|
||||
let expiryDate = this.mollie.createComponent('expiryDate');
|
||||
expiryDate.mount('#expiry-date');
|
||||
|
||||
let expiryDateError = document.getElementById('expiry-date-error');
|
||||
|
||||
expiryDate.addEventListener('change', function(event) {
|
||||
if (event.error && event.touched) {
|
||||
expiryDateError.textContent = event.error;
|
||||
} else {
|
||||
expiryDateError.textContent = '';
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
createCvvInput() {
|
||||
let verificationCode = this.mollie.createComponent('verificationCode');
|
||||
verificationCode.mount('#cvv');
|
||||
|
||||
let verificationCodeError = document.getElementById('cvv-error');
|
||||
|
||||
verificationCode.addEventListener('change', function(event) {
|
||||
if (event.error && event.touched) {
|
||||
verificationCodeError.textContent = event.error;
|
||||
} else {
|
||||
verificationCodeError.textContent = '';
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
handlePayNowButton() {
|
||||
document.getElementById('pay-now').disabled = true;
|
||||
|
||||
if (document.querySelector('input[name=token]').value !== '') {
|
||||
document.querySelector('input[name=gateway_response]').value = '';
|
||||
|
||||
return document.getElementById('server-response').submit();
|
||||
}
|
||||
|
||||
this.mollie.createToken().then(function(result) {
|
||||
let token = result.token;
|
||||
let error = result.error;
|
||||
|
||||
if (error) {
|
||||
document.getElementById('pay-now').disabled = false;
|
||||
|
||||
let errorsContainer = document.getElementById('errors');
|
||||
errorsContainer.innerText = error.message;
|
||||
errorsContainer.hidden = false;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
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 = token;
|
||||
document.querySelector('input[name=token]').value = '';
|
||||
|
||||
document.getElementById('server-response').submit();
|
||||
});
|
||||
}
|
||||
|
||||
handle() {
|
||||
this.createCardHolderInput()
|
||||
.createCardNumberInput()
|
||||
.createExpiryDateInput()
|
||||
.createCvvInput();
|
||||
|
||||
Array.from(
|
||||
document.getElementsByClassName('toggle-payment-with-token')
|
||||
).forEach((element) =>
|
||||
element.addEventListener('click', (element) => {
|
||||
document
|
||||
.getElementById('mollie--payment-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', (element) => {
|
||||
document
|
||||
.getElementById('mollie--payment-container')
|
||||
.classList.remove('hidden');
|
||||
document.getElementById('save-card--container').style.display =
|
||||
'grid';
|
||||
document.querySelector('input[name=token]').value = '';
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById('pay-now')
|
||||
.addEventListener('click', () => this.handlePayNowButton());
|
||||
}
|
||||
}
|
||||
|
||||
new _Mollie().handle();
|
||||
@ -2,8 +2,6 @@
|
||||
ctrans('texts.credit_card')])
|
||||
|
||||
@section('gateway_head')
|
||||
@dd($contact->preferredLocale())
|
||||
|
||||
<meta name="mollie-testmode" content="{{ $gateway->company_gateway->getConfigField('testMode') }}">
|
||||
<meta name="mollie-publicId" content="{{ $gateway->company_gateway->getConfigField('publicId') }}">
|
||||
|
||||
@ -83,159 +81,10 @@ ctrans('texts.credit_card')])
|
||||
@endcomponent
|
||||
|
||||
@include('portal.ninja2020.gateways.includes.save_card')
|
||||
|
||||
@include('portal.ninja2020.gateways.includes.pay_now')
|
||||
@endsection
|
||||
|
||||
@section('gateway_footer')
|
||||
<script src="https://js.mollie.com/v1/mollie.js"></script>
|
||||
|
||||
<script>
|
||||
class _Mollie {
|
||||
constructor() {
|
||||
this.mollie = Mollie(document.querySelector('meta[name=mollie-publicId]')?.content, {
|
||||
testmode: document.querySelector('meta[name=mollie-testmode]')?.content,
|
||||
});
|
||||
}
|
||||
|
||||
createCardHolderInput() {
|
||||
let cardHolder = this.mollie.createComponent("cardHolder");
|
||||
cardHolder.mount("#card-holder");
|
||||
|
||||
let cardHolderError = document.getElementById("card-holder-error");
|
||||
|
||||
cardHolder.addEventListener("change", function(event) {
|
||||
if (event.error && event.touched) {
|
||||
cardHolderError.textContent = event.error;
|
||||
} else {
|
||||
cardHolderError.textContent = "";
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
createCardNumberInput() {
|
||||
let cardNumber = this.mollie.createComponent("cardNumber");
|
||||
cardNumber.mount("#card-number");
|
||||
|
||||
let cardNumberError = document.getElementById("card-number-error");
|
||||
|
||||
cardNumber.addEventListener("change", function(event) {
|
||||
if (event.error && event.touched) {
|
||||
cardNumberError.textContent = event.error;
|
||||
} else {
|
||||
cardNumberError.textContent = "";
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
createExpiryDateInput() {
|
||||
let expiryDate = this.mollie.createComponent("expiryDate");
|
||||
expiryDate.mount("#expiry-date");
|
||||
|
||||
let expiryDateError = document.getElementById("expiry-date-error");
|
||||
|
||||
expiryDate.addEventListener("change", function(event) {
|
||||
if (event.error && event.touched) {
|
||||
expiryDateError.textContent = event.error;
|
||||
} else {
|
||||
expiryDateError.textContent = "";
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
createCvvInput() {
|
||||
let verificationCode = this.mollie.createComponent("verificationCode");
|
||||
verificationCode.mount("#cvv");
|
||||
|
||||
let verificationCodeError = document.getElementById(
|
||||
"cvv-error"
|
||||
);
|
||||
|
||||
verificationCode.addEventListener("change", function(event) {
|
||||
if (event.error && event.touched) {
|
||||
verificationCodeError.textContent = event.error;
|
||||
} else {
|
||||
verificationCodeError.textContent = "";
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
handlePayNowButton() {
|
||||
document.getElementById('pay-now').disabled = true;
|
||||
|
||||
if (document.querySelector('input[name=token]').value !== '') {
|
||||
document.querySelector('input[name=gateway_response]').value = '';
|
||||
|
||||
return document.getElementById('server-response').submit();
|
||||
}
|
||||
|
||||
this.mollie.createToken().then(function(result) {
|
||||
let token = result.token;
|
||||
let error = result.error;
|
||||
|
||||
if (error) {
|
||||
document.getElementById('pay-now').disabled = false;
|
||||
|
||||
let errorsContainer = document.getElementById('errors');
|
||||
errorsContainer.innerText = error.message;
|
||||
errorsContainer.hidden = false;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
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 = token;
|
||||
document.querySelector('input[name=token]').value = '';
|
||||
|
||||
document.getElementById('server-response').submit();
|
||||
});
|
||||
}
|
||||
|
||||
handle() {
|
||||
this
|
||||
.createCardHolderInput()
|
||||
.createCardNumberInput()
|
||||
.createExpiryDateInput()
|
||||
.createCvvInput();
|
||||
|
||||
Array
|
||||
.from(document.getElementsByClassName('toggle-payment-with-token'))
|
||||
.forEach((element) => element.addEventListener('click', (element) => {
|
||||
document.getElementById('mollie--payment-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', (element) => {
|
||||
document.getElementById('mollie--payment-container').classList.remove('hidden');
|
||||
document.getElementById('save-card--container').style.display = 'grid';
|
||||
document.querySelector('input[name=token]').value = "";
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById('pay-now')
|
||||
.addEventListener('click', () => this.handlePayNowButton());
|
||||
}
|
||||
}
|
||||
|
||||
new _Mollie().handle();
|
||||
</script>
|
||||
<script src="{{ asset('js/clients/payments/mollie-credit-card.js') }}"></script>
|
||||
@endsection
|
||||
|
||||
4
webpack.mix.js
vendored
4
webpack.mix.js
vendored
@ -81,6 +81,10 @@ mix.js("resources/js/app.js", "public/js")
|
||||
.js(
|
||||
"resources/js/clients/payment_methods/wepay-bank-account.js",
|
||||
"public/js/clients/payment_methods/wepay-bank-account.js"
|
||||
)
|
||||
.js(
|
||||
"resources/js/clients/payments/mollie-credit-card.js",
|
||||
"public/js/clients/payments/mollie-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