add description of payment method during checkout

Api/Config/System/SettingInterface.php

@@ -23,6 +23,8 @@ interface SettingInterface
     public const XML_PATH_PAYMENT_PAGE_PRIMARY_COLOR = 'payment/truelayer/payment_page_primary_color';
     public const XML_PATH_PAYMENT_PAGE_SECONDARY_COLOR = 'payment/truelayer/payment_page_secondary_color';
     public const XML_PATH_PAYMENT_PAGE_TERTIARY_COLOR = 'payment/truelayer/payment_page_tertiary_color';
+    public const XML_PATH_DESCRIPTION = 'payment/truelayer/description';
+    public const XML_PATH_SHOW_DESCRIPTION = 'payment/truelayer/show_description';
 
     /**
      * Get minimum allowed order total
@@ -80,4 +82,16 @@ public function sendInvoiceEmail(): bool;
      * @return bool
      */
     public function sendOrderEmail(): bool;
+
+    /**
+     * Get payment method description
+     */
+    public function getDescription(): string;
+
+    /**
+     * Get show description of payment method during checkout flag
+     *
+     * @return bool
+     */
+    public function getShowDescription(): bool;
 }

Model/Config/System/SettingsRepository.php

@@ -82,4 +82,20 @@ public function sendOrderEmail(): bool
     {
         return $this->isSetFlag(self::XML_PATH_SEND_ORDER_EMAIL);
     }
+
+    /**
+     * @inheritDoc
+     */
+    public function getDescription(): string
+    {
+        return $this->getStoreValue(self::XML_PATH_DESCRIPTION);
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getShowDescription(): bool
+    {
+        return $this->isSetFlag(self::XML_PATH_SHOW_DESCRIPTION);
+    }
 }

Model/Ui/ConfigProvider.php

@@ -8,12 +8,23 @@
 namespace TrueLayer\Connect\Model\Ui;
 
 use Magento\Checkout\Model\ConfigProviderInterface;
+use TrueLayer\Connect\Model\Config\System\SettingsRepository;
 
 /**
  * Payment Config Provider
  */
 class ConfigProvider implements ConfigProviderInterface
 {
+    /**
+     * @var SettingsRepository
+     */
+    private $settingsRepository;
+
+    public function __construct(
+        SettingsRepository $settingsRepository
+    ) {
+        $this->settingsRepository = $settingsRepository;
+    }
     public const CODE = 'truelayer';
 
     /**
@@ -23,9 +34,17 @@ class ConfigProvider implements ConfigProviderInterface
      */
     public function getConfig(): array
     {
+        $showDescription = $this->settingsRepository->getShowDescription();
+        $description = $this->settingsRepository->getDescription();
+
+        $config = [
+            'description' => $description,
+            'showDescription' => $showDescription
+        ];
+
         return [
             'payment' => [
-                self::CODE => []
+                self::CODE => $config
             ]
         ];
     }

etc/adminhtml/system/settings.xml

@@ -17,6 +17,11 @@
             <label>Description</label>
             <config_path>payment/truelayer/description</config_path>
         </field>
+        <field id="show_description" translate="label" type="select" sortOrder="12" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
+            <label>Show Description During Checkout</label>
+            <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+            <config_path>payment/truelayer/show_description</config_path>
+        </field>
         <field id="heading_limits" translate="label comment" type="text" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
             <label>Limits and Sort Order</label>
             <comment><![CDATA[TrueLayer will only work in the countries that you have originally signed up to with us. If you would like to know more about country availability, please reach out to your Sales rep.]]></comment>

etc/config.xml

@@ -14,6 +14,7 @@
                 <model>TrueLayerFacade</model>
                 <title>TrueLayer</title>
                 <description>Pay using TrueLayer</description>
+                <show_description>0</show_description>
                 <active>0</active>
                 <payment_action>authorize</payment_action>
                 <can_use_checkout>1</can_use_checkout>

etc/frontend/di.xml

@@ -0,0 +1,9 @@
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
+    <type name="Magento\Checkout\Model\CompositeConfigProvider">
+        <arguments>
+            <argument name="configProviders" xsi:type="array">
+                <item name="TruelayerConfigProvider" xsi:type="object">TrueLayer\Connect\Model\Ui\ConfigProvider</item>
+            </argument>
+        </arguments>
+    </type>
+</config>

view/frontend/web/js/view/payment/method-renderer/truelayer.js

@@ -108,6 +108,20 @@ define(
                     message: message
                 });
             },
+
+            /**
+             * Get payment method description.
+             */
+            getDescription: function () {
+                return window.checkoutConfig.payment[this.getCode()].description;
+            },
+            /**
+             * Get show description of payment method during checkout flag
+             */
+            getShowDescription: function () {
+                return window.checkoutConfig.payment[this.getCode()].showDescription;
+                // return this.item.title;
+            },
         });
     }
 );

view/frontend/web/template/payment/truelayer.html

@@ -11,7 +11,7 @@
                class="radio"
                data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
         <label class="label" data-bind="attr: {'for': getCode()}">
-            <span data-bind="text: getTitle()"></span>
+            <span data-bind="text: getTitle() + (getShowDescription() ? (' - ' + getDescription()) : '')"></span>
         </label>
     </div>
 
@@ -43,4 +43,3 @@
         <!--/ko-->
     </div>
 </div>
-