コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成
サインイン
概要構築済みのシステムをアップグレード
オンライン決済
概要ユースケースを見つけるManaged Payments
決済手段
支払いインターフェイス
決済シナリオ
店頭支払い
決済にとどまらない機能

事前構築済みの決済ページを使用して、iOS でデジタル商品の決済を受け付けます

ブラウザーで Stripe Checkout を開き、アプリ内のデジタル商品およびサービスを販売します。

一部の国では、外部のウェブサイトをリンクして、iOS で支払いを受け付けられます。例として、このガイドでは、アプリで使用できるクレジットを販売する方法を説明します。Stripe Checkout を使用して、顧客を Stripe 上のオンライン決済ページにリダイレクトします。商品と価格が限られている場合は、ローコードの iOS で Payment Links を使用してデジタル商品の支払いを受け付けることもできます。

注

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

構築する内容

注

このガイドでは、アプリ内のデジタル商品を販売するプロセスのみについて説明します。以下の販売については取り扱いません。

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

ネイティブ iOS の支払いガイドを代わりとしてご覧ください。

このガイドでは以下の方法について説明します。

  • Checkout で支払い情報を収集します。
  • 商品、価格、顧客を使用したクレジットパッケージのモデル化。
  • ユニバーサルリンクの使用による Checkout からアプリへの直接のリダイレクト。
  • Webhook のモニタリングによる顧客のアプリ内通貨残高の更新。

対象範囲外の内容

このガイドでは、既存のアプリ内購入システムと並列的に Stripe Checkout を追加する方法を説明します。以下はこのガイドの対象範囲には含まれません。

Stripe を設定する
サーバー側

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

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

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

次に Stripe CLI をインストールします。CLI は必要な Webhook のテストを提供します。これを実行することで商品と価格を作成できます。

Command Line
# 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 回限りの価格を使用してデジタル商品をモデル化し、継続価格を使用してサブスクリプションをモデル化できます。顧客が支払い金額を選択する を選択して、顧客が希望する金額を支払えるようにすることもできます (たとえば、購入するクレジットの数を決定するなど)。

この例では、1 つの「商品」と「価格」を使用して、100 コインのバンドルを表します。

商品を追加ページに移動して、コインのバンドルを作成します。10 USD の 1 回限りの価格を追加します。

  • 100 コイン: アプリ内の 100 コインのバンドル
    • 価格: 標準モデル | 10 USD | 1 回限り

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

準備ができたら、ページの右上にある 本番環境にコピー ボタンを使用して、テスト環境から本番環境に製品を複製します。

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

Checkout セッションを作成するたびに、そのユーザーにまだ設定されていなければ Customer オブジェクトを作成します。

// 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 との関連付けを、サーバーに必ず保存してください。顧客を購入に関連付ける方法がなければ、顧客は購入を回復できなくなります。

アプリが既存の認証プロバイダーを持たない場合は、代わりに Apple でサインインを利用できます。

Checkout セッションを作成する際に、customer 引数を使用してその顧客 ID を渡します。こうすることで、そのセッションで作成されたすべてのオブジェクトが正しい Customer オブジェクトに関連付けられます。

注

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

payment モードでは、顧客の最新のカード支払い方法を使用して、Checkout ページのメールアドレス、カード詳細、請求先住所が事前入力されます。Checkout で顧客のカード詳細を事前入力するには、有効な請求先住所を必要とします。

支払い方法の詳細を保存し、Checkout で Customer に支払い方法を自動的に関連付け、その後の支払いに再利用できます。

ユニバーサルリンクを設定する
クライアント側
サーバー側

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

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

関連ドメインを定義する

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

.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 の Universal Links for Developers (開発者のためのユニバーサルリンク) (英語) ページをご覧ください。

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

success URL と cancel URL には必ずフォールバックページを作成してください。

Checkout セッションを作成する
サーバー側

Checkout セッションは、顧客が決済フォームにリダイレクトされた際に表示される内容をプログラムで示したものです。以下を使用して設定します。

  • 顧客 ID
  • 商品 ID (1 回限りの支払いまたはサブスクリプション)
  • success_url。支払いが完了した後に、顧客をお客様のアプリにリダイレクトするユニバーサルリンクです。
  • `cancel_url``。顧客が Checkout でお客様のロゴをクリックしたときに、顧客をお客様のアプリに戻すユニバーサルリンクです。

注

Checkout セッションは作成後 24 時間で期限が切れます。

Checkout セッションを作成したら、レスポンスからの URL をお客様のアプリに返します。

// 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-checkout-session', async (req, res) => {
  // Fetch the Stripe customer ID for the customer associated with this request.
  // This assumes your app has an existing user database, which we'll call `myUserDB`.
  const user = myUserDB.getUserFromToken(req.query.token);
  const customerId = user.stripeCustomerID;

  // The price ID from the previous step
  const priceId = '{{PRICE_ID}}';

  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price: priceId,
        quantity: 1,
      },
    ],
    mode: 'payment',
    customer: customerId,
    success_url: 'https://example.com/checkout_redirect/success',
    cancel_url: 'https://example.com/checkout_redirect/cancel',
  });

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

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 枚保存している場合は、自動的に Checkout に表示されます。動的な決済手段を使用すると、他の決済手段を受け付けられます。

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

アプリに決済ボタンを追加します。このボタンは以下を実行します。

  1. サーバー側のエンドポイントを呼び出して、Checkout セッションを作成します。
  2. クライアントに Checkout セッションを返します。
  3. Safari でセッション URL を開きます。
CheckoutView.swift
import Foundation
import SwiftUI
import StoreKit

struct BuyCoinsView: View {
    @EnvironmentObject var myBackend: MyServer
    @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 {
                    myBackend.createCheckoutSession { url in
                        UIApplication.shared.open(url, options: [:], completionHandler: nil)
                    }
                } label: {
                    Text("Buy 100 coins")
                }.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
                    }
                }
            }
        }
    }
}

クライアントで Checkout URL を取得する

サーバーエンドポイントを使用して、Checkout セッションを取得します。

CheckoutView.swift
class MyServer: ObservableObject {
  // The cached login token
  var token: String?

  func createCheckoutSession(completion: @escaping (URL) -> Void) {
    // Send the login token to the `/create_checkout_session` endpoint
    let request = URLRequest(url: URL(string: "https://example.com/create-checkout-session?token=\(self.token)")!)

    let task = URLSession.shared.dataTask(with: request, completionHandler: { (data, response, error) in
      guard let unwrappedData = data,
            let json = try? JSONSerialization.jsonObject(with: unwrappedData, options: []) as? [String : Any],
            let urlString = json["url"] as? String,
            let url = URL(string: urlString) else {
        // Handle error
        return
      }

      DispatchQueue.main.async {
        // Call the completion block with the Checkout session URL returned from the backend
        completion(url)
      }
    })
    task.resume()
  }

  func login() {
    // Login using the server and set the login token.
    let request = URLRequest(url: URL(string: "https://example.com/login")!)

    let task = URLSession.shared.dataTask(with: request, completionHandler: { (data, response, error) in
      guard let unwrappedData = data,
            let json = try? JSONSerialization.jsonObject(with: unwrappedData, options: []) as? [String : Any],
            let token = json["token"] as? String else {
        // Handle error
        return
      }
      self.token = token
    })
    task.resume()
  }
}

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

購入が成功すると、Stripe は checkout.session.completed Webhook を送信します。このイベントを受信したら、サーバーで顧客にコインを追加できます。

イベントを受信したことを確認すると、Checkout は購入者を success_url にリダイレクトします。エンドポイントが停止していたり、イベントが正しく確認されない場合、Checkout は支払い成功の 10 秒後に購入者を success_url にリダイレクトします。

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

server.js
// 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.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 'checkout.session.completed':
        const session = event.data.object;
        // Payment is successful.
        // Update the customer in your database to reflect this purchase.
        const user = myUserDB.userForStripeCustomerID(session.customer);
        user.addCoinsTransaction(100, session.id);
        break;
      default:
      // Unhandled event type
    }

  res.sendStatus(200);
});

テスト

これで、顧客を Stripe Checkout にリダイレクトする決済ボタンが使用できるようになりました。

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

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

参照情報

このページはお役に立ちましたか。
はいいいえ
お困りのことがございましたら 、サポートにお問い合わせください。
早期アクセスプログラムにご参加ください。
変更ログをご覧ください。
ご不明な点がございましたら、お問い合わせください。
LLM ですか？llms.txt を読んでください。
Powered by Markdoc