How is the bank card networks bar implemented?

dmitrii_fediuk · April 26, 2017, 4:51pm

Step 1. Magento_Payment/template/payment/cc-form.html

magento/magento2/blob/2.1.6/app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html#L16-L32


<ul class="credit-card-types">
    <!-- ko foreach: {data: getCcAvailableTypesValues(), as: 'item'} -->
    <li class="item" data-bind="css: {
                                     _active: $parent.selectedCardType() == item.value,
                                     _inactive: $parent.selectedCardType() != null && $parent.selectedCardType() != item.value
                                     } ">
        <!--ko if: $parent.getIcons(item.value) -->
        <img data-bind="attr: {
            'src': $parent.getIcons(item.value).url,
            'alt': item.type,
            'width': $parent.getIcons(item.value).width,
            'height': $parent.getIcons(item.value).height
            }">
        <!--/ko-->
    </li>
    <!--/ko-->
</ul>

Step 2. Magento_Payment/js/view/payment/cc-form::getIcons()

github.com

magento/magento2/blob/2.1.6/app/code/Magento/Payment/view/frontend/web/js/view/payment/cc-form.js#L134-L143


/**
 * Get payment icons
 * @param {String} type
 * @returns {Boolean}
 */
getIcons: function (type) {
    return window.checkoutConfig.payment.ccform.icons.hasOwnProperty(type) ?
        window.checkoutConfig.payment.ccform.icons[type]
        : false;
},

Step 3. Magento\Payment\Model\CcConfigProvider::getConfig()

github.com

magento/magento2/blob/2.1.6/app/code/Magento/Payment/Model/CcConfigProvider.php#L47-L56


public function getConfig()
{
    return [
        'payment' => [
            'ccform' => [
                'icons' => $this->getIcons()
            ]
        ]
    ];
}

Step 4. Magento\Payment\Model\CcConfigProvider::getIcons()

github.com

magento/magento2/blob/2.1.6/app/code/Magento/Payment/Model/CcConfigProvider.php#L58-L86


/**
 * Get icons for available payment methods
 *
 * @return array
 */
public function getIcons()
{
    if (!empty($this->icons)) {
        return $this->icons;
    }


    $types = $this->ccConfig->getCcAvailableTypes();
    foreach (array_keys($types) as $code) {
        if (!array_key_exists($code, $this->icons)) {
            $asset = $this->ccConfig->createAsset('Magento_Payment::images/cc/' . strtolower($code) . '.png');
            $placeholder = $this->assetSource->findSource($asset);
            if ($placeholder) {
                list($width, $height) = getimagesize($asset->getSourceFile());
                $this->icons[$code] = [
                    'url' => $asset->getUrl(),
                    'width' => $width,
                    'height' => $height
                ];
            }
        }
    }


    return $this->icons;
}

dmitrii_fediuk · April 26, 2017, 4:52pm