Angular 2 and stripe.js

Question

Did anyone try to use stripe.js with Angular 2? I am trying to display a standard stripe payment form, but the "Pay" button is not being rendered and there are no errors displayed. I would appreciate any ideas. I am guessing that the stripe form will have to be declared outside of Angular 2 template, somehow.

@Component({
  selector: '...',
  moduleId: module.id,
  providers: [],
  directives: [],
  styles: [`
  `],
  template: `
...
        <div class="row">
            <div class="col-sm-12">
                <form action="/charge" method="POST">
                    <script
                        src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                        data-key="pk_test_...."
                        data-name="...."
                        data-description="2 widgets"
                        data-amount="2000"
                        data-locale="auto">
                    </script>
                </form>
            </div>
        </div>
    </section>
  `
})

Answer 1

You can't add <script> tags to templates of Angular2 components, they'll get just removed.

See also https://github.com/angular/angular/issues/4903

script tags should be in index.html page, or potentially loaded via a script loader (ie SystemJS) - script tags in templates will not work.