2

I'm pretty new to the real technological part until this far I've survived Magento 2 as a newby dummy

But I want to get the details straight and there seems to be knowledge of real understanding comes to the surface

But what I also find out is that there almost nothing clearly to find for this answer like nobody wants it.

How to add image/icon to payment methods in checkout Magento 2 ?

I hope someone can make me smarter on my way to get a greater web shop.

Where, How to Do?

Forever Grateful for who can bring me on the right path here!

payment method images

@khoatruongdinh It is a free payment extension you're right

But also want it for the magento bank transfer an image

This is sisow.js (Sisow is the extension name):

> /**  * Copyright © 2015 Magento. All rights reserved.  * See
> COPYING.txt for license details.  */ /*browser:true*/ /*global
> define*/ define(
>     [
>         'uiComponent',
>         'Magento_Checkout/js/model/payment/renderer-list'
>     ],
>     function (
>         Component,
>         rendererList
>     ) {
>         'use strict';
>         rendererList.push(
>             {
>                 type: 'sisow_mistercash',
>                 component: 'Sisow_Payment/js/view/payment/method-renderer/sisow-mistercash'
>             },            {
>                 type: 'sisow_maestro',
>                 component: 'Sisow_Payment/js/view/payment/method-renderer/sisow-maestro'
>             },            {
>                 type: 'sisow_mastercard',
>                 component: 'Sisow_Payment/js/view/payment/method-renderer/sisow-mastercard'
>             },            {
>                 type: 'sisow_overboeking',
>                 component: 'Sisow_Payment/js/view/payment/method-renderer/sisow-overboeking'
>             },            {
>                 type: 'sisow_paypalec',
>                 component: 'Sisow_Payment/js/view/payment/method-renderer/sisow-paypalec'
>             },            {
>                 type: 'sisow_sofort',
>                 component: 'Sisow_Payment/js/view/payment/method-renderer/sisow-sofort'
>             },            {
>                 type: 'sisow_visa',
>                 component: 'Sisow_Payment/js/view/payment/method-renderer/sisow-visa'
>             },            {
>                 type: 'sisow_vvv',
>                 component: 'Sisow_Payment/js/view/payment/method-renderer/sisow-vvv'
>             },            {
>                 type: 'sisow_webshop',
>                 component: 'Sisow_Payment/js/view/payment/method-renderer/sisow-webshop'
>             },            {
>                 type: 'sisow_ideal',
>                 component: 'Sisow_Payment/js/view/payment/method-renderer/sisow-ideal'
>             },            {
>                 type: 'sisow_giropay',
>                 component: 'Sisow_Payment/js/view/payment/method-renderer/sisow-giropay'
>             },            {
>                 type: 'sisow_eps',
>                 component: 'Sisow_Payment/js/view/payment/method-renderer/sisow-eps'
>             },            {
>                 type: 'sisow_focum',
>                 component: 'Sisow_Payment/js/view/payment/method-renderer/sisow-focum'
>             },            {
>                 type: 'sisow_homepay',
>                 component: 'Sisow_Payment/js/view/payment/method-renderer/sisow-homepay'
>             }                 
>         );
>         /** Add view logic here if needed */
>         return Component.extend({});
>     } );

This is for example sisow-maestro.js:

/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
/*browser:true*/
/*global define*/
define(
    [
        'Magento_Checkout/js/view/payment/default',
        'Magento_Checkout/js/action/select-payment-method',
        'Magento_Checkout/js/checkout-data',
        'mage/url'
    ],
    function (Component,
                selectPaymentMethodAction,
                checkoutData,
                url) {
        return Component.extend({
            defaults: {
                template: 'Sisow_Payment/payment/default'
            },

            selectPaymentMethod: function() {
                selectPaymentMethodAction(this.getData());
                checkoutData.setSelectedPaymentMethod(this.item.method);
                return true;
            },

            afterPlaceOrder: function () {
                window.location.replace(url.build('sisow/payment/start/'));
            }

        });
    }
);

You can work with that or you need more ?

I'm really very thankful that you take the moment to listen for this, can only appreciate that very very much already, thanks again even I still have to succeed it :P

9
  • You can take a screenshot? – Khoa TruongDinh Sep 13 '16 at 12:39
  • @KhoaTruongDinh alainstout.stackstorage.com/index.php/apps/files_sharing/ajax/… This is a printscreen for what I mean I guess it's pretty a technical issue for me and easy for some I dunno – Alain Stout Sep 14 '16 at 14:41
  • @KhoaTruongDinh I'm sorry I'm new at this, have did what you asked for but kept the image for people who want to be helped with the same issue, thanks again – Alain Stout Sep 15 '16 at 15:03
  • @KhoaTruongDinh Am I providing the right stuff? – Alain Stout Sep 16 '16 at 9:30
  • @KhoaTruongDinh please tell me if I don't understand or have give the wrong things, like I said I am not an educated coder have never done it – Alain Stout Sep 17 '16 at 11:34
2

We can set the image in html template, like Paypal

We add the image in html template

vendor/magento/module-paypal/view/frontend/web/template/payment/paypal-express.html

<!-- PayPal Logo -->
            <img data-bind="attr: {src: getPaymentAcceptanceMarkSrc(), alt: $t('Acceptance Mark')}"
                 class="payment-icon"/>

Try to get the image path from the global checkout config js variable

vendor/magento/module-paypal/view/frontend/web/js/view/payment/method-renderer/paypal-express-abstract.js

/** Returns payment acceptance mark image path */
            getPaymentAcceptanceMarkSrc: function () {
                return window.checkoutConfig.payment.paypalExpress.paymentAcceptanceMarkSrc;
            },

We need to set this config in config provider:

vendor/magento/module-paypal/Model/ExpressConfigProvider.php

$config = [
            'payment' => [
                'paypalExpress' => [
                    'paymentAcceptanceMarkHref' => $this->config->getPaymentMarkWhatIsPaypalUrl(
                        $this->localeResolver
                    ),
                    'paymentAcceptanceMarkSrc' => $this->config->getPaymentMarkImageUrl(
                        $locale
                    ),
                    'isContextCheckout' => false,
                    'inContextConfig' => []
                ]
            ]
        ];
5
  • First of All I am so very thankful for you to take the effort to help me with this I'm only not getting really far, I did step 1, 2 was already there, did step 3 and than the page didn't load in checkout error... For me this pretty Chinese so that's why I respect everyone who really know this coding For everything I want I hope to fix it this way by searching or asking One of the reasons that I don't get this also is that I have also already PayPal Icon I want the rest to What am I doing wrong ? What's the right way? Or is this to difficult if you know nothing about coding? Thanks – Alain Stout Sep 15 '16 at 13:18
  • You're always welcome! If still not ok, you can post full code lines of your module here. – Khoa TruongDinh Sep 15 '16 at 13:20
  • Thanks so much for real!!!!!!!!!!!!! I pushed enter but I wasn't ready yet please read comment XD – Alain Stout Sep 15 '16 at 13:35
  • This is free payment extension or your custom payment extension? – Khoa TruongDinh Sep 15 '16 at 14:16
  • I'm pretty sure that we can an image to this payment easily. However, I need to see the code lines of this module. – Khoa TruongDinh Sep 15 '16 at 14:20

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.