diff --git a/public/js/clients/payments/mollie-credit-card.js b/public/js/clients/payments/mollie-credit-card.js
new file mode 100644
index 000000000000..e251a471ea48
--- /dev/null
+++ b/public/js/clients/payments/mollie-credit-card.js
@@ -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()}});
\ No newline at end of file
diff --git a/public/js/clients/payments/mollie-credit-card.js.LICENSE.txt b/public/js/clients/payments/mollie-credit-card.js.LICENSE.txt
new file mode 100644
index 000000000000..6b30888ddb5b
--- /dev/null
+++ b/public/js/clients/payments/mollie-credit-card.js.LICENSE.txt
@@ -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
+ */
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index cff448c2b916..64ddb1342f6d 100755
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -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",
diff --git a/resources/js/clients/payments/mollie-credit-card.js b/resources/js/clients/payments/mollie-credit-card.js
new file mode 100644
index 000000000000..14978ea2bac2
--- /dev/null
+++ b/resources/js/clients/payments/mollie-credit-card.js
@@ -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();
diff --git a/resources/views/portal/ninja2020/gateways/mollie/credit_card/pay.blade.php b/resources/views/portal/ninja2020/gateways/mollie/credit_card/pay.blade.php
index fbad3de78def..13e41775efa5 100644
--- a/resources/views/portal/ninja2020/gateways/mollie/credit_card/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/mollie/credit_card/pay.blade.php
@@ -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
diff --git a/webpack.mix.js b/webpack.mix.js
index a5eafbedebe1..ae382d4b795e 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -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');