Amazon Pay Button not loading in Minicart - Uncaught AmazonPay: Can not find element #ui-id-6 for amazon.Pay.renderButton.

HenKun commented 3 years ago

What I expected

The Amazon Pay Button is shown in minicart correctly

What happened instead

Sometimes the button does not show up in minicart, emitting the console error:

Uncaught AmazonPay:
Can not find element #ui-id-6 for amazon.Pay.renderButton.

This mostly happens when the first item is added to the cart. When adding more items, or when reloading the page with a filled cart, the button seems to render flawlessly.

As follows, the HTML code of the button when it renders vs. when it does not render.

Correct (rendered):

<div id="minicart-amazon-pay-button" class="amazon-button-container" style="">
    <div class="amazon-divider">
        <span>oder</span>
    </div>
    <div class="amazon-button-column">
        <div id="PayWithAmazon-Cart" class="amazon-checkout-button" data-loaded-at="1637669764">
            <div id="ui-id-5" class="amazonpay-button-parent-container-checkout-A2LDVTT4Z82ZR4" role="button" aria-label="Amazon Pay - Verwenden Sie Ihr Amazon Pay-Sandbox-Testkonto" title="Nutzen Sie zum Bezahlen die Angaben, die Sie bereits in Ihrem Amazon-Konto gespeichert haben" style="width: 200px; height: 45px; position: relative;"/>
        </div>
    </div>
    <div class="checkout-methods-items">
        <div class="amazon-button-column amazon-button-column-tooltip">
            <div class="field-tooltip toggle">
                <span class="field-tooltip-action action-help" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button" tabindex="0"/>
                <div class="field-tooltip-content" data-target="dropdown" aria-hidden="true">Sind Sie Kunde bei Amazon? Verwenden Sie für die Bezahlung die Adresse und Zahlungsdetails, die in Ihrem Amazon-Kundenkonto gespeichert sind.</div>
            </div>
        </div>
    </div>
</div>

Error case - not rendered:

<div id="minicart-amazon-pay-button" class="amazon-button-container" style="display: none;">
    <div class="amazon-divider">
        <span>oder</span>
    </div>
    <div class="amazon-button-column">
        <div id="PayWithAmazon-Cart" class="amazon-checkout-button" data-loaded-at="1637669764">
            <div>
                <img src="https://XXXXXXX/pub/static/version1637668810/frontend/XXX/XXXXXXX/de_DE/images/loader-1.gif" alt="" width="24">
                </div>
            </div>
        </div>
        <div class="checkout-methods-items">
            <div class="amazon-button-column amazon-button-column-tooltip">
                <div class="field-tooltip toggle">
                    <span class="field-tooltip-action action-help" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button" tabindex="0"/>
                    <div class="field-tooltip-content" data-target="dropdown" aria-hidden="true">Sind Sie Kunde bei Amazon? Verwenden Sie für die Bezahlung die Adresse und Zahlungsdetails, die in Ihrem Amazon-Kundenkonto gespeichert sind.</div>
                </div>
            </div>
        </div>
    </div>

Note, how $buttonRoot is neither emptied nor having the newly generated unique id added, at the time the error occurs. So I suspect there is still a race condition between adding the button container to the DOM and evaluating the unique id in APay checkout.js. I am by far no JS expert, but I think while the button container is created by knockout, it is not yet added to the DOM when the unique id is added. This is different when there are already items in the cart, since the minicart is fully rendered at page load.

Note that there already was a similar issue in a former version: https://github.com/amzn/amazon-payments-magento-2-plugin/issues/1052

Steps to reproduce the issue

go to product page with empty cart
Add first item
Open mini cart
Most of the time Amazon Pay Button is not rendered, while buttons of other payment methods are rendered

Your setup

Magento version: 2.4.3
Amazon Pay Extension Version: 5.8.0
Magento Edition: Community
JavaScript Console:
Shop URL: www.nebelkind.com

sgabhart22 commented 3 years ago

Hello @HenKun , thank you for the detailed report! We have seen this issue recently, mostly on pages where multiple Amazon Pay buttons are rendered. We have a patch available:

amazon-button-render.patch.txt

(You can remove the .txt extension before applying the patch.) This fix should be included in an upcoming release, TBD. Please let us know if you are able to apply this successfully with positive results!

HenKun commented 3 years ago

@sgabhart22 Thanks for the patch.

Yes, there is the Amazon Sign In button rendered additionally on the page. But no second Pay button. As far as I can see this "fix" only catches the error, logs and returns. Is there more about the patch?

sgabhart22 commented 2 years ago

@HenKun Not much more about the patch, it's really just preventing the stoppage of execution when the initial button container isn't found, allowing the rendering to complete successfully. We are also planning to include this error handling in the next release as well.

HenKun commented 2 years ago

Ah I see, so when the initial button rendering fails (and the exception is catched) then the button is rendered again later on successfully? That would indeed solve the issue so far,

amzn / amazon-payments-magento-2-plugin