日本発ノーコードアプリ開発ツール『Click』

【中級者向け】BubbleとStripe.js2プラグインでマーケットプレイスを構築する|ノーコード開発ナレッジ【Bubble, Stripe】

準備

本記事では、Amazonのようなマーケットプレイスを構築します。

「販売者」「購入者」「プラットフォーマー」の3者が存在し、「販売者」が出品した商品を「購入者」が購入し、その料金の10%を「プラットフォーマー」が手数料として差し引くマーケットプレイスを想定します。

プラグインの使い方、ワークフローの設定に重点を置いて解説しますので、ページデザイン、UIは多目に見てください。

必要なアカウントはBubble、Stripeの2つです。

Bubbleは無料プランで大丈夫です。(料金の詳細はこちらをご覧ください:Bubbleの料金は?

Stripeのアカウント登録はこちらの記事で解説してます。「方法1.【Stripe】ユーザー登録」まで進めて下さい。

1.データベースの作成

STEP.1
既存のデータタイプ"User"にデータフィールドを追加します。

Data type: User

Fields:

  • Customer id
  • Seller id

STEP.2
データタイプ「商品」を作成します。

Data type: 商品

Fields:

  • 値段
  • 商品名
  • 商品詳細

2.Stripe.js2プラグインの設定

STEP.1
BubbleにStripe.js2プラグインをインストールします。

STEP.2
PluginsタブからStripe.js2プラグインの設定をします。

STEP.3
Stripeのダッシュボードにアクセスし、開発者タブからテスト環境のAPIキーをコピーし、Stripe.js2にペーストします。

  • Stripe Publishable Key – dev: Stripeダッシュボードの「公開可能キー」
  • Stripe Secret Key – dev: Stripeダッシュボードの「シークレットキー」
  • Authorization(shared headers) – dev: “Bearer”+”  “(半角スペース)+”シークレットキー”を入力(””は不要)

これでStripe.js2プラグインの設定が完了です。

3.ipiphyプラグインのインストール

Stripeで支払いや出金などの一部機能を利用するには、Stripeの利用規約に同意する必要があります。

利用規約の同意をStripeに記録する際に、IPアドレスが必要となりますのでipiphyプラグインをインストールします。

STEP.1
ipiphyプラグインをインストールします。

設定は特に必要ありません。これでIPアドレスが取得できるようになります。

販売者側の実装方法

まずは販売者の登録と設定から実装します。

1.販売者の登録

STEP.1
ユーザーがサインアップとログイン、ログアウトをするためのフォームを設置します。

STEP.2
「サインアップ」ボタンをクリックした時のワークフローを以下の通りに設定します。

STEP.3
「ログイン」ボタンをクリックした時のワークフローを以下の通りに設定します。

STEP.4
「ログアウト」ボタンをクリックした時のワークフローを以下の通りに設定します。

STEP.5
続いてユーザーが「販売者」として登録するためのフォームを設置します。

販売者として登録するために必要な追加情報は利用規約への同意のみです。そのため、Stripeの利用規約を確認するためのリンクを設置しています。

STEP.6
「販売者として登録」ボタンをクリックした時のワークフローを設定します。Payment分類から"Stripe.js - Account(Seller, All) - Create"アクションを追加します。

  • Business Type: Individual
  • Country Code: JP
  • Currency Code: JPY
  • Email: Current User’s email
  • Capabilities: card_payments,transfers
  • IP Address: Get current user’s IP address
  • Date: Current date/time

IPアドレスはGet data from an external API > Get current user’s IP addressを指定します。

本記事では”Business Type”は”individual”とします。Businee Type(業種)をユーザーが選択する場合は、ドロップダウンに業種の選択肢を設定し、選択した業種に応じてワークフローを振り分けると良いでしょう。

  • Individual: 個人
  • company: 会社
  • Non-Profit: 非営利団体
  • Government Entity: 公的機関

STEP.7
"Make changes to current user"アクションを追加し、データフィールド"Seller id"を更新します。

これで販売者登録が完了です。

2.銀行口座の登録

続いて販売者に、売り上げを送金するための口座情報を登録してもらいます。

STEP.1
口座情報の登録フォームを設置します。

各インプットの”Content format”は以下の通りに設定して下さい。Integerを選択すると口座番号等の先頭の0が消されてしまうので注意が必要です。

  • 銀行コード:Text
  • 支店コード:Text
  • 口座番号:Text
  • 口座名義:Text

STEP.2
"Stripe Token"エレメントを設置します。

STEP.3
「口座を登録」ボタンをクリックした時のワークフローを設定します。Element Actions分類から"Convert bank account to a Stripe Token"アクションを追加します。

  • Routing Number: 銀行コードと支店コードを繋げます
  • Account Number: 口座番号を指定します
  • Country Code: JP
  • Currency Code: JPY
  • Account Holder Type: Individual
  • Account Holder name: 口座名義を指定します。

STEP.4
Payment分類から"Stripe.js - External Account - Create"アクションを追加します。

  • Seller/Account ID: Current User’s Seller id
  • Token: StripeToken A’s Bank Account Token
  • Default for Currency?: はい

これで販売者に口座情報を紐づけることができました。

小まとめ

販売者登録のワークフローを一通り設定しましたので、実際にテストします。

メールアドレスとパスワードを入力して「サインアップ」ボタンをクリックします。

サインアップが完了すると、販売者登録フォームにメールアドレスが表示されます。利用規約を確認し「販売者として登録」ボタンをクリックします。

登録が完了すると、銀行口座登録フォームに販売者IDが表示されます。以下のテスト口座を入力して「口座を登録」ボタンをクリックします。

  • 銀行コード:0001(みずほ銀行)
  • 支店コード:100(本店)
  • 口座番号:0001234
  • 口座名義:任意の名義

Stripeのダッシュボードにアクセスすると、Connectタブに口座情報と紐づいた連結アカウントが作成されたことが確認できます。

これで販売者側の機能が実装できました。

購入者側の実装方法

次に、購入者の登録を実装します。

1.購入者の登録

STEP.1
ユーザーが「購入者」として登録するためのフォームを設置します。

購入者として登録するために必要な追加情報はありません。登録できたことを確認するためにテキストを設置しています。

STEP.2
「購入者として登録」ボタンをクリックした時のワークフローを設定します。Payment分類から"Stripe.js - Customer - Create"アクションを追加します。

以下の2つ以外の項目は空欄で大丈夫です。

  • Email: Current User’s email
  • Balance: 残高の設定です。”0″を指定します。

STEP.3
"Make changes to current user"アクションを追加し、データフィールド"Customer id"を更新します。

これで購入者登録が完了です。

小まとめ

購入者登録を実際にテストします。

販売者とは異なるユーザーで試したいため、一旦ログアウトし、先ほどとは別のメールアドレスとパスワードを入力して「サインアップ」ボタンをクリックします。

サインアップが完了すると、購入者登録フォームにメールアドレスが表示されます。「購入者として登録」ボタンをクリックします。

登録が完了すると、購入者登録フォームに購入者IDが表示されます。

Stripeのダッシュボードにアクセスすると、顧客タブにアカウントが作成されたことが確認できます。

これで購入者側の機能が実装できました。

商品の登録および決済方法

いよいよ商品を作成し、決済します。

1.商品の登録

STEP.1
「販売者」が商品を登録するためのフォームを設置します。

「値段を入力」インプットの”Content format”は”Integer”に設定して下さい。

STEP.2
「商品を登録」ボタンをクリックした時のワークフローを設定します。"Create a new thing..."アクションから始めます。詳細は以下画像の通りです。

2.カード登録と決済

STEP.1
「購入者」が商品を購入するためのフォームを設置します。

 

Groupに「商品」のデータを持たせ、各エレメントはこのデータを参照します。

フォーム内にStripe Elementを設置します。詳細はデフォルトのままで大丈夫です(画像では”Ask Postal Code?”=郵便番号の入力が”no”になってますが、どちらでも大丈夫です。)

STEP.2
「カードを登録」ボタンをクリックした時のワークフローを設定します。Element Actions分類から"Create payment method with a Stripe Element"アクションを追加します。

  • Email: Current User’s email

 

STEP.3
「商品を購入」ボタンをクリックした時のワークフローを設定します。Element Actions分類から"Stripe.js - PaymentIntent - Create"アクションを追加します。

  • Customer ID: Current User’s Customer id
  • Amount: 日本円の場合、100を掛けた値が決済されてしまうので、値段÷100の値をStripeに渡します。
  • Currency Code: JPY
  • Description: 商品詳細を指定します。
  • Capture now?: yes
  • Confirm Now?: yes
  • Off Session?: yes
  • PaymentMethod ID: StripeElement A’s PaymentMethod ID
  • Transaction Type: Destination
  • Seller/Account ID: 「商品」データの作成者の”Seller id”を指定します。
  • Application Fee: 手数料が10%の場合、商品値段×0.1となりますが、日本円なのでさらに100を掛けます。

 

[/timeline]

これで決済の機能が実装できました。

販売者の情報更新

決済のテストをする前に、重要な注意点があります。

本記事のように「プラットフォーマー」が手数料を引く決済方法は、「販売者」側の会社情報や住居、身分証明などが必須であり、このままでは決済ができません。

「販売者」側の情報をBubbleから更新する方法は複雑なため、別記事で解説させて頂きます。

本記事ではStripeのダッシュボードから直接情報を更新して、決済ができるようにします。

STEP.1
StripeダッシュボードのConnectタブから、先ほど登録した「販売者」をクリックします。

STEP.2
「もっと表示」をクリックし、直下の「編集」から情報を更新します。

STEP.3
「必須フィールド」に適当な情報を入力し、「保存」をクリックします。

STEP.4
「本人確認」から編集アイコンをクリックします。

STEP.5
「すべてのフィールド」に適当な情報を入力し、「保存」をクリックします。

STEP.6
「+個人を追加」をクリックします。

STEP.7
適当な情報を入力し、身分証明書をアップロードし「保存」をクリックします。

「アップロード」をクリックします。

「テスト文書を使用」をクリックします。

身分証明書が登録されます。

これで販売者の情報を更新できました。

まとめ

それでは実際に決済をテストしてみましょう。

Bubbleのプレビュー画面を開き、「販売者」でログインします。

商品登録フォームに適当な商品情報を入力し、「商品を登録」をクリックします。

一旦ログアウトし、「購入者」でログインします。

商品が登録されると、決済フォームに商品情報が表示されます。テストカードの情報を入力して「カードを登録」をクリックします。

  • カード番号:4242 4242 4242 4242
  • 有効期限:任意の未来の日付
  • CVC:任意の値

テストカードについてはこちらを参照して下さい:組み込みをテストする|Stripeのドキュメント

「商品を購入」をクリックします。決済に成功すると、Stripeダッシュボードで決済の詳細が確認できます。

決済に成功しました!手数料も引かれています!

以上がBubbleとStripe.js2プラグインでマーケットプレイスを構築する方法です。