この記事はJP_Stripes Advent Calendar 2023の20日目の記事です！（投稿が遅れましたが。。🙏
また、内容としては、2023/09/26にあったStripe & Supabase Tokyo Meetupで発表した内容を記事にまとめたものになります。
背景
まず、背景として、2020年4月からFlutter大学というFlutterエンジニアに特化したエンジニアコミュニティを運営しております。Flutterをこれから学ぶ人から、現役エンジニアまでFlutterエンジニアとFlutter情報が一番濃密に集まっている自負があるコミュニティです。
Flutter大学では、リリース当初からStripeによりサブスクの決済を行なっております。それだけでなく色んなStripeの機能をふんだんに使っておりますので、この記事ではその6つの用途について紹介したいと思います。
Flutter大学アプリの全体構成
まずは、全体構成について紹介します。
図では、上部にフロントエンドとしてのweb、iOS/Android、管理画面webを示しています。それらは全部Flutter製で、一部はサブモジュールで共通化されています。だいたい７０%は共通化されています。サブモジュールの仕組みについては以下の記事も参考にしてください
データベースやログインや画像など、基本的な機能はすべて共通のFirebaseプロジェクトを参照し、決済をStripeとRevenueCatで行なっています。元々はStripeだけで決済をしていたのですが、iOS/Androidの審査を通すためにやむを得ずRevenueCatも導入してIn-App-Purchaseのサブスクも実装されています。しかし、基本的にはStripe決済をベースとして行なっているので、本記事ではその事例を中心にお話ししていきます。
その他Slackやgithub、vimeoなども使ってエンジニアコミュニティとしてのサービスを提供しています。
6つのStripe活用事例
それでは本題であるStripeCheckoutの事例について紹介していきます。
Stripe checkoutの事例
Flutter大学コミュニティに登録するときに、月額でサブスクを行うのですが、その際の決済画面をStripe Checkoutという機能で作っています。
仕組みとしては、Firebase FunctionsでStripe Checkoutのリンクを生成するStripeのAPIを叩いて、それをFlutter Webのフロントエンドに返しています。Firebase Functionsを間に挟んでいる理由は、セキュリティ的な部分を全てFirebase Functionsに集約するためです。
Stripe Checkoutを使ってリンクを生成すると綺麗な決済画面が簡単に作成できます。決済画面を自前で作るとバグを含むリスクもありますし、Stripe並に優秀なエラーハンドリングを実装するのは２度手間だと思いますので、ここはStripe Checkoutに任せるのが僕は好きです。
カスタマーポータルの事例
次にカスタマーポータルです。これはStripeCheckoutと非常に似ているのですが、クレジットカードの変更画面をStripeに作ってもらっているイメージです。カスタマーポータルの機能としては、支払い方法の変更とサブスクプランの変更ができるのですが、Flutter大学の場合はプランの変更だけはカスタマイズしたかったので、ここでは行わずクレジットカードの変更機能だけをこの機能を用いています。
これに関してはStripeのFirebase Extensionsを使うのが楽だと思います。
Stripe比例配分の事例
Flutter大学にはいくつかのプランがあるのですが、そのプランを変更するときに差額を払えばアップグレードできるようにしています。例えば2200円のプランに入った後すぐにやっぱり4400円のプランに入りたくなったとしましょう。そのときにまた、4400円かかると損した気分になりますよね。そこは日割り計算して必要な分だけ課金されるような仕組みを用意しています。
このときに使えるのがStripeの比例配分の機能です。APIを使えばこの計算をStripeが行なってくれます。
Stripe Connectの事例
Flutter大学の中にユーザー同士でプランを売買できる機能があります。先輩エンジニアが1時間5000円で後輩エンジニアに指導しますよーといったことができるのです。
このときに、Stripe Connectという機能を使ってFlutter大学は一部だけ手数料をもらって先輩エンジニアにお金を送金できるようにしています。ちなみにこの手数料は4~10%に設定していて、Flutter大学への貢献度が高いと4%になります（Stripeの手数料が3.6%なのでFlutter大学の取り分は0.4%）。昨今のメンター系プラットフォームの手数料が高いのでFlutter大学内ではせめて安く使ってもらおうという狙いがあります。
Stripe Expressの事例
先ほどのStripe Connectを使った売買機能であるエンジニアが売上を上げたとしましょう。この時の売上ダッシュボードにStripe Expressという機能を使っています。Stripe Connectを使ったときにtypeをstandard、custom、expressという3つから選べるのですが、expressを用いるとStripe Checkoutと同様にかなりStripeの提供するUIを活用することができます。
StripeExpress用のアプリもあるので、ガチで管理画面を作る必要はありません。
こんな感じで、最低限の実装だけでFlutter大学内にCtoCプラットフォームを形成しています。
stripeとRevenueCatとの共存事例
最後に、RevenueCatとの共存です。先ほども述べたように、Flutter大学の決済は基本的にStripeなのですが、iOS/Androidでダウンロードしてもそのまま入会できるようにIn-App-Purchaseも実装しています。そのためStripeとRevenueCatの2重管理になってしまっているのですが、その実装をできるだけ綺麗に抽象化してまとめています。
ちなみにRevenueCatにStripeアカウント連携機能があるのですが、これは用いてません。用いるとStripeの売上がRevenueCatにも反映されてRevenueCatの課金の条件にすぐに到達してしまうためです。
なので、コードでうまく抽象化することにとどめています。詳しくは以下の記事を参照です。
まとめ
以上。Flutter大学のStripe活用事例6点を紹介しました。
Stripeをうまく用いることで、実装を最低限でセキュリティの心配も少ない決済のあるサービスが作れると思うので、同様のサービスを作っている方は参考にしてみてください。
宣伝：Flutter本出しました。
まず、最近、技術評論社さんから「ゼロから学ぶFlutterアプリ開発」というFlutter入門本を出版しました。Flutterをこれから学びたいという方、是非買ってみてください！
そして、オンラインでFlutterを学びたいという方は、Flutter大学のYouTubeを使ってください。
さらに先生や仲間が欲しくなったときにはFlutter大学への入会をご検討ください。
Flutter大学はFlutterエンジニアに特化した学習コミュニティです！ 初心者から中上級者まで幅広く在籍し、切磋琢磨しています！ 入会をご希望の方はこちらから→ flutteruniv.com
Discussion