Create admin configuration and display brand icons based on configura…

Model/Config/Cc.php

@@ -26,4 +26,15 @@ public function getCardTheme()
     {
         return $this->getValue('card_form_theme', self::CODE);
     }
+
+    /**
+     * Get the card brands icons enabled in the payment configuration.
+     *
+     * @return array
+     */
+    public function getSupportedCardIcons()
+    {
+        $supportedCardIcons = $this->getValue('supported_card_icons', self::CODE);
+        return $supportedCardIcons ? explode(',', $supportedCardIcons) : [];
+    }
 }

Model/Source/CardBrandIcon.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace Omise\Payment\Model\Source;
+
+use Magento\Framework\Option\ArrayInterface;
+
+class CardBrandIcon implements ArrayInterface
+{
+    /**
+     * Return array of supported card brand icons
+     * @return array
+     */
+    public function toOptionArray()
+    {
+        return [
+            [
+                'value' => 'visa',
+                'label' => __('Visa'),
+            ],
+            [
+                'value' => 'mastercard',
+                'label' => __('Mastercard'),
+            ],
+            [
+                'value' => 'amex',
+                'label' => __('American Express'),
+            ],
+            [
+                'value' => 'jcb',
+                'label' => __('JCB'),
+            ],
+            [
+                'value' => 'diners',
+                'label' => __('Diners Club'),
+            ],
+            [
+                'value' => 'discover',
+                'label' => __('Discover'),
+            ],
+        ];
+    }
+}

Model/Ui/CcConfigProvider.php

@@ -57,7 +57,8 @@ public function getConfig()
                     'cards'                         => $this->getCards(),
                     'locale'                        => $this->omiseCcConfig->getStoreLocale(),
                     'formDesign'                    => $theme->getFormDesign($selectedTheme, $customDesign),
-                    'theme'                         => $selectedTheme
+                    'theme'                         => $selectedTheme,
+                    'supported_card_icons'     => $this->omiseCcConfig->getSupportedCardIcons()
                 ],
             ]
         ];

Test/Unit/Model/Config/CcConfigTest.php

@@ -0,0 +1,53 @@
+<?php
+
+namespace Omise\Payment\Test\Unit\Model\Config;
+
+use Omise\Payment\Model\Config\Cc;
+use PHPUnit\Framework\TestCase;
+
+class CcConfigTest extends TestCase
+{
+    /**
+     * @covers \Omise\Payment\Model\Config\Cc::getSupportedCardIcons
+     */
+    public function testGetSupportedCardIconsReturnsConfiguredCommaSeparatedValues(): void
+    {
+        $config = $this->createConfigMock('visa,mastercard,amex');
+
+        $this->assertSame(['visa', 'mastercard', 'amex'], $config->getSupportedCardIcons());
+    }
+
+    /**
+     * @covers \Omise\Payment\Model\Config\Cc::getSupportedCardIcons
+     * @dataProvider emptyConfigValueProvider
+     */
+    public function testGetSupportedCardIconsReturnsEmptyArrayWhenNoIconsAreConfigured($emptyValue): void
+    {
+        $config = $this->createConfigMock($emptyValue);
+
+        $this->assertSame([], $config->getSupportedCardIcons());
+    }
+
+    public static function emptyConfigValueProvider(): array
+    {
+        return [
+            'null' => [null],
+            'empty string' => [''],
+        ];
+    }
+
+    private function createConfigMock($value): Cc
+    {
+        $config = $this->getMockBuilder(Cc::class)
+            ->disableOriginalConstructor()
+            ->onlyMethods(['getValue'])
+            ->getMock();
+
+        $config->expects($this->once())
+            ->method('getValue')
+            ->with('supported_card_icons', Cc::CODE)
+            ->willReturn($value);
+
+        return $config;
+    }
+}

Test/Unit/Model/Source/CardBrandIconTest.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace Omise\Payment\Test\Unit\Model\Source;
+
+use Omise\Payment\Model\Source\CardBrandIcon;
+use PHPUnit\Framework\TestCase;
+
+class CardBrandIconTest extends TestCase
+{
+    /**
+     * @covers \Omise\Payment\Model\Source\CardBrandIcon::toOptionArray
+     */
+    public function testToOptionArrayReturnsSupportedCardBrandIcons(): void
+    {
+        $source = new CardBrandIcon();
+        $options = $source->toOptionArray();
+
+        $this->assertSame(
+            [
+                ['value' => 'visa', 'label' => 'Visa'],
+                ['value' => 'mastercard', 'label' => 'Mastercard'],
+                ['value' => 'amex', 'label' => 'American Express'],
+                ['value' => 'jcb', 'label' => 'JCB'],
+                ['value' => 'diners', 'label' => 'Diners Club'],
+                ['value' => 'discover', 'label' => 'Discover'],
+            ],
+            array_map(
+                static function (array $option): array {
+                    return [
+                        'value' => $option['value'],
+                        'label' => (string) $option['label'],
+                    ];
+                },
+                $options
+            )
+        );
+    }
+}

etc/adminhtml/system.xml

@@ -109,6 +109,11 @@
                             <![CDATA[Credit/debit card secure form design on checkout page. <a style="cursor:pointer" onclick="cardFormCustomization.showModal()"><b>Click here</b></a> for more secure card form customization.]]>
                         </comment>
                     </field>
+                    <field id="supported_card_icons" translate="label" type="multiselect" sortOrder="114" showInDefault="1" showInWebsite="1" showInStore="1">
+                        <label>Supported card icons</label>
+                        <config_path>payment/omise_cc/supported_card_icons</config_path>
+                        <source_model>Omise\Payment\Model\Source\CardBrandIcon</source_model>
+                    </field>
                     <field id="card_form_theme_config" sortOrder="113" showInDefault="1" showInWebsite="1" showInStore="1">
                         <config_path>payment/omise_cc/card_form_theme_config</config_path>
                         <frontend_model>Omise\Payment\Block\Adminhtml\System\Config\CardFormCustomization\FormModal</frontend_model>
@@ -940,4 +945,4 @@
             </group>
         </section>
     </system>
-</config>
+</config>

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

@@ -124,14 +124,15 @@ define(
                 }
 
                 const { theme, locale, formDesign } = window.checkoutConfig.payment.omise_cc
+                const supportedCardIcons = window.checkoutConfig.payment.omise_cc.supported_card_icons
                 const { font, input, checkbox } = formDesign
                 let iframeElementHeight = iframeHeightMatching[input.height]
                 if (hideRememberCard) {
                     iframeElementHeight = iframeElementHeight - 25
                 }
                 element.style.height = iframeElementHeight + 'px'
 
-                OmiseCard.configure({
+                const cardFormConfig = {
                     publicKey: self.getPublicKey(),
                     element,
                     locale: localeMatching[locale] ?? 'en',
@@ -157,7 +158,14 @@ define(
                         }
                     },
                     customCardFormHideRememberCard: hideRememberCard
-                })
+                }
+
+                if (Array.isArray(supportedCardIcons) && supportedCardIcons.length > 0) {
+                    cardFormConfig.customCardFormBrandIcons = supportedCardIcons
+                    cardFormConfig.cardBrands = supportedCardIcons.join(' ')
+                }
+
+                OmiseCard.configure(cardFormConfig)
 
                 OmiseCard.open({
                     onCreateTokenSuccess: (payload) => {