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?
-
you can remove it by using css if you don't want to show them on checkout page– Aasim GoriyaCommented Feb 14, 2019 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?– Mage ExplorerCommented Feb 14, 2019 at 17:52
Add a comment
|
2 Answers
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>
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? Commented Feb 14, 2019 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. Commented Feb 14, 2019 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. Commented Feb 22, 2019 at 17:25