iOS でカスタマーポータルページでのサブスクリプションの管理を許可する

まず、Stripe アカウントを登録する必要があります。

カスタマーポータルを実装する前に、ダッシュボードを使用して、ポータル内でユーザーに許可する操作を定義します。商品カタログと価格カタログに基づいて、サンドボックスと本番環境の設定を選択します。

さまざまな顧客に合わせて複数のポータル設定を作成する場合 (または Connect プラットフォームで連結アカウントの設定を管理する場合) は、API を使用して行えます。

curl https://api.stripe.com/v1/billing_portal/configurations \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "features[invoice_history][enabled]"=true

商品カタログを設定する

顧客が定期支払いのアップグレード、ダウングレード、数量の変更を実行できるようにする場合は、商品カタログの設定も必要です。これには、顧客がアップグレードまたはダウングレードできる対象の商品と価格、および顧客が数量を更新できる定期支払いが掲載されます。商品と価格の作成について、詳細は商品を作成する方法をご覧ください。カスタマーポータルを請求処理にのみ使用している場合は、商品カタログを設定する必要はありません。

ポータルには、商品カタログの以下の属性が表示されます。

• 商品名と説明: これらの属性は、ダッシュボードと API で編集できます。
• 商品ごとの数量制限: これらの属性は、ダッシュボードで編集できます。
• 金額、通貨、請求期間: これらの属性は固定されており、ダッシュボードと API で作成するときにのみ設定できます。

納税者番号の収集を有効にする

Stripe Tax を使用してサブスクリプションや請求書の税金を自動徴収する場合、カスタマーポータルで、顧客に納税番号の設定と更新を行ってもらえます。Stripe Billing はその顧客の請求書に納税者番号を追加します。顧客による納税者番号の設定を許可するには、カスタマーポータルの設定に移動して 納税者番号 をオンに切り替えます。詳細については、顧客の納税者番号がサブスクリプションと請求書でどのように機能するかをご確認ください。

Stripe Tax の設定、継続支払いの税金の徴収、カスタムの決済フローでの税金の徴収、およびラインアイテムと請求書の税率の設定の方法についてご紹介します。

プレビューしてテストする

設定を行う際に、プレビュー をクリックしてポータルをプレビューします。これにより、ポータルの読み取り専用バージョンが表示され、顧客がサブスクリプションや請求の詳細をどのように管理しているかを確認できます。

設定の保存後に、サンドボックスの顧客を使用してポータルを起動し、テストできます。ダッシュボードで顧客に移動し、アクションをクリックしてから、カスタマーポータルを開くを選択します。

ポータルを読み取り専用バージョンとしてプレビューできるのは、ダッシュボードをサンドボックス内で使用する場合のみです。ポータルをプレビューしてテストできない場合は、設定をチェックして、ポータル設定がサンドボックスに保存されていることを確認してください。プレビューとテストを有効にするには、ダッシュボードでの編集権限も変更する必要があります。

サーバー側

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

次に、Stripe CLI をインストールします。CLI は必要な Webhook のテストを提供します。

# Install Homebrew to run this command: https://brew.sh/
brew install stripe/stripe-cli/stripe

# Connect the CLI to your dashboard
stripe login

その他のインストールオプションについては、Stripe CLI を使ってみるをご覧ください。

クライアント側

Stripe iOS SDK はオープンソースです。詳細なドキュメントが提供されており、iOS 13 以降をサポートするアプリと互換性があります。

また、SDK が Stripe への API コールを実行できるように、公開可能キーを設定する必要もあります。すぐに開始するには、導入中にクライアント側でこれをハードコード化できますが、本番環境ではサーバーから公開可能キーを取得します。

// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
STPAPIClient.shared.publishableKey = 
"pk_test_TYooMQauvdEDq54NiTphI7jx"

顧客がサブスクリプションに変更を加えるには、portal session API で Stripe 顧客 ID を使用してポータルページの URL を生成します。

// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = require('stripe')(
'sk_test_BQokikJOvBiI2HlWgH4olfQ2');

app.get('/customer_portal_url', async (req, res) => {

  // Replace this with your actual customer lookup logic
  const customerId = 'cus_...'; // Get this from your database

  const billingSession = await stripe.billingPortal.sessions.create({
    customer: customerId,
    return_url: 'https://example.com/portal_redirect',
  });

  res.json({
    url: billingSession.url
  });
})

ユニバーサルリンクを使用すると、カスタマーポータルをアプリにディープリンクできます。ユニバーサルリンクを設定するには、次の手順を行います。

1. ドメインに apple-app-site-association ファイルを追加します。
2. アプリに Associated Domains エンタイトルメントを追加します。
3. ポータルのリダイレクト URL のフォールバックページを追加します。

関連ドメインを定義する

.well-known/apple-app-site-association メインにファイルを追加し、アプリで処理する URL を定義します。アプリ ID の前にチーム ID を付加します。チーム IDは、Apple Developer Portal のメンバーシップページにあります。

{
  "applinks": {

      "apps": [],
      "details": [
           {
             "appIDs": [ "A28BC3DEF9.com.example.MyApp1",
                         "A28BC3DEF9.com.example.MyApp1-Debug" ],
             "components": [
               {
                  "/": "/checkout_redirect*",
                  "comment": "Matches any URL whose path starts with /checkout_redirect"
               }
             ]
           }
       ]
   }
}

curl -I https://example.com/.well-known/apple-app-site-association

詳細については、関連ドメインのサポートに関する Apple のページを参照してください。

アプリに Associated Domains エンタイトルメントを追加する

1. アプリのターゲットの、Signing & Capabilities (署名とケイパビリティ) ウィンドウを開きます。
2. + ケイパビリティ をクリックし、関連ドメイン を選択します。
3. applinks:example.com のエントリーを Associated Domains リストに追加します。

ユニバーサルリンクの詳細については、Apple の Universal Links for Developers (開発者のためのユニバーサルリンク) (英語) ページをご覧ください。

iOS は、apple-app-site-association ファイルで定義された URL へのリンクをインターセプトしますが、リダイレクトでアプリを開くことができないケースが発生することがあります。

return_url にフォールバックページを作成してください。たとえば、アプリのカスタム URL スキームを定義して、ユニバーサルリンクが失敗した場合にそのスキームを使用してリンクし直すことができます。

アプリに、カスタマーポータルを開くボタンを追加します。このボタンは以下を行います。

1. サーバー側のエンドポイントを呼び出して、ポータルセッションを作成します。
2. ポータルページの URL をクライアントに返します。
3. Safari で URL を開きます。

import Foundation
import SwiftUI
import StoreKit

struct SubscriptionManagementView: View {

    @EnvironmentObject var myBackend: MyServer

    var body: some View {
        // Check if payments are blocked by Parental Controls on this device.
        if !SKPaymentQueue.canMakePayments() {
            Text("Payments are disabled on this device.")
        } else {
            Button {
                myBackend.createCustomerPortalSession { url in
                    UIApplication.shared.open(url, options: [:], completionHandler: nil)
                }
            } label: {
                Text("Manage subscriptions")
            }.onOpenURL { url in
                // Handle the universal link from the customer portal.
                // Implement any necessary behavior, such as refreshing the customer's subscription status.
            }
        }
    }
}

顧客がカスタマーポータルを使用してサブスクリプションステータスを変更すると、customer.subscription.created、customer.subscription.deleted、customer.subscription.updated などの Webhook が Stripe からお客様に送信されます。イベントの一覧とその情報については、サブスクリプションで Webhook を使用するをご覧ください。設定したサブスクリプションのステータスを正確に監視するために必要な、すべてのイベントを処理していることを確認してください。

テスト目的の場合は、ダッシュボードまたは Stripe CLI を使用してイベントをモニタリングします。本番環境では、Webhook エンドポイントを設定して適切なイベントタイプに登録します。STRIPE_WEBHOOK_SECRET キーが不明な場合は、ダッシュボードで Webhook リンクをクリックして表示します。

const express = require('express');
const app = express();
// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = require('stripe')('<secret key>')

app.post('/webhook', async (req, res) => {
  let data;
  let eventType;
  // Check if webhook signing is configured.
  const webhookSecret = 
"{{STRIPE_WEBHOOK_SECRET}}"
  if (webhookSecret) {
    // Retrieve the event by verifying the signature using the raw body and secret.
    let event;
    let signature = req.headers["stripe-signature"];

    try {
      event = stripe.webhooks.constructEvent(
        req.body,
        signature,
        webhookSecret
      );
    } catch (err) {
      console.log(`⚠️  Webhook signature verification failed.`);
      return res.sendStatus(400);
    }
    // Extract the object from the event.
    data = event.data;
    eventType = event.type;
  } else {
    // Webhook signing is recommended, but if the secret is not configured in `config.js`,
    // retrieve the event data directly from the request body.
    data = req.body.data;
    eventType = req.body.type;
  }
  switch (eventType) {
    case 'customer.subscription.created': {
      const subscription = event.data.object;
      const customerId = subscription.customer;
      myUserDB.setUserSubscriptionIsActive(customerId, true);
      break;
    }
    case 'customer.subscription.deleted': {
      const subscription = event.data.object;
      const customerId = subscription.customer;
      myUserDB.setUserSubscriptionIsActive(customerId, false);
      break;
    }
    // Add other relevant event types as needed
  }

  res.sendStatus(200); // Acknowledge receipt of the webhook
})