PayPal im kontext checkout mit single page app (Angular)

Question

Ich versuche, PayPal in-context checkout in einer einzigen Seite App, aber Probleme, wenn Sie eine Seite mit einer PayPal-Taste zum zweiten Mal besuchen.

Ich bin gerade von hier http://plnkr.co/edit/2GGEyNEFUPCZ7jIIGk9X?p=preview und PayPal-Beispielcode angehoben setze auf einer Seite in meiner App:

<div> 
    <div class="container"> 
    <div class="row product"> 
     <div class="col-md-4"> 
     <h3>Toy Story Jessie T-Shirt</h3> 
      <p> 
      <a href="http://166.78.8.98/cgi-bin/aries.cgi?live=1&returnurl=http://166.78.8.98/cgi-bin/return.htm&cancelurl=http://166.78.8.98/cgi-bin/cancel.htm" id="t1"> 
      </a> 
      </p> 
     </div> 
    </div> 
    <div class="row product"> 
     <div class="col-md-4"> 
     <h3>Toy Story Jessie T-Shirt</h3> 
      <p> 
      <form id="t2" class="ajaxasync" method="POST" action="http://166.78.8.98/cgi-bin/aries.cgi?live=1&returnurl=http://166.78.8.98/cgi-bin/return.htm&cancelurl=http://166.78.8.98/cgi-bin/cancel.htm"> 
      </form> 
      </p> 
     </div> 
    </div> 
    </div> 
    <script> 
    window.paypalCheckoutReady = function() { 
     paypal.checkout.setup("6XF3MPZBZV6HU", { 
      environment: 'sandbox', 
      click: function(event) { 
       event.preventDefault(); 

       paypal.checkout.initXO(); 
       $.support.cors = true; 
       $.ajax({ 
        url: "http://166.78.8.98/cgi-bin/aries.cgi?sandbox=1&direct=1&returnurl=http://166.78.8.98/cgi-bin/return.htm&cancelurl=http://166.78.8.98/cgi-bin/cancel.htm", 
        type: "GET", 
        data: '&ajax=1&onlytoken=1', 
        async: true, 
        crossDomain: true, 

        //Load the minibrowser with the redirection url in the success handler 
        success: function (token) { 
         var url = paypal.checkout.urlPrefix +token; 
         //Loading Mini browser with redirect url, true for async AJAX calls 
         paypal.checkout.startFlow(url); 
        }, 
        error: function (responseData, textStatus, errorThrown) { 
         alert("Error in ajax post"+responseData.statusText); 
         //Gracefully Close the minibrowser in case of AJAX errors 
         paypal.checkout.closeFlow(); 
        } 
       }); 
      }, 
      buttons: [ 
       { container: 't1' }, { container: 't2' }] 
     }); 
    } 
    </script> 

    <script async src="//www.paypalobjects.com/api/checkout.js"></script> 
</div> 

Dies funktioniert gut das erste Mal, dass ich die Seite besuchen. Jedoch bei zukünftigen Besuchen (ohne Fest reload dazwischen), erhalte ich

Uncaught Error: Attempting to load postRobot twice on the same window 

Dies ist, weil es versucht, das checkout.js Skript zweimal zu laden. Wenn ich also ein bedingtes setzte nicht das checkout.js Skript auf nachfolgenden Seiten laufen zu lassen und stattdessen gehen Sie direkt zu paypal.checkout.setup, erhalte ich

Error: You are calling paypal.checkout.setup() more than once. This function can only be called once per page load. Any further calls will be ignored. 

Und die Taste wird nie erzeugt.

Ich muss die In-Kontext-Erfahrung (das Fenster, das angezeigt wird) beibehalten, wenn auf die Schaltfläche geklickt wird. Ich habe die gesamte Dokumentation von PayPal durchsucht und das Objekt gründlich in der Konsole untersucht, hoffe aber, dass etwas fehlt.

Wie kann ich die Schaltfläche auf einer neuen Seite "neu laden", wenn ich bereits checkout.js geladen und auf einer vorherigen Seite paypal.checkout.setup() aufgerufen habe?

Answer 1

Ich habe eine Direktive geschrieben, um mein eigenes Problem zu lösen, da es nicht scheint, dass PayPal irgendwelche Einzelseitenfunktionen hat.

paypal-checkout directive

Die Richtlinie führt die PayPal Instanziierung Code einmal und dann Platzierungen nachfolgende Richtlinie wird einfach zeigen, die bereits grundiert Taste auf zukünftige Seite/Zustand Lasten.