added logos to the payment methods

Model/AdyenCcConfigProvider.php

@@ -56,6 +56,11 @@ class AdyenCcConfigProvider extends CcGenericConfigProvider
      */
     protected $adyenHelper;
 
+    /**
+     * @var AdyenGenericConfig
+     */
+    protected $_genericConfig;
+
     /**
      * @param \Magento\Payment\Model\CcConfig $ccConfig
      * @param PaymentHelper $paymentHelper
@@ -64,10 +69,12 @@ class AdyenCcConfigProvider extends CcGenericConfigProvider
     public function __construct(
         \Magento\Payment\Model\CcConfig $ccConfig,
         PaymentHelper $paymentHelper,
-        \Adyen\Payment\Helper\Data $adyenHelper
+        \Adyen\Payment\Helper\Data $adyenHelper,
+        \Adyen\Payment\Model\AdyenGenericConfig $genericConfig
     ) {
         parent::__construct($ccConfig, $paymentHelper, $this->methodCodes);
         $this->adyenHelper = $adyenHelper;
+        $this->_genericConfig = $genericConfig;
     }
 
     public function getConfig()
@@ -97,6 +104,10 @@ class AdyenCcConfigProvider extends CcGenericConfigProvider
         $config['payment']['adyenCc']['generationTime'] = date("c");
         $config['payment']['adyenCc']['canCreateBillingAgreement'] = $canCreateBillingAgreement;
 
+        // show logos turned on by default
+        if($this->_genericConfig->showLogos()) {
+            $config['payment']['adyenCc']['creditCardPaymentMethodIcon'] = $this->_getCreditCardPaymentMethodIcon();
+        }
 
         foreach ($this->methodCodes as $code) {
             if ($this->methods[$code]->isAvailable()) {
@@ -117,4 +128,23 @@ class AdyenCcConfigProvider extends CcGenericConfigProvider
     {
         return $this->methods[$code]->getCheckoutRedirectUrl();
     }
+
+    protected function _getCreditCardPaymentMethodIcon()
+    {
+        $asset = $this->_genericConfig->createAsset('Adyen_Payment::images/logos/img_trans.gif');
+
+        $placeholder = $this->_genericConfig->findRelativeSourceFilePath($asset);
+
+        $icon = null;
+        if ($placeholder) {
+            list($width, $height) = getimagesize($asset->getSourceFile());
+            $icon = [
+                'url' => $asset->getUrl(),
+                'width' => $width,
+                'height' => $height
+            ];
+        }
+
+        return $icon;
+    }
 }
\ No newline at end of file

Model/AdyenGenericConfig.php

+<?php
+/**
+ *                       ######
+ *                       ######
+ * ############    ####( ######  #####. ######  ############   ############
+ * #############  #####( ######  #####. ######  #############  #############
+ *        ######  #####( ######  #####. ######  #####  ######  #####  ######
+ * ###### ######  #####( ######  #####. ######  #####  #####   #####  ######
+ * ###### ######  #####( ######  #####. ######  #####          #####  ######
+ * #############  #############  #############  #############  #####  ######
+ *  ############   ############  #############   ############  #####  ######
+ *                                      ######
+ *                               #############
+ *                               ############
+ *
+ * Adyen Payment module (https://www.adyen.com/)
+ *
+ * Copyright (c) 2015 Adyen BV (https://www.adyen.com/)
+ * See LICENSE.txt for license details.
+ *
+ * Author: Adyen <magento@adyen.com>
+ */
+namespace Adyen\Payment\Model;
+
+use Magento\Framework\App\RequestInterface;
+use Magento\Framework\UrlInterface;
+use Magento\Framework\View\Asset\Repository;
+use Psr\Log\LoggerInterface;
+use Magento\Payment\Model\Config as PaymentConfig;
+use Magento\Framework\View\Asset\Source;
+
+class AdyenGenericConfig
+{
+    /**
+     * @var Repository
+     */
+    protected $assetRepo;
+
+    /**
+     * @var RequestInterface
+     */
+    protected $request;
+
+    /**
+     * @var \Magento\Framework\View\Asset\Source
+     */
+    protected $assetSource;
+
+    /**
+     * @var \Adyen\Payment\Helper\Data
+     */
+    protected $_adyenHelper;
+
+    /**
+     * @param PaymentConfig $paymentConfig
+     * @param Repository $assetRepo
+     * @param RequestInterface $request
+     * @param UrlInterface $urlBuilder
+     * @param LoggerInterface $logger
+     */
+    public function __construct(
+        Repository $assetRepo,
+        RequestInterface $request,
+        Source $assetSource,
+        \Adyen\Payment\Helper\Data $adyenHelper
+    ) {
+        $this->assetRepo = $assetRepo;
+        $this->request = $request;
+        $this->assetSource = $assetSource;
+        $this->_adyenHelper = $adyenHelper;
+    }
+
+    /**
+     * Create a file asset that's subject of fallback system
+     *
+     * @param string $fileId
+     * @param array $params
+     * @return \Magento\Framework\View\Asset\File
+     */
+    public function createAsset($fileId, array $params = [])
+    {
+        $params = array_merge(['_secure' => $this->request->isSecure()], $params);
+        return $this->assetRepo->createAsset($fileId, $params);
+    }
+
+    public function findRelativeSourceFilePath($asset) {
+        return $this->assetSource->findRelativeSourceFilePath($asset);
+    }
+
+    public function showLogos()
+    {
+        $showLogos = $this->_adyenHelper->getAdyenAbstractConfigData('title_renderer');
+        if($showLogos == \Adyen\Payment\Model\Config\Source\RenderMode::MODE_TITLE_IMAGE) {
+            return true;
+        }
+        return false;
+    }
+
+}
\ No newline at end of file

Model/AdyenHppConfigProvider.php

@@ -65,6 +65,11 @@ class AdyenHppConfigProvider implements ConfigProviderInterface
      */
     protected $_adyenLogger;
 
+    /**
+     * @var AdyenGenericConfig
+     */
+    protected $_genericConfig;
+
     /**
      * @var \Magento\Framework\App\Config\ScopeConfigInterface $config
      */
@@ -87,7 +92,11 @@ class AdyenHppConfigProvider implements ConfigProviderInterface
      * @param \Magento\Checkout\Model\Session $session
      * @param \Magento\Store\Model\StoreManagerInterface $storeManager
      * @param PaymentHelper $paymentHelper
+     * @param \Magento\Framework\Locale\ResolverInterface $localeResolver
+     * @param \Magento\Framework\App\Config\ScopeConfigInterface $config
      * @param \Adyen\Payment\Helper\Data $adyenHelper
+     * @param \Adyen\Payment\Logger\AdyenLogger $adyenLogger
+     * @param AdyenGenericConfig $genericConfig
      */
     public function __construct(
         \Magento\Framework\Model\Context $context,
@@ -97,7 +106,8 @@ class AdyenHppConfigProvider implements ConfigProviderInterface
         \Magento\Framework\Locale\ResolverInterface $localeResolver,
         \Magento\Framework\App\Config\ScopeConfigInterface $config,
         \Adyen\Payment\Helper\Data $adyenHelper,
-        \Adyen\Payment\Logger\AdyenLogger $adyenLogger
+        \Adyen\Payment\Logger\AdyenLogger $adyenLogger,
+        \Adyen\Payment\Model\AdyenGenericConfig $genericConfig
     ) {
         $this->_appState = $context->getAppState();
         $this->_session = $session;
@@ -107,6 +117,7 @@ class AdyenHppConfigProvider implements ConfigProviderInterface
         $this->_config = $config;
         $this->_adyenHelper = $adyenHelper;
         $this->_adyenLogger = $adyenLogger;
+        $this->_genericConfig = $genericConfig;
 
         foreach ($this->methodCodes as $code) {
             $this->methods[$code] = $this->_paymentHelper->getMethodInstance($code);
@@ -222,9 +233,28 @@ class AdyenHppConfigProvider implements ConfigProviderInterface
         if(isset($responseData['paymentMethods'])) {
             foreach ($responseData['paymentMethods'] as $paymentMethod) {
 
-                $paymentMethod = $this->_fieldMapPaymentMethod($paymentMethod);
                 $paymentMethodCode = $paymentMethod['brandCode'];
                 $paymentMethod = $this->_fieldMapPaymentMethod($paymentMethod);
+
+                // add icon location in result
+                if($this->_genericConfig->showLogos()) {
+                    $asset = $this->_genericConfig->createAsset('Adyen_Payment::images/logos/' . $paymentMethodCode . '.png');
+
+                    $placeholder = $this->_genericConfig->findRelativeSourceFilePath($asset);
+
+                    $icon = null;
+                    if ($placeholder) {
+                        list($width, $height) = getimagesize($asset->getSourceFile());
+                        $icon = [
+                            'url' => $asset->getUrl(),
+                            'width' => $width,
+                            'height' => $height
+                        ];
+                    }
+
+                    $paymentMethod['icon'] = $icon;
+                }
+
                 $paymentMethods[$paymentMethodCode] = $paymentMethod;
             }
         }
@@ -391,4 +421,18 @@ class AdyenHppConfigProvider implements ConfigProviderInterface
         return $this->_session->getQuote();
     }
 
+
+    /**
+     * Create a file asset that's subject of fallback system
+     *
+     * @param string $fileId
+     * @param array $params
+     * @return \Magento\Framework\View\Asset\File
+     */
+    protected function _createAsset($fileId, array $params = [])
+    {
+        $params = array_merge(['_secure' => $this->request->isSecure()], $params);
+        return $this->assetRepo->createAsset($fileId, $params);
+    }
+
 }
\ No newline at end of file

Model/AdyenOneclickConfigProvider.php

@@ -81,6 +81,12 @@ class AdyenOneclickConfigProvider extends CcGenericConfigProvider
      */
     protected $_storeManager;
 
+    /**
+     * @var AdyenGenericConfig
+     */
+    protected $_genericConfig;
+
+
     /**
      * @param \Magento\Payment\Model\CcConfig $ccConfig
      * @param PaymentHelper $paymentHelper
@@ -94,7 +100,8 @@ class AdyenOneclickConfigProvider extends CcGenericConfigProvider
         \Adyen\Payment\Model\Resource\Billing\Agreement\CollectionFactory $billingAgreementCollectionFactory,
         \Magento\Customer\Model\Session $customerSession,
         \Magento\Checkout\Model\Session $session,
-        \Magento\Store\Model\StoreManagerInterface $storeManager
+        \Magento\Store\Model\StoreManagerInterface $storeManager,
+        \Adyen\Payment\Model\AdyenGenericConfig $genericConfig
     ) {
         parent::__construct($ccConfig, $paymentHelper, $this->methodCodes);
         $this->_paymentHelper = $paymentHelper;
@@ -104,6 +111,7 @@ class AdyenOneclickConfigProvider extends CcGenericConfigProvider
         $this->_session = $session;
         $this->_appState = $context->getAppState();
         $this->_storeManager = $storeManager;
+        $this->_genericConfig = $genericConfig;
     }
 
     public function getConfig()
@@ -200,6 +208,24 @@ class AdyenOneclickConfigProvider extends CcGenericConfigProvider
                         'agreement_label' => $billingAgreement->getAgreementLabel(),
                         'agreement_data' => $agreementData
                     ];
+
+                    if($this->_genericConfig->showLogos()) {
+                        $asset = $this->_genericConfig->createAsset('Adyen_Payment::images/logos/' . $agreementData['variant'] . '.png');
+                        $placeholder = $this->_genericConfig->findRelativeSourceFilePath($asset);
+
+                        $icon = null;
+                        if ($placeholder) {
+                            list($width, $height) = getimagesize($asset->getSourceFile());
+                            $icon = [
+                                'url' => $asset->getUrl(),
+                                'width' => $width,
+                                'height' => $height
+                            ];
+                        }
+                        $data['logo'] = $icon;
+
+                    }
+
                     $billingAgreements[] = $data;
                 }
             }

Model/Config/Source/RenderMode.php

+<?php
+/**
+ *                       ######
+ *                       ######
+ * ############    ####( ######  #####. ######  ############   ############
+ * #############  #####( ######  #####. ######  #############  #############
+ *        ######  #####( ######  #####. ######  #####  ######  #####  ######
+ * ###### ######  #####( ######  #####. ######  #####  #####   #####  ######
+ * ###### ######  #####( ######  #####. ######  #####          #####  ######
+ * #############  #############  #############  #############  #####  ######
+ *  ############   ############  #############   ############  #####  ######
+ *                                      ######
+ *                               #############
+ *                               ############
+ *
+ * Adyen Payment module (https://www.adyen.com/)
+ *
+ * Copyright (c) 2015 Adyen BV (https://www.adyen.com/)
+ * See LICENSE.txt for license details.
+ *
+ * Author: Adyen <magento@adyen.com>
+ */
+
+namespace Adyen\Payment\Model\Config\Source;
+
+class RenderMode implements \Magento\Framework\Option\ArrayInterface
+{
+    const MODE_TITLE = 'title';
+    const MODE_TITLE_IMAGE = 'title_image';
+
+    /**
+     * @return array
+     */
+    public function toOptionArray()
+    {
+        return array(
+            array('value' => self::MODE_TITLE, 'label' => __('Title')),
+            array('value' => self::MODE_TITLE_IMAGE, 'label' => __('Logo + Title')),
+        );
+    }
+}

etc/adminhtml/system.xml

@@ -36,6 +36,7 @@
                 <include path="Adyen_Payment::system/adyen_advanced_order_processing.xml"/>
                 <include path="Adyen_Payment::system/adyen_advanced_notifications.xml"/>
                 <include path="Adyen_Payment::system/adyen_billing_agreements.xml"/>
+                <include path="Adyen_Payment::system/adyen_checkout_experience.xml"/>
                 <include path="Adyen_Payment::system/adyen_cc.xml"/>
                 <include path="Adyen_Payment::system/adyen_oneclick.xml"/>
                 <include path="Adyen_Payment::system/adyen_hpp.xml"/>

etc/adminhtml/system/adyen_checkout_experience.xml

+<?xml version="1.0"?>
+<!--
+/**
+ *                       ######
+ *                       ######
+ * ############    ####( ######  #####. ######  ############   ############
+ * #############  #####( ######  #####. ######  #############  #############
+ *        ######  #####( ######  #####. ######  #####  ######  #####  ######
+ * ###### ######  #####( ######  #####. ######  #####  #####   #####  ######
+ * ###### ######  #####( ######  #####. ######  #####          #####  ######
+ * #############  #############  #############  #############  #####  ######
+ *  ############   ############  #############   ############  #####  ######
+ *                                      ######
+ *                               #############
+ *                               ############
+ *
+ * Adyen Payment module (https://www.adyen.com/)
+ *
+ * Copyright (c) 2015 Adyen BV (https://www.adyen.com/)
+ * See LICENSE.txt for license details.
+ *
+ * Author: Adyen <magento@adyen.com>
+ */
+-->
+<include xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_include.xsd">
+    <group id="adyen_checkout_experience" translate="label" type="text" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
+        <label><![CDATA[Advanced: Checkout Experience]]></label>
+        <frontend_model>Magento\Config\Block\System\Config\Form\Fieldset</frontend_model>
+        <comment>
+            <![CDATA[
+            ]]>
+        </comment>
+
+        <field id="title_renderer" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+            <label>Payment method render method</label>
+            <tooltip>Determines whether the payment methods will be displayed with its logo or just the name.</tooltip>
+            <source_model>Adyen\Payment\Model\Config\Source\RenderMode</source_model>
+            <config_path>payment/adyen_abstract/title_renderer</config_path>
+        </field>
+
+    </group>
+</include>
\ No newline at end of file

etc/config.xml

@@ -32,9 +32,8 @@
                 <order_status>pending</order_status>
                 <demo_mode>0</demo_mode>
                 <debug>1</debug>
+                <title_renderer>title_image</title_renderer>
                 <group>adyen</group>
-                <ws_url_test>https://pal-test.adyen.com/pal/adapter/httppost</ws_url_test>
-                <ws_url_live>https://pal-live.adyen.com/pal/adapter/httppost</ws_url_live>
             </adyen_abstract>
             <adyen_cc>
                 <active>1</active>

view/frontend/web/css/styles.css

@@ -25,3 +25,21 @@
 .checkout-payment-method .ccard  .expire-update._disable { display:none; }
 .checkout-payment-method .ccard .holdername .input-text { width: 225px; }
 
+.checkout-payment-method .payment-method-title, .checkout-payment-method .payment-method-title label {
+    display: flex;
+    align-items: center;
+}
+
+.checkout-payment-method .payment-method-title label img { margin-right:10px;}
+
+.checkout-payment-method .payment-method-title label img.adyen_cc {
+    background:url(../images/logos/pm_gloss.png) no-repeat;
+    background-position: 0 -272px;
+    width:65px;
+    height:42px;
+}
+
+
+
+
+

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

@@ -169,6 +169,9 @@ define(
                 }
 
                 return true;
+            },
+            getCreditCardPaymentMethodIcon: function() {
+                return window.checkoutConfig.payment.adyenCc.creditCardPaymentMethodIcon;
             }
         });
     }

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

@@ -158,6 +158,7 @@ define(
                             'label': value.agreement_label,
                             'value': value.reference_id,
                             'agreement_data': value.agreement_data,
+                            'logo': value.logo,
                             'method': self.item.method,
                             getCode: function() {
                                 return self.item.method;

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

@@ -27,7 +27,21 @@
                name="payment[method]"
                class="radio"
                data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
-        <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
+        <label data-bind="attr: {'for': getCode()}" class="label">
+
+            <!-- ko if: getCreditCardPaymentMethodIcon() -->
+
+            <img data-bind="attr: {
+                                'class': getCode(),
+                                'src': getCreditCardPaymentMethodIcon().url,
+                                'width': '65',
+                                'height': '42',
+                                'border': '0'
+                                }">
+            <!--/ko-->
+
+            <span data-bind="text: getTitle()"></span>
+        </label>
     </div>
 
     <div class="payment-method-content">

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

@@ -28,11 +28,27 @@
 
         <div class="payment-method" data-bind="css: {'_active': (value == $parent.isBrandCodeChecked())}">
             <div class="payment-method-title field choice">
+
+
+
                 <input type="radio"
                        name="payment[method]"
                        class="radio"
                        data-bind="attr: {'id': value}, value: value, checked: $parent.isBrandCodeChecked, click: $parent.selectPaymentMethodBrandCode"/>
-                <label data-bind="attr: {'for': value}" class="label"><span data-bind="text: name.title"></span></label>
+                <label data-bind="attr: {'for': value}" class="label">
+
+                    <!-- ko if: name.icon -->
+
+                    <img data-bind="attr: {
+                                'src': name.icon.url,
+                                'width': name.icon.url.width,
+                                'height': name.icon.url.height
+                                }">
+
+                    <!--/ko-->
+
+                    <span data-bind="text: name.title"></span>
+                </label>
             </div>
             <div class="payment-method-content">
 

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

@@ -31,7 +31,22 @@
                name="payment[method]"
                class="radio"
                data-bind="attr: {'id': value}, value: value, checked: $parent.isBillingAgreementChecked, click: $parent.selectBillingAgreement"/>
-        <label data-bind="attr: {'for': value}" class="label"><span data-bind="text: label"></span></label>
+        <label data-bind="attr: {'for': value}" class="label">
+
+
+            <!-- ko if: logo -->
+
+            <img data-bind="attr: {
+                                'class': getCode(),
+                                'src': logo.url,
+                                'width': logo.width,
+                                'height': logo.height
+                                }">
+
+            <!--/ko-->
+
+            <span data-bind="text: label"></span>
+        </label>
     </div>
     <div class="payment-method-content">