課金処理の画面を作りStripe連携について調査 – 開発日記(94)

2024/05/01

• 課金の処理を作成
  • どのようなフローにするかとても迷った。結局flutterのUIにプラン選択画面を用意し（普通にコードで作成）、StripeのPayment Links にジャンプする形にした

以下は調べた情報

UI

• 課金 UI まとめてみた

ストライプ関連の用語メモ

Stripe関連用語

• Payment Links

特徴

• コーディング不要の決済ページ。いきなり決済ページに飛べる
• サブスクリプション可能

疑問

• メールアドレスを、ページに渡すことは出来るか？
  • 出来そうだ：StripeのPayment Linksで、メールアドレスを事前入力できるようにする
  • しかし顧客IDとの紐付けは難しいかもしれない
    • STUDIOとStripeで、ノーコードにサブスクリプション申し込みのLPと請求管理画面を作る方法
    • メアドやclient_reference_idのみで判定することになる

• Checkout
  • 支払いフォームを自社サイトに埋め込むか Stripe でホストする
• Elements
  • ウェブ決済フローを構築する事前構築済みの UI コンポーネント

料金表

• Webページに埋め込むことが出来る
  • Stripeが新しくリリースした料金表の実用性
• 要確認事項
  • 表現・レイアウトが限られる
    • 期間ごとにまとめられてしまい、複数期間を一度に表現するのは出来なさそう。
    • 数の問題でNotサブスクも難しいかも
  • Flutterのウィジェットでは無いので、Flutterで表示するにはWebViewになりそう
  • client_reference_id が渡せるか？
    • 行けそうな感じがする → 埋め込み可能な料金表を作成する | Stripe のドキュメント

• フルフィルメント
  • 注文後の処理をフルフィルメントと呼んでいるようだ
  • 注文のフルフィルメントを実行する

---

※開発日記は当時の記録をもとに作成し、必要に応じて加筆・補足しています

---