以前のStripeに関する記事では、Bubbleでシンプルなオンライン決済を導入する Stripe Payments について ご紹介しました。
今回は、マーケットプレイスやシェアリングサービスといった、プラットフォーム、顧客、および売り手の間で支払いのルーティングが可能なStripe Connect をBubbleで導入する方法について、ご紹介したいと思います！
Stripe Connect とは？
Connectは、決済においてプラットフォームと顧客、および売り手の間で支払いをルーティングできるサービスです。
自分が売り手である場合は、以前にご紹介した Stripe Payments などの導入で対応可能ですが、取引に置いて複数の登場人物がいる場合（例えば、楽天やAmazon といったマーケットプレイス）では、プラットフォーム（＝楽天、Amazonなど）、顧客（=商品購入者）、売り手（=ショップ）の間で、支払いをルーティング（請求して支払いを受け転送）する必要があります。そこで登場するのが、Stripe Connect です。
Connect は、ライドシェアリングサービスやトラベルサイト、ストアビルダーのプラットフォーム、他にも複数のフィットネスクラブなどの月額料金をまとめて請求する会員制プラットフォームといった様々なビジネスで利用することができます。
尚、今回 Stripe Connect の使い方をご紹介する前提として、自身のStripeアカウントは既に作成済みであること、またBubble でのStripe プラグインも導入済みとし、これらの設定方法については、本記事では割愛させていただきます。 Stripe についてや、Stripe アカウントの作成、Bubble プラグインの導入方法についてお調べの方は以下URLの記事をご参考くださいね。
では、早速はじめましょう！本記事では主に以下の方法についてご紹介しています。
- まずは、Connect とは直接関係ありませんが、テストする為の準備として、テスト用クレジットカードで自分のStripeアカウントに残高を登録します。
- Stripe のダッシュボードで Connect の設定を行います。
- 次に Bubble から売り手のアカウントをStripe で作成するように促し、自分の Stripe アカウントと連携する方法についてご紹介します。
- そして、顧客から支払いを受け付け、収益の一部を手数料として残高に移動し、残りを接続した売り手に支払うというルーティング方法について、
- 最後に、売り手のアカウントに Bubble から残高を転送する方法についてご紹介します。
アカウントタイプについて
Connect の使い方をご紹介する前に、Connect 導入時のアカウントタイプと呼ばれる以下3種類のタイプについて、少し触れておきたいと思います。
- Standard
- Express
- Custom
Standard は、決済に関係する部分は、ほぼStripe にお任せする変わりに 、販売者自身でStripe に接続アカウントを作成してもらうように促す必要があります。
売り手自身でアカウントを Stripe のフォームから作成してもらい、売り手自身でStripe のダッシュボードにアクセスすることになります。しかし、支払いに関する質問などの対応は Stripe 側が行ってくれ、返金などの処理も売り手側で管理してもらえるというメリットがあります。また導入時に費用もかかりません。
Express と Custom は有料になりますが、プラットフォーム側で支払いについてカスタマイズが可能です。特に Custom は、顧客に Stripeブランドを完全に見せることなくデザインできますが、すべてをカスタマイズできる反面、導入までに開発工数がかかるといったデメリットもあります。
アカウントタイプについては以下に詳しく記載されていますので、ご参考ください。
本記事では無料でConnect が利用できる Standard での導入方法をご紹介します。
Bubble で Stripe Connect の使い方
1. テスト用クレジットカードで残高登録
では、まずConnect のテストが行えるように、Bubble で簡単なアプリを作成して、自分のStripe アカウントに残高登録していきます。
画面はこんな感じです。残高登録ボタンをクリックしたら Input エレメントに入力された金額が自分の残高に追加されるという夢のようなアプリです。かなり雑ですが、テスト用ということでワークフローは以下のような設定です。（Stripe プラグインの設定などは、以前の記事をご参考くださいね！）
「Click here to add an action...」から「Payment」の「Charge the current user」を選択し、「Payer email」にメールアドレス（ここでは Current User のメールアドレスを使用しています）、「Amount」には Input エレメントに入力された値、「Currency」を「JPY」として、「Description」は「テスト用残高登録」とします。
早速プレビューして残高登録していきましょう。プレビューは、Current User を指定したいので Data タブの「Run as →」から起動します。
そして、登録時のポイントはテスト用のカード番号です。テストでよく使用されているカード番号（4242）では、残高に直接追加されないため、「利用可能」となるまで時間がかかってしまいます。なので、直接残高に追加されるようカード番号「4000 0000 0000 0077」を使用します。
テストカードについてのドキュメントは以下のリンクに記載がありますので参考にしてみてください。
では、Stripe のダッシュボードで残高登録がされてることを確認しておきましょう。
顧客の部分に、「Payer email」で指定した Current User のメールアドレスが登録されます。
10,000円を残高登録し、Stripeの決済手数料360円が引かれているのが分かります。 Connect では、アカウントの残高（ドキュメント上での Balance）の状態が大切です。残高がない場合は、テストでも支払いを転送したりすることはできない為、まずは準備として残高登録をおすすめします。
2. Connectの設定
次に Stripe 側で Connectの設定をしていきます。Stripe のダッシュボードの「Connect」から「始める」をクリックします。
質問フォームで「プラットフォームまたはマーケットプレイスを構築」を選択して「続ける→」をクリックします。
次に「設定」から「Connectの設定」ページへ遷移します。
「組み込み」でテスト環境が表示されているか確認し、「テスト環境のクライアント ID」を Bubble の Stripeプラグインページの Client ID 欄にコピーします。
次に Stripe でリダイレクトの設定を行っていきましょう。このリダイレクト設定は、Bubbleからユーザーを Stripeアカウントの作成に誘導したあとに、自分の Bubble ページへ戻ってくる為の設定です。「+URIを追加」で「https://bubble.io/poststripeauth」と入力します。
これで、Stripe 側の設定と Bubble のプラグイン設定は完了です！
3. 接続アカウントを作成して連携させる
では、実際にユーザーを 自分の Stripeアカウントに連携していきましょう。
残高登録の時と同様、Bubble で簡単なサンプルページを作成します。どのようなサービスでも良いですが、ここでは Uber のようなサービスをイメージして、プラットフォーム（＝作成するBubble アプリ）、売り手（＝ドライバー）、顧客（＝乗客）として解説していきます。
売り手（ドライバー）はプラットフォーム（Bubble アプリ）にドライバーとして登録し、顧客（乗客）とマッチングされます。なのでサンプルでは、Bubble アプリで事前にドライバー役として登録しているユーザーを Stripe と連携するため、ドライバー自身でStripe の接続アカウントを作成してもらうように促します。
画面には、Current User 名のテキストと「Stripeに売り手として登録」ボタンを配置します。
ワークフローを登録していきます。「Click here to add an action...」から「Payment」の「Register the user as a seller」を選択して、ドライバー情報を登録します。ここでは「Bussiness email」と「Bussiness name」を登録しています。
動作確認のテスト用に、リダイレクトで返却されたドライバーのStripe 接続アカウントのIDを BubbleのDBに登録してみましょう。登録先として User テーブルに「Stripe Account ID」フィールドを追加しておきます。尚、このフィールドは、あくまでテスト用として作成します。Stripe 接続アカウントについては、Bubble では User のプロパティ（Current User's Stripe Seller account's Id）で取得することができますが、テスト用にデータとして見えるようにしておきたいので、登録するワークフローを追加しておきます。
「Data(Things)」の「Make changes to thing...」を選択し、「Thing to change」を「Current User」、更新する値を「Stripe Account ID = Current User's Stripe Seller account's Id」と登録します。
では、プレビューで動作確認してみましょう。ユーザーは残高登録の時と同じようにドライバーとして登録したいユーザーの「Run as →」から起動します。「Stripeに売り手として登録」ボタンをクリックすると、Stripeのページへ遷移します。 尚、キャプチャで表示されている「Stripe02」とは、Bubble で作成しているサンプルアプリの名称です。
テスト環境へのアクセスのため、「開発モード: 現在開発モードでこのアプリケーションを使用しています。」と表示されることを確認してください。また、もし自分の Stripeアカウントでログインしている状態の場合は、「ログアウトして再度読み込み」ボタンをクリックします。
画面を下の方にスクロールしていくと、ワークフローで設定した名前などがバインドされていることが確認できると思います。
売り手（ドライバー）には、フォームからコンプライアンス関連の質問などに答えてもらい Stripe に登録して、リダイレクトでBubble ページに戻ってきてもらうことになりますが、今回はテストの為、ページトップにある「このアカウントフォームをスキップ」で進め、リダイレクトで戻ってきます。
では、次に Stripe から受け取った売り手のアカウントが、User テーブルの「Stripe Account ID」フィールドに登録されているか確認しておきましょう。
Stripe 側でも確認していきます。Stripe のダッシュボードに接続すると、ドライバーの接続アカウントでログインされていると思いますので、右側のユーザーアイコンから「プロフィール」をクリックし、テストアカウントとしてログインできるように「アカウント保存」でパスワードを設定しておきましょう。
次に、プロフィールページでドライバーの接続アカウントのIDを確認します。この値がリダイレクトで返却され、Bubble 側の「Stripe Account ID」フィールドに登録された値となります。
では、Stripe のドライバーの接続アカウントからは、一旦サインアウトして、自分の Stripeアカウント（=プラットフォームのStripeアカウント）でサインインし、Connect の「アカウント」ページで、ドライバーの接続アカウントと連携されているか確認してみましょう。
無事に連携されました。これで Bubble のアプリからユーザーに Stripeアカウントを作成してもらい、自分のStripeアカウントの Connect と連携することができましたね！
4. 収益の一部を手数料としてルーティング
では、前項で連携したドライバーが、Bubble アプリを使って乗客に運賃を請求し、乗客もBubble アプリを使って代金を支払い、かつ Bubble アプリ側では、乗客から受け取った代金の一部を手数料として残高に移動し、残金をドライバーにルーティングするというワークフローを作成してみます。
まずは、請求書データを保存するCharge テーブルを準備しておきましょう。フィールドは、Amount、Charge ID、Driver、Passenger です。あとは請求済みフラグなどもあると良いかもしれませんね。Charge ID には Stripe からの返却値が入ります。
ドライバーが乗客に請求を行う画面です。代金を請求する乗客のドロップダウンと代金を入力するインプット、請求登録ボタンを配置しています。
請求ボタンをクリックしたら、Charge IDを除く、Amount、Driver、Passenger のフィールドを画面のエレメントから取得した値で Createします。
では、乗客の支払い画面を作成していきましょう。支払い画面には、請求画面で作成したデータをバインドさせます。
「支払い」ボタンをクリックした時のワークフローは以下の通りです。Step1で「Charge the current user」で請求を行い、乗客に支払いをしてもらいます。手数料の設定もここで行います。「Payer email」に乗客のメールアドレス、「Amount」に代金、「Currency」をJPY、「Description」を適宜設定して、「The payee of this transaction is another user」のチェックをオンにして、「Trans.payee」にドライバーを指定し、手数料を「App fee」に入力します。
仕様変更のため 2020/07/27 追記
Stripe プラグインの「App fee」の仕様が、Bubble で修正され、以下にあります『実際の手数料の金額に「×0.01」する』必要がなくなりました。手数料を「300円」にする場合は、「3」ではなく「300」と入力してください。だたし、Transfer については、2020/07/27時点では、まだ「×0.01」する必要がありますので、ご注意ください。
ここで留意しておきたい大事な点があります。手数料で指定している「App fee」ですが、ここは「%」ではなく金額で入力する必要があります。また、現段階ではJPY特有の不具合とも言える仕様のため、実際の手数料の金額に「×0.01」する必要があります。
例えば、ここでは「3」と入力していますが、実際の手数料は「300円」になります。本仕様については今後仕様修正された場合など、本番稼働しているは特に重要な内容となりますので、十分にテストを行い確認するようにしてくださいね！
そして、Stripe から Charge ID を返却値として受け取り、必要ならば Chargeテーブルの「Charge ID 」を更新しておきます。
では、プレビューで請求画面はドライバーで「Run as →」、支払いは乗客で「Run as →」して起動し動かしてみてくださいね！
さあ、この取引を Stripe で確認してみましょう。この取引は Connect の「手数料収入の合計」に登録されています。
「支払いの詳細」に表示されている ID は返却値で取得した「Charge ID」です。ドライバーの Stripeに登録された支払いとも紐づいていることがリンクアドレスから確認することができます。
5. 売り手に転送する方法
では、最後に Bubble のアプリを使って、シンプルに自分のStripe 残高から売り手（ドライバー）にTransfer（転送）する方法をご紹介します。Transfer には手数料が掛からない為、イレギュラーな返金やキャンペーンなどで利用できるのではないでしょうか。
ワークフローは以下の通りです。「Transfer to seller」のアクションを追加して、「Amount」には金額、「Currency」をJPY、「Destination seller」には転送先である売り手（ドライバー）を指定します。請求と紐づけたい場合は、返却値で「Charge ID」を取得しておき「Source Charge ID」に入力してください。
また、ここでも金額には「*0.01」が必要です。復唱になりますが、本仕様については今後仕様修正される可能性がありますので、どうぞご注意くださいね！
では、Stripe で確認してみます。
Transfer もIDで、売り手（ドライバー）の明細と紐づいているのが確認できます。
以上が、Bubble から売り手を登録したり、支払いをルーティングしたりする方法になります！
まとめ
いかがでしたか？今回は、Bubbleで始めるオンライン決済 Stripe Connect についてご紹介しました。次回もどうぞお楽しみに！
