Merge pull request #223 from buckaroo-it/BP-3490-Add-a-Bancontact-opt…

…ion-to-let-consumer-fill-in-card-information-in-the-Shopware-checkout-instead-of-an-redirect

Bp 3490 add a bancontact option to let consumer fill in card information in the shopware checkout instead of an redirect

src/Handlers/BancontactPaymentHandler.php

@@ -5,8 +5,59 @@
 namespace Buckaroo\Shopware6\Handlers;
 
 use Buckaroo\Shopware6\PaymentMethods\Bancontact;
+use Shopware\Core\Checkout\Order\OrderEntity;
+use Shopware\Core\Framework\Validation\DataBag\RequestDataBag;
+use Shopware\Core\System\SalesChannel\SalesChannelContext;
 
 class BancontactPaymentHandler extends AsyncPaymentHandler
 {
     protected string $paymentClass = Bancontact::class;
+
+    private function isEncripted(RequestDataBag $dataBag): bool
+    {
+        return $dataBag->has('encryptedCardData');
+    }
+
+    /**
+     * Get parameters for specific payment method
+     *
+     * @param OrderEntity $order
+     * @param RequestDataBag $dataBag
+     * @param SalesChannelContext $salesChannelContext
+     * @param string $paymentCode
+     *
+     * @return array<mixed>
+     */
+    protected function getMethodPayload(
+        OrderEntity $order,
+        RequestDataBag $dataBag,
+        SalesChannelContext $salesChannelContext,
+        string $paymentCode
+    ): array {
+        if ($this->isEncripted($dataBag)) {
+            return [
+                'encryptedCardData' => $dataBag->get('encryptedCardData')
+            ];
+        }
+        return [];
+    }
+    /**
+     * Get method action for specific payment method
+     *
+     * @param RequestDataBag $dataBag
+     * @param SalesChannelContext $salesChannelContext
+     * @param string $paymentCode
+     *
+     * @return string
+     */
+    protected function getMethodAction(
+        RequestDataBag $dataBag,
+        SalesChannelContext $salesChannelContext,
+        string $paymentCode
+    ): string {
+        if ($this->isEncripted($dataBag)) {
+            return 'payEncrypted';
+        }
+        return parent::getMethodAction($dataBag, $salesChannelContext, $paymentCode);
+    }
 }

src/Resources/app/storefront/src/bancontact/buckaroo-payment.bancontact.js

@@ -0,0 +1,128 @@
+import Plugin from 'src/plugin-system/plugin.class';
+
+export default class BuckarooPaymentBancontact extends Plugin {
+    init()
+    {
+
+        this._listenToSubmit();
+        this._createScript(() => {
+            const bancontactmrcashInputs = [ 'bancontactmrcash_cardholdername', 'bancontactmrcash_cardnumber', 'bancontactmrcash_expirationmonth', 'bancontactmrcash_expirationyear'];
+            for (const fieldId of bancontactmrcashInputs) {
+                const field = document.getElementById(fieldId);
+                if (field) {
+                    field.addEventListener('change', this._handleInputChanged.bind(this));
+                }
+            }
+            this._getEncryptedData();
+        });
+    }
+
+    _createScript(callback)
+    {
+        const url = 'https://static.buckaroo.nl/script/ClientSideEncryption001.js';
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.src = url;
+        script.addEventListener('load', callback.bind(this), false);
+        document.head.appendChild(script);
+    }
+
+    _getEncryptedData()
+    {
+        const getEncryptedData = function (cardNumber, year, month, cardholder) {
+            window.BuckarooClientSideEncryption.V001.encryptCardData(
+                cardNumber,
+                year,
+                month,
+                '',
+                cardholder,
+                function (encryptedCardData) {
+                    const encryptedCardDataInput = document.getElementById('encryptedCardData');
+                    if (encryptedCardDataInput) {
+                        encryptedCardDataInput.value = encryptedCardData;
+                    }
+                }
+            );
+        };
+        const bancontactmrcash_cardnumber = document.getElementById('bancontactmrcash_cardnumber');
+        const bancontactmrcash_expirationyear = document.getElementById('bancontactmrcash_expirationyear');
+        const bancontactmrcash_expirationmonth = document.getElementById('bancontactmrcash_expirationmonth');
+        const bancontactmrcash_cardholdername = document.getElementById('bancontactmrcash_cardholdername');
+        if (bancontactmrcash_cardnumber && bancontactmrcash_expirationyear && bancontactmrcash_expirationmonth  && bancontactmrcash_cardholdername) {
+            getEncryptedData(bancontactmrcash_cardnumber.value, bancontactmrcash_expirationyear.value, bancontactmrcash_expirationmonth.value,  bancontactmrcash_cardholdername.value);
+        }
+    }
+
+    _handleInputChanged(event)
+    {
+        this._CheckValidate();
+        this._getEncryptedData();
+    }
+
+    _handleCheckField(field)
+    {
+        document.getElementById(field.id + 'Error').style.display = 'none';
+        switch (field.id) {
+            case 'bancontactmrcash_cardnumber':
+                if (!window.BuckarooClientSideEncryption.V001.validateCardNumber(field.value.replace(/\s+/g, ''))) {
+                    document.getElementById(field.id + 'Error').style.display = 'block';
+                    return false;
+                }
+                break;
+            case 'bancontactmrcash_cardholdername':
+                if (!window.BuckarooClientSideEncryption.V001.validateCardholderName(field.value)) {
+                    document.getElementById(field.id + 'Error').style.display = 'block';
+                    return false;
+                }
+                break;
+            case 'bancontactmrcash_expirationmonth':
+                if (!window.BuckarooClientSideEncryption.V001.validateMonth(field.value)) {
+                    document.getElementById(field.id + 'Error').style.display = 'block';
+                    return false;
+                }
+                break;
+            case 'bancontactmrcash_expirationyear':
+                if (!window.BuckarooClientSideEncryption.V001.validateYear(field.value)) {
+                    document.getElementById(field.id + 'Error').style.display = 'block';
+                    return false;
+                }
+                break;
+            default:
+        }
+        return true;
+    }
+
+    _CheckValidate()
+    {
+        let not_valid = false;
+        const buckarooInputs = ['bancontactmrcash_cardholdername', 'bancontactmrcash_cardnumber', 'bancontactmrcash_expirationmonth', 'bancontactmrcash_expirationyear'];
+        for (const fieldId of buckarooInputs) {
+            const field = document.getElementById(fieldId);
+            if (field) {
+                if (!this._handleCheckField(field)) {
+                    not_valid = true;
+                }
+            }
+        }
+        return this._disableConfirmFormSubmit(not_valid);
+    }
+
+    _disableConfirmFormSubmit(disable)
+    {
+        const field = document.getElementById('confirmFormSubmit');
+        if (field) {
+            document.getElementById('confirmFormSubmit').disabled = disable;
+        }
+        return disable;
+    }
+    _validateOnSubmit(e)
+    {
+        e.preventDefault();
+        let valid = !this._CheckValidate();
+        document.$emitter.publish('buckaroo_payment_validate', {valid, type:'bancontactmrcash'});
+    }
+    _listenToSubmit()
+    {
+        document.$emitter.subscribe('buckaroo_payment_submit', this._validateOnSubmit.bind(this))
+    }
+}

src/Resources/app/storefront/src/main.js

@@ -7,6 +7,7 @@ import BuckarooLoadScripts from './scripts/scripts.plugin';
 import IdealQrPlugin from './ideal-qr/ideal-qr.plugin';
 import BuckarooPayByBankSelect from './paybybank/select.plugin';
 import BuckarooPayByBankLogo from './paybybank/logo.plugin';
+import BuckarooBanContact from './bancontact/buckaroo-payment.bancontact';
 
 const PluginManager = window.PluginManager;
 PluginManager.register('BuckarooPaymentValidateSubmit', BuckarooPaymentValidateSubmit);
@@ -16,5 +17,6 @@ PluginManager.register('PaypalExpressPlugin', PaypalExpressPlugin, '[data-paypal
 PluginManager.register('BuckarooIdealQrPlugin', IdealQrPlugin, '[data-ideal-qr]');
 PluginManager.register('BuckarooApplePayPlugin', ApplePayPlugin, '[data-bk-applepay]');
 PluginManager.register('BuckarooLoadScripts', BuckarooLoadScripts);
+PluginManager.register('BuckarooBanContact', BuckarooBanContact);
 PluginManager.register('BuckarooPayByBankSelect', BuckarooPayByBankSelect, '[data-bk-select]');
 PluginManager.register('BuckarooPayByBankLogo', BuckarooPayByBankLogo, '[data-bk-paybybank-logo]');

src/Resources/config/config.xml

@@ -691,6 +691,32 @@
             <label lang="de-DE">Buckaroo Gebühr</label>
 			<label lang="fr-FR">Frais de buckaroo</label>
         </input-field>
+
+        <input-field type="single-select">
+            <name>redirectBancontact</name>
+            <label lang="en-GB">Client Side Encryption</label>
+            <label lang="nl-NL">Client Side Encryption</label>
+            <label lang="de-DE">Clientseitige Verschlüsselung</label>
+            <label lang="fr-FR">Cryptage côté client</label>
+            <defaultValue>enabledRedirect</defaultValue>
+            <options>
+                <option>
+                    <id>enabledRedirect</id>
+                    <name lang="en-GB">Enabled</name>
+                    <name lang="nl-NL">Ingeschakeld</name>
+                    <name lang="de-DE">Aktiviert</name>
+                    <name lang="fr-FR">Activé</name>
+                </option>
+                <option>
+                    <id>disabledRedirect</id>
+                    <name lang="en-GB">Disabled</name>
+                    <name lang="nl-NL">Uitgeschakeld</name>
+                    <name lang="de-DE">Deaktiviert</name>
+                    <name lang="fr-FR">Désactivé</name>
+                </option>
+            </options>
+        </input-field>
+
     </card>
 
     <card>