I am creating a custom payment plugin for Magento 2.2.2 For the plugin I need to add the payment icons and some other images.

How can I add images for my custom payment plugin?

I tried all the steps mentioned in Magento 2 : How to Add Image to Payment Method in Checkout but after following these steps I'm getting the following error

Failed to load the "_/js/view/payment/method-renderer/" component.

Anyone has a solution for this? Any help will be appreciated.

2 Answers 2


Got the solution from How to specify skin image path in Knockout HTML template?



This is very simple. In your HTML template file add this image element

 <img data-bind="attr: { src: require.toUrl('images/payment/akg.png') }" />

Now add an image into your module's or theme web folder like this,


now if you want to add the payment method icons.

follow this.

<div data-bind="attr: {class: 'payment-method'}, css: {'_active': isActive()}">
<div class="payment-method-title field choice">
    <input type="radio"
           data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
    <img data-bind="attr: { src: require.toUrl('CyberSource_SecureAcceptance/images/hbl/hbl.png'), alt: $t('Pay via EJAZ-ALAM')}"
         class="payment-icon"/> <!-- here I added that image tag with image directory path, It will add image on frontend with payment method. -->
    <label class="label" data-bind="attr: {'for': getCode()}">
        <span data-bind="text: getTitle()"></span>
<div class="payment-method-content">
    <!-- ko foreach: getRegion('messages') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <div class="payment-method-billing-address">
        <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
        <!-- ko template: getTemplate() --><!-- /ko -->
    <form method="POST" action="" id="cybersource-post-form"></form>

    <form id="chcybersource_form" class="form" data-bind="" method="post" action="#">
        <!-- ko if: (isSilentPost())-->
            <!-- ko template: 'CyberSource_SecureAcceptance/payment/cc-form' --><!-- /ko -->
        <!-- /ko -->
        <!-- ko if: (isVaultEnabled())-->
            <div class="field choice">
                <input type="checkbox"
                       data-bind="attr: {'id': getCode() + '_enable_vault'}, checked: vaultEnabler.isActivePaymentTokenEnabler"/>
                <label class="label" data-bind="attr: {'for': getCode() + '_enable_vault'}">
                    <span><!-- ko i18n: 'Save for later use.'--><!-- /ko --></span>
        <!-- /ko -->

        <input type="submit" id="chcybersource_submit"  style="display:none" />
    <div class="checkout-agreements-block">
        <!-- ko foreach: $parent.getRegion('before-place-order') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
    <div class="actions-toolbar">
        <div class="primary">
            <button class="action primary checkout"
                    click: placeOrderToCyberSource,
                    css: {disabled: !isPlaceOrderActionAllowed()},
                    attr: {title: $t('Place Order')}
                <span data-bind="i18n: 'Place Order'"></span>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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