目次
今回作成するもの
Bubble公式から出ている”API Connecter”を使ってStripeとAPI連携をし、CtoCマーケットプレイスを作成していこうと思います。
Stripe Connect のCustom を利用しています。
サードパーティ製のプラグインを使わないので難易度は上がりますが、その分できることもぐんと増えますので、頑張って実装していきましょう。
【上級者向け】BubbleとStripeをサードパーティ製のプラグインを使わずに連携する方法①
【上級者向け】BubbleとStripeをサードパーティ製のプラグインを使わずに連携する方法②
③ではお店を開業設定を終えたユーザーが商品を出品し、購入されたら運営費を引いた利益分が口座に振り込まれる方法をご紹介します。
下記画像でいう支払い、送金の部分を実装していきます。
作成手順
1. 購入に使うクレジットカードを識別するAPIを叩く
前回と引き続きAPI Connectorを使って、APIの設定をしていきます。
まずはAdd another callをし、API設定を新規で行ってください。
- Name → CreatePaymentMethod
- Use as → Action
- Data type → JSON
- 通信種別 → POST
- URL → https://api.stripe.com/v1/payment_methods
- Body type JSON
- Parameters↓
- Key → type Value → card チェックボックス Queryst.(以下全てチェックボックスはQueryst.にチェックなので省略)
- Key → card[number] Value → 4000000000000077
- Key → card[exp_month] Value → 1
- Key → card[exp_year] Value → 2023
- Key → card[cvc] Value → 314
顧客のカード情報を使うのでは？と思った方、鋭いです。
しかし、支払いにはこのAPIを叩かないといけないので、顧客のカード情報を使うのはまた要望があった際に行おうと思います。
といっても顧客情報をGETで取得し、Bubbleのワークフローに反映させるだけなので、簡単にできちゃいます！
Initialize callを実行後はStripeのダッシュボードへいき、ログを確認します。
この下線部分をコピーしておいてください。
2. どの顧客がいくら支払ったのかを識別するAPIを叩く
- Name → CreatePaymentIntents
- Use as → Action
- Data type → JSON
- 通信種別 → POST
- URL → https://api.stripe.com/v1/payment_intents
- Body type JSON
- Parameters↓
- Key → amount Value → 1000000 チェックボックス Queryst.(以下全てチェックボックスはQueryst.にチェックなので省略)
- Key → currency Value → jpy
- Key → payment_method_types[] Value → card
- Key → customer Value → 今いる顧客のID
- Key → payment_method Value → 先ほどコピーしたID
例に漏れず、Initialize callしてください。
今いる顧客のID取得方法はStripeのダッシュボードに行っていただいて顧客タブを開き、任意の顧客を選択します。
顧客詳細が表示され、左側にcus_から始まるIDが確認できると思います。
そちらをコピーして貼り付けてください。
Initialize callが成功したら、Stripeログへいき、IDを取得します。
支払いを完了させるにはもう一つAPIを叩く必要があります。
- Name → ConfirmPaymentIntents
- Use as → Action
- Data type → JSON
- 通信種別 → POST
- URL → https://api.stripe.com/v1/payment_intents/[id]/confirm
- Key id → 先ほどコピーしたID チェックボックスなし
- Body type JSON
Initializeが成功したら、Stripeのダッシュボードにある支払いタブを確認しましょう。
下記画像のように成功している支払いが存在しているはずです。
3. 売上のうちいくらをお店側に渡すのかを決めるAPIを叩く
- Name → CreateTransfer
- Use as → Action
- Data type → JSON
- 通信種別 → POST
- URL → https://api.stripe.com/v1/transfers
- Body type JSON
- Parameters↓
- Key → amount Value → 5000 チェックボックス Queryst.(以下全てチェックボックスはQueryst.にチェックなので省略)
- Key → currency Value → jpy
- Key → destination → 送金したいConnect アカウントのID
送金したいConnect アカウントのIDの確認方法はStripeダッシュボードのConnectタブを開き、アカウントを選択します。
アカウント詳細画面に行くと右上にIDをコピーとありますので、そちらを押すと取得完了です。
Initialize callが成功するとStripeダッシュボードで該当のConnectアカウントを選択し、詳細画面を表示します。
すると下記画像のように成功している表記がされているはずです。
4. Bubbleで商品の購入まで行ってみる
最後にBubble側も機能を実装していきましょう。
データタブにて2つのtypeを作成しましょう。
- Product
- amount → number
- name → text
- History
- product → Product
- quantity → number
次にデザインタブへ
mypageに出品するために必要なフォームを追加します。
ワークフローは以下の通りです。
Go to pageにもあるようにproductsというページを作っておきましょう。
productsページには下記のようにエレメントを配置してください。
ワークフローは以下の通りです。
Go to pageにもあるようにshowというページを作っておきましょう。
showページには下記のようにエレメントを配置してください。
ワークフローは以下の通りです。
今回はCreatePaymentMethodはそのままですが、本番環境であれば動的にしなければいけないことをお忘れなく！
これが終われば、完成です。
実際に動かしてみるとConnectに送金されるまで動いていると思います！！
終わりに
お疲れ様でした。これにてBubbleでのCtoCマーケットプレイスをAPIだけで実装することができました🎉
実装しながら気づいたかもしれませんが、実はそこまで難しくないのです。
ただ、根気よくStripeのリファレンスを読むことが大事なので、もし困った際は読みに行ってください
Stripe API リファレンス
ただ慣れてない人からすれば難しいですよね。もしご質問がある場合はお気軽にどうぞ！
