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

SHARE

今回作成するもの

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

①ではクレジットカードを登録し、ユーザーに紐付けするところまでの方法をご紹介します。

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

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

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

Stripe.js2プラグインを使う方法は、以下の記事を参考にしてください！

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

前提条件

作成手順

1. API連携でクレジットカードを登録した顧客をStripe上に作成する

早速BubbleでStripeのAPIにアクセスする方法から説明していきます。

まずはBubbleのPluginsタブからAPI Connectorをinstallしましょう

次にAdd another APIを押し、APIコールする設定をしていきます。

右上のexpandを押すと中身がみれるので、開いてみましょう。

 

API Nameはわかりやすく”Stripe”としておきます。
AuthenticationはAPIの認証方法です。Stripeは”HTTP Basic Auth”に対応していますので、選択します。

次にStripeの管理画面へ移動します。

まずテスト環境を選択します。
その後右上の開発者を押下し、シークレットキーを確認、コピーしましょう。
シークレットキーは絶対に公開しないようにしてください。

Bubbleの画面に戻り、コピーしたシークレットキーをUsernameに貼り付け、認証周りの設定は完了です。

次にAPI Callと記載のある箇所をexpandしてみましょう。

ここがどのようなAPIを叩くのかを設定する場所となります。
まずはクレジットカードを登録するAPIを叩く設定をしていきましょう。

  • Name → CreateCardToken
  • Use as → Action
  • Data type → JSON
  • 通信種別 → POST
  • URL → https://api.stripe.com/v1/tokens
  • Body type JSON
  • Parameters↓
    • Key → card[number] Value → 4242424242424242 チェックボックス Queryst.
    • Key → card[exp_month] Value → 1 チェックボックス Queryst.
    • Key → card[exp_year] Value → 2023 チェックボックス Queryst.
    • Key → card[cvc] Value → 314 チェックボックス Queryst.

Add parameterを押下することでParametersの設定を開始することができます。

その後Initialize callを押下します(画像ではReinitialize callとなっています)

saveを押下し、完了です。
一旦Stripeに戻り、ログを開いてみます。下記のように成功した通信が見れます。

ここで線を引いているtok_から始まるidをコピーしておきます。

またBubbleに戻り、次は顧客を登録するAPIを叩く設定をしていきましょう。

まずはAdd another APIを押下し、API Callを作成します。

設定は以下の通りです。

  • Name → CreateCustomer
  • Use as → Action
  • Data type → JSON
  • 通信種別 → POST
  • URL → https://api.stripe.com/v1/customers
  • Body type JSON
  • Parameters↓
    • Key → source Value → tok_xxxxxxxxxxxxxxxx チェックボックス Queryst.
    • Key →name Value → testuser チェックボックス Queryst.

先ほどと同じようにInitialize callを押下し、ポップアップ後saveを押して完了させます。

その後Stripeの管理画面に戻り、顧客タブを開くとtestuserができているはずです。

これにて顧客を作成するAPIの設定は完了しました！

2. BubbleのユーザーとStripe上の顧客を連携する

まずBubbleのデータタイプを下記のように作成します。

  • customer_id text
  • name text

次にデザインタブにてサインアップ画面を作成します。

ワークフローにてユーザーを作成します。
作成後mypageというページに飛ぶよう設定してください。

次にmypageのデザインを以下のように作成します。

そして、ボタンを押した際のワークフローを作成します。
ここでAPIを叩きます。

では実際に動かしてみましょう。

登録ボタンを押して、読み込みが完了した後はもう一度Stripeの画面に戻って顧客タブを確認してみましょう。
すると下記のようにユーザーができています。

終わりに

これで顧客側は作成されました。
ここまでは別のプラグインでも可能なので、API Connectorに慣れていただくという目的で勉強できていれば問題ないです。

次回はユーザーがお店を開業（銀行口座の登録）するところまでご紹介します。

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

前の記事

【初級者向け】BubbleでPinterestのように画像を表…

次の記事

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