Angular4からSpriteと決済をする方法

Question

AngularからSpriteを簡単に扱う方法として以下npmモジュールを見つけましたが

https://www.npmjs.com/package/angular-stripe

試しているAngularチュートリアルに適用する方法がよくわかっておりません。

angular-stripeのページで記載されている以下Usageの書き方は

// node module exports the string 'angular-stripe' for convenience 
angular.module('myApp', [
  require('angular-stripe')
])
 
// otherwise, include the code first then the module name 
angular.module('myApp', [
  'angular-stripe'
])

https://angular.io/tutorial/toh-pt3へ適用する場合、app.module.tsやapp.component.tsなどにどのような修正を加えればよいのものでしょうか。

app.componet.ts
----
import { Component } from '@angular/core';
 
import { Hero } from './hero';
 
const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];
 
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>My Heroes</h2>
    <ul class="heroes">
      <li *ngFor="let hero of heroes"
        [class.selected]="hero === selectedHero"
        (click)="onSelect(hero)">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </li>
    </ul>
    <hero-detail [hero]="selectedHero"></hero-detail>
  `,
  styles: [`
　　省略・・・
  `]
})
export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero: Hero;
 
  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }
}

app.module.ts
-----
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
 
import { AppComponent }        from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
 
@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    HeroDetailComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Spriteは本来ならばhtmlにscriptタグを埋め込むだけで決済画面が作れるのですが、Angularはhtmlを吐き出す際にscriptタグを削除してしまうため、angular-stripeなどを使わないといけないとの認識です。

Angular4でSpriteで決済できるようになれば、どのような方法でも構いませんが、色々調べた結果こちらのライブラリが良さそうだと思いました。

初歩的な質問かもしれませんが、何卒ご回答よろしくお願い致します。

Answer 1

http://blog.mgechev.com/2016/07/05/using-stripe-payment-with-angular-2/

上記ページを参考にangular4のtutorialからspriteの決済画面を表示できました。
取り急ぎこちらで対応できそうなので、記載しておきます。

https://angular.io/generated/zips/toh-pt1/toh-pt1.zip
こちらのangularチュートリアルを落とします。

src/app/app.component.html
-----

<h1>Default Stripe Form</h1>

<form action="/your-server-side-code" method="POST">
<button (click)="openCheckout()">Purchase</button>
</form>
~

src/index.html
-----

    <script src="https://checkout.stripe.com/checkout.js"></script>
    <!-- 上記を追加 -->
  </head>

その後、npm start して画面にアクセスすると以下のように画面を表示することができました。