Angular9でStripe Checkoutを使う方法

Angular9でStripe Checkoutを使う方法

自分でフォーム作ろうかとも思いましたが、やはりセキュリティが心配なのでStripeチェックアウト使えないかと思い、調べましたがなかったので自分で作りました

まずはプロジェクト作成

routingとかcss聞かれますけど適当に作成します

まずはcheckout/jqueryのcdn追加

次はsrc/typings.d.tsを作成します
このファイルは型定義がない場合の型を提供するためのファイルです
探せばもしかしたら下記の型あるかもなので、あったら教えてください

次はイベントを発火させる「決済」ボタンを追加します

src/app/app.component.htmlに下記を追加

最後にcomponentに記述を加えます

src/app/app.component.ts

ng serveで実行

CSSを設定していないので、左の隅っこに設置されてます

「決済」ボタンをクリック
テスト用のデータを入れます

「変更」をクリックしてconsoleをみると
token情報が出ています!

checkout経由でtokenを取得できたので、
あとはtokenをAPIサーバーに送るなどすれば、セキュアにカードを情報を扱うことができます

gitのリポジトリです、cloneしてstripeのpk_test~~~を入れれば使えます

https://github.com/hiyashikyuri/stripe-checkout

参考記事

なし、自分で調べました

Angularカテゴリの最新記事