- Add admin message to add the API key instead of the username and

password
- Remove username, password (test, live) from admin/store configuration/
required settings. Add API Key instead
- Get secure fields SDK based on isDemo
- Include checkout js components
- Remove CSE library and tokens

AdminMessage/APIKeyMessage.php

+<?php
+/**
+ *                       ######
+ *                       ######
+ * ############    ####( ######  #####. ######  ############   ############
+ * #############  #####( ######  #####. ######  #############  #############
+ *        ######  #####( ######  #####. ######  #####  ######  #####  ######
+ * ###### ######  #####( ######  #####. ######  #####  #####   #####  ######
+ * ###### ######  #####( ######  #####. ######  #####          #####  ######
+ * #############  #############  #############  #############  #####  ######
+ *  ############   ############  #############   ############  #####  ######
+ *                                      ######
+ *                               #############
+ *                               ############
+ *
+ * Adyen Payment Module
+ *
+ * Copyright (c) 2018 Adyen B.V.
+ * This file is open source and available under the MIT license.
+ * See the LICENSE file for more info.
+ *
+ * Author: Adyen <magento@adyen.com>
+ */
+
+namespace Adyen\Payment\AdminMessage;
+
+class APIKeyMessage implements \Magento\Framework\Notification\MessageInterface
+{
+	/**
+	 * @var \Adyen\Payment\Helper\Data
+	 */
+	protected $_adyenHelper;
+
+	/**
+	 * @var \Magento\AdminNotification\Model\InboxFactory
+	 */
+	protected $_inboxFactory;
+
+	/**
+	 * @var \Magento\Framework\App\Config\ScopeConfigInterface
+	 */
+	protected $scopeConfigInterface;
+
+	/**
+	 * @var \Magento\Store\Model\StoreManagerInterface
+	 */
+	protected $storeManagerInterface;
+
+	/**
+	 * @var \Magento\Backend\Model\Auth\Session
+	 */
+	protected $authSession;
+
+	/**
+	 * Message identity
+	 */
+	const MESSAGE_IDENTITY = 'Adyen API Key Control message';
+
+	/**
+	 * APIKeyMessage constructor.
+	 *
+	 * @param \Adyen\Payment\Helper\Data $adyenHelper
+	 * @param \Magento\AdminNotification\Model\InboxFactory $inboxFactory
+	 * @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfigInterface
+	 */
+	public function __construct(
+		\Adyen\Payment\Helper\Data $adyenHelper,
+		\Magento\AdminNotification\Model\InboxFactory $inboxFactory,
+		\Magento\Framework\App\Config\ScopeConfigInterface $scopeConfigInterface,
+		\Magento\Store\Model\StoreManagerInterface $storeManagerInterface,
+		\Magento\Backend\Model\Auth\Session $authSession
+	) {
+		$this->_adyenHelper = $adyenHelper;
+		$this->_inboxFactory = $inboxFactory;
+		$this->scopeConfigInterface = $scopeConfigInterface;
+		$this->storeManagerInterface = $storeManagerInterface;
+		$this->authSession = $authSession;
+	}
+
+	/**
+	 * Retrieve unique system message identity
+	 *
+	 * @return string
+	 */
+	public function getIdentity()
+	{
+		return self::MESSAGE_IDENTITY;
+	}
+
+	/**
+	 * Check whether the system message should be shown
+	 *
+	 * @return bool
+	 */
+	public function isDisplayed()
+	{
+		// Only execute the query the first time you access the Admin page
+		if ($this->authSession->isFirstPageAfterLogin() && $this->_adyenHelper->getWsUsername()) {
+			try {
+				$title = "Adyen extension requires the API KEY!";
+				$messageData[] = array(
+					'severity' => $this->getSeverity(),
+					'date_added' => date("Y-m-d"),
+					'title' => $title,
+					'description' => "Please provide API-KEY for the webserver user " . $this->_adyenHelper->getWsUsername() . "  for default/store " . $this->storeManagerInterface->getStore()->getName(),
+					'url' => "https://docs.adyen.com/developers/plug-ins-and-partners/magento-2/set-up-the-plugin-in-magento#step3configuretheplugininmagento",
+				);
+
+				/*
+				 * The parse function checks if the $versionData message exists in the inbox,
+				 * otherwise it will create it and add it to the inbox.
+				 */
+				$this->_inboxFactory->create()->parse(array_reverse($messageData));
+
+				/*
+				 * Only show the message if the API Key is not set
+				 */
+				if (empty($this->_adyenHelper->getAPIKey())) {
+					return true;
+				}
+			} catch (\Exception $e) {
+				return false;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Retrieve system message text
+	 *
+	 * @return \Magento\Framework\Phrase
+	 */
+	public function getText()
+	{
+		$message = __("Please provide API-KEY for the webserver user " . $this->_adyenHelper->getWsUsername() . " for default/store" . $this->storeManagerInterface->getStore()->getName());
+		return __($message);
+	}
+
+	/**
+	 * Retrieve system message severity
+	 *
+	 * @return int
+	 */
+	public function getSeverity()
+	{
+		return self::SEVERITY_CRITICAL;
+	}
+}

Helper/Data.php

@@ -33,6 +33,8 @@ class Data extends AbstractHelper
 	const MODULE_NAME = 'adyen-magento2';
     const TEST = 'test';
     const LIVE = 'live';
+	const SECURE_FIELDS_SDK_TEST = "https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSecuredFields.1.3.0.min.js";
+	const SECURE_FIELDS_SDK_LIVE = "https://checkoutshopper-live.adyen.com/checkoutshopper/assets/js/sdk/checkoutSecuredFields.1.3.0.min.js";
 
     /**
      * @var \Magento\Framework\Encryption\EncryptorInterface
@@ -94,20 +96,35 @@ class Data extends AbstractHelper
 	 */
     protected $adyenLogger;
 
-    /**
-     * Data constructor.
-     *
-     * @param \Magento\Framework\App\Helper\Context $context
-     * @param \Magento\Framework\Encryption\EncryptorInterface $encryptor
-     * @param \Magento\Framework\Config\DataInterface $dataStorage
-     * @param \Magento\Directory\Model\Config\Source\Country $country
-     * @param \Magento\Framework\Module\ModuleListInterface $moduleList
-     * @param \Adyen\Payment\Model\ResourceModel\Billing\Agreement\CollectionFactory $billingAgreementCollectionFactory
-     * @param \Magento\Framework\View\Asset\Repository $assetRepo
-     * @param \Magento\Framework\View\Asset\Source $assetSource
+	/**
+	 * @var \Magento\Framework\UrlInterface
+	 */
+    protected $urlInterface;
+
+	/**
+	 * @var \Adyen\Service\ServiceFactory
+	 */
+    protected $adyenServiceFactory;
+
+	/**
+	 * Data constructor.
+	 *
+	 * @param \Magento\Framework\App\Helper\Context $context
+	 * @param \Magento\Framework\Encryption\EncryptorInterface $encryptor
+	 * @param \Magento\Framework\Config\DataInterface $dataStorage
+	 * @param \Magento\Directory\Model\Config\Source\Country $country
+	 * @param \Magento\Framework\Module\ModuleListInterface $moduleList
+	 * @param \Adyen\Payment\Model\ResourceModel\Billing\Agreement\CollectionFactory $billingAgreementCollectionFactory
+	 * @param \Magento\Framework\View\Asset\Repository $assetRepo
+	 * @param \Magento\Framework\View\Asset\Source $assetSource
+	 * @param \Adyen\Payment\Model\ResourceModel\Notification\CollectionFactory $notificationFactory
+	 * @param \Magento\Tax\Model\Config $taxConfig
+	 * @param \Magento\Tax\Model\Calculation $taxCalculation
 	 * @param \Magento\Framework\App\ProductMetadataInterface $productMetadata
 	 * @param \Adyen\Payment\Logger\AdyenLogger $adyenLogger
-     */
+	 * @param \Magento\Framework\UrlInterface $urlInterface
+	 * @param \Adyen\Service\ServiceFactory $adyenServiceFactory
+	 */
     public function __construct(
         \Magento\Framework\App\Helper\Context $context,
         \Magento\Framework\Encryption\EncryptorInterface $encryptor,
@@ -121,7 +138,9 @@ class Data extends AbstractHelper
         \Magento\Tax\Model\Config $taxConfig,
         \Magento\Tax\Model\Calculation $taxCalculation,
 		\Magento\Framework\App\ProductMetadataInterface $productMetadata,
-		\Adyen\Payment\Logger\AdyenLogger $adyenLogger
+		\Adyen\Payment\Logger\AdyenLogger $adyenLogger,
+		\Magento\Framework\UrlInterface $urlInterface,
+		\Adyen\Service\ServiceFactory $adyenServiceFactory
 
     ) {
         parent::__construct($context);
@@ -137,6 +156,8 @@ class Data extends AbstractHelper
         $this->_taxCalculation = $taxCalculation;
         $this->productMetadata = $productMetadata;
         $this->adyenLogger = $adyenLogger;
+        $this->urlInterface = $urlInterface;
+        $this->adyenServiceFactory = $adyenServiceFactory;
     }
 
     /**
@@ -576,35 +597,35 @@ class Data extends AbstractHelper
         return $this->_encryptor->decrypt(trim($this->getAdyenAbstractConfigData('notification_password')));
     }
 
-    /**
-     * @desc Retrieve the webserver username
-     * @return string
-     */
-    public function getWsUsername($storeId = null)
-    {
-        if ($this->isDemoMode($storeId)) {
-            $wsUsername = trim($this->getAdyenAbstractConfigData('ws_username_test', $storeId));
-        } else {
-            $wsUsername = trim($this->getAdyenAbstractConfigData('ws_username_live', $storeId));
-        }
-        return $wsUsername;
-    }
+	/**
+	 * @desc Retrieve the API key
+	 * @return string
+	 */
+	public function getAPIKey($storeId = null)
+	{
+		if ($this->isDemoMode($storeId)) {
+			$apiKey = $this->_encryptor->decrypt(trim($this->getAdyenAbstractConfigData('api_key_test',
+				$storeId)));
+		} else {
+			$apiKey = $this->_encryptor->decrypt(trim($this->getAdyenAbstractConfigData('api_key_live',
+				$storeId)));
+		}
+		return $apiKey;
+	}
 
-    /**
-     * @desc Retrieve the webserver password
-     * @return string
-     */
-    public function getWsPassword($storeId = null)
-    {
-        if ($this->isDemoMode($storeId)) {
-            $wsPassword = $this->_encryptor->decrypt(trim($this->getAdyenAbstractConfigData('ws_password_test',
-                $storeId)));
-        } else {
-            $wsPassword = $this->_encryptor->decrypt(trim($this->getAdyenAbstractConfigData('ws_password_live',
-                $storeId)));
-        }
-        return $wsPassword;
-    }
+	/**
+	 * @desc Retrieve the webserver username
+	 * @return string
+	 */
+	public function getWsUsername($storeId = null)
+	{
+		if ($this->isDemoMode($storeId)) {
+			$wsUsername = trim($this->getAdyenAbstractConfigData('ws_username_test', $storeId));
+		} else {
+			$wsUsername = trim($this->getAdyenAbstractConfigData('ws_username_live', $storeId));
+		}
+		return $wsUsername;
+	}
 
     /**
      * @desc Cancels the order
@@ -989,35 +1010,19 @@ class Data extends AbstractHelper
         return $notifications->getSize();;
     }
 
-    /**
-     * @param $storeId
-     * @return mixed
-     */
-    public function getLibraryToken($storeId = null)
-    {
-        if ($this->isDemoMode($storeId)) {
-            $libraryToken = $this->getAdyenCcConfigData('cse_library_token_test', $storeId);
-        } else {
-            $libraryToken = $this->getAdyenCcConfigData('cse_library_token_live', $storeId);
-        }
-        return $libraryToken;
-    }
-
-    /**
-     * Returns the hosted location of the client side encryption file
-     *
-     * @param null $storeId
-     * @return string
-     */
-    public function getLibrarySource($storeId = null)
-    {
-        $environment = self::LIVE;
-        if ($this->isDemoMode($storeId)) {
-            $environment = self::TEST;
-        }
-
-        return "https://" . $environment . ".adyen.com/hpp/cse/js/" . $this->getLibraryToken($storeId) . ".shtml";
-    }
+	/**
+	 * Retrieves secure field sdk url based on the demo mode
+	 *
+	 * @return string
+	 */
+	public function getSecureFieldsSdk()
+	{
+		if ($this->isDemoMode()) {
+			return self::SECURE_FIELDS_SDK_TEST;
+		} else {
+			return self::SECURE_FIELDS_SDK_LIVE;
+		}
+	}
 
     /**
      * @param $formFields
@@ -1174,13 +1179,11 @@ class Data extends AbstractHelper
     public function initializeAdyenClient($storeId = null)
 	{
 		// initialize client
-		$webserviceUsername = $this->getWsUsername($storeId);
-		$webservicePassword = $this->getWsPassword($storeId);
+		$apiKey = $this->getAPIKey($storeId);
 
 		$client = new \Adyen\Client();
 		$client->setApplicationName("Magento 2 plugin");
-		$client->setUsername($webserviceUsername);
-		$client->setPassword($webservicePassword);
+		$client->setXApiKey($apiKey);
 
 		$client->setAdyenPaymentSource($this->getModuleName(), $this->getModuleVersion());
 
@@ -1196,4 +1199,44 @@ class Data extends AbstractHelper
 
 		return $client;
 	}
+
+	/**
+	 * Retrieve origin keys for platform's base url
+	 *
+	 * @return string
+	 * @throws \Adyen\AdyenException
+	 */
+	public function getOriginKeyForBaseUrl()
+	{
+		$originKey = "";
+		$baseUrl = $this->urlInterface->getBaseUrl();
+
+		if ($originKeys = $this->getOriginKeys($baseUrl)) {
+			$originKey = $originKeys[$baseUrl];
+		}
+
+		return $originKey;
+	}
+
+	/**
+	 * Get origin keys for a specific url using the adyen api library client
+	 *
+	 * @param $url
+	 * @return mixed
+	 * @throws \Adyen\AdyenException
+	 */
+	private function getOriginKeys($url)
+	{
+		$params = array(
+			"originDomains" => array(
+				$url
+			)
+		);
+
+		$client = $this->initializeAdyenClient();
+
+		$service = $this->adyenServiceFactory->createCheckoutUtility($client);
+		$respone = $service->originKeys($params);
+		return $respone['originKeys'];
+	}
 }

Model/Ui/AdyenCcConfigProvider.php

@@ -130,11 +130,13 @@ class AdyenCcConfigProvider implements ConfigProviderInterface
             $canCreateBillingAgreement = true;
         }
 
-        $config['payment'] ['adyenCc']['librarySource'] = $this->_adyenHelper->getLibrarySource();
         $config['payment']['adyenCc']['generationTime'] = date("c");
         $config['payment']['adyenCc']['canCreateBillingAgreement'] = $canCreateBillingAgreement;
         $config['payment']['adyenCc']['icons'] = $this->getIcons();
 
+		$config['payment']['adyenCc']['originKey'] = $this->_adyenHelper->getOriginKeyForBaseUrl();
+		$config['payment']['adyenCc']['secureFieldsSource'] = $this->_adyenHelper->getSecureFieldsSdk();
+
         // has installments by default false
         $config['payment']['adyenCc']['hasInstallments'] = false;
 

etc/adminhtml/di.xml

@@ -5,6 +5,7 @@
             <argument name="messages" xsi:type="array">
                 <item name="AdyenCronMessage" xsi:type="string">Adyen\Payment\AdminMessage\CronMessage</item>
                 <item name="AdyenVersionMessage" xsi:type="string">Adyen\Payment\AdminMessage\VersionMessage</item>
+                <item name="AdyenAPIKeyMessage" xsi:type="string">Adyen\Payment\AdminMessage\APIKeyMessage</item>
             </argument>
         </arguments>
     </type>

etc/adminhtml/system/adyen_cc.xml

@@ -47,16 +47,6 @@
             <source_model>Adyen\Payment\Model\Config\Source\CcType</source_model>
             <config_path>payment/adyen_cc/cctypes</config_path>
         </field>
-        <field id="cse_library_token_test" translate="label" type="text" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
-            <label>Library token of Test Adyen Web Service User</label>
-            <tooltip>Copy this from the Test Adyen Customer Area => Settings => Users => System => [web service user]=> Library token.</tooltip>
-            <config_path>payment/adyen_cc/cse_library_token_test</config_path>
-        </field>
-        <field id="cse_library_token_live" translate="label" type="text" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
-            <label>Library token of Live Adyen Web Service User</label>
-            <tooltip>Copy this from the Live Adyen Customer Area => Settings => Users => System => [web service user]=> Library token.</tooltip>
-            <config_path>payment/adyen_cc/cse_library_token_live</config_path>
-        </field>
 
         <group id="adyen_cc_advanced_settings" translate="label" showInDefault="1" showInWebsite="1" sortOrder="150">
             <label>Advanced Settings</label>

etc/adminhtml/system/adyen_required_settings.xml

@@ -49,27 +49,17 @@
             <config_path>payment/adyen_abstract/notification_password</config_path>
             <tooltip>Set a password of your choice and copy it over to Adyen Customer Area => Settings => Server Communication => Standard Notification => Password.</tooltip>
         </field>
-        <field id="ws_username_test" translate="label" type="text" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="0">
-            <label>Webservice username for Test</label>
-            <tooltip>Find this in your Test Adyen Customer Area => Settings => Users => System. Normally this will be ws@Company.YourCompanyAccount. Copy and Paste the exact ws user name here.</tooltip>
-            <config_path>payment/adyen_abstract/ws_username_test</config_path>
-        </field>
-        <field id="ws_password_test" translate="label" type="obscure" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="0">
-            <label>Webservice Password for Test</label>
-            <tooltip>Find this in your Test Adyen Customer Area => Settings => Users => System. Click on your web service user and generate a new password. Copy and Paste the exact password here.</tooltip>
+        <field id="api_key_test" translate="label" type="obscure" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="0">
+            <label>API key for Test</label>
+            <tooltip>If you don't know your Api-Key, log in to your Test Customer Area. Navigate to Settings > Users > System, and click on your webservice user, normally this will be ws@Company.YourCompanyAccount. Under Checkout token is your API Key.</tooltip>
             <backend_model>Magento\Config\Model\Config\Backend\Encrypted</backend_model>
-            <config_path>payment/adyen_abstract/ws_password_test</config_path>
-        </field>
-        <field id="ws_username_live" translate="label" type="text" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="0">
-            <label>Webservice username for Live</label>
-            <tooltip>This is only applicable if you have a Live account. Find this in your Live Adyen Customer Area => Settings => Users => System. Normally this will be ws@Company.YourCompanyAccount. Copy and Paste the exact ws user name here.</tooltip>
-            <config_path>payment/adyen_abstract/ws_username_live</config_path>
+            <config_path>payment/adyen_abstract/api_key_test</config_path>
         </field>
-        <field id="ws_password_live" translate="label" type="obscure" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="0">
-            <label>Webservice Password for Live</label>
-            <tooltip>This is only applicable if you have a Live account. Find this in your Live Adyen Customer Area => Settings => Users => System. Click on your web service user and generate a new password. Copy and Paste the exact password here.</tooltip>
+        <field id="api_key_live" translate="label" type="obscure" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="0">
+            <label>API key for Live</label>
+            <tooltip>If you don't know your Api-Key, log in to your Live Customer Area. Navigate to Settings > Users > System, and click on your webservice user, normally this will be ws@Company.YourCompanyAccount. Under Checkout token is your API Key.</tooltip>
             <backend_model>Magento\Config\Model\Config\Backend\Encrypted</backend_model>
-            <config_path>payment/adyen_abstract/ws_password_live</config_path>
+            <config_path>payment/adyen_abstract/api_key_live</config_path>
         </field>
         <field id="capture_mode" translate="label" type="select" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
             <label>Capture Delay</label>
@@ -107,4 +97,4 @@
             <config_path>payment/adyen_abstract/debug</config_path>
         </field>
     </group>
-</include>
\ No newline at end of file
+</include>

view/frontend/layout/checkout_index_index.xml

@@ -25,6 +25,8 @@
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
     <head>
         <css src="Adyen_Payment::css/styles.css"/>
+        <script src="Adyen_Payment::js/adyen.2.0.0.js"></script>
+        <script src="Adyen_Payment::js/adyen.checkout.js"></script>
     </head>
     <body>
         <referenceBlock name="checkout.root">

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

@@ -70,12 +70,12 @@ define(
 
                 installments.setInstallments(0);
 
-
-                // include dynamic cse javascript
-                var dfScriptTag = document.createElement('script');
-                dfScriptTag.src = this.getLibrarySource();
-                dfScriptTag.type = "text/javascript";
-                document.body.appendChild(dfScriptTag);
+                // include secure fields sdk javascript
+                var secureFieldsScriptTag = document.createElement('script');
+                secureFieldsScriptTag.id = "secure-fields-script-tag";
+                secureFieldsScriptTag.src = this.getSecureFieldsSource();
+                secureFieldsScriptTag.type = "text/javascript";
+                document.body.appendChild(secureFieldsScriptTag)
 
                 //Set credit card number to credit card data object
                 this.creditCardNumber.subscribe(function (value) {
@@ -134,6 +134,9 @@ define(
             getCode: function () {
                 return 'adyen_cc';
             },
+            getOriginKey: function () {
+                return window.checkoutConfig.payment.adyenCc.originKey;
+            },
             getData: function () {
                 return {
                     'method': this.item.method,
@@ -178,9 +181,9 @@ define(
                 var cardData = {
                     number: this.creditCardNumber(),
                     cvc: this.creditCardVerificationNumber(),
-                    holderName: this.creditCardOwner(),
                     expiryMonth: this.creditCardExpMonth(),
                     expiryYear: this.creditCardExpYear(),
+                    holderName: this.creditCardOwner(),
                     generationtime: generationtime
                 };
 
@@ -227,9 +230,8 @@ define(
             getCSEKey: function () {
                 return window.checkoutConfig.payment.adyenCc.cseKey;
             },
-            getLibrarySource: function () {
-                return window.checkoutConfig.payment.adyenCc.librarySource;
-
+            getSecureFieldsSource: function () {
+                return window.checkoutConfig.payment.adyenCc.secureFieldsSource;
             },
             getGenerationTime: function () {
                 return window.checkoutConfig.payment.adyenCc.generationTime;