StripeとBubbleを使ったサブスクリプション管理UIの構築 4

まず、アプリのナビゲーションバーを作成します。このナビバーでは、現在ログインしているユーザーを表示し、ログアウトやページ間のナビゲーションを行うことができます。さらに、ユーザーアカウントの詳細を表示する部分や、現在のプランの情報を提供するUIを作ります。

1. 再利用可能な要素としてナビバーを作成: Bubbleでは、再利用可能な要素として「ナビバー」を作成します。これにより、他のページでも簡単に使用できます。
2. フローティンググループ: ナビバーを「フローティンググループ」として設定し、コンテンツがナビバーの下をスクロールできるようにします。
3. ロゴと会社名の追加: グループ内にロゴと会社名（例えば「Atlas」）を配置し、それらを行コンテナとして配置することでデザインの統一性を確保します。
4. サインアップとログインのリンク: サインアップ用のリンクとログイン用のリンクをナビバーの右側に配置し、リンクがページの端にフィットするようにします。また、ユーザーがログインしているかどうかで表示されるリンクを切り替えるロジックを追加します。

‍

アカウント管理ページの設計

次に、アカウントページを作成し、ユーザーが自身の情報を管理できるUIを設計します。このページでは、Stripeと連携してサブスクリプションの詳細情報を表示し、ユーザーが簡単に管理できるようにします。

• アカウント情報の編集: 左側のパネルには「アカウント情報」を表示し、ユーザーが自身の名前やメールアドレスを変更できるようにします。この情報は、BubbleのデータベースだけでなくStripeにも反映される必要があります。そのため、BubbleからStripe APIを呼び出して変更内容を同期します。
• 現在のプランの表示: 右側のパネルには、ユーザーが現在加入しているプランの詳細を表示します。ここには開始日や請求サイクルの終了日などの情報を含み、ユーザーが自身の請求内容を確認できるようにします。
• 請求書のダウンロード: 各請求サイクルの請求書をStripeから取得し、ユーザーがPDF形式でダウンロードできるようにします。

‍

ユーザーがサブスクリプションを管理できるようにするために、以下の機能を実装します。

• プランのキャンセル: サブスクリプションをキャンセルする機能を実装します。キャンセルは即時に適用されるのではなく、現在の請求期間の終了時に適用されるように設定されます。これはユーザー体験を向上させ、予期せぬ請求トラブルを避けるための重要な設定です。
• 顧客ポータルの利用: Stripeが提供する顧客ポータルを利用して、ユーザーが自分でクレジットカード情報の更新やプランのアップグレード・ダウングレードを行えるようにします。このポータルはStripeが提供するため、セキュリティ面でも安心して利用できます。

Stripe APIとの統合

BubbleとStripeを連携させるために、StripeのAPIを利用します。具体的には、以下のAPIを利用してユーザー情報やサブスクリプションの管理を行います。

‍

• 顧客情報の更新API: ユーザーがアカウント情報（名前やメールアドレス）を更新すると、BubbleのデータベースだけでなくStripe側でも同様に更新が行われます。このため、Stripeの「顧客情報の更新API」を利用します。
• サブスクリプション情報の取得API: サブスクリプションの詳細情報（開始日、終了日、プラン名など）を取得するために「サブスクリプション情報の取得API」を利用します。
• 請求書の取得API: Stripeで生成された請求書をユーザーがダウンロードできるように、「請求書の取得API」を利用してPDFを取得します。

‍

サブスクリプションのステータスが更新された場合など、リアルタイムでデータを反映するためにStripeのウェブフックを設定します。

• サブスクリプション更新のウェブフック: ユーザーがプランをキャンセル、アップグレード、またはダウングレードした場合に、Bubble側でその変更を反映するためのウェブフックを設定します。ウェブフックが受信したデータを基に、Bubbleのデータベースを更新します。
• セキュリティ対策: ウェブフックの設定時には、受信したリクエストがStripeからのものであることを確認するためのセキュリティ対策も実装します。これにより、不正なリクエストによるデータの改ざんを防止します。

‍

今回の記事では、BubbleとStripeを組み合わせて、ユーザーがサブスクリプションを管理できるアカウント管理ページの構築方法を解説しました。このアプローチにより、ノーコードツールを使いながらも柔軟な機能を実現することが可能です。

次回は、ユーザーがより直感的に使えるUI/UXを実現するための追加機能や、より高度なセキュリティ対策について掘り下げていきたいと思います。また、Stripeの他のAPIやBubbleのプラグインを使ったさらなる拡張機能についても紹介していきます。

‍

https://www.youtube.com/watch?v=bVsAYOjnh7c

‍