Stripeを使って月額課金を行う場合等、事前に商品を登録したいケースがあるかと思います。単課金の商品であれば商品登録をしなくてもよいですが、月額課金の場合は登録が必要になってきますよね。
今回は利用者が商品を登録した際に自動的にStripeへ商品を登録する方法を紹介したいと思います。
商品登録を行う際のポイントに絞って説明を行っていきます。
ゴールイメージ
以下の動画のように商品を登録した際に自動的にStripeの商品カタログに商品が登録されるようにしたいと思います。
前提
- Stripeのアカウントを作成済み
- FlutterFlow上でStripeの設定は完了済み
- Stripeの単課金の決済の処理は理解済み（※以下のブログを参考にしてまずはそちらから実施してください）
実装手順
データベースを準備
商品をデータベースに登録するため、以下のようなコレクションを準備します。
細かな内容は自由に設定してもらってOKです。
Stripeで発行される商品ID、料金プランIDを格納できるようにStripeProdID、StripePriceIDを含めています。
商品登録ページを準備
商品を登録するためのページを準備します。このページの内容自体は今回の記事のメインではないので詳細は割愛しますが、私の場合は以下のように商品画像、商品名、商品説明、カテゴリー、料金を設定できるようにしています。
今回の内容では商品名、料金だけは必ず登録できるようにしてください。
API Callsの設定
ここからがメインです。商品を登録するために2つのAPIを利用します。一つは商品登録、もう一つは登録した商品に対して料金を設定するAPIです。
商品登録用APIの作成
画面左のメニューの「API Calls」から以下の画面のようにAPIを作成します。
API URLは「https://api.stripe.com/v1/products」です。Stripeのページも参考にしてください。
Bodyにはname(商品名）を設定するようにしてください。
これでResponse & Testで「Test API Call」を実行してください。うまく設定できていればテストを実行すると以下のようなレスポンスが返却され、Stripe上に商品が登録されているかと思います。
以下の画像では商品ID（prod_xxxx)をJSON Pathに登録した後の画像になっていますが、最初は登録されていないので、商品ID(prod_xxxx)の隣の「＋Add JSON Path」をクリックしてJSON Pathに追加してください。
そうすることで後でアクションを設定した際に商品IDを取得してデータベースへ登録しやすくなります。この後作成する料金登録用APIでも商品IDを使います。
この時点ではStripeの商品カタログには以下のようになっているはずです。名前はTest API Call時に設定した値、料金体系は「価格がありません」となっています。このあと、料金を登録するAPIを作成します。
料金登録用APIの作成
先ほど同様にAPI Callsで新しいAPIを追加します。以下のような設定です。
APIのURLは「https://api.stripe.com/v1/price」です。StripeのAPIドキュメントはこちら。
Bodyは以下のように商品ID、金額、通貨、間隔を設定します。商品ID、金額は商品登録時に設定してもらった値を変数として登録するようにしています。通貨（日本円）と間隔（月ベース）は固定にしています。
先ほど作成した商品IDを使ってTest API Callを実施すると料金が登録されているかと思います。レスポンスは以下のようになります。
JSON Pathsには料金プランIDを後で設定しやすいよう追加しておきます。
商品登録時のアクションを設定
UI上で商品登録ボタン(Create Productボタン)を押した際に作成したAPIを起動して、自動的にStripeへ商品を登録するようなアクションを設定します。
アクションの全体像は以下です。
- Stripeに商品を登録（先ほど作成したAPI利用）
- Stripeへ登録した商品に料金を設定（先ほど作成したAPI）
- FlutterFlow（Firebase)のコレクションに登録するカテゴリを取得（→今回は説明を割愛）
- FlutterFlow（Firebase)のコレクションに商品を登録
- 登録完了のアラートを表示
商品登録用APIの設定
設定は以下です。先ほどのAPIに対し、商品名をVariablesに設定して渡します。
Action Output Variable Nameは「prodIDRes」にしています。あとのアクションで利用します。
商品に料金を設定
作成した商品の商品IDを使って料金を設定します。
以下のように最初のアクションの結果から商品IDを取得してそれを料金設定用のAPIに変数として渡しています。
データベースに料金プランIDを設定できるよう、Action Output VariableにPriceSetResを設定します。
商品情報をデータベースに登録
商品情報をデータベースに登録します。画面上で設定された値を登録していきますが、Stripeの商品IDだけは一番最初のアクションの結果で取得した商品IDを設定するようにします。
Stripeの料金プランIDも以下のように設定してデータベースに登録します。
アラートの表示
完了すると、アラートを出すようにしています。これは実装してもしなくてもどちらでもよいですが。
これで実装は完了です。画面上で登録した商品がStripeに登録されているかと思います。
まとめ
今回はStripeでの月額課金などを利用する前の準備として商品を登録する処理を説明しました。
月額課金の処理も別のブログで説明をしたいと思います。単課金と違ってStripe側での決済結果を受け取って状態を変更させるなど、いろいろと面倒だったりするのでちょっと大変ですよね。
それではまた。
株式会社Spovisorではノーコード・ローコードツールを使ったシステム開発、アプリ開発を実施しています。
要件定義から伴走して支援し、安価・スピーディー・柔軟な開発を行います。無料でご相談もお受けしております。