Schaltfläche "Streifen auschecken" wird bei der Verwendung von Winkelrouten nicht angezeigt

Question

Ich versuche derzeit, den standardmäßigen Checkout-Dialog für Streifenzahlungen zu implementieren. Wenn ich den kurzen <script> Include einschließe, der in der Dokumentation beschrieben wird (https://stripe.com/docs/checkout), wird die Schaltfläche, die angezeigt werden sollte, nicht gerendert.

Wenn ich es in meine Top-Level-index.html-Datei einfügen, wird die Schaltfläche angezeigt. Wenn ich es in ein Partial setze, das beim Anschlagen einer bestimmten Route angezeigt wird, tut es das nicht. Ich nehme an, dies ist, weil es das Javascript nicht ausführt, weil es beim Laden der Seite nicht passiert, wenn es in einer Route ist.

Gibt es etwas, was ich tun kann, um dies in einer Route zu funktionieren, oder sollte ich einfach ein benutzerdefiniertes Formular implementieren, das auf die Bibliothek stripe.js verweist? Vielen Dank.

Answer 1

Das Problem ist, dass die js nicht feuert, wie Sie vorgeschlagen. Eine Lösung besteht darin, einfach den Stripe checkout.js in Ihre index.html-Datei einzufügen und dann das Stripe-Popup auszulösen, das mit Ihrem Controller (oder anderswo) geöffnet wird.

In Ihrem index.html (oder gleichwertig)

<script src="https://checkout.stripe.com/checkout.js"></script> 
<!-- Angular script(s) --> 

In Ihrem Controller (oder anderswo)

var handler = StripeCheckout.configure({ 
    key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh', 
    image: '/img/documentation/checkout/marketplace.png', 
    locale: 'auto', 
    token: function(token) { 
    // Use the token to create the charge with a server-side script. 
    // You can access the token ID with `token.id` 
    } 
}); 

handler.open({ 
    name: 'Stripe.com', 
    description: '2 widgets', 
    amount: 2000 
}); 

// handler.close(); 

Dies ist eine Anpassung gemäß den Streifen docs an: https://stripe.com/docs/checkout#integration-custom