diff --git a/Model/Config/Cc.php b/Model/Config/Cc.php index 89180e8d..1338ffb6 100644 --- a/Model/Config/Cc.php +++ b/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) : []; + } } diff --git a/Model/Source/CardBrandIcon.php b/Model/Source/CardBrandIcon.php new file mode 100644 index 00000000..9d586460 --- /dev/null +++ b/Model/Source/CardBrandIcon.php @@ -0,0 +1,42 @@ + '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'), + ], + ]; + } +} diff --git a/Model/Ui/CcConfigProvider.php b/Model/Ui/CcConfigProvider.php index 8d0abaaf..53fb410d 100644 --- a/Model/Ui/CcConfigProvider.php +++ b/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() ], ] ]; diff --git a/Test/Unit/Model/Config/CcConfigTest.php b/Test/Unit/Model/Config/CcConfigTest.php new file mode 100644 index 00000000..c07608dc --- /dev/null +++ b/Test/Unit/Model/Config/CcConfigTest.php @@ -0,0 +1,53 @@ +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; + } +} diff --git a/Test/Unit/Model/Source/CardBrandIconTest.php b/Test/Unit/Model/Source/CardBrandIconTest.php new file mode 100644 index 00000000..14a81b8c --- /dev/null +++ b/Test/Unit/Model/Source/CardBrandIconTest.php @@ -0,0 +1,38 @@ +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 + ) + ); + } +} diff --git a/etc/adminhtml/system.xml b/etc/adminhtml/system.xml index 6564f801..a2435603 100644 --- a/etc/adminhtml/system.xml +++ b/etc/adminhtml/system.xml @@ -109,6 +109,11 @@ Click here for more secure card form customization.]]> + + + payment/omise_cc/supported_card_icons + Omise\Payment\Model\Source\CardBrandIcon + payment/omise_cc/card_form_theme_config Omise\Payment\Block\Adminhtml\System\Config\CardFormCustomization\FormModal @@ -940,4 +945,4 @@ - \ No newline at end of file + diff --git a/view/frontend/web/js/view/payment/method-renderer/omise-cc-method.js b/view/frontend/web/js/view/payment/method-renderer/omise-cc-method.js index ebe0ba32..6f52bed8 100644 --- a/view/frontend/web/js/view/payment/method-renderer/omise-cc-method.js +++ b/view/frontend/web/js/view/payment/method-renderer/omise-cc-method.js @@ -124,6 +124,7 @@ 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) { @@ -131,7 +132,7 @@ define( } 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) => {