こんにちは！Bubbleを使用してWeb開発を行なっているノーコーダーの古川です！
Bubbleで決済機能を実装する際によく使われるStripeですが、できることがありすぎてStripeの取り扱いに困っている方も多いと思います。
今回は、そんなStripeを使用したサブスクリプション機能の実装方法について解説していきます！
Stripeを使用したサブスクリプションの実装
①Bubble内の実装
今回実装するサブスクリプションサービスのUIはこのようになります。プラン1（1000円）とプラン2（1万円）に登録ができるボタンと解約ができるボタンを配置しただけのすごくシンプルなUIです。
②プラグインの導入
次に、プラグインの導入をしていきたいと思います。
今回はBubbleが公式に出しているプラグインである「Stripe」を使用します。
「Stripe」をインストールしたら、「Stripe」のプラグイン管理画面からStripe Checked versionの項目をCheckout v2（Legacy）からCheckout v3（Recommended）に変更します。
変更が完了したら、次はStripeの設定に移っていきます。
※ここからはStripeに登録済みという前提で話を進めますので、新規登録がまだの方は下のURLから新規登録を済ませておいてください。
まずは、一番左上のアカウント名（下の画像の赤枠）の部分から新規アカウントを追加して新しいアカウントを立ち上げます。
アカウント作成が完了したら次はAPIキーを取得したいので、①右上のメニューある開発者をクリックした後②APIキーの項目を選択します。
そうすると、公開可能キーとシークレットキーが表示されるので、これらをそれぞれコピーしてBubbleのプラグイン設定画面に戻ります。そして、コピーしたものを画像の赤線の枠に貼り付けていきます。この時、公開可能キーとシークレットキーの貼り付け場所を間違わないように注意してください。（本番環境でStripeを使用したい時はStripe上で本番環境利用の申請をした後、本番環境の公開可能キーとシークレットキーを上部に貼り付けてください。）
これでBubble側での準備は完了です。
③Stripeの設定
次に、Stripe側での設定について説明していきます。
まず、上のメニューから商品を選択し、＋商品追加から今回使用するサブスクリプション商品を追加していきます。
まずは商品情報の部分を登録です。①商品の名前と必要であれば②説明と③画像を入力していきましょう。
次に、料金情報を登録していきます。
上から①料金体系モデル、②価格、③請求期間、④その他オプションの価格説明、無料トライアルの項目が並んでいるので必要なところに情報を入力していきます。
今回は毎月決まった日に更新がされる標準的なサブスクリプションを実装するので①料金体系モデルは「標準の料金体系」を選択します。
②価格は「1000円（プラン1）」、③請求期間は「月次」、④その他オプションの価格説明（設定しておくとBubbleでサブスクリプションのワークフローを組む時にどのサブスクリプションのプラン何かがわかりやすくなるので入力しておくと便利）は「プラン1」と入力をしました。
（無料トライアルの機能はBubble側で実装できるためその他オプションで無料トライアルを設定する必要はありません。）
同様にプラン2の商品も作成していきます。
これでStripeのダッシュボード上での操作が完了したので、Bubbleでのワークフロー設定に移っていきます。
④ワークフローの設定
Bubbleでサブスクリプションを実装したときは、Paymentからsubscribe the user to a planを選択します。
subscribe the user to a planを選択したらサブスクリプションの詳細な設定をしていきます。
まずは、①Update existing subscriptionの部分にチェックします。
（プランが2つ以上ある時は①Update existing subscriptionにチェックを入れたままにするとユーザーがプランを変更したときにStripe側がユーザーが登録しているサブスクリプションの更新自動で行い、さらに日割り計算までしてくれるので便利です。）
次に、②Stripe plan nameから先程作成したプランを選択します。
選択するとEnd of the trialという項目が現れるのでサブスクリプションに無料トライアルを設定したい方はここから設定をしてください。
これでサブスクリプションの詳細設定は完了です。（その他の設定について知りたい方は記事の最後に解説をしたので興味がある方はそちらもご覧ください）
次にサブスクリプションプランの解約機能の実装をしていきます。こちらはとても簡単で、PaymentからCancel the current's user's planを選択するだけで大丈夫です。
これでワークフローの設定が終了です。
実際にサブスクリプションの登録と決済ができるかプレビューで確認してみましょう。
プラン1の登録ボタンをクリックするとこのような決済画面が出てくるのでテストカード番号（わからない方はこちらをご参照くださいhttps://pay.jp/docs/testcard）を入力して決済を行ってください。
決済が完了するとこのようなアナウンスがあります。
Stripeのダッシュボードで決済が完了しているかを確認してみると、こちらでもサブスクリプションの決済ができていることが確認できました。
これでStripeを使用してサブスクリプション機能の実装は完了です。
注意点
Stripeを使用したサブスクリプション機能を実装する時に注意点が1つあります。それは日割り計算によって請求額が変化することです。プランが2つ以上あって、Update existing subscriptionにチェックを入れたときは請求額がいつもと異なる時があるので注意してください。
まとめ
今回は、Stripeを使用したBubbleでのサブスクリプション機能の実装方法を解説しました。
Stripeは、Bubbleで決済をするときに必須なツールですので、Stripeでの機能の実装方法を覚えておいて損はないと思います。是非今後もStripeの取扱やBubbleの学習を深めていってください。
最後まで読んでいただきありがとうございます。
その他の設定
①Apply this action to the current user
このチェックボックスにチェックを入れると、Current Userにサブスクリプションの登録アクションが適用されます。
②Update existing subscription
このチェックボックスにチェックを入れると、Current Userにサブスクリプションプランが適用されている場合は、現在のサブスクリプションプランを新しいサブスクリプションプランにStripe側が自動で更新処理をしてくれます。
③Dynamically specify plan
このチェックボックスにチェックを入れると、ユーザーに適用するサブスクリプションのプランを動的に変更することが可能になります。チェックを外すと、ドロップダウンメニューからStripeで作成したサブスクリプションプランが選択可能になります。
④Quantity
サブスクリプションプランを選択したユーザーにどのくらいの数量適用するかを入力します。（ほとんどの場合1つですが、プランの価格を変動させる場合は、これを使用します。）
⑤Allow promotion codes
このチェックボックスにチェックを入れると、決済時にプロモーションコードや割引コードを入力することが可能になります。クーポンコードはStripeのダッシュボードやBubbleのワークフローで作成することが可能です。
⑥Add tax rate to checkout
このチェックボックスにチェックを入れると、ユーザーの請求書に税率または税率のリストを追加することができます。（このチェックボックスにチェックを入れる前に必ずStripe Dashboardで税率オブジェクトを作成してください。詳しくはこちらをご参照ください https://stripe.com/docs/billing/taxes/tax-rates）
⑦Do not show success message
このチェックボックスにチェックを入れると、アクションが成功したときにユーザーに通知するアラートを非表示にすることが可能になります。
その他にも、End of the trialという項目もあります。この項目ではサブスクリプションプランに無料トライアル期間を設定することが可能です。しかし、無料期間を3日以上に設定しないとエラーが出るので注意してください。
参考
さいごに
最後まで読んでいただき、ありがとうございます
ノーコード部では企画からデザイン・開発まで、Webサービスやアプリの受託開発に関する相談、開発を承っております。
またシステム開発もできるノーコード部（シースリーレーヴ株式会社）だからこその技術で、圧倒的な短納期・低価格ながら高パフォーマンスなサービスを実現いたします。
どんなお悩みでもまずはぜひ一度ご連絡ください。解決の糸口を必ず見つけ出します！
ノーコードでどんな開発ができるのか、資料に弊社の開発実績をまとめました。
実際に開発してみたいけれど、予算は？こんなサービスを作りたいけどノーコードでできるのか？最短でどれくらい？どんな小さなことでも、ぜひお気軽にご相談下さい。
技術スタッフがご相談させて頂きます！
.png)
Comments