Skip to content

Commit bcfb579

Browse files
irenelagnoirenelagno
committed
MAGETWO-39480: Credit card icons rendering
1 parent 9bb82a1 commit bcfb579

File tree

6 files changed

+118
-23
lines changed

6 files changed

+118
-23
lines changed

‎app/code/Magento/Payment/Model/CcConfig.php

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,4 +152,18 @@ public function getViewFileUrl($fileId, array $params = [])
152152
return $this->urlBuilder->getUrl('', ['_direct' => 'core/index/notFound']);
153153
}
154154
}
155+
156+
/**
157+
* Create a file asset that's subject of fallback system
158+
*
159+
* @param string $fileId
160+
* @param array $params
161+
* @return \Magento\Framework\View\Asset\File
162+
*/
163+
public function createAsset($fileId, array $params = [])
164+
{
165+
$params = array_merge(['_secure' => $this->request->isSecure()], $params);
166+
return $this->assetRepo->createAsset($fileId, $params);
167+
168+
}
155169
}

‎app/code/Magento/Payment/Model/CcConfigProvider.php

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<?php
2+
/**
3+
* Copyright © 2015 Magento. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
namespace Magento\Payment\Model;
7+
8+
use Magento\Checkout\Model\ConfigProviderInterface;
9+
use Magento\Framework\View\Asset\Source;
10+
11+
class CcConfigProvider implements ConfigProviderInterface
12+
{
13+
/**
14+
* @var CcConfig
15+
*/
16+
protected $ccConfig;
17+
18+
/**
19+
* @var \Magento\Framework\View\Asset\Source
20+
*/
21+
protected $assetSource;
22+
23+
/**
24+
* @param CcConfig $ccConfig
25+
* @param Source $assetSource
26+
*/
27+
public function __construct(
28+
CcConfig $ccConfig,
29+
Source $assetSource
30+
) {
31+
$this->ccConfig = $ccConfig;
32+
$this->assetSource = $assetSource;
33+
}
34+
35+
/**
36+
* {@inheritdoc}
37+
*/
38+
public function getConfig()
39+
{
40+
return [
41+
'payment' => [
42+
'ccform' => [
43+
'icons' => $this->getIcons()
44+
]
45+
]
46+
];
47+
}
48+
49+
/**
50+
* Get icons for available payment methods
51+
*
52+
* @return array
53+
*/
54+
protected function getIcons()
55+
{
56+
$icons = [];
57+
$types = $this->ccConfig->getCcAvailableTypes();
58+
foreach (array_keys($types) as $code) {
59+
if (!array_key_exists($code, $icons)) {
60+
$asset = $this->ccConfig->createAsset('Magento_Payment::images/cc/' . strtolower($code) . '.png');
61+
$placeholder = $this->assetSource->findRelativeSourceFilePath($asset);
62+
if ($placeholder) {
63+
list($width, $height) = getimagesize($asset->getSourceFile());
64+
$icons[$code] = [
65+
'url' => $asset->getUrl(),
66+
'width' => $width,
67+
'height' => $height
68+
];
69+
}
70+
}
71+
}
72+
return $icons;
73+
}
74+
}

‎app/code/Magento/Payment/etc/frontend/di.xml

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<?xml version="1.0"?>
2+
<!--
3+
/**
4+
* Copyright © 2015 Magento. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/Event/etc/events.xsd">
9+
<type name="Magento\Checkout\Model\CompositeConfigProvider">
10+
<arguments>
11+
<argument name="configProviders" xsi:type="array">
12+
<item name="cc_card_config_provider" xsi:type="object">Magento\Payment\Model\CcConfigProvider</item>
13+
</argument>
14+
</arguments>
15+
</type>
16+
</config>

‎app/code/Magento/Payment/view/frontend/web/js/model/credit-card-validation/credit-card-number-validator/credit-card-type.js

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ define(
7070
},
7171
{
7272
title: 'JCB',
73-
type: 'JC',
73+
type: 'JCB',
7474
pattern: '^((2|21|213|2131\\d*)|(1|18|180|1800\\d*)|(3|35\\d*))$',
7575
gaps: [4, 8, 12],
7676
lengths: [16],
@@ -92,23 +92,8 @@ define(
9292
},
9393
{
9494
title: 'Maestro',
95-
type: 'SM',
96-
pattern: '(^(5[0678])[0-9]{11,18}$)' +
97-
'|(^(6[^05])[0-9]{11,18}$)' +
98-
'|(^(601)[^1][0-9]{9,16}$)' +
99-
'|(^(6011)[0-9]{9,11}$)' +
100-
'|(^(6011)[0-9]{13,16}$)' +
101-
'|(^(65)[0-9]{11,13}$)' +
102-
'|(^(65)[0-9]{15,18}$)' +
103-
'|(^(49030)[2-9]([0-9]{10}$' +
104-
'|[0-9]{12,13}$))' +
105-
'|(^(49033)[5-9]([0-9]{10}$' +
106-
'|[0-9]{12,13}$))' +
107-
'|(^(49110)[1-2]([0-9]{10}$' +
108-
'|[0-9]{12,13}$))' +
109-
'|(^(49117)[4-9]([0-9]{10}$|[0-9]{12,13}$))' +
110-
'|(^(49118)[0-2]([0-9]{10}$|[0-9]{12,13}$))' +
111-
'|(^(4936)([0-9]{12}$|[0-9]{14,15}$))',
95+
type: 'MI',
96+
pattern: '^((5((0|[6-9])\\d*)?)|(6|6[37]\\d*))$',
11297
gaps: [4, 8, 12],
11398
lengths: [12, 13, 14, 15, 16, 17, 18, 19],
11499
code: {

‎app/code/Magento/Payment/view/frontend/web/js/view/payment/cc-form.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,11 @@ define(
104104
getCcAvailableTypes: function() {
105105
return window.checkoutConfig.payment.ccform.availableTypes[this.getCode()];
106106
},
107+
getIcons: function (type) {
108+
return window.checkoutConfig.payment.ccform.icons.hasOwnProperty(type)
109+
? window.checkoutConfig.payment.ccform.icons[type]
110+
: false
111+
},
107112
getCcMonths: function() {
108113
return window.checkoutConfig.payment.ccform.months[this.getCode()];
109114
},

‎app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,14 @@
1919
<ul class="credit-card-types">
2020
<!-- ko foreach: {data: getCcAvailableTypesValues(), as: 'item'} -->
2121
<li class="item" data-bind="css: {_active: $parent.selectedCardType() == item.value} ">
22-
<!-- if picture -->
22+
<!--ko if: $parent.getIcons(item.value) -->
2323
<img data-bind="attr: {
24-
'src': 'Magento_Payment::images/cc/'+ item.value + '.png',
25-
'alt': item.type
24+
'src': $parent.getIcons(item.value).url,
25+
'alt': item.type,
26+
'width': $parent.getIcons(item.value).width,
27+
'height': $parent.getIcons(item.value).height
2628
}">
27-
<!-- if NOpicture -->
28-
<span><!-- ko text: item.type --><!-- /ko --></span>
29+
<!--/ko-->
2930
</li>
3031
<!--/ko-->
3132
</ul>

0 commit comments

Comments
 (0)