カスタム決済フローを使用して iOS でデジタル商品の支払いを受け付ける
Payment Element を使用して、独自のカスタム決済フローを開き、アプリ内のデジタル商品とサブスクリプションを販売します。
一部の国では、外部のウェブサイトをリンクして、iOS で支払いを受け付けられます。このガイドでは、Elements を使用して、アプリで決済ページにリダイレクトすることにより、サブスクリプションを販売する方法を説明します。Elements を使用した独自の決済ページがすでにある場合は、ユニバーサルリンクを設定するをご覧ください。
注
Stripe のご利用が初めてで、大量の支払いを処理し、高度な導入が必要な場合は、営業チームにお問い合わせください。
作成する内容
注
このガイドでは、アプリ内のデジタル商品を販売するプロセスのみについて説明します。以下のいずれかを販売している場合は、代わりにネイティブ iOS の支払いガイドを使用してください。
- 物理的品目
- アプリ外での使用を目的とする商品やサービス
- 2 人の個人間の、対人リアルタイムサービス
このガイドでは以下の方法を説明します。
- Elements を使用して、自社の決済ページで支払い情報を収集します。
- 商品、価格、顧客を使用してサブスクリプションをモデル化します。
- ユニバーサルリンクを使用して Checkout からアプリへと直接リダイレクトします。
- Webhook を監視して顧客のアプリ内サブスクリプションを更新します。
Stripe を設定するサーバー側
まず、Stripeアカウントに登録します。
次に、バックエンドに Stripe API ライブラリーを追加します。
次に、Stripe CLI をインストールします。CLI には Webhook のテストが用意されているため、これを実行して商品と価格を作成できます。
その他のインストールオプションについては、Stripe CLI を使ってみるをご覧ください。
商品および価格を作成する
ダッシュボードまたは Stripe CLI で商品とその価格を作成します。
この例では、1 つの「商品」と「価格」を使用して、月額 $9.99 USD のサブスクリプション商品を表します。
商品を追加ページに移動し、月額 9.99 USD のサブスクリプション商品を作成します。
価格を作成したら、価格 ID を記録しておき、後続のステップで使用できるようにします。料金 ID は、price_
のように表示されます。
次に、本番環境にコピー をクリックして、テスト環境から本番環境に商品を複製します。
顧客を作成するサーバー側
顧客が決済ページにアクセスするたびに、まだ存在しない場合にはその顧客の Customer オブジェクトが作成されます。
サーバーでは以下を処理する必要があります。
- 顧客の作成 (一致する Stripe 顧客がまだ存在しない場合)。
incomplete
状態のサブスクリプション作成。- PaymentIntent の client secret をフロントエンドに返します。
- 自身のデータベースで顧客のサブスクリプションステータスを更新可能にするための Webhook 処理。
警告
ユーザーアカウントと Stripe 顧客 ID との関連付けをサーバーに保存します。顧客を購入に関連付ける方法がなければ、顧客は購入を回復できなくなります。
顧客が決済ページでメールアドレスを変更すると、Customer オブジェクトが新しいメールアドレスで更新されます。
サブスクリプションを作成するサーバー側
Payment Element を使用するサブスクリプションを作成する際には、通常は payment_
を渡します。これにより、Stripe に対して、incomplete
ステータスのサブスクリプションを作成し、初回の支払いの Payment Intent を生成するように指示します。
注
データベースに subscription.
を保存して、キャンセル、アップグレード、ダウングレードなどの将来のサブスクリプションイベントを管理します。
ユニバーサルリンクを設定する
ユニバーサルリンクを使用すると、決済ページをアプリにディープリンクできます。ユニバーサルリンクを設定するには、次の手順を行います。
- ドメインに
apple-app-site-association
ファイルを追加します。 - アプリに Associated Domains エンタイトルメントを追加します。
- Checkout リダイレクト URL のフォールバックページを追加します。
関連ドメインを定義する
.
でドメインにファイルを追加し、アプリで処理する 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" } ] } ] } }
警告
このファイルは、MIME タイプ application/json
で提供する必要があります。curl -I
を使用してコンテンツタイプを確認します。
curl -I https://example.com/.well-known/apple-app-site-association
詳細については、関連ドメインのサポートに関する Apple のページを参照してください。
アプリに Associated Domains エンタイトルメントを追加する
- アプリのターゲットの、Signing & Capabilities (署名とケイパビリティ) ウィンドウを開きます。
- + ケイパビリティ をクリックし、関連ドメイン を選択します。
applinks:example.
のエントリーを Associated Domains リストに追加します。com
ユニバーサルリンクの詳細については、Apple のユニバーサルリンクのドキュメントを参照してください。
iOS は、apple-app-site-association
ファイルで定義された URL へのリンクをインターセプトしますが、リダイレクトでアプリを開くことができないケースが発生することがあります。
success
URL と cancel
URL にフォールバックページを作成します。たとえば、/checkout_
ページと /checkout_
ページを設定できます。
Safari で Checkout を開くクライアント側
アプリに決済ボタンを追加します。このボタンをクリックすると、Safari でカスタム決済ページが開きます。
import Foundation import SwiftUI import StoreKit struct BuySubscriptionsView: View { @EnvironmentObject var myBackend: MyBackend @State var paymentComplete = false 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 { if paymentComplete { Text("Payment complete!") } else { Button { UIApplication.shared.open("https://example.com/checkout", options: [:], completionHandler: nil) } label: { Text("Subscribe") }.onOpenURL { url in // Handle the universal link from Checkout. if url.absoluteString.contains("success") { // The payment was completed. Show a success // page and fetch the latest customer entitlements // from your server. paymentComplete = true } } } } } }
アプリにリダイレクトするサーバー側
Elements により、支払いを正常に確定したら、ユーザーを (登録済みのユニバーサルリンクを使用して) アプリにリダイレクトしてください。
注文のフルフィルメントを処理するサーバー側
ユーザーが初回の支払いを完了したとき、または後続の継続支払いが発生したときに、Stripe は次のようなイベントを送信します。
invoice.
payment_ succeeded customer.
subscription. updated invoice.
payment_ failed
これらのイベントを Webhook エンドポイントでリッスンします。以下に例を挙げます。
実装内容をテストするには、ダッシュボードまたは Stripe CLI を使用してイベントをモニタリングします。本番環境で開発する場合は、Webhook エンドポイントを設定して適切なイベントタイプに登録します。STRIPE_
キーが不明な場合は、ダッシュボードで Webhook をクリックして表示します。
テスト
決済ボタンが機能することをテストするには、次の手順を実行します。
- 購入ボタンをクリックすると、Stripe の Payment Element を使用する決済フローにリダイレクトされます。
- のテストカード番号、3 桁のセキュリティコード、将来の有効期限日、および任意の有効な郵便番号を入力します。
- 支払う をタップします。
invoice.
Webhook が起動し、Stripe が取引についてサーバーに通知します。payment_ succeeded - リダイレクトによってアプリへと戻されます。
実装が機能していない場合には、その他のテスト用リソースをご覧ください。