《Bubble》Stripeプラグインを用いた決済の実装方法について

BubbleアプリにStripeを導入する際の事前準備

1．Bubble側でStripeのプラグインを取得する

Stirpeのプラグインをインストールしていない場合はStripeのプラグインを取得します

インストール後に、Stripeの設定画面(以下画像)から必要な情報を入力します。

主に必要な情報として公開キーとシークレットキーの2つで、キーには開発用(テスト用)と本番用の2種類があり、開発用のキーでは本番用で正しく動作せず、逆も然りなため注意してください。

2 ．Stripeでキーを取得

それではStripeの方でキーを取得していきます。

ダッシュボード→開発者→APIキーで下記の画面にたどり着いたら公開キーとシークレットキーをそれぞれ取得し、先ほどのStripeプラグインの設定画面のそれぞれ「Secret Key – development」と「Publishable Key – development」欄に入力します。

ちなみに本番環境のキーを取得する際にはヘッダーの「テスト環境」トグルをオフにすることで表示されるキーも本番用のものに切り替わります。

以上でStripeを導入する際の事前準備は完了です。次はBubbleでのオンライン決済の実装方法を解説します。

Stripeによるクレジットカード決済

・UI作成

今回実装するサブスクリプションサービスのUIはこのようになります。プランA（1000円）とプランB（1万円）に登録ができるボタンと1回限りの決済ができるボタン、そしてサブスクの解約ができるボタンを配置しただけのシンプルなUIになります。

実際の編集画面リンク

https://bubble.io/page?type=page&name=stripe&id=bubble-references&tab=tabs-1

・1回のみ支払いの場合

Stripeプラグインをインストールすると、「Payment」というワークフローが追加されるのでこれを利用して

商品ページにて「1回限り決済」ボタンを押したら1,000円分決済するようにする場合、「購入する」ボタンのワークフローで「charge the current user」を選択し、「amount」の部分に当てはまる金額を入れ、「Payer email」、「Description」、「Name」を入力することで支払いが実装できます。

多くの場合emaiとNameはcurrent userのもので、Descriptionとは何についての支払いか（例、ベーシックプラン）、を説明する箇所になります。

ワークフロー設定後に、購入ボタンをクリックすると、以下のようなポップアップが表示されます。Card numberにはStripeが提供しているテスト番号「4242 4242 4242 4242」を使用し、カードの期限については任意の有効な将来の日付、セキュリティコードは３桁の数字を入力します。そうすることで、テスト決済できます。

決済が無事に完了すると以下のようなアナウンスが確認できます。

またStripe上でも決済の内容が確認できます。

⚠︎Stripeのテスト支払いで利用するクレジットカードの番号やその他仕様については公式ドキュメントをご参照ください。

・後で料金を請求する(仮払い)

「Charge the current user」アクションを設定する際、「Authorize the charge only」を選択することで、仮売上で決済できます。

最初は承認（認証）のみを行い、後で（通常はサービスの提供や商品の配送完了後に）実際の請求を行うこと際に役立つアクションです。

以下は、このアクションが役立ついくつかのシナリオです：

1. 商品の出荷前の確認:

  - 物理的な商品を販売する場合、特に在庫が不確定な状況や、カスタムメイドの商品を扱う際に、商品が発送準備が整った時点で初めて顧客のカードに請求するために使用します。

2. サービスの提供後の請求:

- サービス提供業の場合、特にサービスの内容や期間が事前に確定しないケース（例えばコンサルティングや工事サービス）で、サービスが完了した後に正確な金額を請求するために使用します。

3. セキュリティデポジット:

- 物品の貸し出しやレンタルサービスで、損害がないことを確認した後でデポジットを返金する際などにも使用されます。

・継続支払い(サブスクリプション)の場合

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という項目が現れるのでサブスクリプションに無料トライアルを設定したい方はここから設定をしてください。

これでサブスクリプションの詳細設定は完了です。

bubble上でこれらのアクションが実行されると1回のみ支払いの時と同じように決済完了のアナウンスが表示され、Stripe上でも確認できます。

・継続支払いをキャンセル

次にサブスクリプションプランの解約機能の実装をしていきます。こちらはとても簡単で、PaymentからCancel the current's user's planを選択するだけで大丈夫です。

Webhookについて

Webhookとは、bubble上では特定が難しい定期購入の更新や支払い失敗などのアクションが起きた際にstripeからbubbleに通知を送って知らせてくれる機能です。

例えば継続支払いの際に初回は支払い成功したけど2回目の自動引き落としの際にカードが無効などの理由で支払いが失敗した場合などに、bubble上ではそのアクションを感知できないので、支払いが行われていないのに引き続きそのユーザーがサービスを利用できてしまう、などの誤りが起きてしまうことを防ぐという意味で有効です。

テスト環境でのwebhook接続

実際にどのようにwebhookが動作するかのイメージが湧きづらい方はこちらをご参考下さい。

https://kintone-blog.cybozu.co.jp/developer/000283.html

それでは実際にwebhookを利用した仕組みを実装していきます。

まず初めにbubbleのバックエンドワークフローを開き、新しいAPI

ワークフローを作成します。

その際APIの設定は以下のようになっていること確認してください。

またワークフローの名前を設定する必要がありますが、日本語だと正常に動作しない場合があるので英語、またはローマ字で設定するようにします。

次にAPI設定の「Detect data 」をクリックします、すると以下のようなポップアップが表示されるのでhttps~から始まるURLをコピーします。

コピーしたら次はStripeのダッシュボードを開き、開発者→webhook→endpointを追加を選択します。

すると以下の画面になるのでエンドポイントURLの欄に先ほどコピーしたURLをペーストします。

次に「リッスンするイベントの選択」から該当するイベントの種類を選択する必要があります。

今回はカードが無効で支払いが完了できなかった場合に動作してほしいので「customer.subscription.updated」を選択します。

状況に応じてどのイベントが適しているかわからない場合は以下のドキュメントを参考にしてください。

https://stripe.com/docs/api/events/types

これでwebhookの準備が整ったので次は実際に対象のイベントを起こしてwebhookの初期接続を行います。まずバックエンドワークフローから先ほど作成したAPIワークフローを開き、再度detect dataを押して「Detecting Request Data」のポップアップを開きます。

次にプレビュー画面から作成したキャンセルボタンをクリックして継続支払いのプランをキャンセルします。

そして先ほど開いたポップアップを確認すると以下のような表示になっているはずなのでSaveを押してポップアップを閉じます。

Webhookイベント詳細画面からもリクエストが正常に行われたことが以下のように確認できます。

最後にwebhook詳細画面右上の設定アイコンをクリックし、詳細情報の更新を選択します。

すると以下の画面が表示されるのでエンドポイントURLの「initialize」の箇所を削除します。これは初期接続の際にのみ必要なので以降は削除する必要があるからです。

以上でwebhookの接続は完了です！以降は対象のイベントが起こった際に自動的にwebhookが動作します。

これにより例えばユーザーの支払いが失敗した、という情報をbubbleがstripeから受け取った際にユーザーの未払いをyesに、ということが可能になります

本番環境でのwebhook接続

テスト環境で行ったのと同じように初回接続の場合は実際にbubbleのliveプレビューでテストユーザーを作成して実際にアクションを行う（サブスクに登録など）ことをトリガーとする必要があります。

テスト環境との違いとしてはテスト用カードが使用できないため本物のクレジットカードを使用する必要があり、お金が実際に引き落とされますが、webhook初回接続完了後にStripeの支払い→支払い詳細から返金処理を行うことができます。

もしくは登録口座が自分の口座になっていれば問題ありません。