0117261 - implement twig frontend changes for adyen credit card payme…

…nt in order step
OXID-eSales · Feb 17, 2025 · c34eded · c34eded
1 parent fff0584
commit c34eded
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 34 deletions.
diff --git a/src/Core/ViewConfig.php b/src/Core/ViewConfig.php
@@ -308,6 +308,14 @@ public function isApplePay(
             ->isApplePay($payment);
     }
 
+    public function isOrderPaymentCreditCard(
+        FrontendController $oView,
+        ?Payment $payment
+    ): string {
+        return $this->getServiceFromContainer(JSAPITemplateConfiguration::class)
+            ->isOrderPaymentCreditCard($oView, $payment);
+    }
+
     /**
      * @throws ContainerExceptionInterface
      * @throws NotFoundExceptionInterface

diff --git a/src/Service/JSAPITemplateConfiguration.php b/src/Service/JSAPITemplateConfiguration.php
@@ -54,6 +54,16 @@ public function isApplePay(
         return $paymentId === Module::PAYMENT_APPLE_PAY_ID;
     }
 
+    public function isOrderPaymentCreditCard(
+        FrontendController $controller,
+        ?Payment $payment
+    ): bool {
+        $paymentId = $payment instanceof Payment ? $payment->getId() : '';
+
+        return $controller instanceof Ordercontroller
+        && $paymentId === Module::PAYMENT_CREDITCARD_ID;
+    }
+
     private function getViewData(
         ViewConfig $viewConfig,
         FrontendController $controller,

diff --git a/views/twig/extensions/themes/apex/page/checkout/order.html.twig b/views/twig/extensions/themes/apex/page/checkout/order.html.twig
@@ -41,7 +41,31 @@
             {% include sModuleId ~ "/payment/adyen_payment_psp.html.twig" %}
         </div>
 
+        {% if payment.isAdyenCreditCardPayment() %}
+            {% set payment=oView.getPayment()%}
+            <h2 class="h4 card-header card-title d-flex justify-content-between align-items-center">
+                {{ payment.oxpayments__oxdesc.value|raw }}
+            </h2>
+            <div id="oscadyencreditcard-container" data-paymentid="payment_oscadyencreditcard" class="card-body">
+            </div>
+
+            <div class="">
+                <button type="submit" class="adyen-checkout__button adyen-checkout__button--pay btn-lg pull-right largeButton" onclick="submitAdyenCreditCard()">
+                    <i class="fa fa-check"></i> {{ translate({ ident: "SUBMIT_ORDER" }) }}
+                </button>
+            </div>
+        {% endif %}
+
         <script type="text/javascript">
+            {% if payment.isAdyenCreditCardPayment() %}
+                function submitAdyenCreditCard() {
+                    submitForm = document.getElementById('orderConfirmAgbBottom');
+
+                    const event = new Event("submit", { bubbles: true, cancelable: true });
+                    submitForm.dispatchEvent(event);
+                }
+            {% endif %}
+
             document.getElementById('orderConfirmAgbBottom').appendChild(document.getElementById('adyenApexPsp'));
         </script>
     {% endif %}

diff --git a/views/twig/payment/adyen_assets.html.twig b/views/twig/payment/adyen_assets.html.twig
@@ -49,9 +49,13 @@
         const adyenResultCodeEl = document.getElementById('{{ oViewConf.getAdyenHtmlParamResultCodeName() }}');
         const adyenAmountCurrencyEl = document.getElementById('{{ oViewConf.getAdyenHtmlParamAmountCurrencyName() }}');
         const adyenAmountValueEl = document.getElementById('{{ oViewConf.getAdyenHtmlParamAmountValueName() }}');
+        {% if isOrderPage %}
+            const orderSubmitButton = document.getElementById("orderConfirmAgbBottom");
+        {% endif %}
 
         const adyenAsync = async function () {
             {{ oViewConf.getTemplateConfiguration(oView, payment)|raw }}
+            {% set orderPaymentCreditCard = oViewConf.isOrderPaymentCreditCard(oView, payment) %}
 
             const checkout = await AdyenCheckout(configuration);
             // Access the available payment methods for the session.
@@ -85,22 +89,31 @@
                             }
                         });
                 {% endif %}
-                {% if oView.handleAdyenAssets(adyenCreditCard) %}
+            {% elseif isOrderPage %}
+                {% if orderPaymentCreditCard %}
+                    orderSubmitButton.disabled = true;
+                    orderSubmitButton.title = '{{ oViewConf.getAdyenCreditCardTooltipText()|raw }}';
                     const cardComponent = checkout.create(
                         'card',
                         {
                             onFieldValid : function() {
-                                const paymentIdEl = document.getElementById('payment_{{adyenCreditCard}}');
-                                paymentIdEl.checked = true;
-                                nextStepEl.disabled = true;
+                                orderSubmitButton.disabled = false;
                             },
-
+                            onLoad: function () {
+                                document.querySelector("#oscadyencreditcard-container button").style.display = 'none';
+                            }
                         }
                     ).mount('#{{adyenCreditCard}}-container');
-                    cardComponent.paymentIdViewEl = document.getElementById('payment_{{adyenCreditCard}}').parentElement;
-                {% endif %}
-            {% elseif isOrderPage %}
-                {% if oViewConf.isApplePay(payment) %}
+
+                    submitForm.addEventListener('submit', function(event) {
+                        event.preventDefault();
+                        this.disabled = true;
+                        {% if isLog %}
+                            console.log("cardComp:", cardComponent)
+                        {% endif %}
+                        cardComponent.submit();
+                    });
+                {% elseif oViewConf.isApplePay(payment) %}
                     const applePayComponent = checkout.create('{{ templateCheckoutCreateId }}', configuration);
                         applePayComponent.isAvailable()
                             .then(() => {
@@ -171,21 +184,6 @@
                 }
                 return result;
             }
-
-            {% if isPaymentPage %}
-                nextStepEl.addEventListener("click", function(e) {
-                    if (this.dataset.adyensubmit !== '') {
-                        e.preventDefault();
-                        this.disabled = true;
-                        if (this.dataset.adyensubmit === '{{ adyenCreditCard }}') {
-                            cardComponent.submit();
-                        }
-                    }
-                }, false);
-                {% if paymentID is same as(adyenCreditCard) %}
-                    nextStepEl.disabled = true;
-                {% endif %}
-            {% endif %}
         }
         // Call adyenAsync
         adyenAsync();

diff --git a/views/twig/payment/adyen_assets_configuration.html.twig b/views/twig/payment/adyen_assets_configuration.html.twig
@@ -2,6 +2,7 @@
 const isLog = {% if isLog %}true{% else %}false{% endif %};
 const isPaymentPage = {% if isPaymentPage %}true{% else %}false{% endif %};
 const isOrderPage = {% if isOrderPage %}true{% else %}false{% endif %};
+const isCreditCard = {% if orderPaymentCreditCard %}true{% else %}false{% endif %};
 const configuration = {
     {{ configFields|raw }},
     onError: (error, component) => {
@@ -29,21 +30,17 @@ const configuration = {
             console.log('onSubmit:', state.data);
         }
         component.setStatus('loading');
-        if (isPaymentPage) {
+        if (isPaymentPage || isCreditCard) {
             state.data.deliveryAddress = configuration.deliveryAddress;
             state.data.shopperEmail = configuration.shopperEmail;
             state.data.shopperIP = configuration.shopperIP;
         }
-        makePayment(state.data)
+        makePayment(state.data) //this function is declared in adyen_assets.html.twig
             .then(response => {
                 if (isLog) {
                     console.log('onSubmit-response:', response);
                 }
                 if (response.action) {
-                    // Drop-in handles the action object from the /payments response
-                    if ('paymentIdViewEl' in component) {
-                        component.paymentIdViewEl.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
-                    }
                     component.handleAction(response.action);
                 } else {
                     setPspReference(response);

diff --git a/views/twig/payment/adyen_order_submit.html.twig b/views/twig/payment/adyen_order_submit.html.twig
@@ -2,8 +2,10 @@
 {% set containerId = oViewConf.getTemplatePayButtonContainerId(payment) %}
 {% set sModuleId = '@' ~ constant('\\OxidSolutionCatalysts\\Adyen\\Core\\Module::MODULE_ID') %}
 <div class="pull-right submitButton nextStep">
-    {{ translate({ ident: "OSC_ADYEN_BUY_NOW_PAY_WITH" }) }}
-    <div id="{{ containerId }}"
-         data-paymentid="payment_{{ sPaymentID }}"
-    ></div>
+    {% if not payment.isAdyenCreditCardPayment() %}
+        {{ translate({ ident: "OSC_ADYEN_BUY_NOW_PAY_WITH" }) }}
+        <div id="{{ containerId }}"
+             data-paymentid="payment_{{ sPaymentID }}"
+        ></div>
+    {% endif %}
 </div>