コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成
サインイン

注

このページはまだ日本語ではご利用いただけません。より多くの言語で文書が閲覧できるように現在取り組んでいます。準備が整い次第、翻訳版を提供いたしますので、もう少しお待ちください。

Customer Sheet を導入する

顧客がアプリの設定で保存済みの決済手段を管理できるようにします。

注

Customer Sheet は、アプリの設定ページでの使用を目的としています。決済フローと支払いには、Mobile Payment Element を使用します。Mobile Payment Element には、決済手段の保存と表示のサポートも組み込まれており、Customer Sheet よりも多くの決済手段に対応しています。

Customer Sheet は、顧客が保存済みの決済手段を管理するための構築済み UI コンポーネントです。Customer Sheet UI は決済フロー以外で使用することができ、外観やスタイルは自社のアプリに合わせてカスタマイズ可能です。顧客は、Customer オブジェクトに保存される決済手段を追加および削除し、デバイスのローカル上に保存されるデフォルトの決済手段を設定できます。Mobile Payment Element と Customer Sheet の両方を使用して、保存された決済手段に対して一貫性のあるエンドツーエンドのソリューションを顧客に提供します。

保存済みの複数の支払い方法を表示する iOS アプリの Customer Sheet のスクリーンショット。

CustomerAdapter は Customer Ephemeral Keys (顧客の一時キー) を使用することで、レガシープロダクトのユーザーがよりスピーディに CustomerSheet を導入できるようにサポートします。新しい実装を開始する場合は、顧客の一時キーよりも CustomerSession を採用することをお勧めします。

Stripe を設定する

まず、Stripe アカウントが必要です。今すぐご登録ください。

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

SDK をインストールするには、以下のステップに従います。

  1. Xcode で、File (ファイル) > Add Package Dependencies… (パッケージ依存関係を追加) を選択し、リポジトリー URL として https://github.com/stripe/stripe-ios-spm を入力します。
  2. リリースページから最新のバージョン番号を選択します。
  3. StripePaymentSheet 製品をアプリのターゲットに追加します。

注

SDK の最新リリースおよび過去バージョンの詳細については、GitHub の Releases (リリース) ページをご覧ください。リポジトリのリリースをウォッチして、新しいリリースの公開時に通知を受け取ることも可能です。

アプリの起動時に Stripe 公開可能キーを使用して SDK を設定します。これにより、アプリが Stripe API にリクエストを送信できるようになります。

AppDelegate.swift
import UIKit
import StripePaymentSheet

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        StripeAPI.defaultPublishableKey = 
"pk_test_TYooMQauvdEDq54NiTphI7jx"

        // do any other necessary launch configuration
        return true
    }
}

注

テストおよび開発時にはテストキーを使用し、アプリの公開時には本番環境キーを使用します。

支払い方法を有効にする

支払い方法の設定を表示して、サポートする支払い方法を有効にします。SetupIntent を作成するには、少なくとも 1 つは支払い方法を有効にする必要があります。

多くの顧客から決済を受け付けられるよう、Stripe では、カードやその他一般的な決済手段がデフォルトで有効になっていますが、ビジネスや顧客に適した追加の決済手段を有効にすることをお勧めします。プロダクトと決済手段のサポートについては決済手段のサポートを、手数料については料金体系ページをご覧ください。

注

CustomerSheet は、カード、アメリカの銀行口座、SEPA ダイレクトデビットのみに対応しています。

Customer エンドポイントを追加する
サーバー側

サーバー側で、Customer の一時キーを取得するエンドポイントと、新しい決済手段を Customer に保存する SetupIntent を作成するエンドポイントの 2 つのエンドポイントを作成します。

  1. Customer ID と関連する一時キーを返すエンドポイントを作成します。SDK で使用される API バージョンは、こちらで確認できます。
Command Line
# Create a Customer (skip this and get the existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

curl https://api.stripe.com/v1/ephemeral_keys \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  1. Customer ID を指定して設定された SetupIntent を返すエンドポイントを作成します。
Command Line
# Create a Customer (skip this and get the existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

curl https://api.stripe.com/v1/setup_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "customer"="{{CUSTOMER_ID}}" \

今後の支払いで、顧客が決済フローでオンセッション時にのみ決済手段を使用する場合、usage パラメーターを on_session に設定して、オーソリ率を改善します。

Customer アダプターを作成する
クライアント側

CustomerSheet は StripeCustomerAdapter を使用することで Stripe と通信できます。クライアント側で、StripeCustomerAdapter をプロバイダーとともに設定して、サーバー上のこれらのエンドポイントに対するリクエストを行います。

import StripePaymentSheet

let customerAdapter = StripeCustomerAdapter(customerEphemeralKeyProvider: {
    let json = await myBackend.getCustomerEphemeralKey()
    return CustomerEphemeralKey(customerId: json["customerId"]!, ephemeralKeySecret: json["ephemeralKeySecret"]!)
}, setupIntentClientSecretProvider: {
    let json = await myBackend.getSetupIntentForCustomer()
    return json["setupIntentClientSecret"]!
})

画面を設定する

次に、StripeCustomerAdapter と CustomerSheet.Configuration を指定して Customer Sheet を設定します。

var configuration = CustomerSheet.Configuration()

// Configure settings for the CustomerSheet here. For example:
configuration.headerTextForSelectionScreen = "Manage your payment method"

let customerSheet = CustomerSheet(configuration: configuration, customer: customerAdapter)

支払い画面を表示する

Customer Sheet を表示します。顧客が画面を閉じると、Customer Sheet は、CustomerSheet.SheetResult を指定して完了ブロックを呼び出します。

import StripePaymentSheet

customerSheet.present(from: self, completion: { result in
  switch result {
  case .canceled(let paymentOption), .selected(let paymentOption):
    // Configure your UI based on the payment option
    self.paymentLabel.text = paymentOption?.displayData().label ?? "None"

    // Optional: Send the selected payment method ID to your backend for advanced use cases
    // like charging a customer when not present in your app
    if let paymentOption = paymentOption {
      switch paymentOption {
      case .paymentMethod(let paymentMethod, let paymentOptionDisplayData):
        MyBackend.setDefaultPaymentMethod(paymentMethod.stripeId)
      case .applePay(paymentOptionDisplayData: let paymentOptionDisplayData):
        MyBackend.setDefaultPaymentMethodIsApplePay()
      }
    }
  case .error(let error):
    // Show the error in your UI
  }
})
  • 顧客が決済手段を選択する場合、その結果は .selected(PaymentOptionSelection?) になります。関連付けられる値は、選択した PaymentOptionSelection になり、ユーザーが過去に選択した決済手段を削除した場合は nil になります。決済手段の詳細は、PaymentOptionSelection の paymentMethod の関連値で確認できます。
  • ユーザーが画面をキャンセルした場合、その結果は .canceled になります。関連付けられる値は、Customer Sheet を開く前に選択された元の決済手段です (その決済手段がまだ利用可能な場合)。
  • エラーが発生した場合、その結果は .error(Error) になります。

詳しくは、Apple Pay を有効にする方法をご確認ください。

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