Open6
Flutter Web x Stripe
村松龍之介Flutter Web で Stripe を使う上でのメモ
参考
詳しく解説してくれている記事（これ以外まとまった情報が見つからなかった）
事前準備
- Stripeのアカウントを作成して、テスト用商品を登録しておく
- 「テストデータの表示」をONにすることでテスト用の商品を登録・閲覧できる
村松龍之介
IntegrationError: You should not use your secret key with Stripe.js. Please pass a publishable key instead.
Stripe() イニシャライザに秘密鍵を入れてしまっていた。
→公開鍵を入れる
村松龍之介
TypeError: dart.global.stripe is not a function
index.html に Stripe用scriptを追記していなかった。
+ <script src="https://js.stripe.com/v3/"></script>
</head>
You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS.
これは、本番環境では https を使ってね、という意味でローカル環境からのテストの場合は関係なし
村松龍之介Stripeのダッシュボードで設定を有効化する必要があった
テスト用に配置した購入ボタンを押してもチェックアウトページに遷移しなくてハマった。
下記の画像の通り、「クライアント側のみの組み込みを有効にする」を設定する必要があった。
- クライアント側のみの組み込みを有効にすると…
- 商品IDが公開される
- 想定外の場所から商品IDを知っているユーザーはその商品を購入できる可能性がある
- 商品IDが公開される
村松龍之介Flutter WebでStripeのCheckoutページが表示できた🙌
