Refactor the complete oneclick process as it was not correctly send to...

Refactor the complete oneclick process as it was not correctly send to checkout api. Build a converter to convert oneclick,recurring to enableOneclick and enableRecurring to make it easier for the merchants to configure. Update version so upgrade script will be executed. Added converter back to oneclick,recurring to be backwards compatible with current billing agreements. Made fixes for oneclick and bcmc. added styles for cards component and oneclick component.

Block/Redirect/Redirect.php

@@ -235,9 +235,7 @@ class Redirect extends \Magento\Payment\Block\Form
                 );
                 $formFields['shopperEmail'] = $shopperEmail;
                 // recurring
-                $recurringType = trim($this->_adyenHelper->getAdyenAbstractConfigData(
-                    'recurring_type'
-                ));
+                $recurringType = $this->_adyenHelper->getRecurringTypeFromOneclickRecurringSetting();
                 $brandCode = $this->_order->getPayment()->getAdditionalInformation(
                     \Adyen\Payment\Observer\AdyenHppDataAssignObserver::BRAND_CODE
                 );

Gateway/Command/PayByMailCommand.php

@@ -183,7 +183,7 @@ class PayByMailCommand implements CommandInterface
 
         $formFields['shopperEmail']      = $shopperEmail;
         // recurring
-        $recurringType                   = trim($this->_adyenHelper->getAdyenAbstractConfigData('recurring_type', $storeId));
+        $recurringType                   = $this->_adyenHelper->getRecurringTypeFromOneclickRecurringSetting($storeId);
         
         $sessionValidity = $this->_adyenHelper->getAdyenPayByMailConfigData('session_validity', $storeId);
 

Gateway/Request/CcAuthorizationDataBuilder.php

@@ -65,7 +65,11 @@ class CcAuthorizationDataBuilder implements BuilderInterface
         $storeId = $order->getStoreId();
         $request = [];
 
+        // If ccType is set use this. For bcmc you need bcmc otherwise it will fail
         $request['paymentMethod']['type'] = "scheme";
+        if ($payment->getAdditionalInformation(AdyenCcDataAssignObserver::CC_TYPE)) {
+            $request['paymentMethod']['type'] = $payment->getAdditionalInformation(AdyenCcDataAssignObserver::CC_TYPE);
+        }
 
         if ($cardNumber = $payment->getAdditionalInformation(AdyenCcDataAssignObserver::CREDIT_CARD_NUMBER)) {
             $request['paymentMethod']['encryptedCardNumber'] = $cardNumber;

Gateway/Request/RecurringDataBuilder.php

@@ -20,6 +20,7 @@
  *
  * Author: Adyen <magento@adyen.com>
  */
+
 namespace Adyen\Payment\Gateway\Request;
 
 use Magento\Payment\Gateway\Request\BuilderInterface;
@@ -57,9 +58,11 @@ class RecurringDataBuilder implements BuilderInterface
         $this->_adyenLogger = $adyenLogger;
     }
 
+
     /**
      * @param array $buildSubject
      * @return array
+     * @throws \Magento\Framework\Exception\LocalizedException
      */
     public function build(array $buildSubject)
     {
@@ -68,49 +71,26 @@ class RecurringDataBuilder implements BuilderInterface
         /** @var \Magento\Payment\Gateway\Data\PaymentDataObject $paymentDataObject */
         $paymentDataObject = \Magento\Payment\Gateway\Helper\SubjectReader::readPayment($buildSubject);
         $payment = $paymentDataObject->getPayment();
-        // Needs to change when oneclick,cc using facade impl.
-        $paymentMethodCode = $payment->getMethodInstance()->getCode();
-        $customerId = $payment->getOrder()->getCustomerId();
 
         $storeId = null;
         if ($this->appState->getAreaCode() === \Magento\Backend\App\Area\FrontNameResolver::AREA_CODE) {
             $storeId = $payment->getOrder()->getStoreId();
         }
-        $recurringType = $this->adyenHelper->getAdyenAbstractConfigData('recurring_type', $storeId);
 
-        // set the recurring type
-        $recurringContractType = null;
-        if ($recurringType) {
-            if ($paymentMethodCode == \Adyen\Payment\Model\Ui\AdyenOneclickConfigProvider::CODE) {
-                /*
-                 * For ONECLICK look at the recurringPaymentType that the merchant
-                 * has selected in Adyen ONECLICK settings
-                 */
-                if ($payment->getAdditionalInformation('customer_interaction')) {
-                    $recurringContractType = \Adyen\Payment\Model\RecurringType::ONECLICK;
-                } else {
-                    $recurringContractType =  \Adyen\Payment\Model\RecurringType::RECURRING;
-                }
-            } elseif ($paymentMethodCode == \Adyen\Payment\Model\Ui\AdyenCcConfigProvider::CODE) {
-                if ($payment->getAdditionalInformation("store_cc") == "" &&
-                    ($recurringType == "ONECLICK,RECURRING" || $recurringType == "RECURRING")) {
-                    $recurringContractType = \Adyen\Payment\Model\RecurringType::RECURRING;
-                } elseif ($payment->getAdditionalInformation("store_cc") == "1") {
-                    $recurringContractType = $recurringType;
-                }
-            } else {
-                $recurringContractType = $recurringType;
-                $result['paymentMethod']['storeDetails'] = "true";
-            }
+        $enableOneclick = $this->adyenHelper->getAdyenAbstractConfigData('enable_oneclick', $storeId);
+        $enableRecurring = $this->adyenHelper->getAdyenAbstractConfigData('enable_recurring', $storeId);
+
+        if ($enableOneclick) {
+            $result['enableOneclick'] = true;
         }
-//        $this->_adyenLogger->addAdyenDebug("recurring?: ". $recurringContractType);
 
+        if ($enableRecurring) {
+            $result['enableRecurring'] = true;
+        }
 
-//        // only when recurringContractType is set and when a customer is loggedIn
-//        if ($recurringContractType && $customerId > 0) {
-//            $recurring = ['contract' => $recurringContractType];
-//            $result['recurring'] = $recurring;
-//        }
+        if ($payment->getAdditionalInformation("store_cc") === "1") {
+            $result['paymentMethod']['storeDetails'] = true;
+        }
 
         return $result;
     }

Helper/Data.php

@@ -35,8 +35,8 @@ class Data extends AbstractHelper
     const LIVE = 'live';
     const CHECKOUT_CONTEXT_URL_LIVE = 'https://checkoutshopper-live.adyen.com/checkoutshopper/';
     const CHECKOUT_CONTEXT_URL_TEST = 'https://checkoutshopper-test.adyen.com/checkoutshopper/';
-    const CHECKOUT_COMPONENT_JS_LIVE = 'https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/2.0.0-beta.4/adyen.js';
-    const CHECKOUT_COMPONENT_JS_TEST = 'https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/2.0.0-beta.4/adyen.js';
+    const CHECKOUT_COMPONENT_JS_LIVE = 'https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/2.0.0/adyen.js';
+    const CHECKOUT_COMPONENT_JS_TEST = 'https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/2.0.0/adyen.js';
 
     /**
      * @var \Magento\Framework\Encryption\EncryptorInterface
@@ -111,7 +111,7 @@ class Data extends AbstractHelper
     /**
      * @var \Adyen\Payment\Model\Billing\AgreementFactory
      */
-    protected $_billingAgreementFactory;
+    protected $billingAgreementFactory;
 
     /**
      * Data constructor.
@@ -165,6 +165,7 @@ class Data extends AbstractHelper
         $this->adyenLogger = $adyenLogger;
         $this->storeManager = $storeManager;
         $this->cache = $cache;
+        $this->billingAgreementFactory = $billingAgreementFactory;
     }
 
     /**
@@ -1356,7 +1357,8 @@ class Data extends AbstractHelper
      * @return \Adyen\Client
      * @throws \Adyen\AdyenException
      */
-	private function createAdyenClient() {
+    private function createAdyenClient()
+    {
         return new \Adyen\Client();
     }
 
@@ -1416,7 +1418,8 @@ class Data extends AbstractHelper
      * @param int|null $storeId
      * @return string
      */
-	public function getCheckoutContextUrl($storeId = null) {
+    public function getCheckoutContextUrl($storeId = null)
+    {
         if ($this->isDemoMode($storeId)) {
             return self::CHECKOUT_CONTEXT_URL_TEST;
         }
@@ -1438,11 +1441,84 @@ class Data extends AbstractHelper
      * @param int|null $storeId
      * @return string
      */
-	public function getCheckoutCardComponentJs($storeId = null) {
+    public function getCheckoutCardComponentJs($storeId = null)
+    {
         if ($this->isDemoMode($storeId)) {
             return self::CHECKOUT_COMPONENT_JS_TEST;
         }
 
         return self::CHECKOUT_COMPONENT_JS_LIVE;
     }
+
+    public function createAdyenBillingAgreement($order, $additionalData)
+    {
+        if (!empty($additionalData['recurring.recurringDetailReference'])) {
+            $listRecurringContracts = null;
+            try {
+                // Get or create billing agreement
+                $billingAgreement = $this->billingAgreementFactory->create();
+                $billingAgreement->load($additionalData['recurring.recurringDetailReference'], 'reference_id');
+
+                // check if BA exists
+                if (!($billingAgreement && $billingAgreement->getAgreementId() > 0 && $billingAgreement->isValid())) {
+                    // create new BA
+                    $this->adyenLogger->addAdyenDebug("Creating new Billing Agreement");
+                    $billingAgreement = $this->billingAgreementFactory->create();
+                    $billingAgreement->setStoreId($order->getStoreId());
+                    $billingAgreement->importOrderPayment($order->getPayment());
+                    $message = __('Created billing agreement #%1.',
+                        $additionalData['recurring.recurringDetailReference']);
+                } else {
+
+                    $billingAgreement->setIsObjectChanged(true);
+                    $message = __('Updated billing agreement #%1.',
+                        $additionalData['recurring.recurringDetailReference']);
+                }
+
+                // Populate billing agreement data
+                $billingAgreement->setCcBillingAgreement($additionalData);
+                if ($billingAgreement->isValid()) {
+
+                    // save into sales_billing_agreement_order
+                    $billingAgreement->addOrderRelation($order);
+                    // add to order to save agreement
+                    $order->addRelatedObject($billingAgreement);
+                } else {
+                    $message = __('Failed to create billing agreement for this order.');
+                    throw new \Exception($message);
+                }
+
+            } catch (\Exception $exception) {
+                $message = $exception->getMessage();
+                $this->adyenLogger->error("exception: " . $message);
+            }
+
+            $comment = $order->addStatusHistoryComment($message);
+
+            $order->addRelatedObject($comment);
+        }
+    }
+
+    /**
+     * For backwards compatibility get the recurringType used for HPP + current billing agreements
+     *
+     * @param null $storeId
+     * @return null|string
+     */
+    public function getRecurringTypeFromOneclickRecurringSetting($storeId = null)
+    {
+        $enableOneclick = $this->getAdyenAbstractConfigData('enable_oneclick', $storeId);
+        $enableRecurring = $this->getAdyenAbstractConfigData('enable_recurring', $storeId);
+
+        if ($enableOneclick && $enableRecurring) {
+            return \Adyen\Payment\Model\RecurringType::ONECLICK_RECURRING;
+        } elseif ($enableOneclick && !$enableRecurring) {
+            return \Adyen\Payment\Model\RecurringType::ONECLICK;
+        } elseif (!$enableOneclick && $enableRecurring) {
+            return \Adyen\Payment\Model\RecurringType::RECURRING;
+        } else {
+            return \Adyen\Payment\Model\RecurringType::NONE;
+        }
+        return null;
+    }
 }

Model/Api/PaymentRequest.php

@@ -119,6 +119,8 @@ class PaymentRequest extends DataObject
             throw new \Magento\Framework\Exception\LocalizedException(__('3D secure failed'));
         }
 
+        $this->_adyenHelper->createAdyenBillingAgreement($order, $result['additionalData']);
+
         return $result;
     }
 

Model/Billing/Agreement.php

@@ -203,7 +203,8 @@ class Agreement extends \Magento\Paypal\Model\Billing\Agreement
         }
         $expiryDate = explode('/', $contractDetail['expiryDate']);
 
-        $recurringType = $this->_adyenHelper->getAdyenAbstractConfigData('recurring_type');
+        $recurringType = $this->_adyenHelper->getRecurringTypeFromOneclickRecurringSetting();
+
         $agreementData = [
             'card' => [
                 'holderName' => $contractDetail['cardHolderName'],

Model/Ui/AdyenCcConfigProvider.php

@@ -130,10 +130,10 @@ class AdyenCcConfigProvider implements ConfigProviderInterface
             ]
         ]);
 
-        $recurringType = $this->_adyenHelper->getAdyenAbstractConfigData('recurring_type');
+        $enableOneclick = $this->_adyenHelper->getAdyenAbstractConfigData('enable_oneclick');
 
         $canCreateBillingAgreement = false;
-        if ($recurringType == "ONECLICK" || $recurringType == "ONECLICK,RECURRING") {
+        if ($enableOneclick) {
             $canCreateBillingAgreement = true;
         }
 

Model/Ui/AdyenOneclickConfigProvider.php

@@ -138,9 +138,9 @@ class AdyenOneclickConfigProvider implements ConfigProviderInterface
 		$config['payment']['adyenOneclick']['checkoutUrl'] = $this->_adyenHelper->getCheckoutContextUrl($this->_storeManager->getStore()->getId());
 		$config['payment']['adyenOneclick']['locale'] = $this->_adyenHelper->getStoreLocale($this->_storeManager->getStore()->getId());
 
-        $recurringType = $this->_adyenHelper->getAdyenAbstractConfigData('recurring_type');
+        $enableOneclick = $this->_adyenHelper->getAdyenAbstractConfigData('enable_oneclick');
         $canCreateBillingAgreement = false;
-        if ($recurringType == "ONECLICK" || $recurringType == "ONECLICK,RECURRING") {
+        if ($enableOneclick) {
             $canCreateBillingAgreement = true;
         }
 

Setup/UpgradeData.php

+<?php
+/**
+ *                       ######
+ *                       ######
+ * ############    ####( ######  #####. ######  ############   ############
+ * #############  #####( ######  #####. ######  #############  #############
+ *        ######  #####( ######  #####. ######  #####  ######  #####  ######
+ * ###### ######  #####( ######  #####. ######  #####  #####   #####  ######
+ * ###### ######  #####( ######  #####. ######  #####          #####  ######
+ * #############  #############  #############  #############  #####  ######
+ *  ############   ############  #############   ############  #####  ######
+ *                                      ######
+ *                               #############
+ *                               ############
+ *
+ * Adyen Payment module (https://www.adyen.com/)
+ *
+ * Copyright (c) 2015 Adyen BV (https://www.adyen.com/)
+ * See LICENSE.txt for license details.
+ *
+ * Author: Adyen <magento@adyen.com>
+ */
+
+namespace Adyen\Payment\Setup;
+
+use Magento\Framework\Setup\ModuleContextInterface;
+use Magento\Framework\Setup\ModuleDataSetupInterface;
+use Magento\Framework\Setup\UpgradeDataInterface;
+use Magento\Framework\App\Config\Storage\WriterInterface;
+
+/**
+ * Class UpgradeData
+ * @package Adyen\Payment\Setup
+ */
+class UpgradeData implements UpgradeDataInterface
+{
+
+    /**
+     * @var WriterInterface
+     */
+    private $configWriter;
+
+    /**
+     * @var ReinitableConfigInterface
+     */
+    private $reinitableConfig;
+
+    public function __construct(
+        WriterInterface $configWriter,
+        ReinitableConfigInterface $reinitableConfig
+    ) {
+        $this->configWriter = $configWriter;
+        $this->reinitableConfig = $reinitableConfig;
+    }
+
+    /**
+     * @param ModuleDataSetupInterface $setup
+     * @param ModuleContextInterface $context
+     */
+    public function upgrade(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
+    {
+        $setup->startSetup();
+
+        if (version_compare($context->getVersion(), '2.4.4', '<')) {
+            $this->updateSchemaVersion244($setup);
+        }
+
+        $setup->endSetup();
+    }
+
+    /**
+     * Upgrade to 2.4.4
+     * We use new configuration options to define if you want to store the payment for oneclick or
+     * recurring or a combination of those in a more friendly way and make it easier to integrate with our checkout API
+     *
+     * @param ModuleDataSetupInterface $setup
+     */
+    public function updateSchemaVersion244(ModuleDataSetupInterface $setup)
+    {
+        // convert billing agreement select box to oneclick recurring settings
+        $pathEnableOneclick = "payment/adyen_abstract/enable_oneclick";
+        $pathEnableRecurring = "payment/adyen_abstract/enable_recurring";
+        $configDataTable = $setup->getTable('core_config_data');
+        $connection = $setup->getConnection();
+
+        $select = $connection->select()
+            ->from($configDataTable)
+            ->where(
+                'path = ?',
+                'payment/adyen_abstract/recurring_type'
+            );
+        $configRecurringTypeValues = $connection->fetchAll($select);
+
+        foreach ($configRecurringTypeValues as $configRecurringTypeValue) {
+            $scope = $configRecurringTypeValue['scope'];
+            $scopeId = $configRecurringTypeValue['scope_id'];
+            switch ($configRecurringTypeValue['value']) {
+                case \Adyen\Payment\Model\RecurringType::ONECLICK:
+                    $this->configWriter->save(
+                        $pathEnableOneclick,
+                        '1',
+                        $scope,
+                        $scopeId
+                    );
+                    $this->configWriter->save(
+                        $pathEnableRecurring,
+                        '0',
+                        $scope,
+                        $scopeId
+                    );
+                    break;
+                case \Adyen\Payment\Model\RecurringType::ONECLICK_RECURRING:
+                    $this->configWriter->save(
+                        $pathEnableOneclick,
+                        '1',
+                        $scope,
+                        $scopeId
+                    );
+                    $this->configWriter->save(
+                        $pathEnableRecurring,
+                        '1',
+                        $scope,
+                        $scopeId
+                    );
+                    break;
+                case \Adyen\Payment\Model\RecurringType::RECURRING:
+                    $this->configWriter->save(
+                        $pathEnableOneclick,
+                        '0',
+                        $scope,
+                        $scopeId
+                    );
+                    $this->configWriter->save(
+                        $pathEnableRecurring,
+                        '1',
+                        $scope,
+                        $scopeId
+                    );
+                    break;
+                case \Adyen\Payment\Model\RecurringType::NONE:
+                    $this->configWriter->save(
+                        $pathEnableOneclick,
+                        '0',
+                        $scope,
+                        $scopeId
+                    );
+                    $this->configWriter->save(
+                        $pathEnableRecurring,
+                        '0',
+                        $scope,
+                        $scopeId
+                    );
+                    break;
+            }
+        }
+
+        // re-initialize otherwise it will cause errors
+        $this->reinitableConfig->reinit();
+    }
+}
\ No newline at end of file

Test/Unit/Setup/UpgradeDataTest.php

+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+namespace Magento\Store\Test\Unit\Setup;
+
+use Magento\Framework\DB\Adapter\AdapterInterface;
+use Magento\Framework\DB\Select;
+use Magento\Framework\Setup\ModuleContextInterface;
+use Magento\Framework\Setup\ModuleDataSetupInterface;
+use Magento\Framework\TestFramework\Unit\Helper\ObjectManager;
+use Adyen\Payment\Setup\UpgradeData;
+use PHPUnit_Framework_MockObject_MockObject as MockObject;
+
+class UpgradeDataTest extends \PHPUnit\Framework\TestCase
+{
+    /**
+     * @var ObjectManager
+     */
+    private $objectManagerHelper;
+
+    /**
+     * @var ModuleDataSetupInterface|MockObject
+     */
+    private $setupMock;
+
+    /**
+     * @var AdapterInterface|MockObject
+     */
+    private $connectionMock;
+
+    /**
+     * @var ModuleContextInterface|MockObject
+     */
+    private $contextMock;
+
+    /**
+     * @var UpgradeData
+     */
+    protected $model;
+
+    protected function setUp()
+    {
+        $this->objectManagerHelper = new ObjectManager($this);
+
+        $this->connectionMock = $this->getMockBuilder(AdapterInterface::class)
+            ->getMockForAbstractClass();
+        $this->setupMock = $this->getMockBuilder(ModuleDataSetupInterface::class)
+            ->getMockForAbstractClass();
+        $this->setupMock->expects($this->any())
+            ->method('getConnection')
+            ->willReturn($this->connectionMock);
+        $this->contextMock = $this->getMockBuilder(ModuleContextInterface::class)
+            ->disableOriginalConstructor()
+            ->getMockForAbstractClass();
+
+        $this->model = new UpgradeData();
+    }
+
+    /**
+     * @param array $groupList
+     * @param array $expectedCodes
+     * @dataProvider upgradeDataProvider
+     */
+    public function testUpgradeToVersion244(array $groupList, array $expectedCodes)
+    {
+        $tableName = 'core_config_data';
+        $this->setupMock->expects($this->once())
+            ->method('getTable')
+            ->willReturn($tableName);
+        $selectMock = $this->getMockBuilder(Select::class)
+            ->setMethods(['from'])
+            ->disableOriginalConstructor()
+            ->getMockForAbstractClass();
+        $this->contextMock->expects($this->once())
+            ->method('getVersion')
+            ->willReturn('2.4.3');
+        $this->connectionMock->expects($this->any())
+            ->method('select')
+            ->willReturn($selectMock);
+        $selectMock->expects($this->once())
+            ->method('from')
+            ->with('store_group', ['group_id', 'name'])
+            ->willReturnSelf();
+        $this->connectionMock->expects($this->once())
+            ->method('fetchPairs')
+            ->with($selectMock)
+            ->willReturn($groupList);
+
+        $i = 2;
+        foreach ($expectedCodes as $groupId => $code) {
+            $this->connectionMock->expects($this->at($i++))
+                ->method('update')
+                ->with(
+                    $tableName,
+                    ['code' => $code],
+                    ['group_id = ?' => $groupId]
+                );
+        }
+
+        $this->model->upgrade($this->setupMock, $this->contextMock);
+    }
+
+    public function upgradeDataProvider()
+    {
+        return [
+            [
+                [
+                    1 => 'Test Group'
+                ],
+                [
+                    1 => 'test_group'
+                ]
+            ],
+            [
+                [
+                    1 => 'Test Group',
+                    2 => 'Test Group',
+                    3 => 'Test Group',
+                ],
+                [
+                    1 => 'test_group',
+                    2 => 'test_group2',
+                    3 => 'test_group3'
+                ]
+            ],
+            [
+                [
+                    1 => '123 Group',
+                    2 => '12345',
+                    3 => '123456',
+                    4 => '123456',
+                    5 => '12Group34',
+                    6 => '&#*@#&_group'
+                ],
+                [
+                    1 => 'group',
+                    2 => 'store_group',
+                    3 => 'store_group2',
+                    4 => 'store_group3',
+                    5 => 'group34',
+                    6 => 'group2'
+                ]
+            ]
+        ];
+    }
+}

composer.json

@@ -2,7 +2,7 @@
   "name": "adyen/module-payment",
   "description": "Official Magento2 Plugin to connect to Payment Service Provider Adyen.",
   "type": "magento2-module",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "license": [
     "OSL-3.0",
     "AFL-3.0"

etc/adminhtml/system/adyen_billing_agreements.xml

@@ -22,33 +22,30 @@
  * Author: Adyen <magento@adyen.com>
  */
 -->
-<include xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_include.xsd">
-    <group id="adyen_billing_agreements" translate="label" type="text" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
+<include xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_include.xsd">
+    <group id="adyen_billing_agreements" translate="label" type="text" sortOrder="50" showInDefault="1"
+           showInWebsite="1" showInStore="1">
         <label><![CDATA[Advanced: Billing Agreements]]></label>
         <frontend_model>Magento\Config\Block\System\Config\Form\Fieldset</frontend_model>
-        <comment>
-            <![CDATA[
-                <p>
-                <strong>ONECLICK</strong>: The shopper opts in to storing their card details for future use.
-                The shopper is present for the subsequent transaction, for cards the security code (CVC/CVV) is required.
-                </p>
-                <p>
-                <strong>RECURRING*</strong>: Payment details are stored for future use. For cards, the security
-                code (CVC/CVV) is not required for subsequent payments.
-                </p>
-                <p>
-                <strong>ONECLICK, RECURRING*</strong>: Payment details are stored for future use. This allows the use of
-                the stored payment details regardless of whether the shopper is on your site or not.
-                </p>
-                <p>* keep in mind you need the recurring permission enabled. You can contact magento@adyen.com to enable this for your account.
-            ]]>
-        </comment>
+        <field id="enable_oneclick" translate="label" type="select" sortOrder="20" showInDefault="1" showInWebsite="1"
+               showInStore="1">
+            <label>Enable OneClick</label>
+            <tooltip>The shopper opts in to storing their card details for future use. The shopper is present for the
+                subsequent transaction, for cards the security code (CVC/CVV) is required.
+            </tooltip>
+            <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+            <config_path>payment/adyen_abstract/enable_oneclick</config_path>
+        </field>
 
-        <field id="recurring_type" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
-            <label>Agreement Type</label>
-            <tooltip>When enabled, users can save their Credit Cards and their SEPA authorizations. ONECLICK will require the input of the CVC for subsequent payments, while RECURRING does not.</tooltip>
-            <source_model>Adyen\Payment\Model\Config\Source\RecurringType</source_model>
-            <config_path>payment/adyen_abstract/recurring_type</config_path>
+        <field id="enable_recurring" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1"
+               showInStore="1">
+            <label>Enable Recurring</label>
+            <tooltip>Payment details are stored for future use. For cards, the security
+                code (CVC/CVV) is not required for subsequent payments.
+            </tooltip>
+            <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+            <config_path>payment/adyen_abstract/enable_recurring</config_path>
         </field>
     </group>
 </include>
\ No newline at end of file

etc/config.xml

@@ -28,7 +28,6 @@
             <adyen_abstract>
                 <active>0</active>
                 <model>AdyenPaymentGenericFacade</model>
-                <recurring_type>ONECLICK</recurring_type>
                 <order_status>pending</order_status>
                 <demo_mode>1</demo_mode>
                 <debug>1</debug>
@@ -36,6 +35,8 @@
                 <sepa_flow>sale</sepa_flow>
                 <split_payments_refund_strategy>1</split_payments_refund_strategy>
                 <return_path>checkout/cart</return_path>
+                <enable_oneclick>1</enable_oneclick>
+                <enable_recurring>0</enable_recurring>
                 <group>adyen</group>
             </adyen_abstract>
             <adyen_cc>

etc/module.xml

@@ -24,7 +24,7 @@
 -->
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
 
-    <module name="Adyen_Payment" setup_version="2.4.3">
+    <module name="Adyen_Payment" setup_version="2.4.4">
         <sequence>
             <module name="Magento_Sales"/>
             <module name="Magento_Quote"/>

view/frontend/web/css/styles.css

@@ -166,24 +166,860 @@
 
 /* Checkout card components style */
 
-.adyen-checkout-card__form .adyen-checkout__input iframe{
-    max-height: 40px;
+.adyen-checkout__payment-method {
+    position: relative;
+    background: white;
+    border: 1px solid #edf0f3;
+    cursor: pointer;
+    margin-top: -1px;
+    width: 100%;
+    transition: opacity 0.3s ease-out;
+    /* transition: margin 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; */
 }
 
-.adyen-checkout-card__form .adyen-checkout__input img{
-    display: none;
+.adyen-checkout__payment-method:focus {
+    outline: 0;
+}
+
+.adyen-checkout__payment-method:first-child,
+.adyen-checkout__payment-method--selected + .adyen-checkout__payment-method {
+    margin-top: 0;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+}
+
+.adyen-checkout__payment-method--next-selected {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+
+.adyen-checkout__payment-method--loading {
+    opacity: 0.2;
+}
+
+.adyen-checkout__payment-method--selected.adyen-checkout__payment-method--loading {
+    opacity: 0.9;
+}
+
+.adyen-checkout__payment-method--loading .adyen-checkout__spinner__wrapper {
+    position: absolute;
+    right: 0;
+    left: 0;
+    z-index: 1;
 }
 
-#adyen-cc-form .fieldset > .field > .label, .fieldset > .fields > .field > .label {
+.adyen-checkout__payment-method__header {
+    display: flex;
+    align-items: center;
     font-weight: 400;
+    font-size: 16px;
+    color: #00202e;
+    padding: 16px;
+    position: relative;
+    transition: background 0.1s ease-out;
+    width: 100%;
 }
 
-#adyen-cc-form .fieldset > .holdername.field{
-    margin-bottom: 10px;
+.adyen-checkout__payment-method__surcharge {
+    color: #687282;
+    margin-left: 5px;
+}
+
+.adyen-checkout__payment-method--selected {
+    transition: margin 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    background: #f7f8f9;
+    border: 1px solid #d4d9db;
+    margin: 8px 0;
+    border-radius: 3px;
+    cursor: default;
+}
+
+.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__header {
+    font-weight: 500;
+}
+
+.adyen-checkout__payment-method__details__content {
+    padding: 6px 16px 24px;
+}
+
+.adyen-checkout__payment-method__image__wrapper {
+    height: 26px;
+    position: relative;
+}
+
+.adyen-checkout__payment-method__image__wrapper:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    border-radius: 3px;
+    border: 1px solid rgba(0, 27, 43, 0.17);
+}
+
+.adyen-checkout__payment-method__image {
+    border-radius: 3px;
+}
+
+.adyen-checkout__payment-method__disable_oneclick {
+    background-color: transparent;
+    color: #687282;
+    cursor: pointer;
+    border: none;
+    display: block;
+    font-size: 13px;
+
+    padding: 0;
+    position: absolute;
+    right: 70px;
+    text-decoration: underline;
+}
+
+/*  Payment Method Radio Button */
+.adyen-checkout__payment-method__radio {
+    position: absolute;
+    background-color: #fff;
+    border: 1px solid #b9c4c9;
+    border-radius: 50%;
+    height: 18px;
+    width: 18px;
+    right: 20px;
+    transition: border-color 0.3s ease-out;
+    box-shadow: inset 0 1px 3px rgba(0, 27, 43, 0.15);
+}
+
+.adyen-checkout__payment-method__radio:after {
+    content: '';
+    display: block;
+    position: absolute;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: 6px;
+    width: 6px;
+    background-color: #fff;
+    border-radius: 50%;
+    transform: translateY(-50%) scale(0);
+    transition: transform 0.3s ease-out;
+    box-shadow: 0 1px 1px rgba(0, 15, 45, 0.25);
+}
+
+.adyen-checkout__payment-method__radio:hover {
+    border-color: #00a3ff;
+    cursor: pointer;
+}
+
+.adyen-checkout__payment-method__radio--selected {
+    background-color: #00a3ff;
+    border: 0px solid transparent;
+    transition: all 0.3s ease-out;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.26);
+}
+
+.adyen-checkout__payment-method__radio--selected:after {
+    transform: translateY(-50%) scale(1);
+}
+/*  /Payment Method Radio Button */
+
+.adyen-checkout__spinner__wrapper {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.adyen-checkout__spinner__wrapper--inline {
+    height: auto;
+    display: inline-block;
+    margin-right: 8px;
+}
+
+.adyen-checkout__spinner {
+    border: 2px solid #00a3ff;
+    border-radius: 50%;
+    height: 43px;
+    width: 43px;
+    border-top-color: transparent;
+    animation: rotateSpinner 2s infinite linear;
+}
+
+.adyen-checkout__spinner--large {
+    height: 43px;
+    width: 43px;
+}
+
+.adyen-checkout__spinner--small {
+    height: 16px;
+    width: 16px;
+}
+
+.adyen-checkout__spinner--medium {
+    height: 28px;
+    width: 28px;
+}
+
+@keyframes rotateSpinner {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.adyen-checkout__pay-button {
+    width: 100%;
+    padding: 16px;
+    border: 0;
+    border-radius: 3px;
+    background: #001b2b;
+    color: #fff;
+    font-weight: 700;
+    font-size: 1em;
+    transition: background 0.3s ease-out;
+    cursor: pointer;
+    box-shadow: 0 3px 4px rgba(0, 15, 45, 0.2);
+}
+
+.adyen-checkout__pay-button:disabled {
+    background: #e6e9eb;
+    box-shadow: none;
+}
+
+.adyen-checkout__pay-button--loading {
+    background: #4c5f6b;
+    box-shadow: none;
+    outline: 0;
+    user-select: none;
+    pointer-events: none;
+}
+
+.adyen-checkout__pay-button .adyen-checkout__spinner {
+    border-color: #fff;
+    border-width: 3px;
+    border-top-color: transparent;
+}
+
+.adyen-checkout__field {
+    display: block;
+    margin-bottom: 16px;
+}
+
+.adyen-checkout__field--error input {
+    border-color: #d81b4a;
+    color: #d81b4a;
+}
+
+.adyen-checkout__field:last-child {
+    margin-bottom: 0;
+}
+
+.adyen-checkout__label__text,
+.adyen-checkout__helper-text {
+    color: #001b2b;
+    display: block;
+    font-size: 13px;
+    font-weight: normal;
+    line-height: 13px;
+    padding-bottom: 8px;
+}
+
+.adyen-checkout__helper-text {
+    color: #687282;
+}
+
+.adyen-checkout__label__text {
+    transition: color 0.2s ease-out;
+}
+
+.adyen-checkout__label--focused .adyen-checkout__label__text {
+    color: #0077bb;
+}
+
+.adyen-checkout__error-text,
+.adyen-checkout__label__text--error {
+    color: #d81b4a;
+    font-weight: normal;
+    margin-top: 10px;
+}
+
+.adyen-checkout__radio_group__input {
+    display: none;
+}
+
+.adyen-checkout__radio_group__label {
+    padding-left: 24px;
+    position: relative;
+    display: block;
+    margin-bottom: 8px;
+
+    font-size: 13px;
+    font-weight: normal;
+    line-height: 16px;
+}
+
+.adyen-checkout__radio_group__label:before {
+    content: '';
+    position: absolute;
+    background-color: #fff;
+    border: 1px solid #b9c4c9;
+    border-radius: 50%;
+    height: 16px;
+    width: 16px;
+    left: 0;
+    top: 0;
+    transition: border-color 0.3s ease-out;
+}
+
+.adyen-checkout__radio_group__label:after {
+    content: '';
+    display: block;
+    position: absolute;
+    margin: 0 auto;
+    left: 5px;
+    top: 5px;
+    height: 6px;
+    width: 6px;
+    background-color: #fff;
+    border-radius: 50%;
+    transform: scale(0);
+    transition: transform 0.3s ease-out;
+    box-shadow: 0 1px 1px rgba(0, 15, 45, 0.25);
+}
+
+.adyen-checkout__radio_group__label:hover {
+    border-color: #00a3ff;
+    cursor: pointer;
+}
+
+.adyen-checkout__radio_group__input:checked + .adyen-checkout__radio_group__label:before,
+.adyen-checkout__radio_group__label--selected {
+    background-color: #00a3ff;
+    border: 0px solid transparent;
+    transition: all 0.3s ease-out;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.26);
+}
+
+.adyen-checkout__radio_group__input:checked + .adyen-checkout__radio_group__label:after {
+    transform: scale(1);
+}
+
+.adyen-checkout__checkbox {
+    display: block;
+}
+
+.adyen-checkout__checkbox > input[type='checkbox'] {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.adyen-checkout__checkbox__label {
+    position: relative;
+    padding-left: 24px;
+    cursor: pointer;
+    display: inline-block;
+    line-height: 16px;
+    font-size: 1rem;
+    color: #001b2b;
+    font-size: 13px;
+    font-weight: normal;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+/*  Check */
+.adyen-checkout__checkbox__input + span:before {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 1px;
+    width: 6px;
+    height: 11px;
+    border-top: 1px solid transparent;
+    border-left: 1px solid transparent;
+    border-right: 2px solid #fff;
+    border-bottom: 2px solid #fff;
+    -webkit-transform: rotateZ(37deg);
+    transform: rotateZ(37deg);
+    -webkit-transform-origin: 100% 100%;
+    transform-origin: 100% 100%;
+    z-index: 1;
+    border-radius: 0px 2px 1px 2px;
+    opacity: 0;
+    transition: opacity 0.2s ease-out;
+}
+
+.adyen-checkout__checkbox__input:checked + span:before {
+    opacity: 1;
+}
+
+/*  Box */
+.adyen-checkout__checkbox__input + span:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 16px;
+    height: 16px;
+    border-radius: 3px;
+    background-color: #fff;
+    border: 1px solid #b9c4c9;
+    z-index: 0;
+    transition: background 0.15s ease-out, border 0.05s ease-out, box-shadow 0.1s ease-out;
+}
+
+.adyen-checkout__checkbox__input:checked + span:after {
+    border: 1px solid #00a3ff;
+    background-color: #00a3ff;
+}
+
+.adyen-checkout__checkbox__input:focus + span:after {
+    border: 1px solid #00a3ff;
+    box-shadow: 0 0 0 2px #91d7ff;
+}
+
+.adyen-checkout__dropdown {
+    width: 100%;
+    max-width: 200px;
+    font-size: 16px;
+}
+
+.adyen-checkout__dropdown--small {
+    max-width: 130px;
+    width: 100%;
+}
+
+.adyen-checkout__dropdown--large {
+    max-width: 300px;
+    width: 100%;
+}
+
+.adyen-checkout__dropdown__button {
+    padding: 9px 20px 9px 8px;
+    border: 1px solid #b9c4c9;
+    background: #fff;
+    border-radius: 3px;
+    outline: 0;
+    width: 100%;
+    font-size: 16px;
+    height: 40px;
+    line-height: 20px;
+    transition: border 0.2s ease-out, box-shadow 0.2s ease-out;
+}
+
+.adyen-checkout__dropdown__button__icon {
+    margin-right: 8px;
+    max-width: 32px;
+    max-height: 20px;
+}
+.adyen-checkout__dropdown__button--active,
+.adyen-checkout__dropdown__button:active,
+.adyen-checkout__dropdown__button:focus {
+    border-color: #00a3ff;
+    box-shadow: 0 0 0 2px #91d7ff;
+}
+
+.adyen-checkout__dropdown__list {
+    z-index: 2;
+    border-radius: 3px;
+    margin-top: 2px;
+    box-shadow: 0px 2px 7px rgba(0, 15, 45, 0.3);
 }
 
-#adyen-cc-form .helper-text{
+.adyen-checkout__dropdown__list.adyen-checkout__dropdown__list--active {
+    animation: expand 100ms ease-out;
+}
+
+.adyen-checkout__dropdown__element {
+    padding: 8px;
+    line-height: 20px;
+    border: 1px solid transparent;
+    border-bottom: 1px solid #e6e9eb;
+    word-break: break-word;
+    hyphens: auto;
+    cursor: pointer;
+    outline: 0;
+    transition: background 0.2s ease-out, border-color 0.2s ease-out;
+}
+
+.adyen-checkout__dropdown__element:last-child {
+    border-bottom: 0;
+}
+
+.adyen-checkout__dropdown__element:hover,
+.adyen-checkout__dropdown__element:focus,
+.adyen-checkout__dropdown__element:active {
+    background: #f0f2f4;
+}
+
+.adyen-checkout__dropdown__element:active,
+.adyen-checkout__dropdown__element:focus {
+    border-top-color: #00a3ff;
+    border-bottom-color: #00a3ff;
+}
+
+.adyen-checkout__dropdown__element__icon {
+    margin-right: 8px;
+    max-width: 32px;
+    max-height: 20px;
+}
+
+@keyframes expand {
+    0% {
+        -webkit-transform: scale3d(1, 0, 1);
+        transform: scale3d(1, 0, 1);
+    }
+    100% {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+.adyen-checkout__select-list {
+    margin: 0;
+    padding: 0;
+}
+
+.adyen-checkout__select-list__item {
+    display: inline-block;
+    padding: 9px;
+    border-top: 1px solid #b9c4c9;
+    background: #fff;
+    outline: 0;
+    width: 100%;
+    font-size: 16px;
+    cursor: pointer;
+    line-height: 20px;
+}
+
+.adyen-checkout__select-list__item:first-child {
+    border-top: 0;
+}
+
+.adyen-checkout__select-list__item:hover,
+.adyen-checkout__select-list__item:focus,
+.adyen-checkout__select-list__item:active {
+    background: rgba(145, 215, 255, 0.5);
+}
+
+.adyen-checkout__select-list__item--selected {
+    background: rgba(145, 215, 255, 0.5);
+    font-weight: bold;
+}
+
+.adyen-checkout__input {
+    color: #001b2b;
+    font-size: 16px;
+    font-family: inherit;
+    display: block;
+    height: 40px;
+    background: white;
+    border: 1px solid #b9c4c9;
+    border-radius: 3px;
+    padding: 5px 8px;
+    position: relative;
+    outline: none;
+    width: 200px;
+    transition: border 0.2s ease-out, box-shadow 0.2s ease-out;
+}
+
+.adyen-checkout__input.adyen-checkout__input--small {
+    width: 130px;
+}
+
+.adyen-checkout__input.adyen-checkout__input--large {
+    width: 300px;
+}
+
+.adyen-checkout__input--error {
+    border-color: #d0021b;
+}
+
+.adyen-checkout__input::placeholder {
+    color: #90a2bd;
+    font-weight: 200;
+}
+
+.adyen-checkout__input:active,
+.adyen-checkout__input--active,
+.adyen-checkout__input:focus {
+    border: 1px solid #00a3ff;
+    box-shadow: 0 0 0 2px #91d7ff;
+}
+
+.adyen-checkout__input[readonly] {
+    background-color: #e6e9eb;
+    color: #687282;
+    cursor: default;
+    border-color: transparent;
+}
+
+.open-invoice__field {
+    margin-bottom: 15px;
+}
+
+.open-invoice__field select {
+    background: #ffffff;
+    border: 1px solid #d8d8d8;
+    box-shadow: none;
+    font-size: 0.93333333333em;
+    height: 40px;
+    margin-top: 4px;
+    max-width: 420px;
+    width: 100%;
+    padding: 5px 8px;
+    display: block;
+}
+
+.open-invoice__field input[type='text'],
+.open-invoice__field input[type='date'] {
+    display: block;
+    height: 35px;
+    width: 100%;
+    max-width: 420px;
+}
+
+.adyen-checkout__fieldset {
+    display: block;
+    padding-bottom: 30px;
+    color: #687282;
+    width: 100%;
+}
+
+.adyen-checkout__fieldset--readonly {
+}
+
+.adyen-checkout__fieldset--readonly p {
+    color: #001b2b;
+    font-size: 13px;
+    line-height: 19px;
+    margin: 0;
+}
+
+.adyen-checkout__fieldset--deliveryAddress {
+    padding-top: 30px;
+}
+
+.adyen-checkout__fieldset__title {
+    display: block;
     font-size: 11px;
-    color: rgb(144, 162, 189);
-    font-weight: 100;
+    font-weight: bold;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    padding: 0 0 20px;
+    margin: 0;
+    color: #687282;
+}
+
+.adyen-checkout__link__klarna--more-information {
+    clear: both;
+    display: block;
+    padding: 10px 0 25px;
+}
+
+.adyen-checkout__applepay__button {
+    width: 240px;
+    height: 40px;
+}
+
+.adyen-checkout__card__exp-cvc {
+    display: flex;
 }
+
+.adyen-checkout__card__cardNumber {
+    max-width: 400px;
+}
+
+.adyen-checkout__card__exp-date__input--oneclick {
+    line-height: 40px;
+    height: 40px;
+    font-weight: 400;
+}
+
+.adyen-checkout__card__exp-cvc .adyen-checkout__field {
+    margin-right: 24px;
+    margin-bottom: 0;
+}
+
+.adyen-checkout__card__form {
+    margin-bottom: 16px;
+}
+
+.adyen-checkout__giropay__results {
+    background: #fff;
+    border: 1px solid #b9c4c9;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    max-height: 140px;
+    min-height: 100px;
+    overflow-y: scroll;
+    width: 100%;
+}
+
+.adyen-checkout__giropay__no-results {
+    color: #687282;
+    display: block;
+    font-size: 13px;
+    padding: 0 0 0 2px;
+}
+
+.adyen-checkout__giropay__placeholder {
+    color: #90a2bd;
+    display: block;
+    padding: 0 0 0 2px;
+    font-weight: 200;
+}
+
+.adyen-checkout__giropay__loading {
+    display: block;
+    min-height: 100px;
+}
+
+.adyen-checkout__giropay__loading .adyen-checkout__spinner__wrapper {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.adyen-checkout__giropay__loading-text {
+    color: #687282;
+    font-size: 13px;
+    line-height: 16px;
+    vertical-align: middle;
+}
+
+.adyen-checkout__giropay__error {
+    color: #d0021b;
+    font-size: 13px;
+}
+
+.adyen-checkout__iban-input__number {
+    text-transform: uppercase;
+}
+
+.adyen-checkout__wechatpay {
+    background: #fff;
+    padding: 40px;
+    text-align: center;
+    border: 1px solid rgb(221, 225, 227);
+    border-radius: 3px;
+    min-height: 443px;
+}
+
+.adyen-checkout__wechatpay__brand-logo {
+    height: 20px;
+    width: 109px;
+}
+
+.adyen-checkout__wechatpay__subtitle {
+    margin-top: 32px;
+}
+
+.adyen-checkout__wechatpay__subtitle,
+.adyen-checkout__wechatpay__payment_amount {
+    color: #001b2b;
+    font-size: 16px;
+    line-height: 19px;
+}
+
+.adyen-checkout__wechatpay__progress {
+    height: 4px;
+    background: #d4d9db;
+    border-radius: 25px;
+    margin: 32px auto 12px auto;
+    width: 152px;
+    padding-right: 3%;
+}
+
+.adyen-checkout__wechatpay__progress > span {
+    display: block;
+    height: 100%;
+    border-radius: 25px;
+    background: #00a3ff;
+}
+
+.adyen-checkout__wechatpay__countdown {
+    color: #687282;
+    font-size: 13px;
+}
+
+.adyen-checkout__wechatpay .adyen-checkout__spinner__wrapper {
+    margin: 60px 0;
+}
+
+.adyen-checkout__alert {
+    background-color: #00a3ff;
+    align-items: flex-start;
+    border-radius: 3px;
+    color: #fff;
+    display: flex;
+    justify-content: space-between;
+    line-height: 1;
+    margin: 0;
+    padding: 12px;
+}
+
+.adyen-checkout__alert--error {
+    background-color: #d81b4a;
+}
+
+.adyen-checkout__alert--success {
+    background-color: #0abf53;
+}
+
+.adyen-checkout__alert--info {
+    background-color: #00a3ff;
+}
+
+.adyen-checkout__sdk,
+.adyen-checkout__sdk *,
+.adyen-checkout__sdk *:after,
+.adyen-checkout__sdk * :before {
+    box-sizing: border-box;
+}
+
+.adyen-checkout__payment-methods-list {
+    border-radius: 3px;
+}
+
+.adyen-checkout__payment-methods-list--loading {
+    user-select: none;
+    pointer-events: none;
+}
+
+/* Forms */
+
+.adyen-checkout__link {
+    color: #687282;
+    font-size: 13px;
+    text-decoration: underline;
+}
+
+
+/*.adyen-checkout__card__form .adyen-checkout__input {*/
+    /*max-height: 40px;*/
+/*}*/
+
+/*.adyen-checkout__card__form .adyen-checkout__input img{*/
+    /*display: none;*/
+/*}*/
+
+/*#adyen-cc-form .fieldset > .field > .label, .fieldset > .fields > .field > .label {*/
+    /*font-weight: 400;*/
+/*}*/
+
+/*#adyen-cc-form .fieldset > .holdername.field{*/
+    /*margin-bottom: 10px;*/
+/*}*/
+
+/*#adyen-cc-form .helper-text{*/
+    /*font-size: 11px;*/
+    /*color: rgb(144, 162, 189);*/
+    /*font-weight: 100;*/
+/*}*/
\ No newline at end of file

view/frontend/web/js/view/payment/method-renderer/adyen-oneclick-method.js

@@ -45,6 +45,7 @@ define(
         var variant = ko.observable(null);
         var paymentMethod = ko.observable(null);
         var numberOfInstallments = ko.observable(null);
+        var isValid = ko.observable(false);
 
         return Component.extend({
             defaults: {
@@ -189,7 +190,7 @@ define(
                          * creates the card component,
                          * sets up the callbacks for card components
                          */
-                        renderSecureCVC: function() {
+                        renderSecureCVC: function () {
                             var self = this;
 
                             var oneClickCardNode = document.getElementById('cvcContainer-' + self.value);
@@ -198,12 +199,19 @@ define(
                                 locale: self.getLocale()
                             });
 
+                            // this should be fixed in new version of checkout card component
+                            var hideCVC = false;
+                            if (self.agreement_data.variant == "bcmc") {
+                                hideCVC = true;
+                            }
+
                             var oneClickCard = checkout
                                 .create('card', {
                                     originKey: self.getOriginKey(),
                                     loadingContext: self.getLoadingContext(),
                                     type: self.agreement_data.variant,
                                     oneClick: true,
+                                    hideCVC: hideCVC,
 
                                     // Specific for oneClick cards
                                     details: [
@@ -221,15 +229,32 @@ define(
                                         }
                                     },
 
-                                    onChange: function(state) {
+                                    onChange: function (state) {
                                         if (state.isValid) {
                                             self.encryptedCreditCardVerificationNumber = state.data.encryptedSecurityCode;
                                         } else {
                                             self.encryptedCreditCardVerificationNumber = '';
                                         }
+                                    },
+                                    onValid: function (data) {
+                                        if (data.isValid) {
+                                            isValid(true);
+                                        } else {
+                                            isValid(false);
+                                        }
+                                        return;
+                                    },
+                                    onError: function(data) {
+                                        if(data.fieldType == "encryptedSecurityCode" && data.error != "") {
+                                            isValid(false);
+                                        }
+                                        return;
                                     }
                                 })
                                 .mount(oneClickCardNode);
+
+
+                            window.adyencheckout = oneClickCard;
                         },
                         /**
                          * Builds the payment details part of the payment information reqeust
@@ -260,17 +285,9 @@ define(
                             var form = 'form[data-role=' + codeValue + ']';
 
                             var validate = $(form).validation() && $(form).validation('isValid');
-
-                            // if oneclick or recurring is a card check CVC validity
-                            var cid = true;
-                            if (this.agreement_data.card) {
-                                // if encrypted cvc is empty the request is not valid
-                                if (this.hasVerification() && this.encryptedCreditCardVerificationNumber.length === 0) {
-                                    cid = false;
-                                }
-                            }
-
-                            if (!validate || !cid) {
+                            debugger;
+                            // bcmc does not have any cvc
+                            if (!validate || (isValid() == false && variant() != "bcmc")) {
                                 return false;
                             }