[ノーコード x Stripe で始めるオンライン決済] BubbleでStripeのCustomer Portalにアクセスするためのアクションを作成する

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

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

https://stripe.com/docs/billing/subscriptions/integrating-customer-portal

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

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

![スクリーンショット 2022-01-20 14.08.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/55ac86e7-0651-7c3f-bfae-50f830c43a0a.png)

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


![スクリーンショット 2022-01-20 14.08.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/d942f54f-4ce2-c820-17ea-45223bb9ea9f.png)

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

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

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

![スクリーンショット 2022-01-20 14.13.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/3fa9ddda-a897-ac53-4dd8-bffd7f32c4ca.png)


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


![スクリーンショット 2022-01-20 14.14.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/32ddf848-599a-9924-9a09-41bb7c3e8c8e.png)

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

![スクリーンショット 2022-01-20 14.15.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/94b06d52-ea46-8884-e7f4-45f12d874fe8.png)

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

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

![スクリーンショット 2022-01-20 14.17.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/4b5f3a5e-c819-53f0-1b47-1e55f5ecf2f7.png)


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

![スクリーンショット 2022-01-20 14.17.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/14313657-9c13-0b3c-b644-521842a3aaba.png)

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

- 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です。

![スクリーンショット 2022-01-20 14.32.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/c5388f98-7136-fadf-72f2-b5a69ca77f76.png)

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

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


![スクリーンショット 2022-01-20 14.22.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/da123611-d901-52a8-e2c1-31c06d95bb37.png)

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


![スクリーンショット 2022-01-20 14.40.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/686631a0-80b5-2d55-4f1f-cbd52c671668.png)


- 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`ボタンをクリックします。

**参考ドキュメント**

https://stripe.com/docs/api/customer_portal/sessions/create?lang=curl

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

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

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

![スクリーンショット 2022-01-20 14.41.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/6bf4a1fc-bee5-6ab7-b2ec-7b760e7b6e39.png)

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

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

![スクリーンショット 2022-01-20 14.42.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/db445e05-7c71-ef3d-79da-d2ff0d8b9508.png)

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

![スクリーンショット 2022-01-20 14.49.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/a5f1f69a-782b-dd60-ca49-2ef09aab27f0.png)

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

![スクリーンショット 2022-01-20 14.50.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/27b45d20-d55c-3b56-4f2f-69c32414fd22.png)

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

![スクリーンショット 2022-01-20 14.51.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/f9860d89-8858-102c-9dc7-a9f435fe0435.png)

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

![スクリーンショット 2022-01-20 14.52.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/e0d41309-05e5-fc5c-403a-8dc426d1a6de.png)

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

![スクリーンショット 2022-01-20 14.55.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/767c1029-f481-9ef4-4e0e-741746b93279.png)

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

![スクリーンショット 2022-01-20 14.55.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/4ea6fa87-a440-0912-41e0-bf56d01de9d1.png)

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

![スクリーンショット 2022-01-20 14.55.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/c722756b-3e6b-71fe-5b96-3ebe703aabf4.png)

これで設定完了です。

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

![スクリーンショット 2022-01-20 14.59.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23936/2631debf-50c5-ce19-72c2-cc4b50301638.png)

# おわりに

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

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

# [PR] Stripe開発者向け情報をQiitaにて配信中！
2021年12月よりQiitaにて、Stripe開発者のためのブログ記事更新を開始しました。

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

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

-> [Stripe Organizationsをフォローして最新情報をQiitaで受け取る](https://qiita.com/organizations/stripe)