Stripe Checkout Button Does Not Display When Using Angular Routes

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