Merge pull request #478 from Adyen/develop

Release 4.3.0

Api/AdyenInitiateTerminalApiInterface.php

@@ -28,7 +28,8 @@ interface AdyenInitiateTerminalApiInterface
 {
     /**
      * Trigger sync call on terminal
+     * @param string $payload
      * @return mixed
      */
-    public function initiate();
+    public function initiate($payload);
 }

Block/Adminhtml/System/Config/Field/Installment.php

@@ -41,7 +41,19 @@ class Installment extends \Magento\Framework\View\Element\Html\Select
                             '9' => '9x',
                             '10' => '10x',
                             '11' => '11x',
-                            '12' => '12x'
+                            '12' => '12x',
+                            '13' => '13x',
+                            '14' => '14x',
+                            '15' => '15x',
+                            '16' => '16x',
+                            '17' => '17x',
+                            '18' => '18x',
+                            '19' => '19x',
+                            '20' => '20x',
+                            '21' => '21x',
+                            '22' => '22x',
+                            '23' => '23x',
+                            '24' => '24x'
     ];
 
     /**

Block/Form/Cc.php

@@ -87,9 +87,9 @@ class Cc extends \Magento\Payment\Block\Form\Cc
 	/**
 	 * @return string
 	 */
-	public function getCheckoutContextUrl()
+	public function getCheckoutEnvironment()
 	{
-		return $this->adyenHelper->getCheckoutContextUrl($this->checkoutSession->getQuote()->getStore()->getId());
+		return $this->adyenHelper->getCheckoutEnvironment($this->checkoutSession->getQuote()->getStore()->getId());
 	}
 
     /**

Block/Redirect/Redirect.php

@@ -217,11 +217,11 @@ class Redirect extends \Magento\Payment\Block\Form
             if ($this->_adyenHelper->isSeparateHouseNumberRequired($billingAddress->getCountryId())) {
                 $street = $this->_adyenHelper->getStreet($billingAddress);
 
-                if (isset($street['name']) && $street['name'] != "") {
+                if (!empty($street['name'])) {
                     $formFields['billingAddress.street'] = $street['name'];
                 }
 
-                if (isset($street['house_number']) && $street['house_number'] != "") {
+                if (!empty($street['house_number'])) {
                     $formFields['billingAddress.houseNumberOrName'] = $street['house_number'];
                 } else {
                     $formFields['billingAddress.houseNumberOrName'] = "NA";

Controller/Process/Json.php

@@ -75,6 +75,7 @@ class Json extends \Magento\Framework\App\Action\Action
             $request = $this->getRequest();
             if ($request instanceof Http && $request->isPost()) {
                 $request->setParam('isAjax', true);
+                $request->getHeaders()->addHeaderLine('X_REQUESTED_WITH', 'XMLHttpRequest');
             }
         }
     }

Controller/Process/Result.php

@@ -249,7 +249,7 @@ class Result extends \Magento\Framework\App\Action\Action
                 break;
 			case Notification::RECEIVED:
 				$result = true;
-                if (strpos($paymentMethod, "alipay_hk_web") !== false) {
+                if (strpos($paymentMethod, "alipay_hk") !== false) {
                     $result = false;
                 }
 				$this->_adyenLogger->addAdyenResult('Do nothing wait for the notification');
@@ -382,7 +382,10 @@ class Result extends \Magento\Framework\App\Action\Action
 
         $request = [];
 
-		if (!empty($this->_session->getLastRealOrder()->getPayment()->getAdditionalInformation("paymentData"))) {
+        if (!empty($this->_session->getLastRealOrder()) &&
+            !empty($this->_session->getLastRealOrder()->getPayment()) &&
+            !empty($this->_session->getLastRealOrder()->getPayment()->getAdditionalInformation("paymentData"))
+        ) {
             $request['paymentData'] = $this->_session->getLastRealOrder()->getPayment()->getAdditionalInformation("paymentData");
         }
 

Gateway/Http/Client/TransactionPosCloudSync.php

@@ -92,7 +92,7 @@ class TransactionPosCloudSync implements ClientInterface
         //always do status call and return the response of the status call
         $service = $this->adyenHelper->createAdyenPosPaymentService($this->client);
 
-        $poiId = $this->adyenHelper->getPoiId($this->storeId);
+        $poiId = $request['terminalID'];
         $newServiceID = date("dHis");
 
         $statusDate = date("U");

Gateway/Request/CheckoutDataBuilder.php

@@ -25,7 +25,6 @@ namespace Adyen\Payment\Gateway\Request;
 
 use Magento\Payment\Gateway\Request\BuilderInterface;
 use Adyen\Payment\Observer\AdyenHppDataAssignObserver;
-use Adyen\Payment\Observer\AdyenBoletoDataAssignObserver;
 
 class CheckoutDataBuilder implements BuilderInterface
 {
@@ -40,39 +39,23 @@ class CheckoutDataBuilder implements BuilderInterface
     private $storeManager;
 
     /**
-     * @var \Magento\Checkout\Model\Session
+     * @var \Magento\Quote\Api\CartRepositoryInterface
      */
-    private $checkoutSession;
+    private $cartRepository;
 
     /**
-     * @var \Magento\Quote\Model\Quote
-     */
-    private $quote;
-
-	/**
-	 * @var \Magento\Tax\Model\Config
-	 */
-	protected $taxConfig;
-
-    /**
-     * CheckoutDataBuilder constructor.
-     * @param \Adyen\Payment\Helper\Data $adyenHelper
+     * @param \Adyen\Payment\Helper\Data                 $adyenHelper
      * @param \Magento\Store\Model\StoreManagerInterface $storeManager
-     * @param \Magento\Checkout\Model\Session $checkoutSession
-     * @param \Magento\Tax\Model\Config $taxConfig
+     * @param \Magento\Quote\Api\CartRepositoryInterface $cartRepository
      */
 	public function __construct(
-		\Adyen\Payment\Helper\Data $adyenHelper,
-		\Magento\Store\Model\StoreManagerInterface $storeManager,
-		\Magento\Checkout\Model\Session $checkoutSession,
-		\Magento\Tax\Model\Config $taxConfig
-    )
-    {
+        \Adyen\Payment\Helper\Data $adyenHelper,
+        \Magento\Store\Model\StoreManagerInterface $storeManager,
+        \Magento\Quote\Api\CartRepositoryInterface $cartRepository
+    ) {
         $this->adyenHelper = $adyenHelper;
         $this->storeManager = $storeManager;
-        $this->checkoutSession = $checkoutSession;
-        $this->quote = $checkoutSession->getQuote();
-        $this->taxConfig = $taxConfig;
+        $this->cartRepository = $cartRepository;
     }
 
 	/**
@@ -204,21 +187,24 @@ class CheckoutDataBuilder implements BuilderInterface
     }
 
     /**
-     * @param $formFields
-     * @return mixed
+     * @param \Magento\Sales\Model\Order $order
+     *
+     * @throws \Magento\Framework\Exception\NoSuchEntityException
+     *
+     * @return array
      */
-    protected function getOpenInvoiceData($order)
+    protected function getOpenInvoiceData($order): array
     {
         $formFields = [
             'lineItems' => []
         ];
 
-        $currency = $this->quote->getCurrency();
-
+        /** @var \Magento\Quote\Model\Quote $cart */
+        $cart = $this->cartRepository->get($order->getQuoteId());
+        $currency = $cart->getCurrency();
         $discountAmount = 0;
 
-        foreach ($this->quote->getAllVisibleItems() as $item) {
-
+        foreach ($cart->getAllVisibleItems() as $item) {
             $numberOfItems = (int)$item->getQty();
 
             // Summarize the discount amount item by item
@@ -263,20 +249,18 @@ class CheckoutDataBuilder implements BuilderInterface
         }
 
         // Shipping cost
-        if ($this->quote->getShippingAddress()->getShippingAmount() > 0 || $this->quote->getShippingAddress()->getShippingTaxAmount() > 0) {
+        if ($cart->getShippingAddress()->getShippingAmount() > 0 || $cart->getShippingAddress()->getShippingTaxAmount() > 0) {
 
-            $priceExcludingTax = $this->quote->getShippingAddress()->getShippingAmount() - $this->quote->getShippingAddress()->getShippingTaxAmount();
+            $priceExcludingTax = $cart->getShippingAddress()->getShippingAmount() - $cart->getShippingAddress()->getShippingTaxAmount();
 
-            $formattedTaxAmount = $this->adyenHelper->formatAmount($this->quote->getShippingAddress()->getShippingTaxAmount(), $currency);
+            $formattedTaxAmount = $this->adyenHelper->formatAmount($cart->getShippingAddress()->getShippingTaxAmount(), $currency);
 
             $formattedPriceExcludingTax = $this->adyenHelper->formatAmount($priceExcludingTax, $currency);
 
-            $taxClassId = $this->taxConfig->getShippingTaxClass($this->storeManager->getStore()->getId());
-
             $formattedTaxPercentage = 0;
 
             if ($priceExcludingTax !== 0) {
-                $formattedTaxPercentage = $this->quote->getShippingAddress()->getShippingTaxAmount() / $priceExcludingTax * 100 * 100;
+                $formattedTaxPercentage = $cart->getShippingAddress()->getShippingTaxAmount() / $priceExcludingTax * 100 * 100;
             }
             
             $formFields['lineItems'][] = [

Gateway/Request/PosCloudBuilder.php

@@ -41,7 +41,8 @@ class PosCloudBuilder implements BuilderInterface
         return [
             "response" => $payment->getAdditionalInformation("terminalResponse"),
             "serviceID" => $payment->getAdditionalInformation("serviceID"),
-            "initiateDate" => $payment->getAdditionalInformation("initiateDate")
+            "initiateDate" => $payment->getAdditionalInformation("initiateDate"),
+            "terminalID" => $payment->getAdditionalInformation("terminal_id")
         ];
     }
 }

Gateway/Validator/CheckoutResponseValidator.php

@@ -32,6 +32,11 @@ class CheckoutResponseValidator extends AbstractValidator
      */
     private $adyenLogger;
 
+    /**
+     * @var \Adyen\Payment\Helper\Data
+     */
+    private  $adyenHelper;
+
     /**
      * GeneralResponseValidator constructor.
      *
@@ -40,9 +45,11 @@ class CheckoutResponseValidator extends AbstractValidator
      */
     public function __construct(
         \Magento\Payment\Gateway\Validator\ResultInterfaceFactory $resultFactory,
-        \Adyen\Payment\Logger\AdyenLogger $adyenLogger
+        \Adyen\Payment\Logger\AdyenLogger $adyenLogger,
+        \Adyen\Payment\Helper\Data $adyenHelper
     ) {
         $this->adyenLogger = $adyenLogger;
+        $this->adyenHelper = $adyenHelper;
         parent::__construct($resultFactory);
     }
 
@@ -80,6 +87,13 @@ class CheckoutResponseValidator extends AbstractValidator
                         }
                     }
 
+                    // Save cc_type if available in the response
+                    if (!empty($response['additionalData']['paymentMethod'])) {
+                        $ccType = $this->adyenHelper->getMagentoCreditCartType($response['additionalData']['paymentMethod']);
+                        $payment->setAdditionalInformation('cc_type', $ccType);
+                        $payment->setCcType($ccType);
+                    }
+
                     $payment->setAdditionalInformation('pspReference', $response['pspReference']);
                     break;
                 case "Received":

Gateway/Validator/GeneralResponseValidator.php

@@ -32,6 +32,11 @@ class GeneralResponseValidator extends AbstractValidator
      */
     private $adyenLogger;
 
+    /**
+     * @var \Adyen\Payment\Helper\Data
+     */
+    private $adyenHelper;
+
     /**
      * GeneralResponseValidator constructor.
      *
@@ -40,9 +45,11 @@ class GeneralResponseValidator extends AbstractValidator
      */
     public function __construct(
         \Magento\Payment\Gateway\Validator\ResultInterfaceFactory $resultFactory,
-        \Adyen\Payment\Logger\AdyenLogger $adyenLogger
+        \Adyen\Payment\Logger\AdyenLogger $adyenLogger,
+        \Adyen\Payment\Helper\Data $adyenHelper
     ) {
         $this->adyenLogger = $adyenLogger;
+        $this->adyenHelper = $adyenHelper;
         parent::__construct($resultFactory);
     }
 
@@ -65,6 +72,14 @@ class GeneralResponseValidator extends AbstractValidator
             switch ($response['resultCode']) {
                 case "Authorised":
                     $payment->setAdditionalInformation('pspReference', $response['pspReference']);
+
+                    // Save cc_type if available in the response
+                    if (!empty($response['additionalData']['paymentMethod'])) {
+                        $ccType = $this->adyenHelper->getMagentoCreditCartType($response['additionalData']['paymentMethod']);
+                        $payment->setAdditionalInformation('cc_type', $ccType);
+                        $payment->setCcType($ccType);
+                    }
+
                     break;
                 case "Received":
                     $payment->setAdditionalInformation('pspReference', $response['pspReference']);

Helper/Data.php

@@ -33,10 +33,8 @@ class Data extends AbstractHelper
     const MODULE_NAME = 'adyen-magento2';
     const TEST = 'test';
     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.5.0/adyen.js';
-    const CHECKOUT_COMPONENT_JS_TEST = 'https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/2.5.0/adyen.js';
+    const CHECKOUT_COMPONENT_JS_LIVE = 'https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.0.0/adyen.js';
+    const CHECKOUT_COMPONENT_JS_TEST = 'https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.0.0/adyen.js';
 
     /**
      * @var \Magento\Framework\Encryption\EncryptorInterface
@@ -128,6 +126,12 @@ class Data extends AbstractHelper
      */
     private $config;
 
+    /**
+     * @var \Magento\Backend\Helper\Data $helperBackend
+     */
+    private $helperBackend;
+
+
     /**
      * Data constructor.
      * @param \Magento\Framework\App\Helper\Context $context
@@ -147,6 +151,9 @@ class Data extends AbstractHelper
      * @param \Magento\Framework\App\CacheInterface $cache
      * @param \Adyen\Payment\Model\Billing\AgreementFactory $billingAgreementFactory
      * @param \Adyen\Payment\Model\ResourceModel\Billing\Agreement $agreementResourceModel
+     * @param \Magento\Framework\Locale\ResolverInterface $localeResolver
+     * @param \Magento\Framework\App\Config\ScopeConfigInterface $config
+     * @param \Magento\Backend\Helper\Data $helperBackend
      */
     public function __construct(
         \Magento\Framework\App\Helper\Context $context,
@@ -167,7 +174,8 @@ class Data extends AbstractHelper
         \Adyen\Payment\Model\Billing\AgreementFactory $billingAgreementFactory,
         \Adyen\Payment\Model\ResourceModel\Billing\Agreement $agreementResourceModel,
         \Magento\Framework\Locale\ResolverInterface $localeResolver,
-        \Magento\Framework\App\Config\ScopeConfigInterface $config
+        \Magento\Framework\App\Config\ScopeConfigInterface $config,
+        \Magento\Backend\Helper\Data $helperBackend
     ) {
         parent::__construct($context);
         $this->_encryptor = $encryptor;
@@ -188,6 +196,7 @@ class Data extends AbstractHelper
         $this->agreementResourceModel = $agreementResourceModel;
         $this->localeResolver = $localeResolver;
         $this->config = $config;
+        $this->helperBackend = $helperBackend;
     }
 
     /**
@@ -249,39 +258,34 @@ class Data extends AbstractHelper
     public function formatAmount($amount, $currency)
     {
         switch ($currency) {
-            case "JPY":
-            case "IDR":
-            case "KRW":
-            case "BYR":
-            case "VND":
             case "CVE":
             case "DJF":
             case "GNF":
+            case "IDR":
+            case "JPY":
+            case "KMF":
+            case "KRW":
             case "PYG":
             case "RWF":
             case "UGX":
+            case "VND":
             case "VUV":
             case "XAF":
             case "XOF":
             case "XPF":
-            case "GHC":
-            case "KMF":
                 $format = 0;
                 break;
-            case "MRO":
-                $format = 1;
-                break;
             case "BHD":
+            case "IQD":
             case "JOD":
             case "KWD":
-            case "OMR":
             case "LYD":
+            case "OMR":
             case "TND":
                 $format = 3;
                 break;
             default:
                 $format = 2;
-                break;
         }
 
         return (int)number_format($amount, $format, '', '');
@@ -389,6 +393,9 @@ class Data extends AbstractHelper
         if (count($street) != 1) {
             return $street;
         }
+
+        $street['0'] = trim($street['0']);
+
         preg_match('/((\s\d{0,10})|(\s\d{0,10}\w{1,3}))$/i', $street['0'], $houseNumber, PREG_OFFSET_CAPTURE);
         if (!empty($houseNumber['0'])) {
             $_houseNumber = trim($houseNumber['0']['0']);
@@ -460,18 +467,6 @@ class Data extends AbstractHelper
         return $this->getConfigData($field, 'adyen_cc_vault', $storeId, true);
     }
 
-    /**
-     * Gives back adyen_cc_threeds2 configuration values as flag
-     *
-     * @param $field
-     * @param null $storeId
-     * @return mixed
-     */
-    public function getAdyenCcThreeDS2ConfigDataFlag($field, $storeId = null)
-    {
-        return $this->getConfigData($field, 'adyen_cc_threeds2', $storeId, true);
-    }
-
     /**
      * Gives back adyen_hpp configuration values
      *
@@ -1353,14 +1348,14 @@ class Data extends AbstractHelper
     }
 
     /**
-     * Return the Terminal ID for the current store/mode
+     * Return the Store ID for the current store/mode
      *
      * @param int|null $storeId
      * @return mixed
      */
-    public function getPoiId($storeId = null)
+    public function getPosStoreId($storeId = null)
     {
-        return $this->getAdyenPosCloudConfigData('pos_terminal_id', $storeId);
+        return $this->getAdyenPosCloudConfigData('pos_store_id', $storeId);
     }
 
     /**
@@ -1481,9 +1476,17 @@ class Data extends AbstractHelper
      * @return string
      */
     public function getOrigin() {
+        $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
+        $state = $objectManager->get('Magento\Framework\App\State');
         $baseUrl = $this->storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_WEB);
+        if ('adminhtml' === $state->getAreaCode()) {
+            $baseUrl =  $this->helperBackend->getHomePageUrl();
+        }
         $parsed = parse_url($baseUrl);
         $origin = $parsed['scheme'] . "://" . $parsed['host'];
+        if (!empty($parsed['port'])) {
+            $origin .= ":" . $parsed['port'];
+        }
         return $origin;
     }
 
@@ -1546,13 +1549,13 @@ class Data extends AbstractHelper
      * @param int|null $storeId
      * @return string
      */
-    public function getCheckoutContextUrl($storeId = null)
+    public function getCheckoutEnvironment($storeId = null)
     {
         if ($this->isDemoMode($storeId)) {
-            return self::CHECKOUT_CONTEXT_URL_TEST;
+            return self::TEST;
         }
 
-        return self::CHECKOUT_CONTEXT_URL_LIVE;
+        return self::LIVE;
     }
 
     /**
@@ -1724,7 +1727,7 @@ class Data extends AbstractHelper
      */
     public function isCreditCardThreeDS2Enabled($storeId = null)
     {
-        return $this->getAdyenCcThreeDS2ConfigDataFlag('active', $storeId);
+        return $this->getAdyenCcConfigDataFlag('threeds2_enabled', $storeId);
     }
 
 	/**

Helper/PaymentMethods.php

@@ -390,4 +390,41 @@ class PaymentMethods extends AbstractHelper
     {
         return $this->getQuote()->getCustomerId();
     }
+
+    /**
+     * @return array|mixed
+     * @throws \Adyen\AdyenException
+     */
+    public function getConnectedTerminals()
+    {
+
+        $storeId = $this->getQuote()->getStoreId();
+
+        // initialize the adyen client
+        $client = $this->adyenHelper->initializeAdyenClient($storeId, $this->adyenHelper->getPosApiKey($storeId));
+
+        // initialize service
+        $service = $this->adyenHelper->createAdyenPosPaymentService($client);
+
+        $requestParams = [
+            "merchantAccount" => $this->adyenHelper->getAdyenMerchantAccount('adyen_pos_cloud', $storeId),
+        ];
+
+        // In case the POS store id is set, provide in the request
+        if (!empty($this->adyenHelper->getPosStoreId($storeId))) {
+            $requestParams['store'] = $this->adyenHelper->getPosStoreId($storeId);
+        }
+
+        try {
+            $responseData = $service->getConnectedTerminals($requestParams);
+        } catch (\Adyen\AdyenException $e) {
+            $this->adyenLogger->error(
+                "The getConnectedTerminals response is empty check your Adyen configuration in Magento."
+            );
+            // return empty result
+            return [];
+        }
+
+        return $responseData;
+    }
 }
\ No newline at end of file

Helper/Requests.php

@@ -450,7 +450,7 @@ class Requests extends AbstractHelper
             // Parse address into street and house number where possible
             $address = $this->adyenHelper->getStreetFromString($address->getStreetFull());
         } else {
-            $address = $this->adyenHelper->getStreetFromString($address->getStreetLine1());
+            $address = $this->adyenHelper->getStreetFromString(implode(' ', [$address->getStreetLine1(), $address->getStreetLine2()]));
         }
 
         return $address;

Model/AdyenInitiateTerminalApi.php

@@ -93,8 +93,22 @@ class AdyenInitiateTerminalApi implements AdyenInitiateTerminalApiInterface
      * @return mixed
      * @throws \Exception
      */
-    public function initiate()
+    public function initiate($payload)
     {
+        // Decode payload from frontend
+        $payload = json_decode($payload, true);
+
+        // Validate JSON that has just been parsed if it was in a valid format
+        if (json_last_error() !== JSON_ERROR_NONE) {
+            throw new \Magento\Framework\Exception\LocalizedException(__('Terminal API initiate request was not a valid JSON'));
+        }
+
+        if (empty($payload['terminal_id'])) {
+            throw new \Adyen\AdyenException("Terminal ID is empty in initiate request");
+        }
+
+        $poiId = $payload['terminal_id'];
+
         $quote = $this->checkoutSession->getQuote();
         $payment = $quote->getPayment();
         $payment->setMethod(AdyenPosCloudConfigProvider::CODE);
@@ -102,7 +116,7 @@ class AdyenInitiateTerminalApi implements AdyenInitiateTerminalApiInterface
 
         $service = $this->adyenHelper->createAdyenPosPaymentService($this->client);
         $transactionType = \Adyen\TransactionType::NORMAL;
-        $poiId = $this->adyenHelper->getPoiId($this->storeId);
+
         $serviceID = date("dHis");
         $initiateDate = date("U");
         $timeStamper = date("Y-m-d") . "T" . date("H:i:s+00:00");

Model/Config/Source/CcType.php

@@ -56,7 +56,7 @@ class CcType extends \Magento\Payment\Model\Source\Cctype
      */
     public function getAllowedTypes()
     {
-        return ['VI', 'MC', 'AE', 'DI', 'JCB', 'UN', 'MI', 'DN', 'BCMC', 'HIPERCARD','ELO', 'TROY'];
+        return ['VI', 'MC', 'AE', 'DI', 'JCB', 'UN', 'MI', 'DN', 'BCMC', 'HIPERCARD','ELO', 'TROY', 'DANKORT'];
     }
 
     /**

Model/Cron.php

@@ -1495,6 +1495,9 @@ class Cron
             case 'laser':
             case 'paypal':
             case 'sepadirectdebit':
+            case 'dankort':
+            case 'elo':
+            case 'hipercard':
                 $manualCaptureAllowed = true;
                 break;
             default:

Model/Ui/AdyenCcConfigProvider.php

@@ -146,7 +146,7 @@ class AdyenCcConfigProvider implements ConfigProviderInterface
         $config['payment']['adyenCc']['icons'] = $this->getIcons();
 
         $config['payment']['adyenCc']['originKey'] = $this->_adyenHelper->getOriginKeyForBaseUrl();
-        $config['payment']['adyenCc']['checkoutUrl'] = $this->_adyenHelper->getCheckoutContextUrl($this->storeManager->getStore()->getId());
+        $config['payment']['adyenCc']['checkoutEnvironment'] = $this->_adyenHelper->getCheckoutEnvironment($this->storeManager->getStore()->getId());
 
         // has installments by default false
         $config['payment']['adyenCc']['hasInstallments'] = false;

Model/Ui/AdyenOneclickConfigProvider.php

@@ -143,7 +143,7 @@ class AdyenOneclickConfigProvider implements ConfigProviderInterface
 
         $config['payment']['adyenOneclick']['methodCode'] = self::CODE;
         $config['payment']['adyenOneclick']['originKey'] = $this->_adyenHelper->getOriginKeyForBaseUrl();
-        $config['payment']['adyenOneclick']['checkoutUrl'] = $this->_adyenHelper->getCheckoutContextUrl($this->_storeManager->getStore()->getId());
+        $config['payment']['adyenOneclick']['checkoutEnvironment'] = $this->_adyenHelper->getCheckoutEnvironment($this->_storeManager->getStore()->getId());
         $config['payment']['adyenOneclick']['locale'] = $this->_adyenHelper->getStoreLocale($this->_storeManager->getStore()->getId());
 
         $enableOneclick = $this->_adyenHelper->getAdyenAbstractConfigData('enable_oneclick');

Model/Ui/AdyenPosCloudConfigProvider.php

@@ -43,6 +43,11 @@ class AdyenPosCloudConfigProvider implements ConfigProviderInterface
      */
     protected $urlBuilder;
 
+    /**
+     * @var \Adyen\Payment\Helper\PaymentMethods
+     */
+    protected $paymentMethodsHelper;
+
     /**
      * AdyenHppConfigProvider constructor.
      *
@@ -51,10 +56,12 @@ class AdyenPosCloudConfigProvider implements ConfigProviderInterface
      */
     public function __construct(
         \Magento\Framework\App\RequestInterface $request,
-        \Magento\Framework\UrlInterface $urlBuilder
+        \Magento\Framework\UrlInterface $urlBuilder,
+        \Adyen\Payment\Helper\PaymentMethods $paymentMethodsHelper
     ) {
         $this->request = $request;
         $this->urlBuilder = $urlBuilder;
+        $this->paymentMethodsHelper = $paymentMethodsHelper;
     }
 
     /**
@@ -77,6 +84,8 @@ class AdyenPosCloudConfigProvider implements ConfigProviderInterface
             ]
         ];
 
+        $config['payment']['adyenPos']['connectedTerminals'] = $this->getConnectedTerminals();
+
         return $config;
     }
 
@@ -89,4 +98,19 @@ class AdyenPosCloudConfigProvider implements ConfigProviderInterface
     {
         return $this->request;
     }
+
+    /**
+     * @return array|mixed
+     * @throws \Adyen\AdyenException
+     */
+    protected function getConnectedTerminals()
+    {
+        $connectedTerminals = $this->paymentMethodsHelper->getConnectedTerminals();
+
+        if (!empty($connectedTerminals['uniqueTerminalIds'])) {
+            return $connectedTerminals['uniqueTerminalIds'];
+        }
+
+        return [];
+    }
 }

Observer/AdyenPosCloudDataAssignObserver.php

+<?php
+/**
+ *                       ######
+ *                       ######
+ * ############    ####( ######  #####. ######  ############   ############
+ * #############  #####( ######  #####. ######  #############  #############
+ *        ######  #####( ######  #####. ######  #####  ######  #####  ######
+ * ###### ######  #####( ######  #####. ######  #####  #####   #####  ######
+ * ###### ######  #####( ######  #####. ######  #####          #####  ######
+ * #############  #############  #############  #############  #####  ######
+ *  ############   ############  #############   ############  #####  ######
+ *                                      ######
+ *                               #############
+ *                               ############
+ *
+ * Adyen Payment module (https://www.adyen.com/)
+ *
+ * Copyright (c) 2019 Adyen BV (https://www.adyen.com/)
+ * See LICENSE.txt for license details.
+ *
+ * Author: Adyen <magento@adyen.com>
+ */
+namespace Adyen\Payment\Observer;
+
+use Magento\Framework\Event\Observer;
+use Magento\Payment\Observer\AbstractDataAssignObserver;
+use Magento\Quote\Api\Data\PaymentInterface;
+
+/**
+ * Class DataAssignObserver
+ */
+class AdyenPosCloudDataAssignObserver extends AbstractDataAssignObserver
+{
+    const TERMINAL_ID = 'terminal_id';
+
+    /**
+     * @var array
+     */
+    protected $additionalInformationList = [
+        self::TERMINAL_ID
+    ];
+
+    /**
+     * @param Observer $observer
+     * @return void
+     */
+    public function execute(Observer $observer)
+    {
+        $data = $this->readDataArgument($observer);
+
+        $additionalData = $data->getData(PaymentInterface::KEY_ADDITIONAL_DATA);
+        if (!is_array($additionalData)) {
+            return;
+        }
+
+        $paymentInfo = $this->readPaymentModelArgument($observer);
+
+        foreach ($this->additionalInformationList as $additionalInformationKey) {
+            if (!empty($additionalData[$additionalInformationKey])) {
+                $paymentInfo->setAdditionalInformation(
+                    $additionalInformationKey,
+                    $additionalData[$additionalInformationKey]
+                );
+            }
+        }
+    }
+}

README.md

@@ -37,7 +37,7 @@ If you need to setup your cronjob in Magento <a href="http://devdocs.magento.com
 
 We have defined this:
 ```
-<group id="index">
+<group id="adyen_payment">
     <job name="adyen_payment_process_notification" instance="Adyen\Payment\Model\Cron" method="processNotification">
         <schedule>*/1 * * * *</schedule>
     </job>

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": "4.2.1",
+  "version": "4.3.0",
   "license": [
     "OSL-3.0",
     "AFL-3.0"
@@ -14,7 +14,7 @@
     }
   ],
   "require": {
-    "adyen/php-api-library": ">=2.0.0",
+    "adyen/php-api-library": "~2.1",
     "magento/framework": ">=101.0.8 <102 || >=102.0.1",
     "magento/module-vault": "101.*"
   },

etc/adminhtml/system/adyen_cc.xml

@@ -63,7 +63,7 @@
                showInStore="1">
             <label>3DS2.0 Enabled</label>
             <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
-            <config_path>payment/adyen_cc_threeds2/active</config_path>
+            <config_path>payment/adyen_cc/threeds2_enabled</config_path>
         </field>
 
         <group id="adyen_cc_advanced_settings" translate="label" showInDefault="1" showInWebsite="1" showInStore="1"

etc/adminhtml/system/adyen_pos_cloud.xml

@@ -41,24 +41,25 @@
             <frontend_class>validate-number</frontend_class>
             <config_path>payment/adyen_pos_cloud/sort_order</config_path>
         </field>
-        <field id="pos_terminal_id" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="0">
-            <label>Unique Terminal ID for Cloud API</label>
-            <tooltip>Copy this from the Adyen Customer Area => Point of sale => Terminal Fleet Manager => Unique Terminal Id </tooltip>
-            <config_path>payment/adyen_pos_cloud/pos_terminal_id</config_path>
-        </field>
         <field id="pos_merchant_account" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="0">
             <label>Merchant Account for Cloud API</label>
             <can_be_empty>1</can_be_empty>
             <tooltip>Please insert your Merchant Account name used by the Cloud API. Please leave it blank if the Merchant Account is the same as the one configured in the Required Settings</tooltip>
             <config_path>payment/adyen_pos_cloud/pos_merchant_account</config_path>
         </field>
-        <field id="api_key_test" translate="label" type="obscure" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="0">
+        <field id="pos_store_id" translate="label" type="text" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
+            <label>Store ID for Cloud API</label>
+            <can_be_empty>1</can_be_empty>
+            <tooltip>Please insert your store ID used by the Cloud API. Please leave it blank if you want to retrieve all the terminals connected to your merchant account</tooltip>
+            <config_path>payment/adyen_pos_cloud/pos_store_id</config_path>
+        </field>
+        <field id="api_key_test" translate="label" type="obscure" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="0">
             <label>API key for Cloud API TEST</label>
             <tooltip>Copy this from the Test Adyen Customer Area => Settings => Users => System => [web service user]=> Checkout API Key.</tooltip>
             <backend_model>Magento\Config\Model\Config\Backend\Encrypted</backend_model>
             <config_path>payment/adyen_pos_cloud/api_key_test</config_path>
         </field>
-        <field id="api_key_live" translate="label" type="obscure" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="0">
+        <field id="api_key_live" translate="label" type="obscure" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="0">
             <label>API key for Cloud API LIVE</label>
             <tooltip>Copy this from the Live Adyen Customer Area => Settings => Users => System => [web service user]=> Checkout API Key.</tooltip>
             <backend_model>Magento\Config\Model\Config\Backend\Encrypted</backend_model>

etc/adyen_payment.xml

@@ -73,9 +73,13 @@
             <label>Elo</label>
             <code_alt>elo</code_alt>
         </type>
-        <type id="TROY" order="130">
+        <type id="TROY" order="120">
             <label>Troy</label>
             <code_alt>troy</code_alt>
         </type>
+        <type id="DANKORT" order="130">
+            <label>Dankort</label>
+            <code_alt>dankort</code_alt>
+        </type>
     </adyen_credit_cards>
 </payment>

etc/config.xml

@@ -62,6 +62,7 @@
                 <can_cancel>1</can_cancel>
                 <can_authorize_vault>1</can_authorize_vault>
                 <can_capture_vault>1</can_capture_vault>
+                <threeds2_enabled>1</threeds2_enabled>
                 <group>adyen</group>
             </adyen_cc>
             <adyen_cc_vault>

etc/events.xml

@@ -32,6 +32,9 @@
     <event name="payment_method_assign_data_adyen_hpp">
         <observer name="adyen_hpp_gateway_data_assign" instance="Adyen\Payment\Observer\AdyenHppDataAssignObserver" />
     </event>
+    <event name="payment_method_assign_data_adyen_pos_cloud">
+        <observer name="adyen_pos_cloud_gateway_data_assign" instance="Adyen\Payment\Observer\AdyenPosCloudDataAssignObserver" />
+    </event>
     <event name="payment_method_assign_data_adyen_boleto">
         <observer name="adyen_boleto_gateway_data_assign" instance="Adyen\Payment\Observer\AdyenBoletoDataAssignObserver" />
     </event>

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="4.2.1">
+    <module name="Adyen_Payment" setup_version="4.3.0">
         <sequence>
             <module name="Magento_Sales"/>
             <module name="Magento_Quote"/>

view/adminhtml/templates/form/cc.phtml

@@ -113,7 +113,7 @@ echo $code; ?>" style="display:none">
 
                     var card = checkout.create('card', {
                         originKey: "<?php echo $block->getCheckoutOriginKeys(); ?>",
-                        loadingContext: "<?php echo $block->getCheckoutContextUrl(); ?>",
+                        environment: "<?php echo $block->getCheckoutEnvironment(); ?>",
                         type: 'card',
                         groupTypes: ccTypes,
                         hideCVC: hideCVC,
@@ -122,10 +122,14 @@ echo $code; ?>" style="display:none">
                             // When the state is valid update the input fields
                             if (state.isValid) {
                                 // Here we enable the button if the component is now valid
-                                jQuery("#<?php /* @noEscape */ echo $code; ?>-number").val(state.data.encryptedCardNumber);
-                                jQuery("#<?php /* @noEscape */ echo $code; ?>-expiryMonth").val(state.data.encryptedExpiryMonth);
-                                jQuery("#<?php /* @noEscape */ echo $code; ?>-expiryYear").val(state.data.encryptedExpiryYear);
-                                jQuery("#<?php /* @noEscape */ echo $code; ?>-cvc").val(state.data.encryptedSecurityCode);
+                                jQuery("#<?php /* @noEscape */ echo $code; ?>-number").val(state.data.paymentMethod.encryptedCardNumber);
+                                jQuery("#<?php /* @noEscape */ echo $code; ?>-expiryMonth").val(state.data.paymentMethod.encryptedExpiryMonth);
+                                jQuery("#<?php /* @noEscape */ echo $code; ?>-expiryYear").val(state.data.paymentMethod.encryptedExpiryYear);
+                                jQuery("#<?php /* @noEscape */ echo $code; ?>-cvc").val(state.data.paymentMethod.encryptedSecurityCode);
+                            }
+                        },
+                        onBrand: function (state) {
+                            if (state.isValid) {
                                 jQuery("#<?php /* @noEscape */ echo $code; ?>-cc_type").val(getCcCodeByAltCode(state.brand));
                             }
                         },

view/adminhtml/web/css/order_create_styles.css

@@ -66,7 +66,43 @@
     display: inline-block;
     font-weight: bold;
 }
-/* Checkout component Adyen styling start */
+/* Checkout component Adyen v3.0.0 styling start */
+.adyen-checkout__field{
+    display:block;
+    margin-bottom:16px
+}
+.adyen-checkout__field--error input{
+    border-color:#d10244;
+    color:#d10244
+}
+.adyen-checkout__field:last-child{
+    margin-bottom:0
+}
+.adyen-checkout__helper-text,.adyen-checkout__label__text{
+    color:#00112c;
+    display:block;
+    font-size:.81em;
+    font-weight:400;
+    line-height:13px;
+    padding-bottom:8px
+}
+.adyen-checkout__helper-text{
+    color:#687282
+}
+.adyen-checkout__label__text{
+    transition:color .2s ease-out
+}
+.adyen-checkout__label--focused .adyen-checkout__label__text{
+    color:#06f
+}
+.adyen-checkout__error-text{
+    align-items:center;
+    color:#d10244;
+    display:flex;
+    font-size:.75em;
+    font-weight:400;
+    margin-top:4px
+}
 .adyen-checkout__spinner__wrapper{
     align-items:center;
     display:flex;
@@ -81,7 +117,7 @@
 .adyen-checkout__spinner{
     -webkit-animation:rotateSpinner 2s infinite linear;
     animation:rotateSpinner 2s infinite linear;
-    border:2px solid #00a3ff;
+    border:2px solid #06f;
     border-radius:50%;
     border-top-color:transparent;
     height:43px;
@@ -119,260 +155,10 @@
         transform:rotate(1turn)
     }
 }
-
-.adyen-checkout__pay-button{
-    background:#001b2b;
-    border:0;
-    border-radius:3px;
-    box-shadow:0 3px 4px rgba(0,15,45,.2);
-    color:#fff;
-    cursor:pointer;
-    font-size:1em;
-    font-weight:700;
-    height:48px;
-    padding:15px;
-    transition:background .3s ease-out;
-    width:100%
-}
-.adyen-checkout__pay-button:disabled{
-    -moz-user-select:all;
-    -ms-user-select:all;
-    -webkit-user-select:all;
-    background:#e6e9eb;
-    box-shadow:none;
-    cursor:not-allowed;
-    user-select:all
-}
-.adyen-checkout__pay-button--loading{
-    -moz-user-select:none;
-    -ms-user-select:none;
-    -webkit-user-select:none;
-    background:#4c5f6b;
-    box-shadow:none;
-    outline:0;
-    pointer-events:none;
-    user-select:none
-}
-.adyen-checkout__pay-button .adyen-checkout__spinner{
-    border-color:transparent #fff #fff;
-    border-width:3px
-}
-.adyen-checkout__pay-button__content{
-    align-items:center;
-    display:flex;
-    justify-content:center
-}
-.adyen-checkout__payment-method{
-    background:#fff;
-    border:1px solid #edf0f3;
-    cursor:pointer;
-    margin-top:-1px;
-    position:relative;
-    transition:opacity .3s ease-out;
-    width:100%
-}
-.adyen-checkout__payment-method:focus{
-    outline:0
-}
-.adyen-checkout__payment-method--selected+.adyen-checkout__payment-method,.adyen-checkout__payment-method:first-child{
-    border-top-left-radius:3px;
-    border-top-right-radius:3px;
-    margin-top:0
-}
-.adyen-checkout__payment-method--next-selected{
-    border-bottom-left-radius:3px;
-    border-bottom-right-radius:3px
-}
-.adyen-checkout__payment-method--loading{
-    opacity:.2
-}
-.adyen-checkout__payment-method--selected.adyen-checkout__payment-method--loading{
-    opacity:.9
-}
-.adyen-checkout__payment-method--disabling{
-    opacity:.5
-}
-.adyen-checkout__payment-method__header{
-    align-items:center;
-    color:#00202e;
-    display:flex;
-    font-size:16px;
-    font-weight:400;
-    padding:16px;
-    position:relative;
-    transition:background .1s ease-out;
-    width:100%
-}
-.adyen-checkout__payment-method__surcharge{
-    color:#687282;
-    margin-left:5px
-}
-.adyen-checkout__payment-method--selected{
-    background:#f7f8f9;
-    border:1px solid #d4d9db;
-    border-radius:3px;
-    cursor:default;
-    margin:8px 0;
-    transition:margin .15s cubic-bezier(.4,0,.2,1) 0ms,opacity .3s ease-out
-}
-.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__header{
-    font-weight:500
-}
-.adyen-checkout__payment-method__details{
-    padding:0 16px 16px
-}
-.adyen-checkout__payment-method__details__content{
-    padding:6px 0 24px
-}
-.adyen-checkout__payment-method__image__wrapper{
-    height:26px;
-    position:relative
-}
-.adyen-checkout__payment-method__image__wrapper:after{
-    border:1px solid rgba(0,27,43,.17);
-    border-radius:3px;
-    content:"";
-    height:100%;
-    left:0;
-    position:absolute;
-    top:0;
-    width:100%
-}
-.adyen-checkout__payment-method__image{
-    border-radius:3px
-}
-.adyen-checkout__payment-method__disable_oneclick{
-    background-color:transparent;
-    border:none;
-    color:#687282;
-    cursor:pointer;
-    display:block;
-    font-size:13px;
-    padding:0;
-    position:absolute;
-    right:70px;
-    text-decoration:underline
-}
-.adyen-checkout__payment-method__disable_oneclick:focus{
-    color:#00a3ff;
-    outline:0
-}
-.adyen-checkout__payment-method__disable-confirmation{
-    align-items:center;
-    background:#e6e9eb;
-    color:#001b2b;
-    display:flex;
-    font-size:15px;
-    justify-content:space-between;
-    margin-bottom:10px;
-    padding:8px 16px
-}
-.adyen-checkout__payment-method__disable-confirmation__buttons{
-    display:flex
-}
-.adyen-checkout__payment-method__disable-confirmation__button{
-    border:1px solid transparent;
-    border-radius:3px;
-    cursor:pointer;
-    font-size:13px;
-    line-height:15px;
-    margin:0 0 0 8px;
-    padding:8px
-}
-.adyen-checkout__payment-method__disable-confirmation__button--remove{
-    background:#d10244;
-    border-color:#d10244;
-    color:#fff
-}
-.adyen-checkout__payment-method__disable-confirmation__button--cancel{
-    background:transparent;
-    border-color:#001b2b;
-    color:#001b2b
-}
-.adyen-checkout__payment-method__radio{
-    background-color:#fff;
-    border:1px solid #b9c4c9;
-    border-radius:50%;
-    box-shadow:inset 0 1px 3px rgba(0,27,43,.15);
-    height:18px;
-    position:absolute;
-    right:20px;
-    transition:border-color .3s ease-out;
-    width:18px
-}
-.adyen-checkout__payment-method__radio:after{
-    -webkit-transform:translateY(-50%) scale(0);
-    background-color:#fff;
-    border-radius:50%;
-    box-shadow:0 1px 1px rgba(0,15,45,.25);
-    content:"";
-    display:block;
-    height:6px;
-    left:0;
-    margin:0 auto;
-    position:absolute;
-    right:0;
-    top:50%;
-    transform:translateY(-50%) scale(0);
-    transition:-webkit-transform .3s ease-out;
-    transition:transform .3s ease-out;
-    transition:transform .3s ease-out,-webkit-transform .3s ease-out;
-    width:6px
-}
-.adyen-checkout__payment-method__radio:hover{
-    border-color:#00a3ff;
-    cursor:pointer
-}
-.adyen-checkout__payment-method__radio--selected{
-    background-color:#00a3ff;
-    border:0 solid transparent;
-    box-shadow:inset 0 1px 2px rgba(0,0,0,.26);
-    transition:all .3s ease-out
-}
-.adyen-checkout__payment-method__radio--selected:after{
-    -webkit-transform:translateY(-50%) scale(1);
-    transform:translateY(-50%) scale(1)
-}
-.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__helper-text,.adyen-checkout__label__text{
-    color:#001b2b;
-    display:block;
-    font-size:13px;
-    font-weight:400;
-    line-height:13px;
-    padding-bottom:8px
-}
-.adyen-checkout__helper-text{
-    color:#687282
-}
-.adyen-checkout__label__text{
-    transition:color .2s ease-out
-}
-.adyen-checkout__label--focused .adyen-checkout__label__text{
-    color:#07b
-}
-.adyen-checkout__error-text,.adyen-checkout__label__text--error{
-    align-items:center;
-    color:#d0021b;
-    display:flex;
-    font-size:12px;
-    font-weight:400;
-    margin-top:4px
-}
 .adyen-checkout__icon svg{
     fill:currentColor
 }
-.adyen-checkout__open-invoice .adyen-checkout__input--wrapper--socialSecurityNumber+.adyen-checkout__error-text{
+.adyen-checkout__open-invoice .adyen-checkout__input-wrapper--socialSecurityNumber+.adyen-checkout__error-text{
     max-width:380px
 }
 .adyen-checkout__radio_group+.adyen-checkout-input__inline-validation{
@@ -384,7 +170,7 @@
 }
 .adyen-checkout__radio_group__label{
     display:block;
-    font-size:13px;
+    font-size:.81em;
     font-weight:400;
     line-height:16px;
     margin-bottom:8px;
@@ -423,12 +209,12 @@
     width:6px
 }
 .adyen-checkout__radio_group__label:hover{
-    border-color:#00a3ff;
+    border-color:#06f;
     cursor:pointer
 }
 .adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:before,.adyen-checkout__radio_group__label--selected{
-    background-color:#00a3ff;
-    border:0 solid transparent;
+    background-color:#06f;
+    border:0;
     box-shadow:inset 0 1px 2px rgba(0,0,0,.26);
     transition:all .3s ease-out
 }
@@ -442,7 +228,7 @@
 .adyen-checkout__checkbox{
     display:block
 }
-.adyen-checkout__checkbox>input[type=checkbox]{
+.adyen-checkout__checkbox__input{
     opacity:0;
     pointer-events:none;
     position:absolute
@@ -451,10 +237,10 @@
     -moz-user-select:none;
     -ms-user-select:none;
     -webkit-user-select:none;
-    color:#001b2b;
+    color:#00112c;
     cursor:pointer;
     display:inline-block;
-    font-size:13px;
+    font-size:.81em;
     font-weight:400;
     line-height:16px;
     padding-left:24px;
@@ -496,19 +282,19 @@
     width:16px;
     z-index:0
 }
+.adyen-checkout__checkbox__input--invalid+.adyen-checkout__checkbox__label:after{
+    border:1px solid #d10244
+}
 .adyen-checkout__checkbox__input:checked+.adyen-checkout__checkbox__label:after{
-    background-color:#00a3ff;
-    border:1px solid #00a3ff
+    background-color:#06f;
+    border:1px solid #06f
 }
 .adyen-checkout__checkbox__input:focus+span:after{
-    border:1px solid #00a3ff;
-    box-shadow:0 0 0 2px #91d7ff
-}
-.adyen-checkout__checkbox__input.adyen-checkout__checkbox__input--invalid+.adyen-checkout__checkbox__label:after{
-    border:1px solid #d10244
+    border:1px solid #06f;
+    box-shadow:0 0 0 2px #99c2ff
 }
 .adyen-checkout__dropdown{
-    font-size:16px;
+    font-size:1em;
     max-width:100%;
     width:200px
 }
@@ -521,8 +307,8 @@
 .adyen-checkout__dropdown__button{
     background:#fff;
     border:1px solid #b9c4c9;
-    border-radius:3px;
-    font-size:16px;
+    border-radius:6px;
+    font-size:1em;
     height:40px;
     line-height:20px;
     outline:0;
@@ -532,16 +318,16 @@
 }
 .adyen-checkout__dropdown__button__icon{
     margin-right:8px;
-    max-height:20px;
-    max-width:32px
+    max-height:26px;
+    max-width:40px
 }
 .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
+    border-color:#06f;
+    box-shadow:0 0 0 2px #99c2ff
 }
 .adyen-checkout__dropdown__button--readonly,.adyen-checkout__dropdown__button--readonly.adyen-checkout__dropdown__button--active{
     background:#e6e9eb;
-    color:#001b2b;
+    color:#00112c;
     cursor:not-allowed
 }
 .adyen-checkout__dropdown__button--invalid{
@@ -553,21 +339,19 @@
     white-space:nowrap
 }
 .adyen-checkout__dropdown__list{
-    border-radius:3px;
+    border-radius:6px;
     box-shadow:0 2px 7px rgba(0,15,45,.3);
     margin-top:2px;
+    max-height:360px;
     z-index:2
 }
-.adyen-checkout__dropdown__list.adyen-checkout__dropdown__list--active{
-    -webkit-animation:expand .1s ease-out;
-    animation:expand .1s ease-out
-}
 .adyen-checkout__dropdown__element{
     -ms-hyphens:auto;
     -webkit-hyphens:auto;
     border:1px solid transparent;
     border-bottom-color:#e6e9eb;
     cursor:pointer;
+    font-size:.81em;
     hyphens:auto;
     line-height:20px;
     outline:0;
@@ -579,38 +363,24 @@
     border-bottom:0
 }
 .adyen-checkout__dropdown__element:active,.adyen-checkout__dropdown__element:focus,.adyen-checkout__dropdown__element:hover{
-    background:#f0f2f4
+    background:rgba(230,233,235,.6)
 }
 .adyen-checkout__dropdown__element:active,.adyen-checkout__dropdown__element:focus{
-    border-bottom-color:#00a3ff;
-    border-top-color:#00a3ff
+    border-bottom-color:#06f;
+    border-top-color:#06f
 }
-.adyen-checkout__dropdown__element__icon{
-    margin-right:8px;
-    max-height:20px;
-    max-width:32px
+.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active{
+    background:rgba(0,102,255,.1)
 }
-@-webkit-keyframes expand{
-    0%{
-        -webkit-transform:scaleY(0);
-        transform:scaleY(0)
-    }
-    to{
-        -webkit-transform:scaleX(1);
-        transform:scaleX(1)
-    }
+.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active:active,.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active:focus,.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active:hover{
+    background:rgba(0,102,255,.15)
 }
-@keyframes expand{
-    0%{
-        -webkit-transform:scaleY(0);
-        transform:scaleY(0)
-    }
-    to{
-        -webkit-transform:scaleX(1);
-        transform:scaleX(1)
-    }
+.adyen-checkout__dropdown__element__icon{
+    border-radius:3px;
+    margin-right:8px;
+    max-height:26px;
+    max-width:40px
 }
-
 .adyen-checkout__dropdown+.adyen-checkout-input__inline-validation{
     right:32px
 }
@@ -620,10 +390,11 @@
 }
 .adyen-checkout__select-list__item{
     background:#fff;
-    border-top:1px solid #b9c4c9;
+    border:1px solid transparent;
+    border-bottom-color:#e6e9eb;
     cursor:pointer;
     display:inline-block;
-    font-size:16px;
+    font-size:1em;
     line-height:20px;
     outline:0;
     padding:9px;
@@ -633,20 +404,23 @@
     border-top:0
 }
 .adyen-checkout__select-list__item:active,.adyen-checkout__select-list__item:focus,.adyen-checkout__select-list__item:hover{
-    background:rgba(145,215,255,.5)
+    background:rgba(230,233,235,.6)
 }
 .adyen-checkout__select-list__item--selected{
-    background:rgba(145,215,255,.5);
-    font-weight:700
+    background:rgba(0,102,255,.1);
+    font-weight:500
+}
+.adyen-checkout__select-list__item--selected:active,.adyen-checkout__select-list__item--selected:focus,.adyen-checkout__select-list__item--selected:hover{
+    background:rgba(0,102,255,.15)
 }
 .adyen-checkout__input{
     background:#fff;
     border:1px solid #b9c4c9;
-    border-radius:3px;
-    color:#001b2b;
+    border-radius:6px;
+    color:#00112c;
     display:block;
     font-family:inherit;
-    font-size:16px;
+    font-size:1em;
     height:40px;
     outline:none;
     padding:5px 8px;
@@ -657,11 +431,11 @@
 .adyen-checkout__input:required{
     box-shadow:none
 }
-.adyen-checkout__input--wrapper{
+.adyen-checkout__input-wrapper{
     display:inline-block;
     position:relative
 }
-.adyen-checkout__input--wrapper--block{
+.adyen-checkout__input-wrapper--block{
     display:block
 }
 .adyen-checkout-input__inline-validation{
@@ -674,41 +448,45 @@
     width:16px
 }
 .adyen-checkout-input__inline-validation--valid{
-    color:#039450
+    color:#0abf53
 }
 .adyen-checkout-input__inline-validation--invalid{
     color:#d10244
 }
-.adyen-checkout__input.adyen-checkout__input--small{
-    width:130px
+.adyen-checkout__input--small{
+    width:134px
 }
-.adyen-checkout__input.adyen-checkout__input--large{
+.adyen-checkout__input--large{
     width:300px
 }
-.adyen-checkout__input.adyen-checkout__input--invalid{
+.adyen-checkout__input--invalid{
     border-color:#d10244
 }
-.adyen-checkout__input.adyen-checkout__input--valid{
-    border-bottom-color:#04ba65
+.adyen-checkout__input--valid{
+    border-bottom-color:#0abf53
 }
 .adyen-checkout__input--error{
-    border-color:#d0021b
+    border-color:#d10244
 }
 .adyen-checkout__input::-webkit-input-placeholder{
-    color:#90a2bd;
+    color:#b9c4c9;
+    font-weight:200
+}
+.adyen-checkout__input:-ms-input-placeholder{
+    color:#b9c4c9;
     font-weight:200
 }
 .adyen-checkout__input::-ms-input-placeholder{
-    color:#90a2bd;
+    color:#b9c4c9;
     font-weight:200
 }
 .adyen-checkout__input::placeholder{
-    color:#90a2bd;
+    color:#b9c4c9;
     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--focus,.adyen-checkout__input:active,.adyen-checkout__input:focus{
+    border:1px solid #06f;
+    box-shadow:0 0 0 2px #99c2ff
 }
 .adyen-checkout__input[readonly]{
     background-color:#e6e9eb;
@@ -725,7 +503,7 @@
 .adyen-checkout__fieldset__title{
     color:#687282;
     display:block;
-    font-size:11px;
+    font-size:.68em;
     font-weight:700;
     letter-spacing:1px;
     margin:0;
@@ -733,20 +511,20 @@
     text-transform:uppercase
 }
 .adyen-checkout__fieldset--readonly{
-    color:#001b2b;
-    font-size:13px;
+    color:#00112c;
+    font-size:.81em;
     line-height:19px;
     margin:0
 }
 .adyen-checkout__open-invoice .adyen-checkout__checkbox--consent-checkbox{
     max-width:540px
 }
-.adyen-checkout__open-invoice .adyen-checkout__checkbox+.adyen-checkout__open-invoice .adyen-checkout__fieldset{
-    padding-top:30px
-}
 .adyen-checkout__open-invoice .adyen-checkout__checkbox{
     margin:0 0 20px
 }
+.adyen-checkout__link--more-information{
+    font-size:.81em
+}
 .adyen-checkout__applepay__button{
     height:40px;
     width:240px
@@ -770,7 +548,7 @@
 }
 .adyen-checkout__card__exp-cvc .adyen-checkout__field{
     margin-bottom:0;
-    margin-right:24px
+    margin-right:32px
 }
 .adyen-checkout__card-input .adyen-checkout__store-details{
     margin-top:16px
@@ -778,20 +556,21 @@
 .adyen-checkout__giropay__results{
     background:#fff;
     border:1px solid #b9c4c9;
-    border-radius:4px;
+    border-radius:6px;
     max-height:140px;
     min-height:100px;
+    min-width:300px;
     overflow-y:scroll;
     width:100%
 }
 .adyen-checkout__giropay__no-results{
     color:#687282;
     display:block;
-    font-size:13px;
+    font-size:.81em;
     padding:0 0 0 2px
 }
 .adyen-checkout__giropay__placeholder{
-    color:#90a2bd;
+    color:#b9c4c9;
     display:block;
     font-weight:200;
     padding:0 0 0 2px
@@ -806,48 +585,139 @@
 }
 .adyen-checkout__giropay__loading-text{
     color:#687282;
-    font-size:13px;
+    font-size:.81em;
     line-height:16px;
     vertical-align:middle
 }
 .adyen-checkout__giropay__error{
-    color:#d0021b;
-    font-size:13px
+    color:#d10244;
+    font-size:.81em
+}
+.adyen-checkout__button{
+    background:#00112c;
+    border:0;
+    border-radius:6px;
+    box-shadow:0 3px 4px rgba(0,15,45,.2);
+    color:#fff;
+    cursor:pointer;
+    font-size:1em;
+    font-weight:700;
+    height:48px;
+    margin:0;
+    padding:15px;
+    transition:background .3s ease-out;
+    width:100%
+}
+.adyen-checkout__button:disabled{
+    -moz-user-select:all;
+    -ms-user-select:all;
+    -webkit-user-select:all;
+    background:#e6e9eb;
+    box-shadow:none;
+    cursor:not-allowed;
+    user-select:all
+}
+.adyen-checkout__button--loading{
+    -moz-user-select:none;
+    -ms-user-select:none;
+    -webkit-user-select:none;
+    background:#687282;
+    box-shadow:none;
+    outline:0;
+    pointer-events:none;
+    user-select:none
+}
+.adyen-checkout__button .adyen-checkout__spinner{
+    border-color:transparent #fff #fff;
+    border-width:3px
+}
+.adyen-checkout__button__content{
+    align-items:center;
+    display:flex;
+    justify-content:center
 }
 .adyen-checkout__phone-input{
     display:flex
 }
 .adyen-checkout__phone-input__prefix{
+    margin-bottom:0;
     margin-right:.5em
 }
-.adyen-checkout__phone-input .adyen-checkout__field{
+.adyen-checkout__input--phone-number{
     margin-bottom:0
 }
 .adyen-checkout__iban-input__number{
     padding:5px 36px 5px 8px;
     text-transform:uppercase
 }
-.adyen-checkout__wechatpay{
+.adyen-checkout__threeds2__challenge,.adyen-checkout__threeds2__challenge-container{
+    background-color:transparent;
+    box-sizing:border-box;
+    display:block;
+    overflow:auto;
+    width:100%
+}
+.adyen-checkout__threeds2__challenge-container--01{
+    height:400px;
+    width:250px
+}
+.adyen-checkout__threeds2__challenge-container--02{
+    height:400px;
+    width:390px
+}
+.adyen-checkout__threeds2__challenge-container--03{
+    height:600px;
+    width:500px
+}
+.adyen-checkout__threeds2__challenge-container--04{
+    height:400px;
+    width:600px
+}
+.adyen-checkout__threeds2_challenge-container--05{
+    height:100%;
+    width:100%
+}
+.adyen-checkout__threeds2__challenge.adyen-checkout__threeds2__challenge--05{
+    overflow:hidden;
+    padding-top:56.25%;
+    position:relative
+}
+.adyen-checkout__threeds2__challenge.adyen-checkout__threeds2__challenge--05 .adyen-checkout__iframe--threeDSIframe{
+    border:0;
+    height:100%;
+    left:0;
+    position:absolute;
+    top:0;
+    width:100%
+}
+.adyen-checkout__qr-loader{
     background:#fff;
-    border:1px solid #dde1e3;
-    border-radius:3px;
-    min-height:443px;
+    border:1px solid #d4d9db;
+    border-radius:6px;
     padding:40px;
     text-align:center
 }
-.adyen-checkout__wechatpay__brand-logo{
-    height:20px;
-    width:109px
+.adyen-checkout__qr-loader--app{
+    border:0;
+    border-radius:0;
+    padding:0
+}
+.adyen-checkout__qr-loader__brand-logo{
+    max-height:50px;
+    width:110px
 }
-.adyen-checkout__wechatpay__subtitle{
+.adyen-checkout__qr-loader__subtitle{
     margin-top:32px
 }
-.adyen-checkout__wechatpay__payment_amount,.adyen-checkout__wechatpay__subtitle{
-    color:#001b2b;
-    font-size:16px;
+.adyen-checkout__qr-loader__payment_amount,.adyen-checkout__qr-loader__subtitle{
+    color:#00112c;
+    font-size:1em;
     line-height:19px
 }
-.adyen-checkout__wechatpay__progress{
+.adyen-checkout__qr-loader__payment_amount{
+    font-weight:700
+}
+.adyen-checkout__qr-loader__progress{
     background:#d4d9db;
     border-radius:25px;
     height:4px;
@@ -855,45 +725,339 @@
     padding-right:3%;
     width:152px
 }
-.adyen-checkout__wechatpay__progress>span{
-    background:#00a3ff;
+.adyen-checkout__qr-loader__percentage{
+    background:#06f;
     border-radius:25px;
     display:block;
     height:100%
 }
-.adyen-checkout__wechatpay__countdown{
+.adyen-checkout__qr-loader__countdown{
     color:#687282;
-    font-size:13px
+    font-size:.81em
 }
-.adyen-checkout__wechatpay .adyen-checkout__spinner__wrapper{
+.adyen-checkout__qr-loader>.adyen-checkout__spinner__wrapper{
     margin:60px 0
 }
-.adyen-checkout__alert{
-    align-items:flex-start;
-    background-color:#00a3ff;
-    border-radius:3px;
-    color:#fff;
+.adyen-checkout__qr-loader__separator__label{
+    background:#fff;
+    border-radius:100%;
+    color:#687282;
+    display:inline-block;
+    height:34px;
+    line-height:34px;
+    position:relative;
+    width:34px;
+    z-index:1
+}
+.adyen-checkout__qr-loader__separator__line{
+    -webkit-transform:translateY(-17px);
+    border-top:1px solid #d4d9db;
+    display:block;
+    transform:translateY(-17px)
+}
+.adyen-checkout__button.adyen-checkout__button--qr-loader{
+    display:block;
+    text-decoration:none
+}
+.adyen-checkout__voucher-result{
+    background:#fff;
+    border:1px solid #d4d9db;
+    border-radius:6px;
+    box-sizing:border-box;
+    padding:20px 16px 56px;
+    text-align:center
+}
+.adyen-checkout__voucher-result__image{
+    align-items:center;
     display:flex;
+    justify-content:center;
+    margin-bottom:16px;
+    width:100%
+}
+.adyen-checkout__voucher-result__image__wrapper{
+    display:inline-block;
+    padding:8px;
+    width:120px
+}
+.adyen-checkout__voucher-result__image__wrapper:nth-child(2){
+    border-left:1px solid #d4d9db
+}
+.adyen-checkout__voucher-result__image__brand,.adyen-checkout__voucher-result__image__issuer{
+    height:34px
+}
+.adyen-checkout__voucher-result__image__brand{
+    height:60px
+}
+.adyen-checkout__voucher-result__introduction{
+    color:#00112c;
+    font-size:.81em;
+    line-height:19px;
+    margin:0 auto;
+    max-width:400px;
+    text-align:center
+}
+.adyen-checkout__voucher-result__amount{
+    color:#00112c;
+    font-size:1em;
+    font-weight:700;
+    margin:24px auto 0;
+    text-align:center
+}
+.adyen-checkout__voucher-result__surcharge{
+    color:#687282;
+    display:block;
+    font-size:.81em;
+    font-weight:400;
+    line-height:19px;
+    text-align:center
+}
+.adyen-checkout__voucher-result__code__label{
+    -moz-user-select:none;
+    -ms-user-select:none;
+    -webkit-user-select:none;
+    display:block;
+    font-weight:400;
+    left:0;
+    margin:0 auto;
+    position:absolute;
+    right:0;
+    top:-14px;
+    user-select:none;
+    width:auto
+}
+.adyen-checkout__voucher-result__code__label__text{
+    background:#fff;
+    color:#00112c;
+    font-size:13px;
+    padding:0 8px
+}
+.adyen-checkout__voucher-result__code{
+    -moz-user-select:all;
+    -ms-user-select:all;
+    -webkit-user-select:all;
+    border:1px solid #e6e9eb;
+    border-radius:6px;
+    color:#00112c;
+    display:inline-block;
+    font-size:1.5em;
+    font-weight:700;
+    letter-spacing:1px;
+    line-height:19px;
+    margin:20px auto 16px;
+    max-width:100%;
+    min-width:200px;
+    padding:28px 48px 24px;
+    position:relative;
+    text-align:center;
+    user-select:all;
+    width:300px
+}
+.adyen-checkout__voucher-result__details{
+    list-style:none;
+    margin:8px auto 0;
+    max-width:300px;
+    padding:0
+}
+.adyen-checkout__voucher-result__details__item{
+    color:#00112c;
+    display:flex;
+    font-size:.81em;
     justify-content:space-between;
-    line-height:1;
-    margin:0;
-    padding:12px
+    margin-bottom:16px;
+    word-break:break-word
 }
-.adyen-checkout__alert--error{
-    background-color:#d81b4a
+.adyen-checkout__voucher-result__details__item:last-child{
+    margin-bottom:0
 }
-.adyen-checkout__alert--success{
-    background-color:#0abf53
+.adyen-checkout__voucher-result__details__label{
+    max-width:50%;
+    text-align:left
 }
-.adyen-checkout__alert--info{
-    background-color:#00a3ff
+.adyen-checkout__voucher-result__details__value{
+    font-weight:700;
+    max-width:50%;
+    text-align:right
 }
-.adyen-checkout__sdk,.adyen-checkout__sdk *,.adyen-checkout__sdk * :before,.adyen-checkout__sdk :after{
-    box-sizing:border-box
+.adyen-checkout__payment-method{
+    background:#fff;
+    border:1px solid #d4d9db;
+    cursor:pointer;
+    margin-top:-1px;
+    position:relative;
+    transition:opacity .3s ease-out;
+    width:100%
+}
+.adyen-checkout__payment-method:focus{
+    outline:0
+}
+.adyen-checkout__payment-method--selected+.adyen-checkout__payment-method,.adyen-checkout__payment-method:first-child{
+    border-top-left-radius:6px;
+    border-top-right-radius:6px;
+    margin-top:0
 }
-.adyen-checkout__payment-methods-list{
+.adyen-checkout__payment-method--next-selected,.adyen-checkout__payment-method:last-child{
+    border-bottom-left-radius:6px;
+    border-bottom-right-radius:6px;
+    margin-bottom:0
+}
+.adyen-checkout__payment-method--loading{
+    opacity:.2
+}
+.adyen-checkout__payment-method--selected.adyen-checkout__payment-method--loading{
+    opacity:.9
+}
+.adyen-checkout__payment-method--disabling{
+    opacity:.5
+}
+.adyen-checkout__payment-method__header{
+    align-items:center;
+    color:#00112c;
+    display:flex;
+    font-size:1em;
+    font-weight:400;
+    padding:16px;
+    position:relative;
+    transition:background .1s ease-out;
+    width:100%
+}
+.adyen-checkout__payment-method__surcharge{
+    color:#687282;
+    margin-left:5px
+}
+.adyen-checkout__payment-method--selected{
+    background:#f7f8f9;
+    border:1px solid #d4d9db;
+    border-radius:6px;
+    cursor:default;
+    margin:8px 0;
+    transition:margin .15s cubic-bezier(.4,0,.2,1) 0ms,opacity .3s ease-out
+}
+.adyen-checkout__payment-method__name--selected{
+    font-weight:500
+}
+.adyen-checkout__payment-method__details{
+    padding:0 16px
+}
+.adyen-checkout__payment-method__details__content{
+    margin:6px 0 22px
+}
+.adyen-checkout__payment-method__image__wrapper{
+    height:26px;
+    position:relative
+}
+.adyen-checkout__payment-method__image__wrapper:after{
+    border:1px solid rgba(0,27,43,.17);
+    border-radius:3px;
+    content:"";
+    height:100%;
+    left:0;
+    position:absolute;
+    top:0;
+    width:100%
+}
+.adyen-checkout__payment-method__image{
     border-radius:3px
 }
+.adyen-checkout__payment-method__disable-confirmation{
+    align-items:center;
+    background:#e6e9eb;
+    color:#00112c;
+    display:flex;
+    font-size:.94em;
+    justify-content:space-between;
+    margin-bottom:10px;
+    padding:8px 16px
+}
+.adyen-checkout__payment-method__disable-confirmation__buttons{
+    display:flex
+}
+.adyen-checkout__payment-method__disable-confirmation__button{
+    border:1px solid transparent;
+    border-radius:6px;
+    cursor:pointer;
+    font-size:.81em;
+    line-height:15px;
+    margin:0 0 0 8px;
+    padding:8px
+}
+.adyen-checkout__payment-method__disable-confirmation__button--remove{
+    background:#d10244;
+    border-color:#d10244;
+    color:#fff
+}
+.adyen-checkout__payment-method__disable-confirmation__button--cancel{
+    background:transparent;
+    border-color:#00112c;
+    color:#00112c
+}
+.adyen-checkout__payment-method__radio{
+    background-color:#fff;
+    border:1px solid #b9c4c9;
+    border-radius:50%;
+    box-shadow:inset 0 1px 3px rgba(0,27,43,.15);
+    height:18px;
+    position:absolute;
+    right:20px;
+    transition:border-color .3s ease-out;
+    width:18px
+}
+.adyen-checkout__payment-method__radio:after{
+    -webkit-transform:translateY(-50%) scale(0);
+    background-color:#fff;
+    border-radius:50%;
+    box-shadow:0 1px 1px rgba(0,15,45,.25);
+    content:"";
+    display:block;
+    height:6px;
+    left:0;
+    margin:0 auto;
+    position:absolute;
+    right:0;
+    top:50%;
+    transform:translateY(-50%) scale(0);
+    transition:-webkit-transform .3s ease-out;
+    transition:transform .3s ease-out;
+    transition:transform .3s ease-out,-webkit-transform .3s ease-out;
+    width:6px
+}
+.adyen-checkout__payment-method__radio:hover{
+    border-color:#06f;
+    cursor:pointer
+}
+.adyen-checkout__payment-method__radio--selected{
+    background-color:#06f;
+    border:0;
+    box-shadow:inset 0 1px 2px rgba(0,0,0,.26);
+    transition:all .3s ease-out
+}
+.adyen-checkout__payment-method__radio--selected:after{
+    -webkit-transform:translateY(-50%) scale(1);
+    transform:translateY(-50%) scale(1)
+}
+.adyen-checkout__button--pay{
+    margin-bottom:16px
+}
+.adyen-checkout__status{
+    align-items:center;
+    background-color:#fff;
+    border:1px solid #d4d9db;
+    border-radius:6px;
+    color:#001b2b;
+    display:flex;
+    flex-direction:column;
+    font-size:16px;
+    height:350px;
+    justify-content:center;
+    margin:0;
+    padding:32px;
+    text-align:center
+}
+.adyen-checkout__status__icon{
+    margin-bottom:24px
+}
+.adyen-checkout__dropin,.adyen-checkout__dropin *,.adyen-checkout__dropin :after,.adyen-checkout__dropin :before{
+    box-sizing:border-box
+}
 .adyen-checkout__payment-methods-list--loading{
     -moz-user-select:none;
     -ms-user-select:none;
@@ -902,9 +1066,10 @@
     user-select:none
 }
 .adyen-checkout__link{
-    color:#687282;
-    font-size:13px;
+    color:#06f;
+    text-decoration:none
+}
+.adyen-checkout__link:hover{
     text-decoration:underline
 }
-
 /* Checkout component Adyen styling end */

view/frontend/web/css/styles.css

@@ -209,1012 +209,1024 @@
 }
 
 
-/* Checkout component Adyen styling start */
-.adyen-checkout__spinner__wrapper {
-    align-items: center;
-    display: flex;
-    height: 100%;
-    justify-content: center
-}
-
-.adyen-checkout__spinner__wrapper--inline {
-    display: inline-block;
-    height: auto;
-    margin-right: 8px
-}
-
-.adyen-checkout__spinner {
-    -webkit-animation: rotateSpinner 2s infinite linear;
-    animation: rotateSpinner 2s infinite linear;
-    border: 2px solid #00a3ff;
-    border-radius: 50%;
-    border-top-color: transparent;
-    height: 43px;
-    width: 43px
-}
-
-.adyen-checkout__spinner--large {
-    height: 43px;
-    width: 43px
-}
-
-.adyen-checkout__spinner--small {
-    height: 16px;
-    width: 16px
-}
-
-.adyen-checkout__spinner--medium {
-    height: 28px;
-    width: 28px
-}
-
-@-webkit-keyframes rotateSpinner {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg)
+/* Checkout component Adyen v3.0.0 styling start */
+.adyen-checkout__field{
+    display:block;
+    margin-bottom:16px
+}
+.adyen-checkout__field--error input{
+    border-color:#d10244;
+    color:#d10244
+}
+.adyen-checkout__field:last-child{
+    margin-bottom:0
+}
+.adyen-checkout__helper-text,.adyen-checkout__label__text{
+    color:#00112c;
+    display:block;
+    font-size:.81em;
+    font-weight:400;
+    line-height:13px;
+    padding-bottom:8px
+}
+.adyen-checkout__helper-text{
+    color:#687282
+}
+.adyen-checkout__label__text{
+    transition:color .2s ease-out
+}
+.adyen-checkout__label--focused .adyen-checkout__label__text{
+    color:#06f
+}
+.adyen-checkout__error-text{
+    align-items:center;
+    color:#d10244;
+    display:flex;
+    font-size:.75em;
+    font-weight:400;
+    margin-top:4px
+}
+.adyen-checkout__spinner__wrapper{
+    align-items:center;
+    display:flex;
+    height:100%;
+    justify-content:center
+}
+.adyen-checkout__spinner__wrapper--inline{
+    display:inline-block;
+    height:auto;
+    margin-right:8px
+}
+.adyen-checkout__spinner{
+    -webkit-animation:rotateSpinner 2s infinite linear;
+    animation:rotateSpinner 2s infinite linear;
+    border:2px solid #06f;
+    border-radius:50%;
+    border-top-color:transparent;
+    height:43px;
+    width:43px
+}
+.adyen-checkout__spinner--large{
+    height:43px;
+    width:43px
+}
+.adyen-checkout__spinner--small{
+    height:16px;
+    width:16px
+}
+.adyen-checkout__spinner--medium{
+    height:28px;
+    width:28px
+}
+@-webkit-keyframes rotateSpinner{
+    0%{
+        -webkit-transform:rotate(0deg);
+        transform:rotate(0deg)
     }
-    to {
-        -webkit-transform: rotate(1turn);
-        transform: rotate(1turn)
+    to{
+        -webkit-transform:rotate(1turn);
+        transform:rotate(1turn)
     }
 }
-
-@keyframes rotateSpinner {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg)
+@keyframes rotateSpinner{
+    0%{
+        -webkit-transform:rotate(0deg);
+        transform:rotate(0deg)
     }
-    to {
-        -webkit-transform: rotate(1turn);
-        transform: rotate(1turn)
+    to{
+        -webkit-transform:rotate(1turn);
+        transform:rotate(1turn)
     }
 }
-
-.adyen-checkout__pay-button {
-    background: #001b2b;
-    border: 0;
-    border-radius: 3px;
-    box-shadow: 0 3px 4px rgba(0, 15, 45, .2);
-    color: #fff;
-    cursor: pointer;
-    font-size: 1em;
-    font-weight: 700;
-    height: 48px;
-    padding: 15px;
-    transition: background .3s ease-out;
-    width: 100%
-}
-
-.adyen-checkout__pay-button:disabled {
-    -moz-user-select: all;
-    -ms-user-select: all;
-    -webkit-user-select: all;
-    background: #e6e9eb;
-    box-shadow: none;
-    cursor: not-allowed;
-    user-select: all
-}
-
-.adyen-checkout__pay-button--loading {
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    background: #4c5f6b;
-    box-shadow: none;
-    outline: 0;
-    pointer-events: none;
-    user-select: none
-}
-
-.adyen-checkout__pay-button .adyen-checkout__spinner {
-    border-color: transparent #fff #fff;
-    border-width: 3px
-}
-
-.adyen-checkout__pay-button__content {
-    align-items: center;
-    display: flex;
-    justify-content: center
-}
-
-.adyen-checkout__payment-method {
-    background: #fff;
-    border: 1px solid #edf0f3;
-    cursor: pointer;
-    margin-top: -1px;
-    position: relative;
-    transition: opacity .3s ease-out;
-    width: 100%
-}
-
-.adyen-checkout__payment-method:focus {
-    outline: 0
-}
-
-.adyen-checkout__payment-method--selected + .adyen-checkout__payment-method, .adyen-checkout__payment-method:first-child {
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-    margin-top: 0
-}
-
-.adyen-checkout__payment-method--next-selected {
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px
-}
-
-.adyen-checkout__payment-method--loading {
-    opacity: .2
-}
-
-.adyen-checkout__payment-method--selected.adyen-checkout__payment-method--loading {
-    opacity: .9
-}
-
-.adyen-checkout__payment-method--disabling {
-    opacity: .5
-}
-
-.adyen-checkout__payment-method__header {
-    align-items: center;
-    color: #00202e;
-    display: flex;
-    font-size: 16px;
-    font-weight: 400;
-    padding: 16px;
-    position: relative;
-    transition: background .1s ease-out;
-    width: 100%
-}
-
-.adyen-checkout__payment-method__surcharge {
-    color: #687282;
-    margin-left: 5px
-}
-
-.adyen-checkout__payment-method--selected {
-    background: #f7f8f9;
-    border: 1px solid #d4d9db;
-    border-radius: 3px;
-    cursor: default;
-    margin: 8px 0;
-    transition: margin .15s cubic-bezier(.4, 0, .2, 1) 0ms, opacity .3s ease-out
-}
-
-.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__header {
-    font-weight: 500
-}
-
-.adyen-checkout__payment-method__details {
-    padding: 0 16px 16px
-}
-
-.adyen-checkout__payment-method__details__content {
-    padding: 6px 0 24px
-}
-
-.adyen-checkout__payment-method__image__wrapper {
-    height: 26px;
-    position: relative
-}
-
-.adyen-checkout__payment-method__image__wrapper:after {
-    border: 1px solid rgba(0, 27, 43, .17);
-    border-radius: 3px;
-    content: "";
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%
-}
-
-.adyen-checkout__payment-method__image {
-    border-radius: 3px
-}
-
-.adyen-checkout__payment-method__disable_oneclick {
-    background-color: transparent;
-    border: none;
-    color: #687282;
-    cursor: pointer;
-    display: block;
-    font-size: 13px;
-    padding: 0;
-    position: absolute;
-    right: 70px;
-    text-decoration: underline
-}
-
-.adyen-checkout__payment-method__disable_oneclick:focus {
-    color: #00a3ff;
-    outline: 0
-}
-
-.adyen-checkout__payment-method__disable-confirmation {
-    align-items: center;
-    background: #e6e9eb;
-    color: #001b2b;
-    display: flex;
-    font-size: 15px;
-    justify-content: space-between;
-    margin-bottom: 10px;
-    padding: 8px 16px
-}
-
-.adyen-checkout__payment-method__disable-confirmation__buttons {
-    display: flex
-}
-
-.adyen-checkout__payment-method__disable-confirmation__button {
-    border: 1px solid transparent;
-    border-radius: 3px;
-    cursor: pointer;
-    font-size: 13px;
-    line-height: 15px;
-    margin: 0 0 0 8px;
-    padding: 8px
-}
-
-.adyen-checkout__payment-method__disable-confirmation__button--remove {
-    background: #d10244;
-    border-color: #d10244;
-    color: #fff
-}
-
-.adyen-checkout__payment-method__disable-confirmation__button--cancel {
-    background: transparent;
-    border-color: #001b2b;
-    color: #001b2b
-}
-
-.adyen-checkout__payment-method__radio {
-    background-color: #fff;
-    border: 1px solid #b9c4c9;
-    border-radius: 50%;
-    box-shadow: inset 0 1px 3px rgba(0, 27, 43, .15);
-    height: 18px;
-    position: absolute;
-    right: 20px;
-    transition: border-color .3s ease-out;
-    width: 18px
-}
-
-.adyen-checkout__payment-method__radio:after {
-    -webkit-transform: translateY(-50%) scale(0);
-    background-color: #fff;
-    border-radius: 50%;
-    box-shadow: 0 1px 1px rgba(0, 15, 45, .25);
-    content: "";
-    display: block;
-    height: 6px;
-    left: 0;
-    margin: 0 auto;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%) scale(0);
-    transition: -webkit-transform .3s ease-out;
-    transition: transform .3s ease-out;
-    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
-    width: 6px
-}
-
-.adyen-checkout__payment-method__radio:hover {
-    border-color: #00a3ff;
-    cursor: pointer
-}
-
-.adyen-checkout__payment-method__radio--selected {
-    background-color: #00a3ff;
-    border: 0 solid transparent;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .26);
-    transition: all .3s ease-out
-}
-
-.adyen-checkout__payment-method__radio--selected:after {
-    -webkit-transform: translateY(-50%) scale(1);
-    transform: translateY(-50%) scale(1)
-}
-
-.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__helper-text, .adyen-checkout__label__text {
-    color: #001b2b;
-    display: block;
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 13px;
-    padding-bottom: 8px
-}
-
-.adyen-checkout__helper-text {
-    color: #687282
-}
-
-.adyen-checkout__label__text {
-    transition: color .2s ease-out
-}
-
-.adyen-checkout__label--focused .adyen-checkout__label__text {
-    color: #07b
-}
-
-.adyen-checkout__error-text, .adyen-checkout__label__text--error {
-    align-items: center;
-    color: #d0021b;
-    display: flex;
-    font-size: 12px;
-    font-weight: 400;
-    margin-top: 4px
-}
-
-.adyen-checkout__icon svg {
-    fill: currentColor
-}
-
-.adyen-checkout__open-invoice .adyen-checkout__input-wrapper--socialSecurityNumber + .adyen-checkout__error-text {
-    max-width: 380px
-}
-
-.adyen-checkout__radio_group + .adyen-checkout-input__inline-validation {
-    display: none
-}
-
-.adyen-checkout__radio_group__input {
-    opacity: 0;
-    position: absolute
-}
-
-.adyen-checkout__radio_group__label {
-    display: block;
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 16px;
-    margin-bottom: 8px;
-    padding-bottom: 0;
-    padding-left: 24px;
-    position: relative
-}
-
-.adyen-checkout__radio_group__label:before {
-    background-color: #fff;
-    border: 1px solid #b9c4c9;
-    border-radius: 50%;
-    content: "";
-    height: 16px;
-    left: 0;
-    position: absolute;
-    top: 0;
-    transition: border-color .3s ease-out;
-    width: 16px
-}
-
-.adyen-checkout__radio_group__label:after {
-    -webkit-transform: scale(0);
-    background-color: #fff;
-    border-radius: 50%;
-    box-shadow: 0 1px 1px rgba(0, 15, 45, .25);
-    content: "";
-    display: block;
-    height: 6px;
-    left: 5px;
-    margin: 0 auto;
-    position: absolute;
-    top: 5px;
-    transform: scale(0);
-    transition: -webkit-transform .3s ease-out;
-    transition: transform .3s ease-out;
-    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
-    width: 6px
-}
-
-.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: 0 solid transparent;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .26);
-    transition: all .3s ease-out
-}
-
-.adyen-checkout__radio_group__input:checked + .adyen-checkout__radio_group__label:after {
-    -webkit-transform: scale(1);
-    transform: scale(1)
-}
-
-.adyen-checkout__radio_group__label.adyen-checkout__radio_group__label--invalid:before {
-    border: 1px solid #d10244
-}
-
-.adyen-checkout__checkbox {
-    display: block
-}
-
-.adyen-checkout__checkbox > input[type=checkbox] {
-    opacity: 0;
-    pointer-events: none;
-    position: absolute
-}
-
-.adyen-checkout__checkbox__label {
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    color: #001b2b;
-    cursor: pointer;
-    display: inline-block;
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 16px;
-    padding-left: 24px;
-    position: relative;
-    user-select: none
-}
-
-.adyen-checkout__checkbox__input + span:before {
-    -webkit-transform: rotate(37deg);
-    -webkit-transform-origin: 100% 100%;
-    border-color: transparent #fff #fff transparent;
-    border-radius: 0 2px 1px 2px;
-    border-style: solid;
-    border-width: 1px 2px 2px 1px;
-    content: "";
-    height: 11px;
-    left: 1px;
-    opacity: 0;
-    position: absolute;
-    top: 2px;
-    transform: rotate(37deg);
-    transform-origin: 100% 100%;
-    transition: opacity .2s ease-out;
-    width: 6px;
-    z-index: 1
-}
-
-.adyen-checkout__checkbox__input:checked + .adyen-checkout__checkbox__label:before {
-    opacity: 1
-}
-
-.adyen-checkout__checkbox__input + .adyen-checkout__checkbox__label:after {
-    background-color: #fff;
-    border: 1px solid #b9c4c9;
-    border-radius: 3px;
-    content: "";
-    height: 16px;
-    left: 0;
-    position: absolute;
-    top: 0;
-    transition: background .15s ease-out, border .05s ease-out, box-shadow .1s ease-out;
-    width: 16px;
-    z-index: 0
-}
-
-.adyen-checkout__checkbox__input:checked + .adyen-checkout__checkbox__label:after {
-    background-color: #00a3ff;
-    border: 1px solid #00a3ff
-}
-
-.adyen-checkout__checkbox__input:focus + span:after {
-    border: 1px solid #00a3ff;
-    box-shadow: 0 0 0 2px #91d7ff
-}
-
-.adyen-checkout__checkbox__input.adyen-checkout__checkbox__input--invalid + .adyen-checkout__checkbox__label:after {
-    border: 1px solid #d10244
-}
-
-.adyen-checkout__dropdown {
-    font-size: 16px;
-    max-width: 100%;
-    width: 200px
-}
-
-.adyen-checkout__dropdown--small {
-    width: 130px
-}
-
-.adyen-checkout__dropdown--large {
-    width: 300px
-}
-
-.adyen-checkout__dropdown__button {
-    background: #fff;
-    border: 1px solid #b9c4c9;
-    border-radius: 3px;
-    font-size: 16px;
-    height: 40px;
-    line-height: 20px;
-    outline: 0;
-    padding: 9px 20px 9px 8px;
-    transition: border .2s ease-out, box-shadow .2s ease-out;
-    width: 100%
-}
-
-.adyen-checkout__dropdown__button__icon {
-    margin-right: 8px;
-    max-height: 20px;
-    max-width: 32px
-}
-
-.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__button--readonly, .adyen-checkout__dropdown__button--readonly.adyen-checkout__dropdown__button--active {
-    background: #e6e9eb;
-    color: #001b2b;
-    cursor: not-allowed
-}
-
-.adyen-checkout__dropdown__button--invalid {
-    border-color: #d10244
-}
-
-.adyen-checkout__dropdown__button__text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap
-}
-
-.adyen-checkout__dropdown__list {
-    border-radius: 3px;
-    box-shadow: 0 2px 7px rgba(0, 15, 45, .3);
-    margin-top: 2px;
-    max-height: 360px;
-    z-index: 2
-}
-
-.adyen-checkout__dropdown__element {
-    -ms-hyphens: auto;
-    -webkit-hyphens: auto;
-    border: 1px solid transparent;
-    border-bottom-color: #e6e9eb;
-    cursor: pointer;
-    hyphens: auto;
-    line-height: 20px;
-    outline: 0;
-    padding: 8px;
-    transition: background .2s ease-out, border-color .2s ease-out;
-    word-break: break-word
-}
-
-.adyen-checkout__dropdown__element:last-child {
-    border-bottom: 0
-}
-
-.adyen-checkout__dropdown__element:active, .adyen-checkout__dropdown__element:focus, .adyen-checkout__dropdown__element:hover {
-    background: #f0f2f4
-}
-
-.adyen-checkout__dropdown__element:active, .adyen-checkout__dropdown__element:focus {
-    border-bottom-color: #00a3ff;
-    border-top-color: #00a3ff
-}
-
-.adyen-checkout__dropdown__element__icon {
-    margin-right: 8px;
-    max-height: 20px;
-    max-width: 32px
-}
-
-.adyen-checkout__dropdown + .adyen-checkout-input__inline-validation {
-    right: 32px
-}
-
-.adyen-checkout__select-list {
-    margin: 0;
-    padding: 0
-}
-
-.adyen-checkout__select-list__item {
-    background: #fff;
-    border-top: 1px solid #b9c4c9;
-    cursor: pointer;
-    display: inline-block;
-    font-size: 16px;
-    line-height: 20px;
-    outline: 0;
-    padding: 9px;
-    width: 100%
-}
-
-.adyen-checkout__select-list__item:first-child {
-    border-top: 0
-}
-
-.adyen-checkout__select-list__item:active, .adyen-checkout__select-list__item:focus, .adyen-checkout__select-list__item:hover {
-    background: rgba(145, 215, 255, .5)
-}
-
-.adyen-checkout__select-list__item--selected {
-    background: rgba(145, 215, 255, .5);
-    font-weight: 700
-}
-
-.adyen-checkout__input {
-    background: #fff;
-    border: 1px solid #b9c4c9;
-    border-radius: 3px;
-    color: #001b2b;
-    display: block;
-    font-family: inherit;
-    font-size: 16px;
-    height: 40px;
-    outline: none;
-    padding: 5px 8px;
-    position: relative;
-    transition: border .2s ease-out, box-shadow .2s ease-out;
-    width: 200px
-}
-
-.adyen-checkout__input:required {
-    box-shadow: none
-}
-
-.adyen-checkout__input-wrapper {
-    display: inline-block;
-    position: relative
-}
-
-.adyen-checkout__input-wrapper--block {
-    display: block
-}
-
-.adyen-checkout-input__inline-validation {
-    -webkit-transform: translateY(-50%);
-    height: 16px;
-    position: absolute;
-    right: 14px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 16px
-}
-
-.adyen-checkout-input__inline-validation--valid {
-    color: #039450
-}
-
-.adyen-checkout-input__inline-validation--invalid {
-    color: #d10244
-}
-
-.adyen-checkout__input.adyen-checkout__input--small {
-    width: 130px
-}
-
-.adyen-checkout__input.adyen-checkout__input--large {
-    width: 300px
-}
-
-.adyen-checkout__input.adyen-checkout__input--invalid {
-    border-color: #d10244
-}
-
-.adyen-checkout__input.adyen-checkout__input--valid {
-    border-bottom-color: #04ba65
-}
-
-.adyen-checkout__input--error {
-    border-color: #d0021b
-}
-
-.adyen-checkout__input::-webkit-input-placeholder {
-    color: #90a2bd;
-    font-weight: 200
-}
-
-.adyen-checkout__input:-ms-input-placeholder {
-    color: #90a2bd;
-    font-weight: 200
-}
-
-.adyen-checkout__input::-ms-input-placeholder {
-    color: #90a2bd;
-    font-weight: 200
-}
-
-.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;
-    border-color: transparent;
-    color: #687282;
-    cursor: default
-}
-
-.adyen-checkout__fieldset {
-    color: #687282;
-    display: block;
-    padding-bottom: 30px;
-    width: 100%
-}
-
-.adyen-checkout__fieldset__title {
-    color: #687282;
-    display: block;
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 1px;
-    margin: 0;
-    padding: 0 0 20px;
-    text-transform: uppercase
-}
-
-.adyen-checkout__fieldset--readonly {
-    color: #001b2b;
-    font-size: 13px;
-    line-height: 19px;
-    margin: 0
-}
-
-.adyen-checkout__open-invoice .adyen-checkout__checkbox--consent-checkbox {
-    max-width: 540px
-}
-
-.adyen-checkout__open-invoice .adyen-checkout__checkbox + .adyen-checkout__open-invoice .adyen-checkout__fieldset {
-    padding-top: 30px
+.adyen-checkout__icon svg{
+    fill:currentColor
+}
+.adyen-checkout__open-invoice .adyen-checkout__input-wrapper--socialSecurityNumber+.adyen-checkout__error-text{
+    max-width:380px
+}
+.adyen-checkout__radio_group+.adyen-checkout-input__inline-validation{
+    display:none
+}
+.adyen-checkout__radio_group__input{
+    opacity:0;
+    position:absolute
+}
+.adyen-checkout__radio_group__label{
+    display:block;
+    font-size:.81em;
+    font-weight:400;
+    line-height:16px;
+    margin-bottom:8px;
+    padding-bottom:0;
+    padding-left:24px;
+    position:relative
+}
+.adyen-checkout__radio_group__label:before{
+    background-color:#fff;
+    border:1px solid #b9c4c9;
+    border-radius:50%;
+    content:"";
+    height:16px;
+    left:0;
+    position:absolute;
+    top:0;
+    transition:border-color .3s ease-out;
+    width:16px
+}
+.adyen-checkout__radio_group__label:after{
+    -webkit-transform:scale(0);
+    background-color:#fff;
+    border-radius:50%;
+    box-shadow:0 1px 1px rgba(0,15,45,.25);
+    content:"";
+    display:block;
+    height:6px;
+    left:5px;
+    margin:0 auto;
+    position:absolute;
+    top:5px;
+    transform:scale(0);
+    transition:-webkit-transform .3s ease-out;
+    transition:transform .3s ease-out;
+    transition:transform .3s ease-out,-webkit-transform .3s ease-out;
+    width:6px
+}
+.adyen-checkout__radio_group__label:hover{
+    border-color:#06f;
+    cursor:pointer
+}
+.adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:before,.adyen-checkout__radio_group__label--selected{
+    background-color:#06f;
+    border:0;
+    box-shadow:inset 0 1px 2px rgba(0,0,0,.26);
+    transition:all .3s ease-out
+}
+.adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:after{
+    -webkit-transform:scale(1);
+    transform:scale(1)
+}
+.adyen-checkout__radio_group__label.adyen-checkout__radio_group__label--invalid:before{
+    border:1px solid #d10244
+}
+.adyen-checkout__checkbox{
+    display:block
+}
+.adyen-checkout__checkbox__input{
+    opacity:0;
+    pointer-events:none;
+    position:absolute
+}
+.adyen-checkout__checkbox__label{
+    -moz-user-select:none;
+    -ms-user-select:none;
+    -webkit-user-select:none;
+    color:#00112c;
+    cursor:pointer;
+    display:inline-block;
+    font-size:.81em;
+    font-weight:400;
+    line-height:16px;
+    padding-left:24px;
+    position:relative;
+    user-select:none
+}
+.adyen-checkout__checkbox__input+span:before{
+    -webkit-transform:rotate(37deg);
+    -webkit-transform-origin:100% 100%;
+    border-color:transparent #fff #fff transparent;
+    border-radius:0 2px 1px 2px;
+    border-style:solid;
+    border-width:1px 2px 2px 1px;
+    content:"";
+    height:11px;
+    left:1px;
+    opacity:0;
+    position:absolute;
+    top:2px;
+    transform:rotate(37deg);
+    transform-origin:100% 100%;
+    transition:opacity .2s ease-out;
+    width:6px;
+    z-index:1
+}
+.adyen-checkout__checkbox__input:checked+.adyen-checkout__checkbox__label:before{
+    opacity:1
+}
+.adyen-checkout__checkbox__input+.adyen-checkout__checkbox__label:after{
+    background-color:#fff;
+    border:1px solid #b9c4c9;
+    border-radius:3px;
+    content:"";
+    height:16px;
+    left:0;
+    position:absolute;
+    top:0;
+    transition:background .15s ease-out,border .05s ease-out,box-shadow .1s ease-out;
+    width:16px;
+    z-index:0
+}
+.adyen-checkout__checkbox__input--invalid+.adyen-checkout__checkbox__label:after{
+    border:1px solid #d10244
+}
+.adyen-checkout__checkbox__input:checked+.adyen-checkout__checkbox__label:after{
+    background-color:#06f;
+    border:1px solid #06f
+}
+.adyen-checkout__checkbox__input:focus+span:after{
+    border:1px solid #06f;
+    box-shadow:0 0 0 2px #99c2ff
+}
+.adyen-checkout__dropdown{
+    font-size:1em;
+    max-width:100%;
+    width:200px
+}
+.adyen-checkout__dropdown--small{
+    width:130px
+}
+.adyen-checkout__dropdown--large{
+    width:300px
+}
+.adyen-checkout__dropdown__button{
+    background:#fff;
+    border:1px solid #b9c4c9;
+    border-radius:6px;
+    font-size:1em;
+    height:40px;
+    line-height:20px;
+    outline:0;
+    padding:9px 20px 9px 8px;
+    transition:border .2s ease-out,box-shadow .2s ease-out;
+    width:100%
+}
+.adyen-checkout__dropdown__button__icon{
+    margin-right:8px;
+    max-height:26px;
+    max-width:40px
+}
+.adyen-checkout__dropdown__button--active,.adyen-checkout__dropdown__button:active,.adyen-checkout__dropdown__button:focus{
+    border-color:#06f;
+    box-shadow:0 0 0 2px #99c2ff
+}
+.adyen-checkout__dropdown__button--readonly,.adyen-checkout__dropdown__button--readonly.adyen-checkout__dropdown__button--active{
+    background:#e6e9eb;
+    color:#00112c;
+    cursor:not-allowed
+}
+.adyen-checkout__dropdown__button--invalid{
+    border-color:#d10244
+}
+.adyen-checkout__dropdown__button__text{
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap
+}
+.adyen-checkout__dropdown__list{
+    border-radius:6px;
+    box-shadow:0 2px 7px rgba(0,15,45,.3);
+    margin-top:2px;
+    max-height:360px;
+    z-index:2
+}
+.adyen-checkout__dropdown__element{
+    -ms-hyphens:auto;
+    -webkit-hyphens:auto;
+    border:1px solid transparent;
+    border-bottom-color:#e6e9eb;
+    cursor:pointer;
+    font-size:.81em;
+    hyphens:auto;
+    line-height:20px;
+    outline:0;
+    padding:8px;
+    transition:background .2s ease-out,border-color .2s ease-out;
+    word-break:break-word
+}
+.adyen-checkout__dropdown__element:last-child{
+    border-bottom:0
+}
+.adyen-checkout__dropdown__element:active,.adyen-checkout__dropdown__element:focus,.adyen-checkout__dropdown__element:hover{
+    background:rgba(230,233,235,.6)
+}
+.adyen-checkout__dropdown__element:active,.adyen-checkout__dropdown__element:focus{
+    border-bottom-color:#06f;
+    border-top-color:#06f
+}
+.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active{
+    background:rgba(0,102,255,.1)
+}
+.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active:active,.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active:focus,.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active:hover{
+    background:rgba(0,102,255,.15)
+}
+.adyen-checkout__dropdown__element__icon{
+    border-radius:3px;
+    margin-right:8px;
+    max-height:26px;
+    max-width:40px
+}
+.adyen-checkout__dropdown+.adyen-checkout-input__inline-validation{
+    right:32px
+}
+.adyen-checkout__select-list{
+    margin:0;
+    padding:0
+}
+.adyen-checkout__select-list__item{
+    background:#fff;
+    border:1px solid transparent;
+    border-bottom-color:#e6e9eb;
+    cursor:pointer;
+    display:inline-block;
+    font-size:1em;
+    line-height:20px;
+    outline:0;
+    padding:9px;
+    width:100%
+}
+.adyen-checkout__select-list__item:first-child{
+    border-top:0
+}
+.adyen-checkout__select-list__item:active,.adyen-checkout__select-list__item:focus,.adyen-checkout__select-list__item:hover{
+    background:rgba(230,233,235,.6)
+}
+.adyen-checkout__select-list__item--selected{
+    background:rgba(0,102,255,.1);
+    font-weight:500
+}
+.adyen-checkout__select-list__item--selected:active,.adyen-checkout__select-list__item--selected:focus,.adyen-checkout__select-list__item--selected:hover{
+    background:rgba(0,102,255,.15)
+}
+.adyen-checkout__input{
+    background:#fff;
+    border:1px solid #b9c4c9;
+    border-radius:6px;
+    color:#00112c;
+    display:block;
+    font-family:inherit;
+    font-size:1em;
+    height:40px;
+    outline:none;
+    padding:5px 8px;
+    position:relative;
+    transition:border .2s ease-out,box-shadow .2s ease-out;
+    width:200px
+}
+.adyen-checkout__input:required{
+    box-shadow:none
+}
+.adyen-checkout__input-wrapper{
+    display:inline-block;
+    position:relative
+}
+.adyen-checkout__input-wrapper--block{
+    display:block
+}
+.adyen-checkout-input__inline-validation{
+    -webkit-transform:translateY(-50%);
+    height:16px;
+    position:absolute;
+    right:14px;
+    top:50%;
+    transform:translateY(-50%);
+    width:16px
+}
+.adyen-checkout-input__inline-validation--valid{
+    color:#0abf53
+}
+.adyen-checkout-input__inline-validation--invalid{
+    color:#d10244
+}
+.adyen-checkout__input--small{
+    width:134px
+}
+.adyen-checkout__input--large{
+    width:300px
+}
+.adyen-checkout__input--invalid{
+    border-color:#d10244
+}
+.adyen-checkout__input--valid{
+    border-bottom-color:#0abf53
+}
+.adyen-checkout__input--error{
+    border-color:#d10244
+}
+.adyen-checkout__input::-webkit-input-placeholder{
+    color:#b9c4c9;
+    font-weight:200
+}
+.adyen-checkout__input:-ms-input-placeholder{
+    color:#b9c4c9;
+    font-weight:200
+}
+.adyen-checkout__input::-ms-input-placeholder{
+    color:#b9c4c9;
+    font-weight:200
+}
+.adyen-checkout__input::placeholder{
+    color:#b9c4c9;
+    font-weight:200
+}
+.adyen-checkout__input--focus,.adyen-checkout__input:active,.adyen-checkout__input:focus{
+    border:1px solid #06f;
+    box-shadow:0 0 0 2px #99c2ff
+}
+.adyen-checkout__input[readonly]{
+    background-color:#e6e9eb;
+    border-color:transparent;
+    color:#687282;
+    cursor:default
+}
+.adyen-checkout__fieldset{
+    color:#687282;
+    display:block;
+    padding-bottom:30px;
+    width:100%
+}
+.adyen-checkout__fieldset__title{
+    color:#687282;
+    display:block;
+    font-size:.68em;
+    font-weight:700;
+    letter-spacing:1px;
+    margin:0;
+    padding:0 0 20px;
+    text-transform:uppercase
+}
+.adyen-checkout__fieldset--readonly{
+    color:#00112c;
+    font-size:.81em;
+    line-height:19px;
+    margin:0
 }
 .adyen-checkout__open-invoice .adyen-checkout__checkbox--consent-checkbox{
     max-width:540px
 }
-.adyen-checkout__open-invoice .adyen-checkout__checkbox+.adyen-checkout__open-invoice .adyen-checkout__fieldset{
-    padding-top:30px
-}
 .adyen-checkout__open-invoice .adyen-checkout__checkbox{
     margin:0 0 20px
 }
-
-.adyen-checkout__applepay__button {
-    height: 40px;
-    width: 240px
-}
-
-.adyen-checkout__card-input__form {
-    transition: opacity .25s ease-out
-}
-
-.adyen-checkout__card__exp-cvc {
-    display: flex
-}
-
-.adyen-checkout__card__cardNumber {
-    max-width: 400px
-}
-
-.adyen-checkout__card__cardNumber__input {
-    padding: 5px 8px 5px 57px
-}
-
-.adyen-checkout__card__exp-date__input--oneclick {
-    font-weight: 400;
-    height: 40px;
-    line-height: 40px
-}
-
-.adyen-checkout__card__exp-cvc .adyen-checkout__field {
-    margin-bottom: 0;
-    margin-right: 24px
-}
-
-.adyen-checkout__card-input .adyen-checkout__store-details {
-    margin-top: 16px
-}
-
-.adyen-checkout__giropay__results {
-    background: #fff;
-    border: 1px solid #b9c4c9;
-    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;
-    font-weight: 200;
-    padding: 0 0 0 2px
-}
-
-.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__phone-input {
-    display: flex
-}
-
-.adyen-checkout__phone-input__prefix {
-    margin-right: .5em
-}
-
-.adyen-checkout__phone-input .adyen-checkout__field {
-    margin-bottom: 0
-}
-
-.adyen-checkout__iban-input__number {
-    padding: 5px 36px 5px 8px;
-    text-transform: uppercase
-}
-
-.adyen-checkout__threeds2__challenge-container {
-    background-color: transparent;
-    box-sizing: border-box;
-    display: block;
-    overflow: auto;
-    width: 100%
-}
-
-.adyen-checkout__threeds2__challenge-container--01 {
-    height: 400px;
-    width: 250px
-}
-
-.adyen-checkout__threeds2__challenge-container--02 {
-    height: 400px;
-    width: 390px
-}
-
-.adyen-checkout__threeds2__challenge-container--03 {
-    height: 600px;
-    width: 500px
-}
-
-.adyen-checkout__threeds2__challenge-container--04 {
-    height: 400px;
-    width: 600px
-}
-
-.adyen-checkout__threeds2_challenge-container--05 {
-    height: 100%;
-    width: 100%
-}
-
-.adyen-checkout__wechatpay {
-    background: #fff;
-    border: 1px solid #dde1e3;
-    border-radius: 3px;
-    min-height: 443px;
-    padding: 40px;
-    text-align: center
-}
-
-.adyen-checkout__wechatpay__brand-logo {
-    height: 20px;
-    width: 109px
-}
-
-.adyen-checkout__wechatpay__subtitle {
-    margin-top: 32px
-}
-
-.adyen-checkout__wechatpay__payment_amount, .adyen-checkout__wechatpay__subtitle {
-    color: #001b2b;
-    font-size: 16px;
-    line-height: 19px
-}
-
-.adyen-checkout__wechatpay__progress {
-    background: #d4d9db;
-    border-radius: 25px;
-    height: 4px;
-    margin: 32px auto 12px;
-    padding-right: 3%;
-    width: 152px
-}
-
-.adyen-checkout__wechatpay__progress > span {
-    background: #00a3ff;
-    border-radius: 25px;
-    display: block;
-    height: 100%
-}
-
-.adyen-checkout__wechatpay__countdown {
-    color: #687282;
-    font-size: 13px
-}
-
-.adyen-checkout__wechatpay .adyen-checkout__spinner__wrapper {
-    margin: 60px 0
-}
-
-.adyen-checkout__alert {
-    align-items: flex-start;
-    background-color: #00a3ff;
-    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__link--more-information{
+    font-size:.81em
+}
+.adyen-checkout__applepay__button{
+    height:40px;
+    width:240px
+}
+.adyen-checkout__card-input__form{
+    transition:opacity .25s ease-out
+}
+.adyen-checkout__card__exp-cvc{
+    display:flex
+}
+.adyen-checkout__card__cardNumber{
+    max-width:400px
+}
+.adyen-checkout__card__cardNumber__input{
+    padding:5px 8px 5px 57px
+}
+.adyen-checkout__card__exp-date__input--oneclick{
+    font-weight:400;
+    height:40px;
+    line-height:40px
+}
+.adyen-checkout__card__exp-cvc .adyen-checkout__field{
+    margin-bottom:0;
+    margin-right:32px
+}
+.adyen-checkout__card-input .adyen-checkout__store-details{
+    margin-top:16px
+}
+.adyen-checkout__giropay__results{
+    background:#fff;
+    border:1px solid #b9c4c9;
+    border-radius:6px;
+    max-height:140px;
+    min-height:100px;
+    min-width:300px;
+    overflow-y:scroll;
+    width:100%
+}
+.adyen-checkout__giropay__no-results{
+    color:#687282;
+    display:block;
+    font-size:.81em;
+    padding:0 0 0 2px
+}
+.adyen-checkout__giropay__placeholder{
+    color:#b9c4c9;
+    display:block;
+    font-weight:200;
+    padding:0 0 0 2px
+}
+.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:.81em;
+    line-height:16px;
+    vertical-align:middle
+}
+.adyen-checkout__giropay__error{
+    color:#d10244;
+    font-size:.81em
+}
+.adyen-checkout__button{
+    background:#00112c;
+    border:0;
+    border-radius:6px;
+    box-shadow:0 3px 4px rgba(0,15,45,.2);
+    color:#fff;
+    cursor:pointer;
+    font-size:1em;
+    font-weight:700;
+    height:48px;
+    margin:0;
+    padding:15px;
+    transition:background .3s ease-out;
+    width:100%
+}
+.adyen-checkout__button:disabled{
+    -moz-user-select:all;
+    -ms-user-select:all;
+    -webkit-user-select:all;
+    background:#e6e9eb;
+    box-shadow:none;
+    cursor:not-allowed;
+    user-select:all
+}
+.adyen-checkout__button--loading{
+    -moz-user-select:none;
+    -ms-user-select:none;
+    -webkit-user-select:none;
+    background:#687282;
+    box-shadow:none;
+    outline:0;
+    pointer-events:none;
+    user-select:none
+}
+.adyen-checkout__button .adyen-checkout__spinner{
+    border-color:transparent #fff #fff;
+    border-width:3px
+}
+.adyen-checkout__button__content{
+    align-items:center;
+    display:flex;
+    justify-content:center
+}
+.adyen-checkout__phone-input{
+    display:flex
+}
+.adyen-checkout__phone-input__prefix{
+    margin-bottom:0;
+    margin-right:.5em
+}
+.adyen-checkout__input--phone-number{
+    margin-bottom:0
+}
+.adyen-checkout__iban-input__number{
+    padding:5px 36px 5px 8px;
+    text-transform:uppercase
+}
+.adyen-checkout__threeds2__challenge,.adyen-checkout__threeds2__challenge-container{
+    background-color:transparent;
+    box-sizing:border-box;
+    display:block;
+    overflow:auto;
+    width:100%
+}
+.adyen-checkout__threeds2__challenge-container--01{
+    height:400px;
+    width:250px
+}
+.adyen-checkout__threeds2__challenge-container--02{
+    height:400px;
+    width:390px
+}
+.adyen-checkout__threeds2__challenge-container--03{
+    height:600px;
+    width:500px
+}
+.adyen-checkout__threeds2__challenge-container--04{
+    height:400px;
+    width:600px
+}
+.adyen-checkout__threeds2_challenge-container--05{
+    height:100%;
+    width:100%
+}
+.adyen-checkout__threeds2__challenge.adyen-checkout__threeds2__challenge--05{
+    overflow:hidden;
+    padding-top:56.25%;
+    position:relative
+}
+.adyen-checkout__threeds2__challenge.adyen-checkout__threeds2__challenge--05 .adyen-checkout__iframe--threeDSIframe{
+    border:0;
+    height:100%;
+    left:0;
+    position:absolute;
+    top:0;
+    width:100%
+}
+.adyen-checkout__qr-loader{
+    background:#fff;
+    border:1px solid #d4d9db;
+    border-radius:6px;
+    padding:40px;
+    text-align:center
+}
+.adyen-checkout__qr-loader--app{
+    border:0;
+    border-radius:0;
+    padding:0
+}
+.adyen-checkout__qr-loader__brand-logo{
+    max-height:50px;
+    width:110px
+}
+.adyen-checkout__qr-loader__subtitle{
+    margin-top:32px
+}
+.adyen-checkout__qr-loader__payment_amount,.adyen-checkout__qr-loader__subtitle{
+    color:#00112c;
+    font-size:1em;
+    line-height:19px
+}
+.adyen-checkout__qr-loader__payment_amount{
+    font-weight:700
+}
+.adyen-checkout__qr-loader__progress{
+    background:#d4d9db;
+    border-radius:25px;
+    height:4px;
+    margin:32px auto 12px;
+    padding-right:3%;
+    width:152px
+}
+.adyen-checkout__qr-loader__percentage{
+    background:#06f;
+    border-radius:25px;
+    display:block;
+    height:100%
+}
+.adyen-checkout__qr-loader__countdown{
+    color:#687282;
+    font-size:.81em
+}
+.adyen-checkout__qr-loader>.adyen-checkout__spinner__wrapper{
+    margin:60px 0
+}
+.adyen-checkout__qr-loader__separator__label{
+    background:#fff;
+    border-radius:100%;
+    color:#687282;
+    display:inline-block;
+    height:34px;
+    line-height:34px;
+    position:relative;
+    width:34px;
+    z-index:1
+}
+.adyen-checkout__qr-loader__separator__line{
+    -webkit-transform:translateY(-17px);
+    border-top:1px solid #d4d9db;
+    display:block;
+    transform:translateY(-17px)
+}
+.adyen-checkout__button.adyen-checkout__button--qr-loader{
+    display:block;
+    text-decoration:none
+}
+.adyen-checkout__voucher-result{
+    background:#fff;
+    border:1px solid #d4d9db;
+    border-radius:6px;
+    box-sizing:border-box;
+    padding:20px 16px 56px;
+    text-align:center
+}
+.adyen-checkout__voucher-result__image{
+    align-items:center;
+    display:flex;
+    justify-content:center;
+    margin-bottom:16px;
+    width:100%
+}
+.adyen-checkout__voucher-result__image__wrapper{
+    display:inline-block;
+    padding:8px;
+    width:120px
+}
+.adyen-checkout__voucher-result__image__wrapper:nth-child(2){
+    border-left:1px solid #d4d9db
+}
+.adyen-checkout__voucher-result__image__brand,.adyen-checkout__voucher-result__image__issuer{
+    height:34px
+}
+.adyen-checkout__voucher-result__image__brand{
+    height:60px
+}
+.adyen-checkout__voucher-result__introduction{
+    color:#00112c;
+    font-size:.81em;
+    line-height:19px;
+    margin:0 auto;
+    max-width:400px;
+    text-align:center
+}
+.adyen-checkout__voucher-result__amount{
+    color:#00112c;
+    font-size:1em;
+    font-weight:700;
+    margin:24px auto 0;
+    text-align:center
+}
+.adyen-checkout__voucher-result__surcharge{
+    color:#687282;
+    display:block;
+    font-size:.81em;
+    font-weight:400;
+    line-height:19px;
+    text-align:center
+}
+.adyen-checkout__voucher-result__code__label{
+    -moz-user-select:none;
+    -ms-user-select:none;
+    -webkit-user-select:none;
+    display:block;
+    font-weight:400;
+    left:0;
+    margin:0 auto;
+    position:absolute;
+    right:0;
+    top:-14px;
+    user-select:none;
+    width:auto
+}
+.adyen-checkout__voucher-result__code__label__text{
+    background:#fff;
+    color:#00112c;
+    font-size:13px;
+    padding:0 8px
+}
+.adyen-checkout__voucher-result__code{
+    -moz-user-select:all;
+    -ms-user-select:all;
+    -webkit-user-select:all;
+    border:1px solid #e6e9eb;
+    border-radius:6px;
+    color:#00112c;
+    display:inline-block;
+    font-size:1.5em;
+    font-weight:700;
+    letter-spacing:1px;
+    line-height:19px;
+    margin:20px auto 16px;
+    max-width:100%;
+    min-width:200px;
+    padding:28px 48px 24px;
+    position:relative;
+    text-align:center;
+    user-select:all;
+    width:300px
+}
+.adyen-checkout__voucher-result__details{
+    list-style:none;
+    margin:8px auto 0;
+    max-width:300px;
+    padding:0
+}
+.adyen-checkout__voucher-result__details__item{
+    color:#00112c;
+    display:flex;
+    font-size:.81em;
+    justify-content:space-between;
+    margin-bottom:16px;
+    word-break:break-word
+}
+.adyen-checkout__voucher-result__details__item:last-child{
+    margin-bottom:0
+}
+.adyen-checkout__voucher-result__details__label{
+    max-width:50%;
+    text-align:left
+}
+.adyen-checkout__voucher-result__details__value{
+    font-weight:700;
+    max-width:50%;
+    text-align:right
+}
+.adyen-checkout__payment-method{
+    background:#fff;
+    border:1px solid #d4d9db;
+    cursor:pointer;
+    margin-top:-1px;
+    position:relative;
+    transition:opacity .3s ease-out;
+    width:100%
+}
+.adyen-checkout__payment-method:focus{
+    outline:0
+}
+.adyen-checkout__payment-method--selected+.adyen-checkout__payment-method,.adyen-checkout__payment-method:first-child{
+    border-top-left-radius:6px;
+    border-top-right-radius:6px;
+    margin-top:0
+}
+.adyen-checkout__payment-method--next-selected,.adyen-checkout__payment-method:last-child{
+    border-bottom-left-radius:6px;
+    border-bottom-right-radius:6px;
+    margin-bottom:0
+}
+.adyen-checkout__payment-method--loading{
+    opacity:.2
+}
+.adyen-checkout__payment-method--selected.adyen-checkout__payment-method--loading{
+    opacity:.9
+}
+.adyen-checkout__payment-method--disabling{
+    opacity:.5
+}
+.adyen-checkout__payment-method__header{
+    align-items:center;
+    color:#00112c;
+    display:flex;
+    font-size:1em;
+    font-weight:400;
+    padding:16px;
+    position:relative;
+    transition:background .1s ease-out;
+    width:100%
+}
+.adyen-checkout__payment-method__surcharge{
+    color:#687282;
+    margin-left:5px
+}
+.adyen-checkout__payment-method--selected{
+    background:#f7f8f9;
+    border:1px solid #d4d9db;
+    border-radius:6px;
+    cursor:default;
+    margin:8px 0;
+    transition:margin .15s cubic-bezier(.4,0,.2,1) 0ms,opacity .3s ease-out
+}
+.adyen-checkout__payment-method__name--selected{
+    font-weight:500
+}
+.adyen-checkout__payment-method__details{
+    padding:0 16px
+}
+.adyen-checkout__payment-method__details__content{
+    margin:6px 0 22px
+}
+.adyen-checkout__payment-method__image__wrapper{
+    height:26px;
+    position:relative
+}
+.adyen-checkout__payment-method__image__wrapper:after{
+    border:1px solid rgba(0,27,43,.17);
+    border-radius:3px;
+    content:"";
+    height:100%;
+    left:0;
+    position:absolute;
+    top:0;
+    width:100%
+}
+.adyen-checkout__payment-method__image{
+    border-radius:3px
+}
+.adyen-checkout__payment-method__disable-confirmation{
+    align-items:center;
+    background:#e6e9eb;
+    color:#00112c;
+    display:flex;
+    font-size:.94em;
+    justify-content:space-between;
+    margin-bottom:10px;
+    padding:8px 16px
+}
+.adyen-checkout__payment-method__disable-confirmation__buttons{
+    display:flex
+}
+.adyen-checkout__payment-method__disable-confirmation__button{
+    border:1px solid transparent;
+    border-radius:6px;
+    cursor:pointer;
+    font-size:.81em;
+    line-height:15px;
+    margin:0 0 0 8px;
+    padding:8px
+}
+.adyen-checkout__payment-method__disable-confirmation__button--remove{
+    background:#d10244;
+    border-color:#d10244;
+    color:#fff
+}
+.adyen-checkout__payment-method__disable-confirmation__button--cancel{
+    background:transparent;
+    border-color:#00112c;
+    color:#00112c
+}
+.adyen-checkout__payment-method__radio{
+    background-color:#fff;
+    border:1px solid #b9c4c9;
+    border-radius:50%;
+    box-shadow:inset 0 1px 3px rgba(0,27,43,.15);
+    height:18px;
+    position:absolute;
+    right:20px;
+    transition:border-color .3s ease-out;
+    width:18px
+}
+.adyen-checkout__payment-method__radio:after{
+    -webkit-transform:translateY(-50%) scale(0);
+    background-color:#fff;
+    border-radius:50%;
+    box-shadow:0 1px 1px rgba(0,15,45,.25);
+    content:"";
+    display:block;
+    height:6px;
+    left:0;
+    margin:0 auto;
+    position:absolute;
+    right:0;
+    top:50%;
+    transform:translateY(-50%) scale(0);
+    transition:-webkit-transform .3s ease-out;
+    transition:transform .3s ease-out;
+    transition:transform .3s ease-out,-webkit-transform .3s ease-out;
+    width:6px
+}
+.adyen-checkout__payment-method__radio:hover{
+    border-color:#06f;
+    cursor:pointer
+}
+.adyen-checkout__payment-method__radio--selected{
+    background-color:#06f;
+    border:0;
+    box-shadow:inset 0 1px 2px rgba(0,0,0,.26);
+    transition:all .3s ease-out
+}
+.adyen-checkout__payment-method__radio--selected:after{
+    -webkit-transform:translateY(-50%) scale(1);
+    transform:translateY(-50%) scale(1)
+}
+.adyen-checkout__button--pay{
+    margin-bottom:16px
+}
+.adyen-checkout__status{
+    align-items:center;
+    background-color:#fff;
+    border:1px solid #d4d9db;
+    border-radius:6px;
+    color:#001b2b;
+    display:flex;
+    flex-direction:column;
+    font-size:16px;
+    height:350px;
+    justify-content:center;
+    margin:0;
+    padding:32px;
+    text-align:center
+}
+.adyen-checkout__status__icon{
+    margin-bottom:24px
+}
+.adyen-checkout__dropin,.adyen-checkout__dropin *,.adyen-checkout__dropin :after,.adyen-checkout__dropin :before{
+    box-sizing:border-box
+}
+.adyen-checkout__payment-methods-list--loading{
+    -moz-user-select:none;
+    -ms-user-select:none;
+    -webkit-user-select:none;
+    pointer-events:none;
+    user-select:none
+}
+.adyen-checkout__link{
+    color:#06f;
+    text-decoration:none
+}
+.adyen-checkout__link:hover{
+    text-decoration:underline
 }
+/* Checkout component Adyen styling end */
 
-.adyen-checkout__alert--success {
-    background-color: #0abf53
-}
+/* never show the close button as this will result in errors */
+.threeDS2Modal .action-close {display:none; }
 
-.adyen-checkout__alert--info {
-    background-color: #00a3ff
-}
 
-.adyen-checkout__sdk, .adyen-checkout__sdk *, .adyen-checkout__sdk * :before, .adyen-checkout__sdk :after {
-    box-sizing: border-box
-}
 
-.adyen-checkout__payment-methods-list {
-    border-radius: 3px
+.threeDS2Modal #threeDS2Container {
+    height: 100vh;
 }
 
-.adyen-checkout__payment-methods-list--loading {
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    pointer-events: none;
-    user-select: none
+.adyen-checkout__threeds2, .adyen-checkout__threeds2__challenge {
+    height:100%;
 }
 
-.adyen-checkout__link {
-    color: #687282;
-    font-size: 13px;
-    text-decoration: underline
-}
-/* never show the close button as this will result in errors */
-.threeDS2Modal .action-close {display:none; }
-/* Checkout component Adyen styling end */
-

view/frontend/web/js/model/adyen-payment-service.js

@@ -7,8 +7,11 @@ define(
         'underscore',
         'Magento_Checkout/js/model/quote',
         'Adyen_Payment/js/model/adyen-method-list',
+        'Magento_Customer/js/model/customer',
+        'Magento_Checkout/js/model/url-builder',
+        'mage/storage'
     ],
-    function (_, quote, methodList) {
+    function (_, quote, methodList, customer, urlBuilder, storage) {
         'use strict';
 
         return {
@@ -25,6 +28,43 @@ define(
              */
             getAvailablePaymentMethods: function () {
                 return methodList();
+            },
+            /**
+             * Retrieve the list of available payment methods from the server
+             */
+            retrieveAvailablePaymentMethods: function (callback = null) {
+                var self = this;
+
+                // retrieve payment methods
+                var serviceUrl,
+                    payload;
+                if (customer.isLoggedIn()) {
+                    serviceUrl = urlBuilder.createUrl('/carts/mine/retrieve-adyen-payment-methods', {});
+                } else {
+                    serviceUrl = urlBuilder.createUrl('/guest-carts/:cartId/retrieve-adyen-payment-methods', {
+                        cartId: quote.getQuoteId()
+                    });
+                }
+
+                payload = {
+                    cartId: quote.getQuoteId(),
+                    shippingAddress: quote.shippingAddress()
+                };
+
+                storage.post(
+                    serviceUrl, JSON.stringify(payload)
+                ).done(
+                    function (response) {
+                        self.setPaymentMethods(response);
+                        if (callback !== null) {
+                            callback();
+                        }
+                    }
+                ).fail(
+                    function (response) {
+                        self.setPaymentMethods([]);
+                    }
+                )
             }
         };
     }

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

@@ -84,7 +84,6 @@ define(
                         'expiryYear',
                         'installment',
                         'creditCardDetailsValid',
-                        'variant',
                         'placeOrderAllowed'
                     ]);
 
@@ -119,7 +118,7 @@ define(
 
                 self.cardComponent = self.checkout.create('card', {
                     originKey: self.getOriginKey(),
-                    loadingContext: self.getLoadingContext(),
+                    environment: self.getCheckoutEnvironment(),
                     type: 'card',
                     hasHolderName: true,
                     holderNameRequired: true,
@@ -128,13 +127,12 @@ define(
 
                     onChange: function (state, component) {
                         if (!!state.isValid && !component.state.errors.encryptedSecurityCode) {
-                            self.storeCc = !!state.data.storeDetails;
-                            self.variant(state.brand);
-                            self.creditCardNumber(state.data.encryptedCardNumber);
-                            self.expiryMonth(state.data.encryptedExpiryMonth);
-                            self.expiryYear(state.data.encryptedExpiryYear);
-                            self.securityCode(state.data.encryptedSecurityCode);
-                            self.creditCardOwner(state.data.holderName);
+                            self.storeCc = !!state.data.storePaymentMethod;
+                            self.creditCardNumber(state.data.paymentMethod.encryptedCardNumber);
+                            self.expiryMonth(state.data.paymentMethod.encryptedExpiryMonth);
+                            self.expiryYear(state.data.paymentMethod.encryptedExpiryYear);
+                            self.securityCode(state.data.paymentMethod.encryptedSecurityCode);
+                            self.creditCardOwner(state.data.paymentMethod.holderName);
                             self.creditCardDetailsValid(true);
                             self.placeOrderAllowed(true);
                         } else {
@@ -248,28 +246,44 @@ define(
                     self.threeDS2ChallengeComponent = self.checkout
                         .create('threeDS2Challenge', {
                             challengeToken: token,
+                            size: '05',
                             onComplete: function (result) {
-                                popupModal.modal("closeModal");
+                                self.closeModal(popupModal);
+
                                 fullScreenLoader.startLoader();
                                 threeds2.processThreeDS2(result.data).done(function (responseJSON) {
                                     self.validateThreeDS2OrPlaceOrder(responseJSON);
                                 }).error(function () {
-                                    popupModal.modal("closeModal");
                                     self.isPlaceOrderActionAllowed(true);
                                     fullScreenLoader.stopLoader();
                                 });
                             },
                             onError: function (error) {
+                                self.closeModal(popupModal);
                                 console.log(JSON.stringify(error));
                             }
                         });
                     self.threeDS2ChallengeComponent.mount(threeDS2Node);
                 }
             },
+            /**
+             * This method is a workaround to close the modal in the right way and reconstruct the threeDS2Modal.
+             * This will solve issues when you cancel the 3DS2 challenge and retry the payment
+             */
+            closeModal: function (popupModal) {
+                popupModal.modal("closeModal");
+                $('.threeDS2Modal').remove();
+                $('.modals-overlay').remove();
+
+                // reconstruct the threeDS2Modal container again otherwise component can not find the threeDS2Modal
+                $('#threeDS2Wrapper').append("<div id=\"threeDS2Modal\">" +
+                    "<div id=\"threeDS2Container\"></div>" +
+                    "</div>");
+            },
             /**
              * Builds the payment details part of the payment information reqeust
              *
-             * @returns {{method: *, additional_data: {card_brand: *, cc_type: *, number: *, cvc: *, expiryMonth: *, expiryYear: *, holderName: *, store_cc: (boolean|*), number_of_installments: *, java_enabled: boolean, screen_color_depth: number, screen_width, screen_height, timezone_offset: *}}}
+             * @returns {{method: *, additional_data: {cc_type: *, number: *, cvc: *, expiryMonth: *, expiryYear: *, holderName: *, store_cc: (boolean|*), number_of_installments: *, java_enabled: () => boolean, screen_color_depth: number, screen_width, screen_height, timezone_offset: *, language: *}}}
              */
             getCcData: function () {
                 const browserInfo = threeDS2Utils.getBrowserInfo();
@@ -277,7 +291,6 @@ define(
                 var data = {
                     'method': this.item.method,
                     additional_data: {
-                        'card_brand': this.variant(),
                         'cc_type': this.creditCardType(),
                         'number': this.creditCardNumber(),
                         'cvc': this.securityCode(),
@@ -306,7 +319,6 @@ define(
                 return {
                     'method': this.item.method,
                     additional_data: {
-                        'card_brand': this.variant(),
                         'cc_type': this.creditCardType(),
                         'store_cc': this.storeCc,
                         'number_of_installments': this.installment()
@@ -373,7 +385,9 @@ define(
 
                             if (self.redirectAfterPlaceOrder) {
                                 // use custom redirect Link for supporting 3D secure
-                                window.location.replace(url.build(window.checkoutConfig.payment[quote.paymentMethod().method].redirectUrl));
+                                window.location.replace(url.build(
+                                    window.checkoutConfig.payment[quote.paymentMethod().method].redirectUrl)
+                                );
                             }
                         }
                     );
@@ -454,8 +468,8 @@ define(
             getOriginKey: function () {
                 return window.checkoutConfig.payment.adyenCc.originKey;
             },
-            getLoadingContext: function () {
-                return window.checkoutConfig.payment.adyenCc.checkoutUrl;
+            getCheckoutEnvironment: function () {
+                return window.checkoutConfig.payment.adyenCc.checkoutEnvironment;
             },
             getLocale: function () {
                 return window.checkoutConfig.payment.adyenCc.locale;

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

@@ -42,6 +42,7 @@ define(
         var brandCode = ko.observable(null);
         var paymentMethod = ko.observable(null);
         var messageComponents;
+        var shippingAddressCountryCode = quote.shippingAddress().countryId;
         /**
          * Shareble adyen checkout component
          * @type {AdyenCheckout}
@@ -89,74 +90,62 @@ define(
 
                 // reset variable:
                 adyenPaymentService.setPaymentMethods();
+                
+                adyenPaymentService.retrieveAvailablePaymentMethods(function() {
+                    let paymentMethods = adyenPaymentService.getAvailablePaymentMethods();
+                    if (JSON.stringify(paymentMethods).indexOf("ratepay") > -1) {
+                        var ratePayId = window.checkoutConfig.payment.adyenHpp.ratePayId;
+                        var dfValueRatePay = self.getRatePayDeviceIdentToken();
+
+                        window.di = {
+                            t: dfValueRatePay.replace(':', ''),
+                            v: ratePayId,
+                            l: 'Checkout'
+                        };
 
-                // retrieve payment methods
-                var serviceUrl,
-                    payload;
-                if (customer.isLoggedIn()) {
-                    serviceUrl = urlBuilder.createUrl('/carts/mine/retrieve-adyen-payment-methods', {});
-                } else {
-                    serviceUrl = urlBuilder.createUrl('/guest-carts/:cartId/retrieve-adyen-payment-methods', {
-                        cartId: quote.getQuoteId()
-                    });
-                }
-
-                payload = {
-                    cartId: quote.getQuoteId(),
-                    shippingAddress: quote.shippingAddress()
-                };
-
-                storage.post(
-                    serviceUrl, JSON.stringify(payload)
-                ).done(
-                    function (response) {
-                        adyenPaymentService.setPaymentMethods(response);
-                        if (JSON.stringify(response).indexOf("ratepay") > -1) {
-                            var ratePayId = window.checkoutConfig.payment.adyenHpp.ratePayId;
-                            var dfValueRatePay = self.getRatePayDeviceIdentToken();
-
-                            window.di = {
-                                t: dfValueRatePay.replace(':', ''),
-                                v: ratePayId,
-                                l: 'Checkout'
-                            };
-
-                            // Load Ratepay script
-                            var ratepayScriptTag = document.createElement('script');
-                            ratepayScriptTag.src = "//d.ratepay.com/" + ratePayId + "/di.js";
-                            ratepayScriptTag.type = "text/javascript";
-                            document.body.appendChild(ratepayScriptTag);
-                        }
+                        // Load Ratepay script
+                        var ratepayScriptTag = document.createElement('script');
+                        ratepayScriptTag.src = "//d.ratepay.com/" + ratePayId + "/di.js";
+                        ratepayScriptTag.type = "text/javascript";
+                        document.body.appendChild(ratepayScriptTag);
+                    }
 
-                        // create component needs to be in initialize method
-                        var messageComponents = {};
-                        _.map(response, function (value) {
-
-                            var messageContainer = new Messages();
-                            var name = 'messages-' + self.getBrandCodeFromPaymentMethod(value);
-                            var messagesComponent = {
-                                parent: self.name,
-                                name: 'messages-' + self.getBrandCodeFromPaymentMethod(value),
-                                displayArea: 'messages-' + self.getBrandCodeFromPaymentMethod(value),
-                                component: 'Magento_Ui/js/view/messages',
-                                config: {
-                                    messageContainer: messageContainer
-                                }
-                            };
-                            layout([messagesComponent]);
+                    // create component needs to be in initialize method
+                    var messageComponents = {};
+                    _.map(paymentMethods, function (value) {
+
+                        var messageContainer = new Messages();
+                        var name = 'messages-' + self.getBrandCodeFromPaymentMethod(value);
+                        var messagesComponent = {
+                            parent: self.name,
+                            name: 'messages-' + self.getBrandCodeFromPaymentMethod(value),
+                            displayArea: 'messages-' + self.getBrandCodeFromPaymentMethod(value),
+                            component: 'Magento_Ui/js/view/messages',
+                            config: {
+                                messageContainer: messageContainer
+                            }
+                        };
+                        layout([messagesComponent]);
 
-                            messageComponents[name] = messageContainer;
-                        });
-                        self.messageComponents = messageComponents;
+                        messageComponents[name] = messageContainer;
+                    });
+                    self.messageComponents = messageComponents;
 
-                        fullScreenLoader.stopLoader();
-                    }
-                ).fail(function (error) {
                     fullScreenLoader.stopLoader();
                 });
             },
             getAdyenHppPaymentMethods: function () {
                 var self = this;
+                let currentShippingAddressCountryCode = quote.shippingAddress().countryId;
+
+                // retrieve new payment methods if country code changed
+                if (shippingAddressCountryCode != currentShippingAddressCountryCode) {
+                    fullScreenLoader.startLoader();
+                    adyenPaymentService.retrieveAvailablePaymentMethods();
+                    shippingAddressCountryCode = currentShippingAddressCountryCode;
+                    fullScreenLoader.stopLoader();
+                }
+
                 var paymentMethods = adyenPaymentService.getAvailablePaymentMethods();
 
                 var paymentList = _.map(paymentMethods, function (value) {
@@ -289,16 +278,28 @@ define(
                     result.getBankAccountNumberMaxLength = function () {
                         return 17;
                     };
+                    /**
+                     * Finds the issuer property in the payment method's response and if available returns it's index
+                     * @returns
+                     */
+                    result.findIssuersProperty = function () {
+                        var issuerKey = false;
+                        if (typeof value.details !== 'undefined') {
+                            $.each(value.details, function(key, detail) {
+                                if (typeof detail.items !== 'undefined' && detail.key == 'issuer') {
+                                    issuerKey = key;
+                                }
+                            });
+                        }
+
+                        return issuerKey;
+                    }
                     /**
                      * Checks if the payment method has issuers property available
                      * @returns {boolean}
                      */
                     result.hasIssuersProperty = function () {
-                        if (
-                            typeof value.details !== 'undefined' &&
-                            typeof value.details[0].items !== 'undefined' &&
-                            value.details[0].key == 'issuer'
-                        ) {
+                        if (result.findIssuersProperty() !== false) {
                             return true;
                         }
 
@@ -309,7 +310,7 @@ define(
                      * @returns {boolean}
                      */
                     result.hasIssuersAvailable = function () {
-                        if (result.hasIssuersProperty() && value.details[0].items.length > 0) {
+                        if (result.hasIssuersProperty() && value.details[result.findIssuersProperty()].items.length > 0) {
                             return true;
                         }
 
@@ -321,7 +322,7 @@ define(
                      */
                     result.getIssuers = function() {
                         if (result.hasIssuersAvailable()) {
-                            return value.details[0].items;
+                            return value.details[result.findIssuersProperty()].items;
                         }
 
                         return [];
@@ -372,7 +373,7 @@ define(
                             items: result.getIssuers(),
                             onChange: function (state) {
                                 if (!!state.isValid) {
-                                    result.issuer(state.data.issuer);
+                                    result.issuer(state.data.paymentMethod.issuer);
                                     result.isPlaceOrderAllowed(true);
 
                                 } else {
@@ -397,8 +398,8 @@ define(
                             countryCode: self.getLocale(),
                             onChange: function (state) {
                                 if (!!state.isValid) {
-                                    result.ownerName(state.data["sepa.ownerName"]);
-                                    result.ibanNumber(state.data["sepa.ibanNumber"]);
+                                    result.ownerName(state.data.paymentMethod["sepa.ownerName"]);
+                                    result.ibanNumber(state.data.paymentMethod["sepa.ibanNumber"]);
                                     result.isPlaceOrderAllowed(true);
                                 } else {
                                     result.isPlaceOrderAllowed(false);
@@ -430,9 +431,9 @@ define(
                             },
                             onChange: function (state) {
                                 if (!!state.isValid) {
-                                    result.dob(state.data.personalDetails.dateOfBirth);
-                                    result.telephone(state.data.personalDetails.telephoneNumber);
-                                    result.gender(state.data.personalDetails.gender);
+                                    result.dob(state.data.paymentMethod.personalDetails.dateOfBirth);
+                                    result.telephone(state.data.paymentMethod.personalDetails.telephoneNumber);
+                                    result.gender(state.data.paymentMethod.personalDetails.gender);
                                     result.isPlaceOrderAllowed(true);
                                 } else {
                                     result.isPlaceOrderAllowed(false);
@@ -455,9 +456,9 @@ define(
                             },
                             onChange: function (state) {
                                 if (!!state.isValid) {
-                                    result.dob(state.data.personalDetails.dateOfBirth);
-                                    result.telephone(state.data.personalDetails.telephoneNumber);
-                                    result.gender(state.data.personalDetails.gender);
+                                    result.dob(state.data.paymentMethod.personalDetails.dateOfBirth);
+                                    result.telephone(state.data.paymentMethod.personalDetails.telephoneNumber);
+                                    result.gender(state.data.paymentMethod.personalDetails.gender);
                                     result.isPlaceOrderAllowed(true);
                                 } else {
                                     result.isPlaceOrderAllowed(false);

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

@@ -110,7 +110,7 @@ define(
                 var checkout = new AdyenCheckout({
                     locale: self.getLocale(),
                     originKey: self.getOriginKey(),
-                    loadingContext: self.getLoadingContext(),
+                    environment: self.getCheckoutEnvironment(),
                     risk: {
                         enabled: false
                     }
@@ -256,9 +256,10 @@ define(
                                             isValid(true);
 
                                             if (typeof state.data !== 'undefined' &&
-                                                typeof state.data.encryptedSecurityCode !== 'undefined'
+                                                typeof state.data.paymentMethod !== 'undefined' &&
+                                                typeof state.data.paymentMethod.encryptedSecurityCode !== 'undefined'
                                             ) {
-                                                self.encryptedCreditCardVerificationNumber = state.data.encryptedSecurityCode;
+                                                self.encryptedCreditCardVerificationNumber = state.data.paymentMethod.encryptedSecurityCode;
                                             }
                                         } else {
                                             self.encryptedCreditCardVerificationNumber = '';
@@ -268,14 +269,6 @@ define(
                                                 isValid(false);
                                             }
                                         }
-
-                                        // When we move to the component v2.2 it should be removed
-                                        if (self.agreement_data.variant == "maestro" &&
-                                            component.state.errors.encryptedSecurityCode
-                                        ) {
-                                            self.placeOrderAllowed(false);
-                                            isValid(false);
-                                        }
                                     }
                                 })
                                 .mount(oneClickCardNode);
@@ -566,8 +559,8 @@ define(
             getOriginKey: function () {
                 return window.checkoutConfig.payment.adyenOneclick.originKey;
             },
-            getLoadingContext: function () {
-                return window.checkoutConfig.payment.adyenOneclick.checkoutUrl;
+            getCheckoutEnvironment: function () {
+                return window.checkoutConfig.payment.adyenOneclick.checkoutEnvironment;
             }
         });
     }

view/frontend/web/js/view/payment/method-renderer/adyen-pos-cloud-method.js

@@ -57,12 +57,26 @@ define(
                 agreementsAssigner(paymentData);
                 serviceUrl = urlBuilder.createUrl('/adyen/initiate', {});
                 fullScreenLoader.startLoader();
+
+                let payload = {
+                    "payload": JSON.stringify({terminal_id: self.terminalId()})
+                }
+
                 return storage.post(
-                    serviceUrl
+                    serviceUrl,
+                    JSON.stringify(payload)
                 ).always(function(){
                     self.placeOrderPos()});
                 return false;
             },
+            initObservable: function () {
+                this._super()
+                    .observe([
+                        'terminalId'
+                    ]);
+
+                return this;
+            },
             posComplete: function () {
                 this.afterPlaceOrder();
                 if (this.redirectAfterPlaceOrder) {
@@ -91,6 +105,33 @@ define(
                     }
                 )
             },
+            getConnectedTerminals: function() {
+                let connectedTerminals = [];
+                const connectedTerminalsList = window.checkoutConfig.payment.adyenPos.connectedTerminals;
+
+                for (let i = 0; i < connectedTerminalsList.length; i++) {
+                    connectedTerminals.push(
+                        {
+                            key: connectedTerminalsList[i],
+                            value: connectedTerminalsList[i]
+                        }
+                    );
+                }
+
+                return connectedTerminals;
+            },
+            /**
+             * Get data for place order
+             * @returns {{method: *}}
+             */
+            getData: function () {
+                return {
+                    'method': this.item.method,
+                    additional_data: {
+                        'terminal_id': this.terminalId()
+                    }
+                };
+            },
             showLogo: function () {
                 return window.checkoutConfig.payment.adyen.showLogo;
             },

view/frontend/web/template/payment/cc-form.html

@@ -77,10 +77,13 @@
                     <div afterRender="renderSecureFields()" data-bind="attr: { id: 'cardContainer'}"></div>
                 </div>
 
-                <div id="threeDS2Modal">
-                    <div id="threeDS2Container"></div>
+                <div id="threeDS2Wrapper">
+                    <div id="threeDS2Modal">
+                        <div id="threeDS2Container"></div>
+                    </div>
                 </div>
 
+
                 <!-- ko if: (hasInstallments())-->
 
                 <div class="field required"

view/frontend/web/template/payment/pos-cloud-form.html

@@ -50,6 +50,25 @@
             <!--/ko-->
         </div>
 
+        <div class="field required"
+             data-bind="attr: {id: getCode() + '_connected_terminals_div'}, visible: getConnectedTerminals().length > 0">
+            <label data-bind="attr: {for: getCode() + '_connected_terminals'}" class="label">
+                <span><!-- ko text: $t('Connected terminals')--><!-- /ko --></span>
+            </label>
+            <div class="control">
+
+                <select class="select"
+                        name="paymentMethod[connected_terminals]"
+                        data-bind="attr: {id: getCode() + '_connected_terminals', 'data-container': getCode() + '-connected-terminals', 'data-validate': JSON.stringify({required:true})},
+                                        options: getConnectedTerminals(),
+                                        optionsValue: 'value',
+                                        optionsText: 'key',
+                                        value: terminalId"
+                        >
+                </select>
+            </div>
+        </div>
+
         <div class="checkout-agreements-block">
             <!-- ko foreach: $parent.getRegion('before-place-order') -->
             <!-- ko template: getTemplate() --><!-- /ko -->
@@ -62,8 +81,7 @@
                         data-bind="
                             click: initiate,
                             attr: {title: $t('Place Order')},
-                            enable: (getCode() == isChecked()),
-                            css: {disabled: !isPlaceOrderActionAllowed()}
+                            enable: getConnectedTerminals().length > 0
                             "
                         disabled>
                     <span data-bind="text: $t('Place Order')"></span>
@@ -72,4 +90,3 @@
         </div>
     </div>
 </div>
-