【上級者向け】BubbleとStripeをサードパーティ製のプラグインを使わずに連携する方法②

SHARE

今回作成するもの

Bubble公式から出ている”API Connecter”を使ってStripeとAPI連携をし、CtoCマーケットプレイスを作成していこうと思います。
Stripe Connect のCustom を利用しています。
サードパーティ製のプラグインを使わないので難易度は上がりますが、その分できることもぐんと増えますので、頑張って実装していきましょう。

【上級者向け】BubbleとStripeをサードパーティ製のプラグインを使わずに連携する方法①

②では銀行口座を登録し、ユーザーが資金を受け取ることができるようになるまでの方法をご紹介します。

【上級者向け】BubbleとStripeをサードパーティ製のプラグインを使わずに連携する方法③

下記画像でいうお店の部分を実装していきます。

作成手順

1. 本人確認書類をAPIを叩いて登録する

前回と引き続きAPI Connectorを使って、APIの設定をしていきます。

  • Name → CreateFile
  • Use as → Action
  • Data type → JSON
  • 通信種別 → POST
  • URL → https://files.stripe.com/v1/files
  • Body type Form-data
  • Parameters↓
    • Key → purpose Value → identity_document チェックボックス 設定なし
    • Key → file Value → 一旦好きな画像を仮でアップロード チェックボックス Send file

Initialize call後、Reinitialize callします。後のために2回実行してください。
Stripeにいき、ログを確認、下記画像のIDを2回分コピーし保存しておきます。

2. 銀行口座をAPIで登録する

  • Name → CreateBankToken
  • Use as → Action
  • Data type → JSON
  • 通信種別 → POST
  • URL → https://api.stripe.com/v1/tokens
  • Body type JSON
  • Parameters↓
    • Key → bank_account[country] Value → JP チェックボックス Queryst.
    • Key → bank_account[currency] Value → jpy チェックボックス Queryst.
    • Key → bank_account[account_number] → 0001234 チェックボックス Queryst.
    • Key → bank_account[routing_number] Value → 1100000 チェックボックス Queryst.
    • Key → bank_account[account_holder_name] Value → HIROTO チェックボックス Queryst.

Stripeにいき、ログを確認、下記画像のIDをコピーし保存しておきます。

3. お店をAPIで登録する

アプリ内でお店を開業する際には必ずIPアドレスが必要となります。
今回IP取得にもAPIを利用したいので、下記のサービスに登録しましょう。

https://ipinfo.io/

新規登録後、Tokenタブに移動し、tokenを取得しておきます。

Bubbleに戻り、Add another APIを押下し、新たなAPI設定を作成します。

API NameをIPinfoとし、Add a shared parameterに先程のtokenを登録します。

API Callの設定は以下の通りです。

  • Name → GetIP
  • Use as → Data
  • Data type → JSON
  • 通信種別 → GET
  • URL → https://ipinfo.io

いつものようにInitialize callができればIPを取得するためのAPI設定は実装完了です。

それではStripeとの連携に戻っていきましょう。
今回は個人事業主に限定して実装していきます。

先程それぞれのログで取得していたIDもここで使います。

  • Name → CreateAccount
  • Use as → Action
  • Data type → JSON
  • 通信種別 → POST
  • URL → https://api.stripe.com/v1/accounts
  • Body type JSON
  • Parameters↓
    • Key → capabilities[transfers][requested] Value → true チェックボックス Queryst.(以下全てチェックボックスはQueryst.にチェックなので省略)
    • Key → capabilities[card_payments][requested] Value → true
    • Key → type → custom
    • Key → tos_acceptance[date] Value → 1609798905
    • Key → tos_acceptance[ip] Value → 8.8.8.8
    • Key → business_type Value → individual
    • Key → individual[first_name] Value → 寛人
    • Key → individual[last_name] Value → 南
    • Key → individual[first_name_kana] Value → ヒロト
    • Key → individual[first_name_kanji] Value → 寛人
    • Key → individual[last_name_kana] Value → ミナミ
    • Key → individual[last_name_kanji] Value → 南
    • Key → email Value → test@test.com
    • Key → individual[dob][day] Value → 8
    • Key → individual[dob][month] Value → 12
    • Key → individual[dob][year] Value → 1998
    • Key → individual[email] Value → test@test.com
    • Key → individual[phone] Value → +81xxxxxxxxxx(ご自身の電話番号接頭の0抜き)
    • Key → individual[address][city] Value → なんとか市
    • Key → individual[address][country] Value → JP
    • Key → individual[address][line1] → 住所1
    • Key → individual[address][line2] Value → 住所2
    • Key → individual[address][postal_code] Value → どこかしらの郵便番号
    • Key → individual[address][state] Value → 都道府県
    • Key → individual[address_kana][city] Value → 何とか市カナ
    • Key → individual[address_kana][country] Value → JP
    • Key → individual[address_kana][line1] Value → 住所1カナ
    • Key → individual[address_kana][line2] Value → 住所2カナ
    • Key → individual[address_kana][postal_code] Value → どこかしらの郵便番号
    • Key → individual[address_kana][state] Value → 都道府県カナ
    • Key → individual[address_kana][town] Value → 町名カナ
    • Key → individual[address_kanji][town] Value → 町名漢字
    • Key → individual[address_kanji][state] Value → 都道府県漢字
    • Key → individual[address_kanji][postal_code] Value → どこかしらの郵便番号
    • Key → individual[address_kanji][line2] Value → 住所2漢字
    • Key → individual[address_kanji][line1] Value → 住所1漢字
    • Key → individual[address_kanji][country] Value → JP
    • Key → individual[address_kanji][city] Value → 何とか市漢字
    • Key → business_profile[url] Value → 個人事業を始める人のURL(とりあえずTwitterのURLとかを仮で入れる)
    • Key → business_profile[product_description] Value → 出品する商品説明
    • Key → business_profile[mcc] Value → 業種コード
    • Key → individual[verification][document][back] Value → CreateFileのログで取得したID1
    • Key → individual[verification][document][front] Value → CreateFileのログで取得したID2
    • Key → external_account Value → CreateBankTokenのログで取得したID

業種コードは下記を参照してください。
https://stripe.com/docs/connect/setting-mcc

その後例に漏れず、Initialize callしてポップアップ表示後SAVEしてあげると連携完了です。

Stripeでもお店ができているか確認しましょう。

わかりやすいようにお店と言っていたものはStripeの連結アカウントのこ とでした。
顧客がサービスを使っていたらいつの間にか連結アカウントができ、そこに登録している銀行口座に売上が入ってくる仕組みです。
とは言いつつ、実際はいつの間にかStripeを使っていたでは利用規約に違反してしまうことになるので、本番利用の際は利用規約の同意を確認するチェックボックスを必ず作成するようにしてください。

4. Bubbleで開業する

BubbleでStripe Connectを簡単に連結できるようにしていきましょう。

まずはデザインタブを開き、mypageへ、以下のようにエレメントを配置していきます。

今回は利用規約や住所などの入力は省略しています。

次にワークフローを追加していきます。

まず、本人確認書類の表と裏を登録するAPIを叩きます。

次に銀行口座を登録するAPIを叩きます。

routing_numberは銀行コード+支店コードで登録します。

そしてConnectのアカウントを作成するAPIを叩きます。

今回は住所や利用規約周りなどは全て省略していますので、dynamicに変更するのは以下の5点です。

  • tos_acceptance[date]
  • tos_acceptance[ip]
  • individual[verification][document][front]
  • individual[verification][document][back]
  • external_account

tos_acceptance[date]に関してはUNIXに直してあげる必要があり、かつBubbleではミリ秒の値になってしまうので1000で割って小数点を切り捨てています。

そして最後にBubbleユーザーに紐付けするためのフィールドを作成し、そこにaccountのid値を入れてあげれば完了です。

実際に動かしてみると、銀行口座がうまく入らないはずです。
これはStripeのテストモードを利用しているためです。
テストモードで動かしたい場合は以下のコードをそれぞれに入力しましょう。

  • 銀行コード → 1100
  • 支店コード → 000
  • 口座番号 → 0001234

詳しくはこちらを参照してください。
https://stripe.com/docs/connect/testing#account-numbers

終わりに

これでお店の開業が作成されました。
今回から他のプラグインを使うだけではどうにもならないところだったので、少し疲れたかなーと思います。
質問はお気軽にどうぞ！

次回は商品の購入に関して、ご紹介していければと思います。
お楽しみに！

前の記事

Thirdwebとは？NFTやマーケットプレイス・トークンを作…

次の記事

装飾を捨てた後に残る美しさを表現したい。 ‐ 株式会社トキヨプ…