1

Add Payment Method Logo (credit card, Bank Transfer Payment etc) In checkout/#payment as like paypal icon in magento 2

enter image description here

1
2

Try the following way. This is only for the Banktransfer payment method. You need to change the same way for others:

Step 1: How you pass data to the checkout

app/code/SR/MagentoCommunity/etc/frontend/di.xml

<?xml version="1.0"?>
<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="add_logo_in_bank_transfer_payment_config_provider" xsi:type="object">SR\MagentoCommunity\Model\BanktransferConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

Now create config provider class:

app/code/SR/MagentoCommunity/Model/BanktransferConfigProvider.php

<?php
declare(strict_types=1);

namespace SR\MagentoCommunity\Model;

use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Framework\View\Asset\Repository;

class BanktransferConfigProvider implements ConfigProviderInterface
{
    /**
     * @var Repository
     */
    private $assetRepository;

    /**
     * BanktransferConfigProvider constructor.
     *
     * @param Repository $assetRepository
     */
    public function __construct(
        Repository $assetRepository
    ) {
        $this->assetRepository = $assetRepository;
    }

    /**
     * {@inheritdoc}
     */
    public function getConfig()
    {
        $banktransferLogoUrl = $this->assetRepository->getUrlWithParams('SR_MagentoCommunity::images/banktransfer_logo.png', []);
        return [
            'payment' => [
                'banktransfer' => [
                    'banktransferLogoUrl' => $banktransferLogoUrl
                ]
            ]
        ];
    }
}

Step 2: Now you need to overwrite js class of payment method.

app/code/SR/MagentoCommunity/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_OfflinePayments/js/view/payment/method-renderer/banktransfer-method': {
                'SR_MagentoCommunity/js/mixin/banktransfer-method-mixin': true
            }
        }
    }
};

app/code/SR/MagentoCommunity/view/frontend/web/js/mixin/banktransfer-method-mixin.js

define([
    'jquery',
    'ko'
], function ($, ko) {
    'use strict';

    return function (banktransferMethod) {
        return banktransferMethod.extend({
            defaults: {
                template: 'SR_MagentoCommunity/payment/banktransfer'
            },
            getLogoUrl: function () {
                return window.checkoutConfig.payment.banktransfer.banktransferLogoUrl;
            }
        });
    };
});

app/code/SR/MagentoCommunity/view/frontend/web/template/payment/banktransfer.html

<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
    <div class="payment-method-title field choice">
        <img data-bind="attr: {src: getLogoUrl(), height: '39', width: '163'}" class="payment-icon" />
        <input type="radio"
               name="payment[method]"
               class="radio"
               data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()" />
        <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
    </div>

    <div class="payment-method-content">
        <!-- ko foreach: getRegion('messages') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <div class="payment-method-billing-address">
            <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
        <p data-bind="html: getInstructions()"></p>
        <div class="checkout-agreements-block">
            <!-- ko foreach: $parent.getRegion('before-place-order') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
        <div class="actions-toolbar">
            <div class="primary">
                <button class="action primary checkout"
                        type="submit"
                        data-bind="
                        click: placeOrder,
                        attr: {'title': $t('Place Order')},
                        enable: (getCode() == isChecked()),
                        css: {disabled: !isPlaceOrderActionAllowed()}
                        "
                        disabled>
                    <span data-bind="i18n: 'Place Order'"></span>
                </button>
            </div>
        </div>
    </div>
</div>

Clear cache. If Magento mode is not developer, redeploy static content

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.