目次
準備
本記事では、Amazonのようなマーケットプレイスを構築します。
「販売者」「購入者」「プラットフォーマー」の3者が存在し、「販売者」が出品した商品を「購入者」が購入し、その料金の10%を「プラットフォーマー」が手数料として差し引くマーケットプレイスを想定します。
プラグインの使い方、ワークフローの設定に重点を置いて解説しますので、ページデザイン、UIは多目に見てください。
必要なアカウントはBubble、Stripeの2つです。
Bubbleは無料プランで大丈夫です。（料金の詳細はこちらをご覧ください：Bubbleの料金は？）
- Bubble（https://bubble.io）
Stripeのアカウント登録はこちらの記事で解説してます。「方法１．【Stripe】ユーザー登録」まで進めて下さい。
１．データベースの作成
Data type: User Fields: Data type: 商品 Fields: これでStripe.js2プラグインの設定が完了です。 Stripeで支払いや出金などの一部機能を利用するには、Stripeの利用規約に同意する必要があります。 利用規約の同意をStripeに記録する際に、IPアドレスが必要となりますのでipiphyプラグインをインストールします。 設定は特に必要ありません。これでIPアドレスが取得できるようになります。 まずは販売者の登録と設定から実装します。 販売者として登録するために必要な追加情報は利用規約への同意のみです。そのため、Stripeの利用規約を確認するためのリンクを設置しています。 IPアドレスはGet data from an external API > Get current user’s IP addressを指定します。 本記事では”Business Type”は”individual”とします。Businee Type（業種）をユーザーが選択する場合は、ドロップダウンに業種の選択肢を設定し、選択した業種に応じてワークフローを振り分けると良いでしょう。 これで販売者登録が完了です。 続いて販売者に、売り上げを送金するための口座情報を登録してもらいます。 各インプットの”Content format”は以下の通りに設定して下さい。Integerを選択すると口座番号等の先頭の0が消されてしまうので注意が必要です。 これで販売者に口座情報を紐づけることができました。 販売者登録のワークフローを一通り設定しましたので、実際にテストします。 メールアドレスとパスワードを入力して「サインアップ」ボタンをクリックします。 サインアップが完了すると、販売者登録フォームにメールアドレスが表示されます。利用規約を確認し「販売者として登録」ボタンをクリックします。 登録が完了すると、銀行口座登録フォームに販売者IDが表示されます。以下のテスト口座を入力して「口座を登録」ボタンをクリックします。 Stripeのダッシュボードにアクセスすると、Connectタブに口座情報と紐づいた連結アカウントが作成されたことが確認できます。 これで販売者側の機能が実装できました。 次に、購入者の登録を実装します。 購入者として登録するために必要な追加情報はありません。登録できたことを確認するためにテキストを設置しています。 以下の２つ以外の項目は空欄で大丈夫です。 これで購入者登録が完了です。 購入者登録を実際にテストします。 販売者とは異なるユーザーで試したいため、一旦ログアウトし、先ほどとは別のメールアドレスとパスワードを入力して「サインアップ」ボタンをクリックします。 サインアップが完了すると、購入者登録フォームにメールアドレスが表示されます。「購入者として登録」ボタンをクリックします。 登録が完了すると、購入者登録フォームに購入者IDが表示されます。 Stripeのダッシュボードにアクセスすると、顧客タブにアカウントが作成されたことが確認できます。 これで購入者側の機能が実装できました。 いよいよ商品を作成し、決済します。 「値段を入力」インプットの”Content format”は”Integer”に設定して下さい。 Groupに「商品」のデータを持たせ、各エレメントはこのデータを参照します。 フォーム内にStripe Elementを設置します。詳細はデフォルトのままで大丈夫です（画像では”Ask Postal Code?”＝郵便番号の入力が”no”になってますが、どちらでも大丈夫です。） これで決済の機能が実装できました。 決済のテストをする前に、重要な注意点があります。 本記事のように「プラットフォーマー」が手数料を引く決済方法は、「販売者」側の会社情報や住居、身分証明などが必須であり、このままでは決済ができません。 現状、「販売者」側の情報をStripe.jsプラグインで完全に更新することはできません。 APIを使用する必要がありますので、こちらの記事をご参考下さい：【上級者向け】BubbleとStripeをサードパーティ製のプラグインを使わずに連携する方法② 本記事ではStripeのダッシュボードから直接情報を更新して、決済ができるようにします。
「アップロード」をクリックします。 「テスト文書を使用」をクリックします。 身分証明書が登録されます。 これで販売者の情報を更新できました。 それでは実際に決済をテストしてみましょう。 Bubbleのプレビュー画面を開き、「販売者」でログインします。 商品登録フォームに適当な商品情報を入力し、「商品を登録」をクリックします。 一旦ログアウトし、「購入者」でログインします。 商品が登録されると、決済フォームに商品情報が表示されます。テストカードの情報を入力して「カードを登録」をクリックします。 テストカードについてはこちらを参照して下さい：組み込みをテストする｜Stripeのドキュメント 「商品を購入」をクリックします。決済に成功すると、Stripeダッシュボードで決済の詳細が確認できます。 決済に成功しました！手数料も引かれています！ 以上がBubbleとStripe.js2プラグインでマーケットプレイスを構築する方法です。
２．Stripe.js2プラグインの設定
３．ipiphyプラグインのインストール
販売者側の実装方法
１．販売者の登録
２．銀行口座の登録
小まとめ
購入者側の実装方法
１．購入者の登録
小まとめ
商品の登録および決済方法
１．商品の登録
２．カード登録と決済
販売者の情報更新
まとめ
