How to Add Image / Logo to Payment Method in Checkout

Do you want to display a payment method logo/image for a default payment method in Magento checkout like for example paypal does? In this post we can check together how you can add an image / logo for the payment method " Check / Money Order" in checkout.

First of all we will extend the system configuration of the payment method "Check / Money Order", adding the possibility to upload an image and also the option to display or not the payment method name next that image.

Then we will override the Checkmo class to add our functionality, so we can get the above configuration. Also we will have to make it available to the checkout config provider. For that we will need to define a custom config provider in our di.xml.

In our custom provider class LogoConfigProvider we define our two additional config values, the logo and the display_logo_title.

Afterwards we will need to extend the component for that payment method, so we can add our functionality of getting the image defined in admin configuration and also the option of displaying the name next to the image or not.

Furthermore we will need to override the payment renderer-list of the offline payment methods, so we can defined our custom template for the payment method checkmo and add our code to show display the payment method image.

Below you can see the additional system configuration added for the payment method "Check / Money Order".