Adyen · candemiralp · Mar 7, 2025 · Mar 7, 2025 · Mar 7, 2025 · Mar 7, 2025
@@ -173,6 +173,16 @@ public function getAmount()
         }
     }
 
+    /**
+     * Returns the country code required for checkout component
+     *
+     * @return string
+     */
+    public function getCountryId(): string
+    {
+        return $this->backendSession->getQuote()->getBillingAddress()->getCountryId();
+    }
+
     /**
      * @return array
      */

@@ -0,0 +1,94 @@
+<?php
+/**
+ *
+ * Adyen Payment module (https://www.adyen.com/)
+ *
+ * Copyright (c) 2025 Adyen N.V. (https://www.adyen.com/)
+ * See LICENSE.txt for license details.
+ *
+ * Author: Adyen <magento@adyen.com>
+ */
+
+namespace Adyen\Payment\Test\Block\Form;
+
+use Adyen\Payment\Block\Form\Moto;
+use Adyen\Payment\Helper\Config as AdyenConfig;
+use Adyen\Payment\Helper\Data;
+use Adyen\Payment\Helper\Installments;
+use Adyen\Payment\Logger\AdyenLogger;
+use Magento\Backend\Model\Session\Quote;
+use Magento\Checkout\Model\Session;
+use Magento\Framework\View\Element\Template\Context;
+use Magento\Payment\Model\Config as PaymentConfig;
+use Magento\Quote\Model\Quote as QuoteModel;
+use Magento\Sales\Api\Data\OrderAddressInterface;
+use PHPUnit\Framework\MockObject\MockObject;
+use PHPUnit\Framework\TestCase;
+
+class MotoTest extends TestCase
+{
+    protected ?Moto $motoFormBlock;
+    protected Context|MockObject $contextMock;
+    protected PaymentConfig|MockObject $paymentConfigMock;
+    protected Data|MockObject $adyenHelperMock;
+    protected Session|MockObject $checkoutSessionMock;
+    protected Installments|MockObject $installmentsHelperMock;
+    protected AdyenLogger|MockObject $adyenLoggerMock;
+    protected AdyenConfig|MockObject $adyenConfigMock;
+    protected Quote|MockObject $backendSessionMock;
+
+    /**
+     * @return void
+     */
+    protected function setUp(): void
+    {
+        $this->contextMock = $this->createMock(Context::class);
+        $this->paymentConfigMock = $this->createMock(PaymentConfig::class);
+        $this->adyenHelperMock = $this->createMock(Data::class);
+        $this->checkoutSessionMock = $this->createMock(Session::class);
+        $this->installmentsHelperMock = $this->createMock(Installments::class);
+        $this->adyenLoggerMock = $this->createMock(AdyenLogger::class);
+        $this->adyenConfigMock = $this->createMock(AdyenConfig::class);
+        $this->backendSessionMock = $this->createMock(Quote::class);
+
+        $this->motoFormBlock = new Moto(
+            $this->contextMock,
+            $this->paymentConfigMock,
+            $this->adyenHelperMock,
+            $this->checkoutSessionMock,
+            $this->installmentsHelperMock,
+            $this->adyenLoggerMock,
+            $this->adyenConfigMock,
+            $this->backendSessionMock
+        );
+    }
+
+    /**
+     * @return void
+     */
+    protected function tearDown(): void
+    {
+        $this->motoFormBlock = null;
+    }
+
+    /**
+     * @return void
+     */
+    public function testGetCountryId()
+    {
+        $countryId = "NL";
+
+        $billingAddressMock = $this->createMock(OrderAddressInterface::class);
+        $billingAddressMock->method('getCountryId')->willReturn($countryId);
+
+        $quoteModelMock = $this->createMock(QuoteModel::class);
+        $quoteModelMock->method('getBillingAddress')->willReturn($billingAddressMock);
+
+        $this->backendSessionMock->method('getQuote')->willReturn($quoteModelMock);
+
+        $this->assertEquals(
+            $countryId,
+            $this->motoFormBlock->getCountryId()
+        );
+    }
+}
@@ -13,7 +13,7 @@
 /**
  * @var \Adyen\Payment\Block\Form\Moto $block
  */
-$code = $block->escapeHtml($block->getMethodCode());
+$code = $escaper->escapeHtml($block->getMethodCode());
 $ccType = $block->getInfoData('cc_type');
 $ccExpMonth = $block->getInfoData('cc_exp_month');
 $ccExpYear = $block->getInfoData('cc_exp_year');
@@ -49,60 +49,65 @@ $motoMerchantAccounts = $block->getMotoMerchantAccounts();
     <?php endif ?>
     <div id="cardContainer-<?= /* @noEscape */ $code; ?>" style=""></div>
 
-    <script>
+    <?php
+    $availableCcTypesByAlt = json_encode($block->getCcAvailableTypesByAlt());
+    $countryCode = $block->getCountryId();
+    $environment = $block->getCheckoutEnvironment();
+    $locale = $block->getLocale();
+    $amount = $block->getAmount();
+    $formattedInstallments = $block->getFormattedInstallments();
+
+    $scriptString = <<<script
         define(
             'renderCheckoutComponent',
             [
                 'jquery',
-                'Magento_Sales/order/create/scripts',
-                'Magento_Sales/order/create/form',
                 'Adyen_Payment/js/adyen'
             ],
-            function($, scripts, form, AdyenCheckout) {
-                var card = null;
+            function($, AdyenWeb) {
+                let card = null;
                 return {
                     status: function () {
                         return card;
                     },
                     init: function (clientKey, amount, installmentAmounts) {
-                        (async function () { // RequireJS does not support async callback
-                            var ccTypes = <?= /* @noEscape */ json_encode($block->getCcAvailableTypesByAlt()); ?>;
-
-                            // Get cc type by adyen cc type
-                            var getCcCodeByAltCode = function (altCode) {
-                                if (ccTypes.hasOwnProperty(altCode)) {
-                                    return ccTypes[altCode];
-                                }
-
-                                return "";
-                            }
-
-                            var cardNode = document.getElementById("cardContainer-<?= /* @noEscape */ $code; ?>");
+                        (async function () {
+                            let ccTypes = $availableCcTypesByAlt;
+                            let cardNode = document.getElementById("cardContainer-$code");
 
-                            var checkout = await AdyenCheckout({
+                            let checkoutComponent = await window.AdyenWeb.AdyenCheckout({
                                 clientKey: clientKey,
-                                environment: "<?= /* @noEscape */ $block->getCheckoutEnvironment(); ?>",
-                                locale: "<?= /* @noEscape */ $block->getLocale(); ?>",
+                                countryCode: "$countryCode",
+                                environment: "$environment",
+                                locale: "$locale",
                                 risk: {
                                     enabled: false
                                 },
                             });
 
-                            try {
-                                card = checkout.create('card', {
-                                    brands: Object.keys(ccTypes),
-                                    hideCVC: true,
-                                    enableStoreDetails: false,
-                                    hasHolderName: true,
-                                    installmentOptions: installmentAmounts,
-                                    showInstallmentAmounts: true,
-                                    amount: amount,
-                                    onChange: function (state) {
-                                        if (state.isValid) {
-                                            $('#<?= /* @noEscape */ $code; ?>-statedata').val(JSON.stringify(state.data));
-                                        }
+                            let cardComponentConfiguration = {
+                                brands: Object.keys(ccTypes),
+                                hideCVC: true,
+                                enableStoreDetails: false,
+                                hasHolderName: true,
+                                installmentOptions: installmentAmounts,
+                                showInstallmentAmounts: true,
+                                showPayButton: false,
+                                amount: amount,
+                                onChange: function (state) {
+                                    if (state.isValid) {
+                                        $('#$code-statedata').val(JSON.stringify(state.data));
                                     }
-                                });
+                                }
+                            };
+
+                            try {
+                                card = window.AdyenWeb.createComponent(
+                                    'card',
+                                    checkoutComponent,
+                                    cardComponentConfiguration
+                                );
+
                                 card.mount(cardNode);
                             } catch (e) {
                                 console.log(e);
@@ -123,13 +128,13 @@ $motoMerchantAccounts = $block->getMotoMerchantAccounts();
                 'renderCheckoutComponent',
             ],
             function ($, renderCheckoutComponent) {
-                $("#<?= /* @noEscape */ $code; ?>_merchant_accounts").on("change", function () {
+                $("#${code}_merchant_accounts").on("change", function () {
                     if (renderCheckoutComponent.status() !== null) {
                         renderCheckoutComponent.unmount();
                     }
 
-                    let amount = <?= /* @noEscape */ $block->getAmount(); ?>;
-                    let installmentAmounts = <?= /* @noEscape */ $block->getFormattedInstallments(); ?>;
+                    let amount = $amount;
+                    let installmentAmounts = $formattedInstallments;
 
                     let clientKey = $(this).find("option:selected").attr('data-adyen-client-key');
                     let merchantAccount = $(this).find("option:selected").val();
@@ -138,10 +143,13 @@ $motoMerchantAccounts = $block->getMotoMerchantAccounts();
                         return;
                     }
 
-                    $("#<?= /* @noEscape */ $code; ?>-merchant-account").val(merchantAccount);
+                    $("#$code-merchant-account").val(merchantAccount);
                     renderCheckoutComponent.init(clientKey, amount, installmentAmounts);
                 });
             }
         );
-    </script>
+    script;
+    ?>
+
+    <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
 </fieldset>
@@ -20,20 +20,27 @@ if (!isset($escaper)) {
 }
 ?>
 
-<script>
+<?php
+$minData = $escaper->escapeHtml($block->getMinExpiryTimestamp());
+$maxData = $escaper->escapeHtml($block->getMaxExpiryTimestamp());
+$defaultExpiry = $block->escapeJs($block->getDefaultExpiryDate());
+
+$scriptString = <<<script
     require(["jquery", "mage/calendar"],
         function ($) {
             $("#adyen_pbl_expires_at").calendar({
                 changeYear: true,
                 changeMonth: true,
                 buttonText: 'Select Expiry Date',
                 dateFormat: 'dd-mm-yy',
-                minDate: new Date(<?=$escaper->escapeHtml($block->getMinExpiryTimestamp())?>),
-                maxDate: new Date(<?=$escaper->escapeHtml($block->getMaxExpiryTimestamp())?>)
-            }).val('<?= $block->escapeJs($block->getDefaultExpiryDate()) ?>');
-
+                minDate: new Date($minData),
+                maxDate: new Date($maxData)
+            }).val('$defaultExpiry');
         });
-</script>
+script;
+?>
+
+<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
 
 <fieldset
         class="admin__fieldset payment-method"

@@ -9,52 +9,10 @@
  */
 
 #payment_form_adyen_moto {
-    padding-left: 30px;
+    padding-left: 25px;
     margin-top: 15px;
 }
 
-.adyen-checkout-card__form .adyen-checkout__input iframe{
-    max-height: 40px;
-}
-
-#payment_form_adyen_moto .admin__field{
-    margin-bottom: 10px;
-}
-
-#payment_form_adyen_moto .helper-text{
-    font-size: 11px;
-    color: rgb(144, 162, 189);
-    font-weight: 100;
-}
-
-#payment_form_adyen_moto #adyen_moto_cc_owner {
-    width: 225px;
-    border: none;
-    padding: 0;
-    color: rgb(0, 27, 43);
-    font-size: 16px;
-    font-weight: 400;
-    margin-top: 10px;
-}
-
-#payment_form_adyen_moto #adyen_moto_cc_owner .input-text:focus {
-    border: none;
-    box-shadow: none;
-}
-
-#payment_form_adyen_moto #adyen_moto_cc_owner::placeholder,
-#payment_form_adyen_moto #adyen_moto_cc_owner:placeholder-shown
-{
-    color: rgb(144, 162, 189);
-    font-weight: 200;
-}
-
-#payment_form_adyen_moto .cc-type-VI {
-    margin: 10px;
-    display: inline-block;
-    font-weight: bold;
-}
-
 #adyen_moto_merchant_accounts {
     margin-bottom: 15px;
 }