1

How do I remove the "amazon pay" icon from the shipping step? If i set "Configuration"->"Payment Method"=>"Amazon Pay"=>"Advanced"->"Display Amazon Pay Method" to "No", then it'll be removed, but it also remove the Amazon Pay option in the "Review & Payments" step. I would like to remove it from the "shipping step" only, how can i achieve that?enter image description here

  • you can remove it by using css if you don't want to show them on checkout page – Aasim Goriya Feb 14 at 6:42
  • If I use css to hidden the button, it also hidden the button on next page (review/payment step). Is there a way to hidden the button for this div ID #checkout-step-shipping only? – Kris Wen Feb 14 at 17:52
0

There is no pre defined setting available in the module itself. You need to overwrite the html file by creating custom module.

Vendor Name: Kris Module Name: Wen

File: Kris/Wen/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            'Amazon_Payment/template/checkout-button.html': 
              'Kris_Wen/template/checkout-button.html'
        }
    }
}

File: Kris/Wen/view/frontend/web/template/checkout-button.html

<!-- Removed AmazonPay Button -->

This will overwrite the default module template and will hide the button on checkout screen.

Hope this helps.

  • I believe the button load dynamically to both shipping step & review/payment step. If I use css to hidden the button, it also hidden the button on next page (checkout). Is there a way to hidden the button for this div ID #checkout-step-shipping only? – Kris Wen Feb 14 at 17:53
  • The section you want to hide only appears on shipping step by default. That html is not any ways showing in review/payment step. So above code would work for you sa it is not playing with css but code block. Try and check. – Yash Shah Feb 14 at 19:09
  • unfortunately, it didn't' work. if I remove/override the Amazon button from the template file. It will also remove the button from the checkout step, will disable customer to checkout through amazon. – Kris Wen Feb 22 at 17:25
0

You can remove this UI component via layout using componentDisabled property.
Add this to your checkout_index_index.xml file:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="customer-email" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="amazon-button-region" xsi:type="array">
                                                                    <item name="config" xsi:type="array">
                                                                        <item name="componentDisabled" xsi:type="boolean">true</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

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.