Show a JS script component in Ember/handlebars app

Question

I need to embed a Javscript component (e.g. a Stripe pay button https://stripe.com/docs/checkout ) in my ember app, but apparently I can’t simply put a script tag inside the handlebar script tag.. any suggestion on how this can be done please?

Answer 1

Create a view and add the script in the didInsertElement hook.
Here is a working demo.

App.StripeView = Em.View.extend({
  didInsertElement: function() {
    var stripeScript = 
      '<script src="https://checkout.stripe.com/checkout.js" '+
        'class="stripe-button" data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh" '+
        'data-image="/square-image.png" '+
        'data-name="Demo Site" '+
        'data-description="2 widgets ($20.00)" '+
        'data-amount="2000">'+
      '</script>';

    this.$().append(stripeScript);
  }
});

And use it in your template like

{{view App.StripeView}}