コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
AI に質問する
アカウントを作成
サインイン
始める
支払い
売上
プラットフォームおよびマーケットプレイス
資金管理
開発者向けリソース
概要
Stripe Payments について
構築済みのシステムをアップグレード
支払いの分析
オンライン決済
概要ユースケースを見つけるManaged Payments
Payment Links を使用する
決済ページを構築
高度なシステムを構築
アプリ内実装を構築
    概要
    Payment Sheet
    Embedded Payment Element
    アプリ内購入のリンク
      構築済みの決済ページを使用する
      Payment Links を使用する (ローコード)
      カスタムフローを構築する
      Use a customer portal
    住所を収集
    アメリカとカナダのカード
決済手段
決済手段を追加
決済手段を管理
Link による購入の迅速化
支払いインターフェイス
Payment Links
Checkout
Web Elements
アプリ内 Elements
決済シナリオ
複数の通貨を扱う
カスタムの決済フロー
柔軟なアクワイアリング
オーケストレーション
店頭支払い
端末
決済にとどまらない機能
会社を設立する
仮想通貨
Financial Connections
Climate
ホーム支払いBuild an in-app integrationLink out for in-app purchases

カスタム決済フローを使用して iOS でデジタル商品の支払いを受け付ける

Payment Element を使用して、独自のカスタム決済フローを開き、アプリ内のデジタル商品とサブスクリプションを販売します。

一部の国では、外部のウェブサイトをリンクして、iOS で支払いを受け付けられます。このガイドでは、Elements を使用して、アプリで決済ページにリダイレクトすることにより、サブスクリプションを販売する方法を説明します。Elements を使用した独自の決済ページがすでにある場合は、ユニバーサルリンクを設定するをご覧ください。

注

Stripe のご利用が初めてで、大量の支払いを処理し、高度な導入が必要な場合は、営業チームにお問い合わせください。

作成する内容

注

このガイドでは、アプリ内のデジタル商品を販売するプロセスのみについて説明します。以下のいずれかを販売している場合は、代わりにネイティブ iOS の支払いガイドを使用してください。

  • 物理的品目
  • アプリ外での使用を目的とする商品やサービス
  • 2 人の個人間の、対人リアルタイムサービス

このガイドでは以下の方法を説明します。

  • Elements を使用して、自社の決済ページで支払い情報を収集します。
  • 商品、価格、顧客を使用してサブスクリプションをモデル化します。
  • ユニバーサルリンクを使用して Checkout からアプリへと直接リダイレクトします。
  • Webhook を監視して顧客のアプリ内サブスクリプションを更新します。

Stripe を設定する
サーバー側

まず、Stripeアカウントに登録します。

次に、バックエンドに Stripe API ライブラリーを追加します。

Command Line
Ruby
# Available as a gem sudo gem install stripe
Gemfile
Ruby
# If you use bundler, you can add this line to your Gemfile gem 'stripe'

次に、Stripe CLI をインストールします。CLI には Webhook のテストが用意されているため、これを実行して商品と価格を作成できます。

Command Line
homebrew
# 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 CLI で商品とその価格を作成します。

この例では、1 つの「商品」と「価格」を使用して、月額 $9.99 USD のサブスクリプション商品を表します。

商品を追加ページに移動し、月額 9.99 USD のサブスクリプション商品を作成します。

価格を作成したら、価格 ID を記録しておき、後続のステップで使用できるようにします。料金 ID は、price_G0FvDp6vZvdwRZ のように表示されます。

次に、本番環境にコピー をクリックして、テスト環境から本番環境に商品を複製します。

顧客を作成する
サーバー側

顧客が決済ページにアクセスするたびに、まだ存在しない場合にはその顧客の Customer オブジェクトが作成されます。

サーバーでは以下を処理する必要があります。

  • 顧客の作成 (一致する Stripe 顧客がまだ存在しない場合)。
  • incomplete 状態のサブスクリプション作成。
  • PaymentIntent の client secret をフロントエンドに返します。
  • 自身のデータベースで顧客のサブスクリプションステータスを更新可能にするための Webhook 処理。
Node
// 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'
); // This assumes your app has an existing user database, which we'll call `myUserDB`. const user = myUserDB.getUser("jennyrosen"); if (!user.stripeCustomerID) { const customer = await stripe.customers.create({ name: user.name, email: user.email, }); // Set the user's Stripe Customer ID for later retrieval. user.stripeCustomerID = customer.id; }

警告

ユーザーアカウントと Stripe 顧客 ID との関連付けをサーバーに保存します。顧客を購入に関連付ける方法がなければ、顧客は購入を回復できなくなります。

顧客が決済ページでメールアドレスを変更すると、Customer オブジェクトが新しいメールアドレスで更新されます。

サブスクリプションを作成する
サーバー側

Payment Element を使用するサブスクリプションを作成する際には、通常は payment_behavior: 'default_incomplete' を渡します。これにより、Stripe に対して、incomplete ステータスのサブスクリプションを作成し、初回の支払いの Payment Intent を生成するように指示します。

注

データベースに subscription.id を保存して、キャンセル、アップグレード、ダウングレードなどの将来のサブスクリプションイベントを管理します。

Node
// This example sets up an endpoint using the Express framework. const express = require('express'); const app = express(); const stripe = require('stripe')(
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
) app.post('/create-subscription', async (req, res) => { const { priceId, customerId } = req.body; // Create the subscription // setting payment_behavior to "default_incomplete" ensures we get a Payment Intent // that we can confirm on the client using the Payment Element const subscription = await stripe.subscriptions.create({ customer: customerId, items: [{ price: priceId }], payment_behavior: 'default_incomplete', expand: ['latest_invoice.payment_intent'], }); // Make sure you associate the subscription ID with the user in your database! myUserDB.addUserSubscription("jennyrosen", subscription.id); // Get the Payment Intent client secret const paymentIntent = subscription.latest_invoice.payment_intent; const clientSecret = paymentIntent.client_secret; return res.json({ subscriptionId: subscription.id, clientSecret: clientSecret, }); }); app.post('/login', async (req, res) => { // This assumes your app has an existing user database, which we'll call `myUserDB`. const token = myUserDB.login(req.body.login_details) res.json({token: token}) }); app.listen(4242, () => console.log(`Listening on port ${4242}!`));

注

Apple Pay はデフォルトで有効であり、顧客がサポート対象のデバイスを使用し Wallet アプリに最低でもカードを 1 枚保存している場合は、自動的に Payment Element に表示されます。payment_method_types プロパティを使用して、他の支払い方法を受け付けることもできます。詳細については、支払い方法の概要をご覧ください。

ユニバーサルリンクを設定する

ユニバーサルリンクを使用すると、決済ページをアプリにディープリンクできます。ユニバーサルリンクを設定するには、次の手順を行います。

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

関連ドメインを定義する

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

.well-known/apple-app-site-association
{ "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 を使用してコンテンツタイプを確認します。

Command Line
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 のユニバーサルリンクのドキュメントを参照してください。

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

success URL と cancel URL にフォールバックページを作成します。たとえば、/checkout_redirect/success ページと /checkout_redirect/cancel ページを設定できます。

Safari で Checkout を開く
クライアント側

アプリに決済ボタンを追加します。このボタンをクリックすると、Safari でカスタム決済ページが開きます。

CheckoutView.swift
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 により、支払いを正常に確定したら、ユーザーを (登録済みのユニバーサルリンクを使用して) アプリにリダイレクトしてください。

Item 1
stripe.confirmPayment({ elements, confirmParams: { // Return URL where the customer should be redirected after the PaymentIntent is confirmed. return_url: 'https://example.com/checkout_redirect/success', }, }) .then(function(result) { if (result.error) { // Inform the customer that there was an error. } });

注文のフルフィルメントを処理する
サーバー側

ユーザーが初回の支払いを完了したとき、または後続の継続支払いが発生したときに、Stripe は次のようなイベントを送信します。

  • invoice.payment_succeeded
  • customer.subscription.updated
  • invoice.payment_failed

これらのイベントを Webhook エンドポイントでリッスンします。以下に例を挙げます。

Node
app.post('/webhook', express.raw({ type: 'application/json' }), (req, res) => { const sig = req.headers['stripe-signature']; let event; try { event = stripe.webhooks.constructEvent(req.body, sig, process.env.STRIPE_WEBHOOK_SECRET); } catch (err) { console.error('Webhook signature verification failed.', err.message); return res.sendStatus(400); } switch (event.type) { case 'invoice.payment_succeeded': { const invoice = event.data.object; // Mark subscription as active in your database // e.g., invoice.subscription -> "sub_abc123" console.log('Payment succeeded'); break; } case 'invoice.payment_failed': { const invoice = event.data.object; console.log('Payment failed - notify the user to update their payment methods'); break; } case 'customer.subscription.updated': { const subscription = event.data.object; // e.g., handle pause, cancellation, or other changes console.log(`Subscription updated: ${subscription.id}`); break; } default: console.log(`Unhandled event type ${event.type}`); } res.json({ received: true }); });

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

テスト

決済ボタンが機能することをテストするには、次の手順を実行します。

  1. 購入ボタンをクリックすると、Stripe の Payment Element を使用する決済フローにリダイレクトされます。
  2. のテストカード番号、3 桁のセキュリティコード、将来の有効期限日、および任意の有効な郵便番号を入力します。
  3. 支払う をタップします。
  4. invoice.payment_succeeded Webhook が起動し、Stripe が取引についてサーバーに通知します。
  5. リダイレクトによってアプリへと戻されます。

実装が機能していない場合には、その他のテスト用リソースをご覧ください。

オプションその他のテスト用リソース

参照情報

  • 割引を追加する
  • 税金を徴収する
  • 納税者番号を収集する
  • ブランディングをカスタマイズする
  • 成功ページをカスタマイズする
このページはお役に立ちましたか。
はいいいえ
お困りのことがございましたら 、サポートにお問い合わせください。
早期アクセスプログラムにご参加ください。
変更ログをご覧ください。
ご不明な点がございましたら、お問い合わせください。
LLM ですか?llms.txt を読んでください。
Powered by Markdoc