Stripe Checkout Button Does Not Display When Using Angular Routes - angularjs

Question

I'm currently trying to implement the standard Stripe Payments checkout dialogue. When I drop in the short <script> include described in the docs (https://stripe.com/docs/checkout) the button that should display is not being rendered.
When I put it in my top-level index.html file the button DOES display. When I put it into a partial that gets displayed when hitting a particular route it does not. I assume this is because it is not executing the Javascript because it's not happening at page load when it's in a route.
Is there anything I can do to get this to work in a route or should I just implement a custom form that points to the stripe.js library? Thanks.

Answer 1

The issue is that the js does not fire, as you suggested. A solution is to simply include the Stripe checkout.js in your index.html file, and then trigger the Stripe popup to open with your controller (or elsewhere).
In your index.html (or equivalent)
<script src="https://checkout.stripe.com/checkout.js"></script>
<!-- Angular script(s) -->
In your controller (or elsewhere)
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();
This is an adaptation per the Stripe docs at: https://stripe.com/docs/checkout#integration-custom