javascriptangularjsasynchronousauthorize.net

Placing authorize.net merchant seal in augular js view file


I have angular js app with payment feature. I would like to insert authorize.net seal code (provided by authorize.net for verified merchants. I added my site to Verified Merchant Seal Domains List on authorize.net server):

<!-- (c) 2005, 2014. Authorize.Net is a registered trademark of CyberSource Corporation --> <div       class="AuthorizeNetSeal"> <script type="text/javascript" language="javascript">var ANS_customer_id=my_customer_id;</script> <script type="text/javascript" language="javascript" src="//verify.authorize.net/anetseal/seal.js" ></script> <a href="http://www.authorize.net/" id="AuthorizeNetText" target="_blank">Merchant Services</a> </div>

when i inserted into one of my view page it shows the following error

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

i understand that, it cannot write the seal image after the view loaded (bcoz seal.js contains document.write code). but i don't have any idea how to resolve this.

If i placed this code in main index.html, it works fine (obviously). but i need it in one of my view file. Please help me to resolve this issue.

Thank in advance.


Solution

  • The problem is that document.writeln() will not run from your asynchronously loaded seal.js script as the page has already loaded. It is impossible to make document.writeln() and document.write() work asynchronously so you will have to work around it.

    There are two solutions...

    The first solution is to download the seal.js script and host it on your website, replace all document.writeln() functions with a string.

    I have done this here (the seal.js file is in the js tab): http://codepen.io/anon/pen/WbxJEd

    replace document.write() and document.writeln() with

    var htmlString = '';
    htmlString += '<img src="blabla"/>';
    

    The second solution (maybe the better option if you don't want to host the js) is to overwrite the document.write() and document.writeln() functions with your own....

    http://codepen.io/anon/pen/JoKvyg

    document.writeOld = document.write;
    document.writelnOld = document.writeln;
    
    //Getting the element we are rendering too and setting string and custom function
    var placeholder = document.getElementById('sealPlaceholder'),
        sealHtml = '',
        customWriteFnc = function(html) {
            sealHtml += html;
            placeholder.innerHTML = sealHtml;
        }
    
    //Overwriting document.write and document.writeln with our own function
    document.write = customWriteFnc;
    document.writeln = customWriteFnc;
    
    //Loading the script after the page has loaded
    setTimeout(function(){
        var head = document.getElementsByTagName('head')[0],
            script = document.createElement('script');
       script.type= 'text/javascript';
       script.src= '//verify.authorize.net/anetseal/seal.js';
       head.appendChild(script);
    }, 500);