Tricks

Login nahtlos in SSO einbetten

function rearrangeAmazonLogin() {
    const $amazonPayLoginInDropdown = jQuery('.navbar-nav .amazon-login-button:not(.hidden)').first();
    if ($amazonPayLoginInDropdown.length !== 1) {
        return;
    }
    let $ssoContainer = $amazonPayLoginInDropdown.parent().find('.dropdown-sso');
    if ($ssoContainer.length === 1) {
        $ssoContainer.find('.row').append('<div class="col-xs-3"><a class="sso-link sso-link-amazon" title="Amazon Pay Login" href="#"><i class="ssoicon fa fa-amazon" aria-hidden="true"></i></a></div>');
        const $boxSsoContainer = jQuery('.box-sso');
        if ($boxSsoContainer.length === 1) {
            $boxSsoContainer.find('.sso-link-amazon').on('click', (e) => {
                e.preventDefault();
                $amazonPayLoginInDropdown.click();
            });
        }
    } else {
        $amazonPayLoginInDropdown.after('<div class="dropdown-sso"><div class="separator"><span>Schnelle Anmeldung mit</span></div><div class="row"><div class="col-xs-3"><a class="sso-link sso-link-amazon" title="Amazon Pay Login" href="#"><i class="ssoicon fa fa-amazon" aria-hidden="true"></i></a></div></div></div>');
        $ssoContainer = $amazonPayLoginInDropdown.parent().find('.dropdown-sso');
    }
    $amazonPayLoginInDropdown.addClass('hidden');

    $ssoContainer.find('.sso-link-amazon').on('click', (e) => {
        e.preventDefault();
        $amazonPayLoginInDropdown.click();
    });
}
rearrangeAmazonLogin();
setInterval(rearrangeAmazonLogin, 1000);

Style innerhalb des Buttons anpassen

const STYLES_AMAZON_PAY = `
.amazonpay-button-view3{display: none;} //removes the button subtext
`;
(function (){
    setInterval(function(){
        const allButtons = document.querySelectorAll('.amazon-pay-button');
        if(allButtons.length > 0){
            allButtons.forEach(function(button){
                if(button.shadowRoot) {
                    if(button.shadowRoot.querySelector('#custom-button-style')){
                        return;
                    }
                    const style = document.createElement('style');
                    style.innerHTML = STYLES_AMAZON_PAY;
                    style.id = 'custom-button-style';
                    button.shadowRoot.appendChild(style);
                }
            });
        }
    }, 200);
})();

Amazon Pay Button lokal rendern (ohne Cookies)

Um das Amazon Pay JavaScript erst dann zu laden, wenn die Kundin den Button anklickt, muss im Shopverzeichnis eine (leere) Datei mit dem Namen .amazon-pay-local-buttons angelegt werden. Der Vorteil ist, dass keine Cookies gesetzt werden, solange der Button nicht angeklickt wird.