From 60a25dc963fa49d063c29cc36c0be3bfc0eb6518 Mon Sep 17 00:00:00 2001
From: Ivascu Madalin <madalinivascu@gmail.com>
Date: Fri, 24 Nov 2023 10:05:32 +0200
Subject: [PATCH] BP-3191 Module loads too fast (Unexpected identifier) (#9)

* move js to the after component

* fix css

---------

Co-authored-by: Ivascu Madalin <madalin.ivascu@arnia.ro>
---
 .../templates/component/payment/after.phtml   | 586 +++++++++++++++---
 .../component/payment/method/afterpay.phtml   |  22 +-
 .../component/payment/method/afterpay20.phtml |  18 +-
 .../component/payment/method/applepay.phtml   |  88 +--
 .../component/payment/method/billink.phtml    |  18 +-
 .../component/payment/method/creditcard.phtml |   4 +-
 .../payment/method/creditcards.phtml          | 112 +---
 .../component/payment/method/giftcards.phtml  |  73 +--
 .../component/payment/method/giropay.phtml    |   4 +-
 .../component/payment/method/ideal.phtml      |   4 +-
 .../component/payment/method/in3.phtml        |   8 +-
 .../component/payment/method/mrcash.phtml     |  54 +-
 .../payment/method/payperemail.phtml          |  14 +-
 .../component/payment/method/sepaDirect.phtml |  12 +-
 .../component/payment/method/tinka.phtml      |   8 +-
 .../component/payment/method/voucher.phtml    |  77 +--
 16 files changed, 562 insertions(+), 540 deletions(-)

diff --git a/view/frontend/templates/component/payment/after.phtml b/view/frontend/templates/component/payment/after.phtml
index 0210427..8992e5f 100644
--- a/view/frontend/templates/component/payment/after.phtml
+++ b/view/frontend/templates/component/payment/after.phtml
@@ -1,28 +1,4 @@
-<div class="bk-modal-wrap" x-data="{
-    showModal: false,
-    title: '<?= $escaper->escapeHtml(__('Success')); ?>',
-    content: '',
-    showClose: true,
-    buttons:[],
-    close() {
-        this.showModal = false;
-    },
-    initModal() {
-        buckarooStart();
-        window.addEventListener('buckaroo-modal-show', (event) => {
-            if(event.detail.data) {
-                this.showModal = true;
-                Object.keys(event.detail.data).forEach((key) => {
-                    this[key] = event.detail.data[key];
-                })
-            }
-        })
-
-        window.addEventListener('buckaroo-modal-hide', () => {
-            this.close();
-        })
-    }
-}" x-init="initModal()">
+<div class="bk-modal-wrap" x-data="buckaroo.modal()" x-init="initModal()">
     <div
     id="bk-modal"
     tabindex="-1"
@@ -87,91 +63,507 @@
     </div>
 </div>
 <script>
-    function buckarooStart() {
-        const addTask = function() {
-            hyvaCheckout.navigation.addTask(async () => {
-                if (window.buckarooTask) {
-                    await window.buckarooTask();
+
+    var buckaroo = {
+        modal() {
+            return {
+                showModal: false,
+                title: '<?= $escaper->escapeHtml(__('Success')); ?>',
+                content: '',
+                showClose: true,
+                buttons:[],
+                close() {
+                    this.showModal = false;
+                },
+                initModal() {
+                    buckaroo.start();
+                    window.addEventListener('buckaroo-modal-show', (event) => {
+                        if(event.detail.data) {
+                            this.showModal = true;
+                            Object.keys(event.detail.data).forEach((key) => {
+                                this[key] = event.detail.data[key];
+                            })
+                        }
+                    });
+
+                    window.addEventListener('buckaroo-modal-hide', () => {
+                        this.close();
+                    });
                 }
+            }
+        },
+        start() {
+            const addTask = function() {
+                hyvaCheckout.navigation.addTask(async () => {
+                    if (window.buckarooTask) {
+                        await window.buckarooTask();
+                    }
+                })
+            }
+            addTask();
+            window.addEventListener('checkout:navigation:success', (event) => {
+                if (event.detail.route === 'payment')
+                    addTask();
+            });
+
+
+            function buckaroo_load_sdk() {
+                return new Promise(resolve => {
+                    const script = document.createElement('script');
+                    script.type = 'text/javascript';
+                    script.src = '//static.buckaroo.nl/script/ClientSideEncryption001.js';
+                    script.async = true;
+                    script.onload = resolve;
+                    document.head.appendChild(script);
+                })
+            }
+
+            buckaroo_load_sdk().then(() => {
+                window.buckarooCseHasLoaded = true;
+                hyva.formValidation.addRule('bk-validateCardNumber', (value) => {
+                    if (!BuckarooClientSideEncryption.V001.validateCardNumber(value.replace(/\s+/g, ''))) {
+                        return '<?= $escaper->escapeJs(__('Please enter a valid creditcard number.')) ?>';
+                    };
+                    return true;
+                });
+
+                hyva.formValidation.addRule('bk-validateCardCvc', (value, options, field, context) => {
+                    if (!BuckarooClientSideEncryption.V001.validateCvc(
+                            value,
+                            context.determineIssuer(context.cardNumber)
+                        )) {
+                        return '<?= $escaper->escapeJs(__('Please enter a valid Cvc number.')) ?>';
+                    };
+                    return true;
+                });
+
+                hyva.formValidation.addRule('bk-validateCardHolderName', (value) => {
+                    if (!BuckarooClientSideEncryption.V001.validateCardholderName(value)) {
+                        return '<?= $escaper->escapeJs(__('Please enter a valid card holder name.')) ?>';
+                    };
+                    return true;
+                });
+
+                hyva.formValidation.addRule('bk-ValidateYear', (value) => {
+                    const message = '<?= $escaper->escapeJs(__('Enter a valid year number.')) ?>';
+
+                    if (value.length === 0) {
+                        return message;
+                    }
+                    const parts = value.split("/");
+                    if (!BuckarooClientSideEncryption.V001.validateYear(parts[1])) {
+                        return message;
+                    };
+                    return true;
+                });
+
+                hyva.formValidation.addRule('bk-ValidateMonth', (value) => {
+                    const message = '<?= $escaper->escapeJs(__('Enter a valid month number.')) ?>';
+                    if (value.length === 0) {
+                        return message;
+                    }
+
+                    const parts = value.split("/");
+                    if (!BuckarooClientSideEncryption.V001.validateMonth(parts[0])) {
+                        return message;
+                    };
+                    return true;
+                });
+                window.dispatchEvent(new CustomEvent("buckaroo-cse-load"));
             })
-        }
-        addTask();
-        window.addEventListener('checkout:navigation:success', (event) => {
-            if (event.detail.route === 'payment')
-                addTask();
-        });
-
-
-        function buckaroo_load_sdk() {
-            return new Promise(resolve => {
-                const script = document.createElement('script');
-                script.type = 'text/javascript';
-                script.src = '//static.buckaroo.nl/script/ClientSideEncryption001.js';
-                script.async = true;
-                script.onload = resolve;
-                document.head.appendChild(script);
+
+
+            Magewire.hook('element.removed', (el, component) => {
+                if (el.id !== undefined && el.id.indexOf('payment-method-view-buckaroo_magento2') > -1) {
+                    window.buckarooTask = undefined;
+                }
             })
-        }
+        },
+        applePay(jsSdk) {
+            return {
+                config: {},
+                canDisplay: false,
+                loadSdk() {
+                        return new Promise(resolve => {
+                            const script = document.createElement('script');
+                            script.type = 'text/javascript';
+                            script.src = jsSdk;
+                            script.async = true;
+                            script.onload = resolve;
+                            document.head.appendChild(script);
+                        })
+                },
 
-        buckaroo_load_sdk().then(() => {
-            window.buckarooCseHasLoaded = true;
-            hyva.formValidation.addRule('bk-validateCardNumber', (value) => {
-                if (!BuckarooClientSideEncryption.V001.validateCardNumber(value.replace(/\s+/g, ''))) {
-                    return '<?= $escaper->escapeJs(__('Please enter a valid creditcard number.')) ?>';
-                };
-                return true;
-            });
+                formatTransactionResponse(response) {
+                    if (response === null || response === 'undefined') {
+                        return null;
+                    }
 
-            hyva.formValidation.addRule('bk-validateCardCvc', (value, options, field, context) => {
-                if (!BuckarooClientSideEncryption.V001.validateCvc(
-                        value,
-                        context.determineIssuer(context.cardNumber)
-                    )) {
-                    return '<?= $escaper->escapeJs(__('Please enter a valid Cvc number.')) ?>';
-                };
-                return true;
-            });
+                        const paymentData = response.token.paymentData;
 
-            hyva.formValidation.addRule('bk-validateCardHolderName', (value) => {
-                if (!BuckarooClientSideEncryption.V001.validateCardholderName(value)) {
-                    return '<?= $escaper->escapeJs(__('Please enter a valid card holder name.')) ?>';
-                };
-                return true;
-            });
+                        return JSON.stringify({
+                            paymentData: {
+                            version: paymentData.version,
+                            data: paymentData.data,
+                            signature: paymentData.signature,
+                            header: {
+                                ephemeralPublicKey: paymentData.header.ephemeralPublicKey,
+                                publicKeyHash: paymentData.header.publicKeyHash,
+                                transactionId: paymentData.header.transactionId,
+                            },
+                            },
+                        });
+                },
 
-            hyva.formValidation.addRule('bk-ValidateYear', (value) => {
-                const message = '<?= $escaper->escapeJs(__('Enter a valid year number.')) ?>';
+                async captureFunds(payment) {
+                    const billingContact = payment && payment.billingContact ? JSON.stringify(payment.billingContact) : ''
+                    await this.$wire.updateData(this.formatTransactionResponse(payment),billingContact);
+                    this.resolve();
+                    return {
+                        status: window.ApplePaySession.STATUS_SUCCESS,
+                        errors: [],
+                    };
+                },
 
-                if (value.length === 0) {
-                    return message;
+                async beginPayment() {
+                    const promise = new Promise((resolve) => {
+                        this.resolve = resolve;
+
+                        const config = new BuckarooApplePay.PayOptions(
+                            this.config.storeName,
+                            this.config.country,
+                            this.config.currency,
+                            this.config.cultureCode,
+                            this.config.guid,
+                            this.$wire.get('totals'),
+                            this.$wire.get('grandTotal'),
+                            'shipping',
+                            [],
+                            (payment) => this.captureFunds(payment),
+                            null,
+                            null,
+                            ['email', 'postalAddress'],
+                            ['email']
+                        );
+                        new BuckarooApplePay.PayPayment(config).beginPayment()
+                    })
+                    await promise;
+                },
+
+                async submit() {
+                    await hyvaCheckout.order.place();
+                },
+                getButtonClass() {
+                    return `pay-with-apple ${BuckarooApplePay.getButtonClass(this.config.buttonStyle, 'buy')}`;
+                },
+                async register() {
+                    this.config = this.$wire.get('config');
+                    this.loadSdk().then(async () => {
+                        this.canDisplay = await BuckarooApplePay.checkPaySupport();
+                        window.buckarooTask = async () => {
+                            if(this.canDisplay)
+                                await this.beginPayment();
+                        };
+                    });
                 }
-                const parts = value.split("/");
-                if (!BuckarooClientSideEncryption.V001.validateYear(parts[1])) {
-                    return message;
-                };
-                return true;
-            });
+            }
+        },
+        credicards($el) {
+            return Object.assign(hyva.formValidation($el), {
+                    issuerImages: [],
+                    cseHasLoaded: window.buckarooCseHasLoaded,
+                    cardHolder: '',
+                    cardNumber: '',
+                    cardExpiration: '',
+                    cardCvc:'',
+                    async saveEncryptedData() {
+                        let parts = this.cardExpiration.split('/');
+                        const year = parts[1];
+                        const month = parts[0];
+                        const wire = this.$wire;
+                        const enc = new Promise((resolve) => {
+                            BuckarooClientSideEncryption.V001.encryptCardData(
+                                this.cardNumber,
+                                year,
+                                month,
+                                this.cardCvc,
+                                this.cardHolder,
+                                function(encryptedCardData) {
+                                    resolve(encryptedCardData);
+                                });
+                        })
+                        return await enc;
+                    },
+                    register() {
+                        this.issuerImages = this.$wire.get('issuerImages');
+                        window.addEventListener('buckaroo-cse-load', () => {
+                            this.cseHasLoaded = true;
+                        }, {
+                            once: true
+                        })
+
+                        const formValid = async () => {
+                            try {
+                                await this.validate();
+                            } catch (error) {
+                                return false;
+                            }
+                            return true;
+                        }
+                        window.buckarooTask = async () => {
+                            const isValid = await formValid();
+                            if (this.cseHasLoaded && isValid) {
+                                const encryptedCardData = await this.saveEncryptedData();
+                                await this.$wire.updatedEncryptedData(
+                                    encryptedCardData,
+                                    this.determineIssuer(this.cardNumber)
+                                );
+                            }
+                        };
+
+                    },
+                    getIssuerImage: function() {
+                        const defaultImage = '<?= $this->getViewFileUrl('Buckaroo_Magento2::images/svg/creditcards.svg') ?>';
+                        const issuer = this.determineIssuer(this.cardNumber);
+                        if(
+                            issuer !== null &&
+                            this.issuerImages[issuer] !== undefined
+                        ) {
+                            return this.issuerImages[issuer];
+                        }
+                        return defaultImage;
+                    },
+                    determineIssuer: function (cardNumber) {
+                        var issuers = {
+                            'amex': {
+                                'regex': '^3[47][0-9]{13}$',
+                                'name': 'American Express'
+                            },
+                            'maestro': {
+                                'regex': '^(5018|5020|5038|6304|6759|6761|6763)[0-9]{8,15}$',
+                                'name': 'Maestro'
+                            },
+                            'dankort': {
+                                'regex': '^(5019|4571)[0-9]{12}$',
+                                'name': 'Dankort'
+                            },
+                            'mastercard': {
+                                'regex': '^(5[1-5]|2[2-7])[0-9]{14}$',
+                                'name': 'Mastercard'
+                            },
+                            'visaelectron': {
+                                'regex': '^(4026[0-9]{2}|417500|4508[0-9]{2}|4844[0-9]{2}|4913[0-9]{2}|4917[0-9]{2})[0-9]{10}$',
+                                'name': 'Visa Electron'
+                            },
+                            'visa': {
+                                'regex': '^4[0-9]{12}(?:[0-9]{3})?$',
+                                'name': 'Visa'
+                            }
+                        };
 
-            hyva.formValidation.addRule('bk-ValidateMonth', (value) => {
-                const message = '<?= $escaper->escapeJs(__('Enter a valid month number.')) ?>';
-                if (value.length === 0) {
-                    return message;
+                        for (var key in issuers) {
+                            if (cardNumber !== undefined && cardNumber.match(issuers[key].regex)) {
+                                return key;
+                            }
+                        }
+
+                        return null;
+                    }
+                })
+        },
+        giftcards($el) {
+            return Object.assign(hyva.formValidation($el), {
+                card:'',
+                pin: '',
+                cardNumber: '',
+                canSubmit:false,
+                async formValid() {
+                        try {
+                            await this.validate();
+                        } catch (error) {
+                            return false;
+                        }
+                        return true;
+                },
+                async submit() {
+                    if(!await this.formValid()) {
+                        return;
+                    }
+                    await this.$wire.applyGiftcard(this.card, this.cardNumber, this.pin);
+                },
+                displaySuccess(response) {
+                    window.dispatchEvent(new CustomEvent('buckaroo-modal-show', {
+                        detail: {
+                            data: {
+                                title: '<?= $escaper->escapeHtml(__('Success')); ?>',
+                                content: response.message,
+                                showClose: false,
+                                buttons: [{
+                                    label: response.remaining_amount_message
+                                }]
+                            }
+                        }
+                    }));
+                },
+                displayError(message) {
+                    window.dispatchEvent(new CustomEvent('buckaroo-modal-show', {
+                        detail: {
+                            data: {
+                                title: '<?= $escaper->escapeHtml(__('Error')); ?>',
+                                content: message,
+                            }
+                        }
+                    }));
+                },
+                listenToSubmit() {
+                    this.$wire.on('giftcard_response', async (response) => {
+                        if (response.error) {
+                            this.displayError(response.error);
+                        } else if(response.remainder_amount === undefined) {
+                            this.displayError(response.message);
+                        } else if (response.remainder_amount == 0) {
+                            this.canSubmit = true;
+                            await hyvaCheckout.order.place();
+                        } else if (response.remainder_amount != 0) {
+                            this.displaySuccess(response);
+                        }
+                    })
+                },
+                register() {
+                    this.listenToSubmit();
+                    window.buckarooTask = async () => {
+                        if(!this.canSubmit) {
+                            await this.submit();
+                        }
+                    };
+                },
+
+            })
+        },
+        mrCash($el) {
+            return Object.assign(hyva.formValidation($el), {
+                cseHasLoaded: window.buckarooCseHasLoaded,
+                cardHolder: '',
+                cardNumber: '',
+                cardExpiration: '',
+                async saveEncryptedData() {
+                    let parts = this.cardExpiration.split('/');
+                    const year = parts[1];
+                    const month = parts[0];
+                    const wire = this.$wire;
+                    const enc = new Promise((resolve) => {
+                        BuckarooClientSideEncryption.V001.encryptCardData(
+                            this.cardNumber,
+                            year,
+                            month,
+                            '',
+                            this.cardHolder,
+                            function(encryptedCardData) {
+                                resolve(encryptedCardData);
+                            });
+                    })
+                    return await enc;
+                },
+                register() {
+                    window.addEventListener('buckaroo-cse-load', () => {
+                        this.cseHasLoaded = true;
+                    }, {
+                        once: true
+                    })
+
+                    const formValid = async () => {
+                        try {
+                            await this.validate();
+                        } catch (error) {
+                            return false;
+                        }
+                        return true;
+                    }
+                    window.buckarooTask = async () => {
+                        const isValid = await formValid();
+                        if (this.cseHasLoaded && isValid) {
+                            const encryptedCardData = await this.saveEncryptedData();
+                            await this.$wire.updatedEncryptedData(encryptedCardData);
+                        }
+                    };
                 }
+            })
+        },
+        voucher($el, ajaxUrl) {
+            return Object.assign(hyva.formValidation($el), {
+                code:'',
+                canSubmit:false,
+                async formValid() {
+                        try {
+                            await this.validate();
+                        } catch (error) {
+                            return false;
+                        }
+                        return true;
+                },
+                async submit() {
+                    if(!await this.formValid()) {
+                        return;
+                    }
 
-                const parts = value.split("/");
-                if (!BuckarooClientSideEncryption.V001.validateMonth(parts[0])) {
-                    return message;
-                };
-                return true;
-            });
-            window.dispatchEvent(new CustomEvent("buckaroo-cse-load"));
-        })
+                    const params = {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({voucherCode: this.code})
+                    };
 
+                    const response = await (
+                        await fetch(ajaxUrl, params)
+                    ).json();
+                    await this.$wire.refreshTotals();
+                    if (response.error) {
+                        this.displayError(response.error);
+                    } else if(response.remainder_amount === undefined) {
+                        this.displayError(response.message);
+                    } else if (response.remainder_amount == 0) {
+                        this.canSubmit = true;
+                        await this.$wire.setCanSubmit(true);
+                        await hyvaCheckout.order.place();
+                    } else if (response.remainder_amount != 0) {
+                        this.displaySuccess(response);
+                    }
+                },
+                displaySuccess(response) {
+                    window.dispatchEvent(new CustomEvent('buckaroo-modal-show', {
+                        detail: {
+                            data: {
+                                title: '<?= $escaper->escapeHtml(__('Success')); ?>',
+                                content: response.message,
+                                showClose: false,
+                                buttons: [{
+                                    label: response.remaining_amount_message
+                                }]
+                            }
+                        }
+                    }));
+                },
+                displayError(message) {
+                    window.dispatchEvent(new CustomEvent('buckaroo-modal-show', {
+                        detail: {
+                            data: {
+                                title: '<?= $escaper->escapeHtml(__('Error')); ?>',
+                                content: message,
+                            }
+                        }
+                    }));
+                },
+                register() {
+                    window.buckarooTask = async () => {
+                        if(!this.canSubmit) {
+                            await this.submit();
+                        }
+                    };
+                },
 
-        Magewire.hook('element.removed', (el, component) => {
-            if (el.id !== undefined && el.id.indexOf('payment-method-view-buckaroo_magento2') > -1) {
-                buckarooTask = undefined;
-            }
-        })
+            })
+        }
     }
+
 </script>
\ No newline at end of file
diff --git a/view/frontend/templates/component/payment/method/afterpay.phtml b/view/frontend/templates/component/payment/method/afterpay.phtml
index 34d6062..0741b8b 100644
--- a/view/frontend/templates/component/payment/method/afterpay.phtml
+++ b/view/frontend/templates/component/payment/method/afterpay.phtml
@@ -19,7 +19,7 @@ use Magento\Framework\Escaper;
         <div class="flex flex-col gap-y-2 field field-reserved">
             <label for="buckaroo_afterpay_dob">
                 <?= $escaper->escapeHtml(__('Date of Birth:')); ?>
-                <span class="text-red">*</span>
+                <span class="text-red-600">*</span>
             </label>
             <input
                 type="date"
@@ -29,7 +29,7 @@ use Magento\Framework\Escaper;
                 id="buckaroo_afterpay_dob"
             >
             <?php if ($magewire->hasError('dateOfBirth')) : ?>
-                <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('dateOfBirth')) ?></div>
+                <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('dateOfBirth')) ?></div>
             <?php endif; ?>
         </div>
     <?php
@@ -40,11 +40,11 @@ use Magento\Framework\Escaper;
         <div class="flex flex-col gap-y-2 field field-reserved">
             <label for="buckaroo_afterpay_phone">
                 <?= $escaper->escapeHtml(__('Telephone:')); ?>
-                <span class="text-red">*</span>
+                <span class="text-red-600">*</span>
             </label>
             <input type="text" wire:model.lazy="phone" id="buckaroo_afterpay_phone">
             <?php if ($magewire->hasError('phone')) : ?>
-                <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('phone')) ?></div>
+                <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('phone')) ?></div>
             <?php endif; ?>
         </div>
     <?php
@@ -73,11 +73,11 @@ use Magento\Framework\Escaper;
         <div class="flex flex-col gap-y-2 field field-reserved">
             <label for="buckaroo_afterpay_iban">
                 <?= $escaper->escapeHtml(__('Bank Account Number:')); ?>
-                <span class="text-red">*</span>
+                <span class="text-red-600">*</span>
             </label>
             <input type="text" wire:model.lazy="iban" id="buckaroo_afterpay_iban">
             <?php if ($magewire->hasError('iban')) : ?>
-                <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('iban')) ?></div>
+                <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('iban')) ?></div>
             <?php endif; ?>
         </div>
     <?php
@@ -87,22 +87,22 @@ use Magento\Framework\Escaper;
         <div class="flex flex-col gap-y-2 field field-reserved">
             <label for="buckaroo_afterpay_coc">
                 <?= $escaper->escapeHtml(__('COC Number:')); ?>
-                <span class="text-red">*</span>
+                <span class="text-red-600">*</span>
             </label>
             <input type="text" wire:model.lazy="coc" id="buckaroo_afterpay_coc">
             <?php if ($magewire->hasError('coc')) : ?>
-                <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('coc')) ?></div>
+                <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('coc')) ?></div>
             <?php endif; ?>
         </div>
 
         <div class="flex flex-col gap-y-2 field field-reserved">
             <label for="buckaroo_afterpay_company_name">
                 <?= $escaper->escapeHtml(__('Company Name:')); ?>
-                <span class="text-red">*</span>
+                <span class="text-red-600">*</span>
             </label>
             <input type="text" wire:model.lazy="companyName" id="buckaroo_afterpay_company_name">
             <?php if ($magewire->hasError('companyName')) : ?>
-                <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('companyName')) ?></div>
+                <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('companyName')) ?></div>
             <?php endif; ?>
         </div>
     <?php
@@ -119,7 +119,7 @@ use Magento\Framework\Escaper;
             </a>
         </div>
         <?php if ($magewire->hasError('tos')) : ?>
-            <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('tos')) ?></div>
+            <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('tos')) ?></div>
         <?php endif; ?>
     </div>
 </div>
diff --git a/view/frontend/templates/component/payment/method/afterpay20.phtml b/view/frontend/templates/component/payment/method/afterpay20.phtml
index 793dfd8..3005ac4 100644
--- a/view/frontend/templates/component/payment/method/afterpay20.phtml
+++ b/view/frontend/templates/component/payment/method/afterpay20.phtml
@@ -24,7 +24,7 @@ use Magento\Framework\Escaper;
         <div class="flex flex-col gap-y-2 field field-reserved">
             <label for="buckaroo_afterpay20_dob">
                 <?= $escaper->escapeHtml(__('Date of Birth:')); ?>
-                <span class="text-red">*</span>
+                <span class="text-red-600">*</span>
             </label>
             <input type="date"
                 x-data
@@ -33,7 +33,7 @@ use Magento\Framework\Escaper;
                 id="buckaroo_afterpay20_dob"
             >
             <?php if ($magewire->hasError('dateOfBirth')): ?>
-               <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('dateOfBirth')) ?></div>
+               <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('dateOfBirth')) ?></div>
             <?php endif; ?>
         </div>
     <?php
@@ -44,11 +44,11 @@ use Magento\Framework\Escaper;
         <div class="flex flex-col gap-y-2 field field-reserved">
             <label for="buckaroo_afterpay20_identification">
                 <?= $escaper->escapeHtml(__('Identification number:')); ?>
-                <span class="text-red">*</span>
+                <span class="text-red-600">*</span>
             </label>
             <input type="text" wire:model.lazy="identificationNumber" id="buckaroo_afterpay20_identification">
             <?php if ($magewire->hasError('identificationNumber')): ?>
-               <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('identificationNumber')) ?></div>
+               <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('identificationNumber')) ?></div>
             <?php endif; ?>
         </div>
     <?php
@@ -59,11 +59,11 @@ use Magento\Framework\Escaper;
         <div class="flex flex-col gap-y-2 field field-reserved">
             <label for="buckaroo_afterpay20_phone">
                 <?= $escaper->escapeHtml(__('Telephone:')); ?>
-                <span class="text-red">*</span>
+                <span class="text-red-600">*</span>
             </label>
             <input type="text" wire:model.lazy="phone" id="buckaroo_afterpay20_phone">
             <?php if ($magewire->hasError('phone')): ?>
-               <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('phone')) ?></div>
+               <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('phone')) ?></div>
             <?php endif; ?>
         </div>
     <?php
@@ -74,11 +74,11 @@ use Magento\Framework\Escaper;
         <div class="flex flex-col gap-y-2 field field-reserved">
             <label for="buckaroo_afterpay20_coc">
                 <?= $escaper->escapeHtml(__('COC Number:')); ?>
-                <span class="text-red">*</span>
+                <span class="text-red-600">*</span>
             </label>
             <input type="text" wire:model.lazy="coc" id="buckaroo_afterpay20_coc">
             <?php if ($magewire->hasError('coc')): ?>
-               <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('coc')) ?></div>
+               <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('coc')) ?></div>
             <?php endif; ?>
         </div>
     <?php
@@ -97,7 +97,7 @@ use Magento\Framework\Escaper;
             </a>
         </div>
         <?php if ($magewire->hasError('tos')): ?>
-            <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('tos')) ?></div>
+            <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('tos')) ?></div>
         <?php endif; ?>
     </div>
 </div>
diff --git a/view/frontend/templates/component/payment/method/applepay.phtml b/view/frontend/templates/component/payment/method/applepay.phtml
index 1e229c8..4f5533d 100644
--- a/view/frontend/templates/component/payment/method/applepay.phtml
+++ b/view/frontend/templates/component/payment/method/applepay.phtml
@@ -6,93 +6,7 @@ declare(strict_types=1);
 
 use Magento\Framework\Escaper;
 ?>
-<form x-data="{
-    config: {},
-    canDisplay: false,
-    loadSdk() {
-            return new Promise(resolve => {
-                const script = document.createElement('script');
-                script.type = 'text/javascript';
-                script.src = '<?= $magewire->getJsSdkUrl() ?>';
-                script.async = true;
-                script.onload = resolve;
-                document.head.appendChild(script);
-            })
-    },
-
-    formatTransactionResponse(response) {
-        if (response === null || response === 'undefined') {
-            return null;
-        }
-
-            const paymentData = response.token.paymentData;
-
-            return JSON.stringify({
-                paymentData: {
-                version: paymentData.version,
-                data: paymentData.data,
-                signature: paymentData.signature,
-                header: {
-                    ephemeralPublicKey: paymentData.header.ephemeralPublicKey,
-                    publicKeyHash: paymentData.header.publicKeyHash,
-                    transactionId: paymentData.header.transactionId,
-                },
-                },
-            });
-    },
-
-    async captureFunds(payment) {
-        const billingContact = payment && payment.billingContact ? JSON.stringify(payment.billingContact) : ''
-        await this.$wire.updateData(this.formatTransactionResponse(payment),billingContact);
-        this.resolve();
-        return {
-            status: window.ApplePaySession.STATUS_SUCCESS,
-            errors: [],
-        };
-    },
-
-    async beginPayment() {
-        const promise = new Promise((resolve) => {
-            this.resolve = resolve;
-
-            const config = new BuckarooApplePay.PayOptions(
-                this.config.storeName,
-                this.config.country,
-                this.config.currency,
-                this.config.cultureCode,
-                this.config.guid,
-                this.$wire.get('totals'),
-                this.$wire.get('grandTotal'),
-                'shipping',
-                [],
-                (payment) => this.captureFunds(payment),
-                null,
-                null,
-                ['email', 'postalAddress'],
-                ['email']
-            );
-            new BuckarooApplePay.PayPayment(config).beginPayment()
-        })
-        await promise;
-    },
-
-    async submit() {
-        await hyvaCheckout.order.place();
-    },
-    getButtonClass() {
-        return `pay-with-apple ${BuckarooApplePay.getButtonClass(this.config.buttonStyle, 'buy')}`;
-    },
-    async register() {
-        this.config = this.$wire.get('config');
-        this.loadSdk().then(async () => {
-            this.canDisplay = await BuckarooApplePay.checkPaySupport();
-            window.buckarooTask = async () => {
-                if(this.canDisplay)
-                    await this.beginPayment();
-            };
-        });
-    }
-}" x-init="register()" novalidate>
+<form x-data="buckaroo.applePay('<?= $magewire->getJsSdkUrl() ?>')" x-init="register()" novalidate>
     <template x-if="canDisplay">
         <button type="button" :class="getButtonClass()" @click="submit()">
             <?= $escaper->escapeHtml(__('Place Order')) ?>
diff --git a/view/frontend/templates/component/payment/method/billink.phtml b/view/frontend/templates/component/payment/method/billink.phtml
index c625951..d8d3996 100644
--- a/view/frontend/templates/component/payment/method/billink.phtml
+++ b/view/frontend/templates/component/payment/method/billink.phtml
@@ -29,14 +29,14 @@ use Magento\Framework\Escaper;
             ?>
         </select>
         <?php if ($magewire->hasError('gender')) : ?>
-            <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('gender')) ?></div>
+            <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('gender')) ?></div>
         <?php endif; ?>
     </div>
 
     <div class="flex flex-col gap-y-2 field field-reserved">
         <label for="buckaroo_billink_dob">
             <?= $escaper->escapeHtml(__('Date of Birth:')); ?>
-            <span class="text-red">*</span>
+            <span class="text-red-600">*</span>
         </label>
         <input
             type="date"
@@ -45,7 +45,7 @@ use Magento\Framework\Escaper;
             id="buckaroo_billink_dob"
         >
         <?php if ($magewire->hasError('dateOfBirth')) : ?>
-            <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('dateOfBirth')) ?></div>
+            <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('dateOfBirth')) ?></div>
         <?php endif; ?>
     </div>
 
@@ -55,11 +55,11 @@ use Magento\Framework\Escaper;
         <div class="flex flex-col gap-y-2 field field-reserved">
             <label for="buckaroo_billink_phone">
                 <?= $escaper->escapeHtml(__('Telephone:')); ?>
-                <span class="text-red">*</span>
+                <span class="text-red-600">*</span>
             </label>
             <input type="text" wire:model.lazy="phone" id="buckaroo_billink_phone">
             <?php if ($magewire->hasError('phone')) : ?>
-                <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('phone')) ?></div>
+                <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('phone')) ?></div>
             <?php endif; ?>
         </div>
     <?php
@@ -70,11 +70,11 @@ use Magento\Framework\Escaper;
         <div class="flex flex-col gap-y-2 field field-reserved">
             <label for="buckaroo_billink_coc">
                 <?= $escaper->escapeHtml(__('COC Number:')); ?>
-                <span class="text-red">*</span>
+                <span class="text-red-600">*</span>
             </label>
             <input type="text" wire:model.lazy="coc" id="buckaroo_billink_coc">
             <?php if ($magewire->hasError('coc')) : ?>
-                <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('coc')) ?></div>
+                <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('coc')) ?></div>
             <?php endif; ?>
         </div>
 
@@ -84,7 +84,7 @@ use Magento\Framework\Escaper;
             </label>
             <input type="text" wire:model.lazy="vatNumber" id="buckaroo_billink_vat_number">
             <?php if ($magewire->hasError('vatNumber')) : ?>
-                <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('vatNumber')) ?></div>
+                <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('vatNumber')) ?></div>
             <?php endif; ?>
         </div>
     <?php
@@ -102,7 +102,7 @@ use Magento\Framework\Escaper;
             </a>
         </div>
         <?php if ($magewire->hasError('tos')) : ?>
-            <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('tos')) ?></div>
+            <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('tos')) ?></div>
         <?php endif; ?>
     </div>
 </div>
diff --git a/view/frontend/templates/component/payment/method/creditcard.phtml b/view/frontend/templates/component/payment/method/creditcard.phtml
index aa34d35..f7d46e8 100644
--- a/view/frontend/templates/component/payment/method/creditcard.phtml
+++ b/view/frontend/templates/component/payment/method/creditcard.phtml
@@ -30,7 +30,7 @@ $issuers = $magewire->getIssuers();
             <?php
             foreach ($issuers as $issuer) {
             ?>
-                <div class="flex flex-row grow gap-x-2 items-center">
+                <div class="flex flex-row flex-grow gap-x-2 items-center">
                     <input
                     type="radio"
                     name="issuer"
@@ -40,7 +40,7 @@ $issuers = $magewire->getIssuers();
                     />
                     <label
                     for="bk_credicard_issuer_<?= $escaper->escapeHtmlAttr($issuer["code"]) ?>"
-                    class="flex flex-row grow gap-x-2 items-center">
+                    class="flex flex-row flex-grow gap-x-2 items-center">
                         <img src="<?= $escaper->escapeUrl($issuer["img"]) ?>"
                         alt="<?= $issuer["name"] ?>"
                         style="max-height:25px;"
diff --git a/view/frontend/templates/component/payment/method/creditcards.phtml b/view/frontend/templates/component/payment/method/creditcards.phtml
index 88a5976..3fd091a 100644
--- a/view/frontend/templates/component/payment/method/creditcards.phtml
+++ b/view/frontend/templates/component/payment/method/creditcards.phtml
@@ -9,111 +9,11 @@ use Magento\Framework\Escaper;
 ?>
 <div class="col-span-6">
 
-    <form x-data="Object.assign(hyva.formValidation($el), {
-                    issuerImages: [],
-                    cseHasLoaded: window.buckarooCseHasLoaded,
-                    cardHolder: '',
-                    cardNumber: '',
-                    cardExpiration: '',
-                    cardCvc:'',
-                    async saveEncryptedData() {
-                        let parts = this.cardExpiration.split('/');
-                        const year = parts[1];
-                        const month = parts[0];
-                        const wire = this.$wire;
-                        const enc = new Promise((resolve) => {
-                            BuckarooClientSideEncryption.V001.encryptCardData(
-                                this.cardNumber,
-                                year,
-                                month,
-                                this.cardCvc,
-                                this.cardHolder,
-                                function(encryptedCardData) {
-                                    resolve(encryptedCardData);
-                                });
-                        })
-                        return await enc;
-                    },
-                    register() {
-                        this.issuerImages = this.$wire.get('issuerImages');
-                        window.addEventListener('buckaroo-cse-load', () => {
-                            this.cseHasLoaded = true;
-                        }, {
-                            once: true
-                        })
-
-                        const formValid = async () => {
-                            try {
-                                await this.validate();
-                            } catch (error) {
-                                return false;
-                            }
-                            return true;
-                        }
-                        window.buckarooTask = async () => {
-                            const isValid = await formValid();
-                            if (this.cseHasLoaded && isValid) {
-                                const encryptedCardData = await this.saveEncryptedData();
-                                await this.$wire.updatedEncryptedData(
-                                    encryptedCardData,
-                                    this.determineIssuer(this.cardNumber)
-                                );
-                            }
-                        };
-
-                    },
-                    getIssuerImage: function() {
-                        const defaultImage = '<?= $this->getViewFileUrl('Buckaroo_Magento2::images/svg/creditcards.svg') ?>';
-                        const issuer = this.determineIssuer(this.cardNumber);
-                        if(
-                            issuer !== null &&
-                            this.issuerImages[issuer] !== undefined
-                        ) {
-                            return this.issuerImages[issuer];
-                        }
-                        return defaultImage;
-                    },
-                    determineIssuer: function (cardNumber) {
-                        var issuers = {
-                            'amex': {
-                                'regex': '^3[47][0-9]{13}$',
-                                'name': 'American Express'
-                            },
-                            'maestro': {
-                                'regex': '^(5018|5020|5038|6304|6759|6761|6763)[0-9]{8,15}$',
-                                'name': 'Maestro'
-                            },
-                            'dankort': {
-                                'regex': '^(5019|4571)[0-9]{12}$',
-                                'name': 'Dankort'
-                            },
-                            'mastercard': {
-                                'regex': '^(5[1-5]|2[2-7])[0-9]{14}$',
-                                'name': 'Mastercard'
-                            },
-                            'visaelectron': {
-                                'regex': '^(4026[0-9]{2}|417500|4508[0-9]{2}|4844[0-9]{2}|4913[0-9]{2}|4917[0-9]{2})[0-9]{10}$',
-                                'name': 'Visa Electron'
-                            },
-                            'visa': {
-                                'regex': '^4[0-9]{12}(?:[0-9]{3})?$',
-                                'name': 'Visa'
-                            }
-                        };
-
-                        for (var key in issuers) {
-                            if (cardNumber !== undefined && cardNumber.match(issuers[key].regex)) {
-                                return key;
-                            }
-                        }
-
-                        return null;
-                    }
-                })" x-init="register()" novalidate>
+    <form x-data="buckaroo.credicards($el)" x-init="register()" novalidate>
         <div class="flex flex-col gap-y-2 field field-reserved">
             <label for="buckaroo_creditcards_card_holder">
                 <?= $escaper->escapeHtml(__('Name on card:')); ?>
-                <span class="text-red">*</span>
+                <span class="text-red-600">*</span>
             </label>
             <input type="text"
             x-model="cardHolder"
@@ -126,7 +26,7 @@ use Magento\Framework\Escaper;
         <div class="flex flex-col gap-y-2 field field-reserved">
             <label for="buckaroo_creditcards_card_number">
                 <?= $escaper->escapeHtml(__('Card number:')); ?>
-                <span class="text-red">*</span>
+                <span class="text-red-600">*</span>
             </label>
             <div class="relative w-full">
                 <input
@@ -150,7 +50,7 @@ use Magento\Framework\Escaper;
                 <div class="flex flex-col w-7/12">
                     <label for="buckaroo_creditcards_card_expiration">
                         <?= $escaper->escapeHtml(__('Expiration:')); ?>
-                        <span class="text-red">*</span>
+                        <span class="text-red-600">*</span>
                     </label>
                     <input type="text"
                         maxlength="5"
@@ -165,7 +65,7 @@ use Magento\Framework\Escaper;
                 <div class="flex flex-col w-5/12">
                     <label for="buckaroo_creditcards_card_cvc">
                         <?= $escaper->escapeHtml(__('CVC / CVV:')); ?>
-                        <span class="text-red">*</span>
+                        <span class="text-red-600">*</span>
                     </label>
                     <input
                         type="text"
@@ -180,4 +80,4 @@ use Magento\Framework\Escaper;
             </div>
         </div>
     </form>
-</div>
\ No newline at end of file
+</div>
diff --git a/view/frontend/templates/component/payment/method/giftcards.phtml b/view/frontend/templates/component/payment/method/giftcards.phtml
index 20ad199..e1e3b46 100644
--- a/view/frontend/templates/component/payment/method/giftcards.phtml
+++ b/view/frontend/templates/component/payment/method/giftcards.phtml
@@ -9,74 +9,7 @@ use Magento\Framework\Escaper;
 if (!$magewire->isRedirect()) {
 ?>
     <div class="col-span-6">
-
-        <form x-data="Object.assign(hyva.formValidation($el), {
-        card:'',
-        pin: '',
-        cardNumber: '',
-        canSubmit:false,
-        async formValid() {
-                try {
-                    await this.validate();
-                } catch (error) {
-                    return false;
-                }
-                return true;
-        },
-        async submit() {
-            if(!await this.formValid()) {
-                return;
-            }
-            await this.$wire.applyGiftcard(this.card, this.cardNumber, this.pin);
-        },
-        displaySuccess(response) {
-            window.dispatchEvent(new CustomEvent('buckaroo-modal-show', {
-                detail: {
-                    data: {
-                        title: '<?= $escaper->escapeHtml(__('Success')); ?>',
-                        content: response.message,
-                        showClose: false,
-                        buttons: [{
-                            label: response.remaining_amount_message
-                        }]
-                    }
-                }
-            }));
-        },
-        displayError(message) {
-            window.dispatchEvent(new CustomEvent('buckaroo-modal-show', {
-                detail: {
-                    data: {
-                        title: '<?= $escaper->escapeHtml(__('Error')); ?>',
-                        content: message,
-                    }
-                }
-            }));
-        },
-        listenToSubmit() {
-            this.$wire.on('giftcard_response', async (response) => {
-                if (response.error) {
-                    this.displayError(response.error);
-                } else if(response.remainder_amount === undefined) {
-                    this.displayError(response.message);
-                } else if (response.remainder_amount == 0) {
-                    this.canSubmit = true;
-                    await hyvaCheckout.order.place();
-                } else if (response.remainder_amount != 0) {
-                    this.displaySuccess(response);
-                }
-            })
-        },
-        register() {
-            this.listenToSubmit();
-            window.buckarooTask = async () => {
-                if(!this.canSubmit) {
-                    await this.submit();
-                }
-            };
-        },
-
-    })" x-init="register()" novalidate>
+        <form x-data="buckaroo.giftcards($el)" x-init="register()" novalidate>
 
             <div class="flex flex-col gap-y-2 field field-reserved">
                 <label for="buckaroo_giftcard_issuer">
@@ -106,7 +39,7 @@ if (!$magewire->isRedirect()) {
             <div class="flex flex-col gap-y-2 field field-reserved">
                 <label for="buckaroo_giftcard_card_number">
                     <?= $escaper->escapeHtml(__('Card number:')); ?>
-                    <span class="text-red">*</span>
+                    <span class="text-red-600">*</span>
                 </label>
                 <input
                     type="text"
@@ -120,7 +53,7 @@ if (!$magewire->isRedirect()) {
             <div class="flex flex-col gap-y-2 field field-reserved">
                 <label for="buckaroo_giftcard_pin">
                     <?= $escaper->escapeHtml(__('PIN / Security code:')); ?>
-                    <span class="text-red">*</span>
+                    <span class="text-red-600">*</span>
                 </label>
                 <input
                     type="text"
diff --git a/view/frontend/templates/component/payment/method/giropay.phtml b/view/frontend/templates/component/payment/method/giropay.phtml
index 9018652..5bcd288 100644
--- a/view/frontend/templates/component/payment/method/giropay.phtml
+++ b/view/frontend/templates/component/payment/method/giropay.phtml
@@ -13,7 +13,7 @@ $genders = $magewire->getGenderList();
     <div class="flex flex-col gap-y-2 field field-reserved">
         <label for="buckaroo_giropay_bic">
             <?= $escaper->escapeHtml(__('BIC Number')); ?>
-            <span class="text-red">*</span>
+            <span class="text-red-600">*</span>
         </label>
         <input
             type="text"
@@ -22,7 +22,7 @@ $genders = $magewire->getGenderList();
             placeholder="<?= $escaper->escapeHtml(__('AAAABBCCDDD')); ?>"
         >
         <?php if ($magewire->hasError('bic')) : ?>
-            <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('bic')) ?></div>
+            <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('bic')) ?></div>
         <?php endif; ?>
     </div>
 </div>
diff --git a/view/frontend/templates/component/payment/method/ideal.phtml b/view/frontend/templates/component/payment/method/ideal.phtml
index 2fff4b8..7515fd3 100644
--- a/view/frontend/templates/component/payment/method/ideal.phtml
+++ b/view/frontend/templates/component/payment/method/ideal.phtml
@@ -28,7 +28,7 @@ $issuers = $magewire->getIssuers();
             <?php
             foreach ($issuers as $issuer) {
             ?>
-                <div class="flex flex-row grow gap-x-2 items-center">
+                <div class="flex flex-row flex-grow gap-x-2 items-center">
                     <input
                     type="radio"
                     name="issuer"
@@ -38,7 +38,7 @@ $issuers = $magewire->getIssuers();
                     />
                     <label
                     for="bk_ideal_issuer_<?= $escaper->escapeHtmlAttr($issuer["code"]) ?>"
-                    class="flex flex-row grow gap-x-2 items-center">
+                    class="flex flex-row flex-grow gap-x-2 items-center">
                         <img
                         src="<?= $escaper->escapeUrl($magewire->getImageUrl($issuer["imgName"])) ?>"
                         alt="<?= $issuer["name"] ?>"
diff --git a/view/frontend/templates/component/payment/method/in3.phtml b/view/frontend/templates/component/payment/method/in3.phtml
index 81951c2..b6ca6f4 100644
--- a/view/frontend/templates/component/payment/method/in3.phtml
+++ b/view/frontend/templates/component/payment/method/in3.phtml
@@ -23,7 +23,7 @@ use Magento\Framework\Escaper;
     <div class="flex flex-col gap-y-2 field field-reserved">
         <label for="buckaroo_capayablein3_dob">
             <?= $escaper->escapeHtml(__('Date of Birth:')); ?>
-            <span class="text-red">*</span>
+            <span class="text-red-600">*</span>
         </label>
         <input
             type="date"
@@ -33,7 +33,7 @@ use Magento\Framework\Escaper;
             id="buckaroo_capayablein3_dob"
         >
         <?php if ($magewire->hasError('dateOfBirth')) : ?>
-            <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('dateOfBirth')) ?></div>
+            <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('dateOfBirth')) ?></div>
         <?php endif; ?>
     </div>
 
@@ -43,11 +43,11 @@ use Magento\Framework\Escaper;
         <div class="flex flex-col gap-y-2 field field-reserved">
             <label for="buckaroo_capayablein3_phone">
                 <?= $escaper->escapeHtml(__('Telephone:')); ?>
-                <span class="text-red">*</span>
+                <span class="text-red-600">*</span>
             </label>
             <input type="text" wire:model.lazy="phone" id="buckaroo_capayablein3_phone">
             <?php if ($magewire->hasError('phone')) : ?>
-                <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('phone')) ?></div>
+                <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('phone')) ?></div>
             <?php endif; ?>
         </div>
     <?php
diff --git a/view/frontend/templates/component/payment/method/mrcash.phtml b/view/frontend/templates/component/payment/method/mrcash.phtml
index c1be663..42797bc 100644
--- a/view/frontend/templates/component/payment/method/mrcash.phtml
+++ b/view/frontend/templates/component/payment/method/mrcash.phtml
@@ -10,57 +10,11 @@ use Magento\Framework\Escaper;
 <div class="col-span-6">
     <?php if ($magewire->showClientSideEncryption()) {
     ?>
-        <form x-data="Object.assign(hyva.formValidation($el), {
-                    cseHasLoaded: window.buckarooCseHasLoaded,
-                    cardHolder: '',
-                    cardNumber: '',
-                    cardExpiration: '',
-                    async saveEncryptedData() {
-                        let parts = this.cardExpiration.split('/');
-                        const year = parts[1];
-                        const month = parts[0];
-                        const wire = this.$wire;
-                        const enc = new Promise((resolve) => {
-                            BuckarooClientSideEncryption.V001.encryptCardData(
-                                this.cardNumber,
-                                year,
-                                month,
-                                '',
-                                this.cardHolder,
-                                function(encryptedCardData) {
-                                    resolve(encryptedCardData);
-                                });
-                        })
-                        return await enc;
-                    },
-                    register() {
-                        window.addEventListener('buckaroo-cse-load', () => {
-                            this.cseHasLoaded = true;
-                        }, {
-                            once: true
-                        })
-
-                        const formValid = async () => {
-                            try {
-                                await this.validate();
-                            } catch (error) {
-                                return false;
-                            }
-                            return true;
-                        }
-                        window.buckarooTask = async () => {
-                            const isValid = await formValid();
-                            if (this.cseHasLoaded && isValid) {
-                                const encryptedCardData = await this.saveEncryptedData();
-                                await this.$wire.updatedEncryptedData(encryptedCardData);
-                            }
-                        };
-                    }
-                })" x-init="register()" novalidate>
+        <form x-data="buckaroo.mrCash($el)" x-init="register()" novalidate>
             <div class="flex flex-col gap-y-2 field field-reserved">
                 <label for="buckaroo_mrcash_card_holder">
                     <?= $escaper->escapeHtml(__('Name on card:')); ?>
-                    <span class="text-red">*</span>
+                    <span class="text-red-600">*</span>
                 </label>
                 <input
                     type="text"
@@ -78,7 +32,7 @@ use Magento\Framework\Escaper;
                     <div class="flex flex-col gap-y-2  w-8/12">
                         <label for="buckaroo_mrcash_card_number">
                             <?= $escaper->escapeHtml(__('Card number:')); ?>
-                            <span class="text-red">*</span>
+                            <span class="text-red-600">*</span>
                         </label>
                         <input
                             type="text"
@@ -94,7 +48,7 @@ use Magento\Framework\Escaper;
                     <div class="flex flex-col gap-y-2  w-4/12">
                         <label for="buckaroo_mrcash_card_expiration">
                             <?= $escaper->escapeHtml(__('Expiration:')); ?>
-                            <span class="text-red">*</span>
+                            <span class="text-red-600">*</span>
                         </label>
                         <input
                             type="text"
diff --git a/view/frontend/templates/component/payment/method/payperemail.phtml b/view/frontend/templates/component/payment/method/payperemail.phtml
index d105b2d..ea1789a 100644
--- a/view/frontend/templates/component/payment/method/payperemail.phtml
+++ b/view/frontend/templates/component/payment/method/payperemail.phtml
@@ -23,14 +23,14 @@ use Magento\Framework\Escaper;
             ?>
         </select>
         <?php if ($magewire->hasError('gender')) : ?>
-            <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('gender')) ?></div>
+            <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('gender')) ?></div>
         <?php endif; ?>
     </div>
 
     <div class="flex flex-col gap-y-2 field field-reserved">
         <label for="buckaroo_paypermail_first_name">
             <?= $escaper->escapeHtml(__('Billing First Name:')); ?>
-            <span class="text-red">*</span>
+            <span class="text-red-600">*</span>
         </label>
         <input
             type="text"
@@ -39,7 +39,7 @@ use Magento\Framework\Escaper;
             placeholder="<?= $escaper->escapeHtml(__('John')); ?>"
         >
         <?php if ($magewire->hasError('firstName')) : ?>
-            <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('firstName')) ?></div>
+            <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('firstName')) ?></div>
         <?php endif; ?>
     </div>
 
@@ -58,7 +58,7 @@ use Magento\Framework\Escaper;
     <div class="flex flex-col gap-y-2 field field-reserved">
         <label for="buckaroo_paypermail_last_name">
             <?= $escaper->escapeHtml(__('Billing Last Name:')); ?>
-            <span class="text-red">*</span>
+            <span class="text-red-600">*</span>
         </label>
         <input
             type="text"
@@ -67,14 +67,14 @@ use Magento\Framework\Escaper;
             placeholder="<?= $escaper->escapeHtml(__('Doe')); ?>"
         >
         <?php if ($magewire->hasError('lastName')) : ?>
-            <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('lastName')) ?></div>
+            <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('lastName')) ?></div>
         <?php endif; ?>
     </div>
 
     <div class="flex flex-col gap-y-2 field field-reserved">
         <label for="buckaroo_paypermail_email">
             <?= $escaper->escapeHtml(__('Email:')); ?>
-            <span class="text-red">*</span>
+            <span class="text-red-600">*</span>
         </label>
         <input
             type="text"
@@ -83,7 +83,7 @@ use Magento\Framework\Escaper;
             placeholder="<?= $escaper->escapeHtml(__('email@example.com')); ?>"
         >
         <?php if ($magewire->hasError('email')) : ?>
-            <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('email')) ?></div>
+            <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('email')) ?></div>
         <?php endif; ?>
     </div>
 </div>
diff --git a/view/frontend/templates/component/payment/method/sepaDirect.phtml b/view/frontend/templates/component/payment/method/sepaDirect.phtml
index c795244..fa1ae13 100644
--- a/view/frontend/templates/component/payment/method/sepaDirect.phtml
+++ b/view/frontend/templates/component/payment/method/sepaDirect.phtml
@@ -12,22 +12,22 @@ use Magento\Framework\Escaper;
     <div class="flex flex-col gap-y-2 field field-reserved">
         <label for="buckaroo_sepa_bank_holder">
             <?= $escaper->escapeHtml(__('Bank account holder')); ?>
-            <span class="text-red">*</span>
+            <span class="text-red-600">*</span>
         </label>
         <input type="text" wire:model.lazy="bankHolder" id="buckaroo_sepa_bank_holder">
         <?php if ($magewire->hasError('bankHolder')) : ?>
-            <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('bankHolder')) ?></div>
+            <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('bankHolder')) ?></div>
         <?php endif; ?>
     </div>
 
     <div class="flex flex-col gap-y-2 field field-reserved">
         <label for="buckaroo_sepa_direct_iban">
             <?= $escaper->escapeHtml(__('Bank account number')); ?>
-            <span class="text-red">*</span>
+            <span class="text-red-600">*</span>
         </label>
         <input type="text" wire:model.lazy="iban" id="buckaroo_sepa_direct_iban">
         <?php if ($magewire->hasError('iban')) : ?>
-            <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('iban')) ?></div>
+            <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('iban')) ?></div>
         <?php endif; ?>
     </div>
     <?php if (!$magewire->isNl()) {
@@ -35,7 +35,7 @@ use Magento\Framework\Escaper;
         <div class="flex flex-col gap-y-2 field field-reserved">
             <label for="buckaroo_sepa_direct_bic">
                 <?= $escaper->escapeHtml(__('BIC Number')); ?>
-                <span class="text-red">*</span>
+                <span class="text-red-600">*</span>
             </label>
             <input
                 type="text"
@@ -44,7 +44,7 @@ use Magento\Framework\Escaper;
                 placeholder="<?= $escaper->escapeHtml(__('AAAABBCCDDD')); ?>"
             >
             <?php if ($magewire->hasError('bic')) : ?>
-                <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('bic')) ?></div>
+                <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('bic')) ?></div>
             <?php endif; ?>
         </div>
     <?php
diff --git a/view/frontend/templates/component/payment/method/tinka.phtml b/view/frontend/templates/component/payment/method/tinka.phtml
index 17bb733..3fadd35 100644
--- a/view/frontend/templates/component/payment/method/tinka.phtml
+++ b/view/frontend/templates/component/payment/method/tinka.phtml
@@ -25,7 +25,7 @@ use Magento\Framework\Escaper;
         <div class="flex flex-col gap-y-2 field field-reserved">
             <label for="buckaroo_afterpay20_dob">
                 <?= $escaper->escapeHtml(__('Date of Birth:')); ?>
-                <span class="text-red">*</span>
+                <span class="text-red-600">*</span>
             </label>
             <input
                 type="date"
@@ -35,7 +35,7 @@ use Magento\Framework\Escaper;
                 id="buckaroo_afterpay20_dob"
             >
             <?php if ($magewire->hasError('dateOfBirth')) : ?>
-                <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('dateOfBirth')) ?></div>
+                <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('dateOfBirth')) ?></div>
             <?php endif; ?>
         </div>
     <?php
@@ -46,11 +46,11 @@ use Magento\Framework\Escaper;
         <div class="flex flex-col gap-y-2 field field-reserved">
             <label for="buckaroo_afterpay20_phone">
                 <?= $escaper->escapeHtml(__('Telephone:')); ?>
-                <span class="text-red">*</span>
+                <span class="text-red-600">*</span>
             </label>
             <input type="text" wire:model.lazy="phone" id="buckaroo_afterpay20_phone">
             <?php if ($magewire->hasError('phone')) : ?>
-                <div class="text-red"><?= $escaper->escapeHtmlAttr($magewire->getError('phone')) ?></div>
+                <div class="text-red-600"><?= $escaper->escapeHtmlAttr($magewire->getError('phone')) ?></div>
             <?php endif; ?>
         </div>
     <?php
diff --git a/view/frontend/templates/component/payment/method/voucher.phtml b/view/frontend/templates/component/payment/method/voucher.phtml
index 5cf9d1d..85d5252 100644
--- a/view/frontend/templates/component/payment/method/voucher.phtml
+++ b/view/frontend/templates/component/payment/method/voucher.phtml
@@ -9,81 +9,12 @@ use Magento\Framework\Escaper;
 ?>
 <div class="col-span-6">
 
-    <form x-data="Object.assign(hyva.formValidation($el), {
-        code:'',
-        canSubmit:false,
-        async formValid() {
-                try {
-                    await this.validate();
-                } catch (error) {
-                    return false;
-                }
-                return true;
-        },
-        async submit() {
-            if(!await this.formValid()) {
-                return;
-            }
-
-            const params = {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({voucherCode: this.code})
-            };
-
-            const response = await (await fetch('<?= $escaper->escapeUrl($magewire->getAjaxUrl()); ?>', params)).json();
-            await this.$wire.refreshTotals();
-            if (response.error) {
-                this.displayError(response.error);
-            } else if(response.remainder_amount === undefined) {
-                this.displayError(response.message);
-            } else if (response.remainder_amount == 0) {
-                this.canSubmit = true;
-                await this.$wire.setCanSubmit(true);
-                await hyvaCheckout.order.place();
-            } else if (response.remainder_amount != 0) {
-                this.displaySuccess(response);
-            }
-        },
-        displaySuccess(response) {
-            window.dispatchEvent(new CustomEvent('buckaroo-modal-show', {
-                detail: {
-                    data: {
-                        title: '<?= $escaper->escapeHtml(__('Success')); ?>',
-                        content: response.message,
-                        showClose: false,
-                        buttons: [{
-                            label: response.remaining_amount_message
-                        }]
-                    }
-                }
-            }));
-        },
-        displayError(message) {
-            window.dispatchEvent(new CustomEvent('buckaroo-modal-show', {
-                detail: {
-                    data: {
-                        title: '<?= $escaper->escapeHtml(__('Error')); ?>',
-                        content: message,
-                    }
-                }
-            }));
-        },
-        register() {
-            window.buckarooTask = async () => {
-                if(!this.canSubmit) {
-                    await this.submit();
-                }
-            };
-        },
-
-    })" x-init="register()" novalidate>
+    <form x-data="buckaroo.voucher($el, '<?= $escaper->escapeUrl($magewire->getAjaxUrl()); ?>')"
+    x-init="register()" novalidate>
         <div class="flex flex-col gap-y-2 field field-reserved">
             <label for="buckaroo_voucher_code">
                 <?= $escaper->escapeHtml(__('Voucher code:')); ?>
-                <span class="text-red">*</span>
+                <span class="text-red-600">*</span>
             </label>
             <input
                 type="text"
@@ -99,6 +30,4 @@ use Magento\Framework\Escaper;
             <?= $escaper->escapeHtml(__('Apply Voucher')); ?>
         </button>
     </form>
-
-
 </div>