サブスクリプションの実装を構築する

React Native SDK はオープンソースであり、詳細なドキュメントが提供されています。内部では、ネイティブの iOS および Android の SDK を使用します。Stripe の React Native SDK をインストールするには、プロジェクトのディレクトリーで (使用するパッケージマネージャーによって異なる) 次のいずれかのコマンドを実行します。

次に、その他の必要な依存関係をインストールします。

• iOS の場合は、ios ディレクトリに移動して pod install を実行し、必要なネイティブ依存関係もインストールします。
• Android の場合は、依存関係をインストールする必要はありません。

Stripe の初期化

React Native アプリで Stripe を初期化するには、決済画面を StripeProvider コンポーネントでラップするか、initStripe 初期化メソッドを使用します。publishableKey の API 公開可能キーのみが必要です。次の例は、StripeProvider コンポーネントを使用して Stripe を初期化する方法を示しています。

次に Stripe CLI をインストールします。CLI は Webhook のテストを提供します。これを実行すると Stripe への API コールを実行できます。このガイドの後続セクションでは、CLI を使った料金体系モデルの設定方法を紹介します。

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

ダッシュボードまたは Stripe CLI で商品とその価格を作成します。

この例では、「基本」と「プレミアム」という 2 つのサービスレベルオプションがある固定価格のサービスを使用しています。サービスレベルオプションごとに、1 つの商品と 1 つの継続価格を作成する必要があります (初期費用のような 1 回限りの支払いを追加する場合は、1 回限りの価格で 3 つ目の商品を作成します。わかりやすくするために、この例には 1 回限りの支払いを含めていません)。

この例では、各商品が 1 カ月間隔で請求されます。基本商品の価格は 5 USD で、プレミアム商品の価格は 15 USD です。

Stripe では、各サブスクリプションに顧客が必要です。アプリケーションのフロントエンドでユーザーから必要な情報を収集し、それをバックエンドに渡します。

住所の詳細を収集する必要がある場合、Address Element を使用すると顧客の配送先住所または請求先住所を収集できます。Address Element についての詳細は、Address Element のページをご覧ください。

サーバーで、Stripe の Customer オブジェクトを作成します。

新しい顧客がプランを選択してからサブスクリプションを作成できるようにします。このガイドでは、顧客は基本またはプレミアムから選択します。

アプリで、選択した価格 ID と顧客レコードの ID をバックエンドに渡します。

バックエンドで、payment_behavior=default_incomplete を使用して、ステータスが incomplete のサブスクリプションを作成します。次に、サブスクリプションの最初の Payment Intent の client_secret をフロントエンドに返し、サブスクリプションの最新の請求書の confirmation_secret を展開して支払いを完了します。

サブスクリプション動作の向上を有効にするには、billing_mode[type] を flexible に設定します。Stripe API バージョン2025-06-30.basil以降を使用する必要があります。

支払いが完了したときに決済手段をデフォルトとして保存する場合は、save_default_payment_method を on_subscription に設定します。デフォルトの決済手段を保存すると、その後のサブスクリプションの決済の成功率が高くなります。

この時点でサブスクリプションは inactive であり、支払いを待っています。次に示すのはレスポンスの例です。強調表示されているのは保存が必要な最小限のフィールドですが、アプリケーションが頻繁にアクセスするフィールドをすべて保存します。

Payment Sheet を使用して支払いの詳細を収集し、サブスクリプションを有効化します。Elements は、お使いのアプリケーションのデザインに合わせてカスタマイズできます。

Payment Sheetは、さまざまな支払い方法に必要なすべての支払い詳細を安全に収集します。Payment SheetとSubscriptionsでサポートされる支払い方法をご確認ください。

アプリに Payment Element を追加する

PaymentSheet クラスを使用して、Mobile Payment Element を初期化して表示します。

Mobile Payment Element によって支払い画面が表示され、顧客はここで支払い方法を選択できます。このフォームでは、顧客が選択した支払い方法で必要な支払い詳細のすべてが自動的に収集されます。

allowsDelayedPaymentMethods を true に設定すると、アメリカの銀行口座などの 遅延通知型の支払い方法を使用できます。これらの支払い方法では、PaymentSheet が完了した時点では最終的な支払いステータスが判明せず、後になって成功または失敗が確定します。このようなタイプの支払い方法に対応する場合は、注文が確定済みであることを顧客に通知し、支払いが成功した場合にのみ注文のフルフィルメント (商品の発送など) を実行するようにします。

PaymentSheet.Configuration オブジェクトで appearance プロパティを使用して、アプリのデザインに合わせて Payment Element をカスタマイズできます。

支払いを確定する

Mobile Payment Element によって PaymentMethod が作成され、未完了のサブスクリプションの最初の PaymentIntent が確定され、その結果支払いが実行されます。支払いに強力な顧客認証 (SCA) が必要とされる場合は、PaymentIntent の確定前に Payment Element で認証プロセスが処理されます。

顧客がアプリを終了すると (Safari やバンキングアプリで認証するなど)、自動的にアプリに戻るための方法を提供します。多くの決済手段タイプで、戻り先 URL の指定が「必須」です。戻り先 URL を有効にしていても、指定がされていないと、戻り先 URL が必要な決済手段をユーザーに提示できません。

戻り先 URL を指定するには、以下のようにします。

1. カスタム URL を登録します。ユニバーサルリンクはサポートされていません。
2. カスタム URL を設定 します。
3. 以下のように、URL を Stripe SDK に転送するようにルートコンポーネントを設定します。

さらに、initPaymentSheet メソッドを呼び出す際に returnURL を設定します。

ネイティブ URL スキームの詳細については、Android および iOS のドキュメントをご覧ください。

導入を完了するには、Stripe から送信される Webhook を処理する必要があります。Webhook は、サブスクリプションによって新しい請求書が作成されるなど、Stripe 内の状態が変化するたびにトリガーされるイベントです。アプリケーションで、Webhook イベントを含む POST リクエストを受け取る HTTP ハンドラを設定し、イベントの署名を検証します。

開発中は、Stripe CLI を使用して Webhook を監視し、アプリケーションに転送します。開発アプリの実行中に、新しい端末で以下を実行します。

本番環境では、ダッシュボードで Webhook エンドポイント URL を設定するか、Webhook Endpoints API を使用します。

いくつかのイベントをリッスンして、このガイドの残りのステップを完了するには、いくつかのイベントをリッスンする必要があります。サブスクリプション固有の Webhook については、サブスクリプションのイベント で詳細をご覧ください。

ここまでのステップでサブスクリプションが有効になりました。次は、ユーザーがサービスにアクセスできるようにします。これを行うには、customer.subscription.created、customer.subscription.updated、customer.subscription.deleted の各イベントをリッスンします。これらのイベントは、Subscription オブジェクトを渡します。このオブジェクトには、サブスクリプションが有効か、期日経過か、キャンセルされたかを示す status フィールドが含まれます。ステータスの一覧については、サブスクリプションのライフサイクルをご覧ください。

Webhook ハンドラで、以下を実行します。

1. サブスクリプションのステータスを確認します。active の場合、ユーザーは商品の支払いを実行しています。
2. 顧客が登録している商品を確認し、サービスへのアクセス権を付与します。価格ではなく商品を確認することにより、料金体系や請求期間の変更が必要になった場合に、柔軟に対応できます。
3. product.id、subscription.id および subscription.status を、すでに保存されている customer.id とともにデータベースに保存します。アプリケーションでユーザーに対して有効にする機能を決定する際に、このレコードを確認します。

サブスクリプションのステータスは、存続期間のどの時点でも変化する可能性があります。アプリケーションが Stripe への直接の呼び出しを行っていない場合でも同様です。たとえば、クレジットカードの有効期限が切れて更新が失敗した場合、サブスクリプションは期日経過の状態になります。また、カスタマーポータルを実装している場合、ユーザーが直接アプリケーションを開かずにサブスクリプションをキャンセルすることがあります。ハンドラを正しく実装することで、いつでもアプリケーションを Stripe と同期した状態に維持できます。

顧客にサブスクリプションのキャンセルを許可するのは一般的です。この例では、アカウントの設定ページにキャンセルオプションを追加します。

このサンプルではフロントエンドでサブスクリプション ID を収集していますが、アプリケーションではこの情報をデータベース内のログインユーザーに関する情報から取得できます。

サブスクリプションのキャンセル機能が設定されたアカウント設定

バックエンドで、アプリから呼び出すエンドポイントを定義します。

バックエンドが customer.subscription.deleted イベントを受信します。

サブスクリプションがキャンセルされたら、データベースを更新して以前に保存された Stripe サブスクリプション ID を削除し、サービスへのアクセスを制限します。

キャンセルされたサブスクリプションを、再びアクティブにすることはできません。代わりに、顧客から更新された請求先情報を収集し、顧客のデフォルトの支払い方法を更新して、既存の顧客レコードから新しいサブスクリプションを作成します。

支払い方法をテストする

次の表を使用して、さまざまな支払い方法とシナリオをテストします。

イベントをモニタリングする

Webhook を設定して、アップグレードやキャンセルなどのサブスクリプションの変更イベントをリッスンします。サブスクリプションでの Webhook で詳細をご確認ください。イベントは、ダッシュボードまたは Stripe CLI で表示できます。

詳しくは、Billing の実装のテストをご覧ください。