Skip to content

Magento 2.4.2: How to add a Div next to Amazon Pay button in checkout page

I need to place a logo(A credit card image) about the same size of Amazon Pay button next to it where I made a mark in the image below. When viewing the code in Amazon_Paywebtemplatecheckout-button.htmlcheckout-button.html, I don’t understand how to add this there as it seems to use knockoutjs to render contents. Could you please help with understanding how to do it?

enter image description here

Code:

<div class="amazon-express-title" data-bind="i18n: 'Express Checkout', visible: isVisible"></div>

<div class="amazon-button-container" data-bind="visible: isVisible">
 <div class="amazon-button-column">
  <div id="PayWithAmazon-Checkout" class="amazon-checkout-button"
   data-bind="attr: {id: 'PayWithAmazon_' + displayArea}, mageInit: {'Amazon_Pay/js/amazon-button':{'placement': 'Checkout', 'hideIfUnavailable': '.amazon-express-title,.amazon-button-container,.amazon-divider'}}">
   Hello
  </div>
 </div>

 <div class="amazon-button-column amazon-button-column-tooltip">
  <div class="field-tooltip toggle">
   <span class="field-tooltip-action action-help"
    data-bind="mageInit: {'dropdown':{'activeClass': '_active'}}"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false">
   </span>
   <div class="field-tooltip-content" data-target="dropdown" aria-hidden="true" data-bind="text: tooltip"></div>
  </div>
 </div>
</div>

<div class="amazon-divider" data-bind="visible: isVisible">
 <span data-bind="i18n: 'or continue with Standard Checkout'"></span>
</div>

<!-- ko foreach: getRegion('after-amazon-button') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->