Bubbleを利用することで、コードを書かずにアプリケーションの開発が可能になります。

今回は、BubbleチームがリリースしているStripeプラグインがまだ対応していない、「Customer Portalの起動」アクションを作成する方法を紹介します。

データフィールドを追加する

[Data > Data types]から、新しいフィールドを追加します。

[Create a new field]をクリックし、stripe_customer_idフィールド（type=text）を追加しましょう。

APIコネクタープラグインを追加する

今回はプラグインを利用せず、Stripe APIを直接呼び出します。

[Plugins]に移動し、[Add plugins]ボタンをクリックしましょう。

Filtersにapi connectorを入力し、API connector (By Bubble)プラグインをインストールします。

Doneボタンをクリックして、インストール画面から離脱しましょう。

APIコネクタープラグインでStripe APIの認証設定を行う

[Plugins > API Connector]に移動して設定を行います。

Add another APIをクリックしましょう。

以下の情報をそれぞれのフィールドに設定します。

• API Name: Stripe
• Authentication: Private key in header
• Key name: Authorization
• Key Value: Bearer sk_YOUR-LIVE-SECRET-API-KEY
• Development key value: Bearer sk_test_YOUR-TEST-SECRET-API-KEY

Stripeのテスト・本番両方のAPIキーが必要です。ただし、テスト目的での利用のみの場合は、Key Valueフィールドにもテスト用のAPIキーを入力すればOKです。

Customer Portalのセッションを作成するAPIを登録する

呼び出すAPIの設定もこのまま行いましょう。 API Callの右側にあるexpandテキストをクリックします。

するとAPIの設定画面が表示されますので、以下の画像やリストを参考に情報を入力しましょう。

• Name: Create Portal Session
• Use as: Action
• Data type: JSON
• Method: POST
• API: https://api.stripe.com/v1/billing_portal/sessions
• Headers Key: Content-Type
• Headers Value: application/x-www-form-urlencoded
• Parameters[1] Key: customer
• Parameters[1] Value: cus_xxxx (Stripeに作成済みのcustomer idを仮で設定します)
• Parameters[1] Private: false
• Parameters[1] Allow blank: false
• Parameters[1] Optional: false
• Parameters[1] Queryst: true
• Parameters[1] Long: true
• Parameters[2] Key: return_url
• Parameters[2] Value: https://google.com (Customer Portalから離脱時のリンク先です)
• Parameters[2] Private: false
• Parameters[2] Allow blank: false
• Parameters[2] Optional: false
• Parameters[2] Queryst: true
• Parameters[2] Long: true

設定が完了すれば、ページ下部にあるInitialize callボタンをクリックします。

参考ドキュメント

APIレスポンスのデータ定義をimportする

Initialize callボタンをクリックすると、Stripe APIにリクエストが飛びます。
エラーが出る場合は、認証または設定を見直して再度トライしましょう。

成功した場合は、以下のようにレスポンスのキーとデータの型を確認する画面が表示されます。
画面が表示されていれば、Saveをクリックして保存しましょう。

ボタンからAPIを呼び出すワークフローを作成する

最後に、登録したAPIを呼び出すワークフローを作成しましょう。

「Design]に移動し、リンクを設定したいボタンをクリックしましょう。

Start/Edit workflowボタンをクリックして、ワークフロー作成画面に移動します。

Click here to add an action...をクリックし、表示された検索フィールドを利用してStripe - Create Portal Sessionを選択しましょう。

Step1に選択したアクションが登録されました。
続けてもう一度Click here to add an action...をクリックし、今度はOpen an external websiteを追加しましょう。

このアクションを追加すると、設定画面のモーダルが表示されます。
Destinationを選択し、Insert dynamic dataボタンをクリックしましょう。

どのデータを設定するかの選択画面が表示されます。Result of Step 1をまず選択しましょう。

続けてレスポンスの中身で、使用する値を選びます。
今回はurlを選びましょう。

これで設定完了です。

ページ右上にある[Preview]ボタンをクリックし、動作を確認してみましょう。

おわりに

実際の運用へ利用するには、Actionへの引数でCustomer IDを動的に渡す必要があります。

ですが、このように直接Stripe APIを呼び出してアクションを登録する方法もあることを知ることで、より柔軟なシステムを作ることが可能になります。

[PR] Stripe開発者向け情報をQiitaにて配信中！

2021年12月よりQiitaにて、Stripe開発者のためのブログ記事更新を開始しました。

• [Stripe Updates]：開発者向けStripeアップデート紹介・解説
• ユースケース別のStripe製品や実装サンプルの紹介
• Stripeと外部サービス・OSSとの連携方法やTipsの紹介
• 初心者向けのチュートリアル(予定)

など、Stripeを利用してオンラインビジネスを始める方法について随時更新してまいります。

-> Stripe Organizationsをフォローして最新情報をQiitaで受け取る