JP_Stripes Advent Calendar 2019の3日目の記事になります！
こちらQiitaではなくADVENTでやっておりますので公開先はこちら

概要

ちょっと前にAngularでフロント部分を実装していたときに気づいたことだけまとめようと思います！
躓いたところ一覧ってほどでもにないですが、時間はそこそこ持っていかれたので、参考になれば・・・

Referenceは絶対読みましょう。

既に持っていかれてから気づいたのですが、ほぼ答えはReferenceにありました。
悩んでる時間より英語を解読する時間のが短いかもしれないです。

npmでインストールするのは型定義のみ

npm(yarn)でインストールしているのは型定義のみです。
実態はJSなのでTypescirptで使えるようにするために必要です。

まぁ、無くても出来ますがそれなら最初からJSで書けばいいじゃんってなります。

なので、node_moduleの中にあるのは@typesの中だけです。

僕は実装時はcheckoutしか使わなかったので、これだけ。

package.json

"dependencies": {
	"@types/stripe": "^6.32.13",
	"@types/stripe-checkout": "^1.0.1",
	"@types/stripe-v3": "^3.0.8",
}

もし、@types以外のところにstripeってあったら、それサーバサイド用のライブラリなのでここではいらんです。

実態はScriptタグで読み込む

head

<script src="https://js.stripe.com/v3/"></script>

これを<head>タグ内に埋め込むだけで実装準備はOKです。
ちなみに、この<scirpt>タグを埋めてるページに関しては、不正行為を示す異常な動作の監視対象になります。

なので、Stripe側はCheckout機能を使うところ以外にも差し込んでくださいって感じですね。

これSPAとかで、<head>タグ入ってるComponentを全ページに使ってたらそれでいいのかな？

型を使いましょう

せっかくTypescriptを使うのだから、ちゃんと型を使って指定しましょう。
何を呼び出したら結果何が返ってくるかを、可視化するのは大事です。

例えばCard情報をTokenにするメソッドだとしても、こんな感じ。

createToken = (card: stripe.elements.Element, options: stripe.TokenOptions): Observable<stripe.TokenResponse> =>
    from(this.stripe.createToken(card, options))

引数にstripe.elements.Elementとstripe.TokenOptionsを受け取って、ResponseはObservable<stripe.TokenResponse> を返すというのを明示しておくと、あとから型情報を調べる必要ないし、それ以外の引数が着てもエラーが出ます。

初期化＋テストでハマった

これが一番時間持ってかれた。

初期化はReference通り行うと以下の通り

const stripe = Stripe('pk_test_VIRaaRQleDBZMfL2GNAuT0CG');

Stripe([パブリックキー]) で初期化完了。
その後は、初期化後のオブジェクトが入っている変数を使っていくことになる。

ただ、単体テストを通したときCompornentは通るが、Serviceで毎回Stripe() not foundが出てくる。

そいえばStripe()ってどこにあるんだ？？？
ここでハマった・・・

答えは<script>でURLから直接読み込み、読み込み後にWindowObjectに入る挙動をします。

つまり実際に使ってるStripe()は、window.Stripe()となります。
JS初心者にはこの挙動は気づけなかったです／(^o^)＼

なのでServiceを単体でテストすると、画面はないのでwindowオブジェクトもないし、そもそも<script>タグを読み込みません。

おとなしく、mockでStripe()を呼び出しているテストだけしましょう。

まとめ

今回は特に実装方法などは明記を特にしませんでしたが、実装するうえで考慮してほしいことなどをまとめました。
ざっくり書いてるので、あとから修正はいるかもですがご参考までに

参考ページ

Stripe.js Reference