Zahlungsmodul mit Javascript modifzieren?

Ich bin dabei ein Zahlungsmodul zu installieren. Dabei geht es darum, dass ich über Javascript Informationen einblenden möchte.

Der Support hat es mir so geschildert:


Wir empfehlen den Schritt template-seitig abzubilden. Indem Sie z.B. den Klarna Layer mit den zusätzlichen Eingabe-Feldern über den Bereich der Zahlungsarten-Auswahl einblenden. Dies liesse sich komplett im Template mit JavaScript lösen. (Achtung: Hier gibt es 2 Modus: Ansicht + Edit).

Jetzt stellt sich für mich die Frage, wie ich das mache.

Im Modul hab ich mir den Punkt rausgesucht, der die Zahlungsdaten liefert:

 [{if $sPaymentID == "klarna_invoice"}]
                        <script defer async="true" data-vendor="klarna" data-eid="[{$oViewConf->getEid()}]" data-locale="de_de" data-product="invoice" data-width="160" type="text/javascript" src="https://cdn.klarna.com/1.0/code/tooltip/2.0/js/all.js"></script>
                    [{/if}]

Stehe jetzt vor dem Problem, dass ich mit Javascript quasi eine Box erstellen soll, die angezeigt wird, wenn ich die Zahlungsmethode auswähle. Wo finde ich hierzu Tutorials? Bzw. wie ändert man so etwas am besten, da ich das bestehende Modul ja ändern soll und nicht neu schreiben.

Derzeit blendet das Modul unter der Zahlungsmethode die Informationen ein. Es soll diese jedoch in einer Box einblenden.

Hier ist das Javascript-File um das es geht:

/*jslint browser:true, plusplus:true, indent:4*/
(function () {
    var protocol = document.location.protocol === 'http:' ? 'http:' : 'https:',
        i = 0,
        scriptTags = {},
        klarna = {
            tooltip: 'show',
            cdnRoot: '..',
            defaultData: {
                eid: '',
                locale: 'en_gb',
                product: 'account',
                width: 60
            }
        },
        hasGetComputedStyle = !!window.getComputedStyle;

    // HTTP or HTTPS
    if (document.location.protocol === 'http:' || document.location.protocol === 'https:') {
        klarna.cdnRoot = document.location.protocol + '//cdn.klarna.com/1.0/code/tooltip/2.0';
    }

    // For IE8
    function getDataAttribute(element, attribute) {
        return (element.dataset || {})[attribute] || element.getAttribute('data-' + attribute);
    }

    // Add the hover link
    function addLink(scriptTag, callback) {
        var link = document.createElement('a'),
            id = document.getElementById(scriptTag.dataset.id);

        link.className = 'klarna-tooltip';

        if (scriptTag.dataset.id === '') { // Put the link after the script tag
            scriptTag.parentNode.insertBefore(link, scriptTag.nextSibling);
        } else if (id !== null) { // Put the link within a specific id
            id.appendChild(link);
        }

        callback(link);
    }

    // Add the hover image and span
    function addHover(link, imageSrc, callback) {
        // Add a span to the link
        var span = document.createElement('span'),
            image = new Image();

        span.className = 'klarna-tooltip data';
        link.appendChild(span);

        // Add an image to the link
        image.src = imageSrc;
        link.appendChild(image);

        // Callback with the span so that we can put some content in there
        callback(span);
    }

    // Default values
    function setDefault(scriptTag, callback) {
        if (!scriptTag.dataset) {
            scriptTag.dataset = {};
        }
        if (!scriptTag.dataset.locale) {
            scriptTag.dataset.locale = getDataAttribute(scriptTag, 'locale') || klarna.defaultData.locale;
        }
        if (!scriptTag.dataset.product) {
            scriptTag.dataset.product = getDataAttribute(scriptTag, 'product') || klarna.defaultData.product;
        }
        if (!scriptTag.dataset.width) {
            scriptTag.dataset.width = getDataAttribute(scriptTag, 'width') || klarna.defaultData.width;
        }
        if (!scriptTag.dataset.eid) {
            scriptTag.dataset.eid = getDataAttribute(scriptTag, 'eid') || klarna.defaultData.eid;
        }
        if (!scriptTag.dataset.tooltip) {
            scriptTag.dataset.tooltip = getDataAttribute(scriptTag, 'tooltip') || klarna.tooltip;
        }
        if (!scriptTag.dataset.id) {
            scriptTag.dataset.id = getDataAttribute(scriptTag, 'id') || '';
        }

        callback(scriptTag);
    }

    function getUrl(eid, locale, product) {
        return 'https://cdn.klarna.com/1.0/shared/content/brand/tooltip/'
            + eid
            + '/' + locale.toLowerCase()
            + '/' + product.toLowerCase();
    }

    // Content
    function getContent(url) {
        var iframe = document.createElement('iframe');

        iframe.src = url;
        iframe.width = 394;
        iframe.height = 180;
        iframe.frameBorder = 0; // IE :(

        return iframe;
    }

    function getTooltipLogo(cdnRoot, eid, locale, product, width) {
        var output = '',
            country = locale.split('_')[1].toUpperCase();

        locale = locale.toLowerCase();
        product = product.toLowerCase();


Teil 2:

        if (locale !== 'en_gb') {
            output = protocol + '//cdn.klarna.com/public/images/' + country + '/badges/v1/' + product + '/' + country + '_' + product + '_badge_std_blue.png?width=' + width;
        } else {
            output = protocol + '//cdn.klarna.com/public/images/global/logos/v1/' + product + '/global_' + product + '_logo_std_blue-black.png?width=' + width;
        }
        return output;
    }

    function isUndefined(obj) {
        return obj === void 0;
    }

    function style(el) {
        if (hasGetComputedStyle) {
            return window.getComputedStyle(el, null);
        }
        return el.currentStyle;
    }

    function offset(el) {
        var doc = el.ownerDocument.documentElement,
            offsetParent = el.offsetParent,
            parentOffset = {top: 0, left: 0};

        if (style(el).position === 'fixed') {
            return {
                'top': el.offsetTop,
                'left': el.offsetLeft
            }
        }

        while (offsetParent && style(offsetParent).position === 'static') {
            offsetParent = offsetParent.offsetParent;
        }
        offsetParent = offsetParent || doc;

        if (offsetParent.nodeName !== 'HTML') {
            parentOffset = offset(offsetParent);
        }

        return {
            'top': parentOffset.top + el.offsetTop,
            'left': parentOffset.left + el.offsetLeft
        };
    }

    function on(elem, ev, fun) {
        if (elem.addEventListener) {
            elem.addEventListener(ev, fun, false);
        } else {
            elem.attachEvent('on' + ev, fun);
        }
    }

    function off(elem, ev, fun) {
        if (elem.addEventListener) {
            elem.removeEventListener(ev, fun, false);
        } else {
            elem.detachEvent('on' + ev, fun);
        }
    }

    /**
     * Get the dimensions of the viewport.
     */
    function viewport() {
        var de = document.documentElement,
            yoff = window.pageYOffset || de.scrollTop,
            xoff = window.pageXOffset || de.scrollLeft,
            height = window.innerHeight || de.clientHeight,
            width = window.innerWidth || de.clientWidth;

        return {
            bottom: yoff + height,
            right: xoff + width
        };
    }

    // Toast lazy loading
    /*ignore jslint start*/
    this.toast = function(){var e=document,t=e.getElementsByTagName("head")[0],n=this.setTimeout,r="createElement",i="appendChild",s="addEventListener",o="onreadystatechange",u="styleSheet",a=10,f=0,l=function(){--f},c,h=function(e,r,i,s){if(!t)n(function(){h(e)},a);else if(e.length){c=-1;while(i=e[++c]){if((s=typeof i)=="function"){r=function(){return i(),!0};break}if(s=="string")p(i);else if(i.pop){p(i[0]),r=i[1];break}}d(r,Array.prototype.slice.call(e,c+1))}},p=function(n,s){++f,/\.css$/.test(n)?(s=e[r]("link"),s.rel=u,s.href=n,t[i](s),v(s)):(s=e[r]("script"),s.src=n,t[i](s),s[o]===null?s[o]=m:s.onload=l)},d=function(e,t){if(!f)if(!e||e()){h(t);return}n(function(){d(e,t)},a)},v=function(e){if(e.sheet||e[u]){l();return}n(function(){v(e)},a)},m=function(){/ded|co/.test(this.readyState)&&l()};h(arguments)};
    /*ignore jslint end*/

    // Iterate through the script tags in the page
    scriptTags = document.getElementsByTagName('script');

    toast(
        klarna.cdnRoot + '/css/all.css',
        function () {
            for (i = 0; i < scriptTags.length; i++) {
                if (/klarna/.test(getDataAttribute(scriptTags[i], 'vendor'))) {
                    var scriptTag = scriptTags[i];

                    // Check we haven't processed this one already and we want to show a tooltip
                    if (scriptTag.processed) {
                        continue;
                    }

                    scriptTag.processed = true;

                    setDefault(scriptTag, function (scriptTag) {
                        addLink(scriptTag, function (link) {
                            if (getDataAttribute(scriptTag, 'tooltip') !== 'hide') { // Show the hover
                                addHover(link, getTooltipLogo(klarna.cdnRoot, scriptTag.dataset.eid, scriptTag.dataset.locale, scriptTag.dataset.product, scriptTag.dataset.width), function (span) {
                                    var url = getUrl(scriptTag.dataset.eid, scriptTag.dataset.locale, scriptTag.dataset.product),
                                        content = getContent(url),
                                        origClassName = span.className;

                                    span.appendChild(content);

                                    if (!!window.postMessage && JSON && JSON.stringify) {
                                        link.onmouseover = function () {
                                            var data = {
                                                state: 'active',
                                                uri: '' + window.location
                                            };
                                            content.contentWindow.postMessage(JSON.stringify(data), url);
                                        }

                                        link.onmouseout = function () {
                                            var data = {
                                                state: 'inactive',
                                                uri: '' + window.location
                                            };
                                            content.contentWindow.postMessage(JSON.stringify(data), url);
                                        }
                                    }


                                    function outsideFixup () {
                                        var className = origClassName,
                                            vp = viewport(),
                                            width = 394,
                                            height = 180,
                                            parentOffset;

                                        if (!span || !span.parentNode) {
                                            off(window, 'scroll', outsideFixup);
                                            off(window, 'resize', outsideFixup);
                                            span = null;
                                            return;
                                        }

                                        if (span.parentNode.offsetParent == null) {
                                            setTimeout(outsideFixup, 200);
                                            return;
                                        }

                                        parentOffset = offset(span.parentNode);

                                        if (width + parentOffset.left + 60 > vp.right) {
                                            className += ' outside';
                                        }

                                        if (parentOffset.top + 200 > vp.bottom) {
                                            className += ' outside-horizontal';
                                        }

                                        span.className = className;
                                    }
                                    setTimeout(outsideFixup, 0);
                                    on(window, 'scroll', outsideFixup);
                                    on(window, 'resize', outsideFixup);
                                });
                            } else { // Remove the hover
                                addHover(link, getTooltipLogo(klarna.cdnRoot, scriptTag.dataset.eid, scriptTag.dataset.locale, scriptTag.dataset.product, scriptTag.dataset.width), function (span) {
                                    span.parentNode.removeChild(span);
                                });
                            }
                        });
                    });
                }
            }
        }
    );
}());

Keine eine Idee, wie ich das anstellen kann?