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

注

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

設定で支払い方法を管理する

支払い方法設定シートを使用して、顧客がアプリの設定ページで支払い方法を管理できるようにします。

注

支払い方法設定シートは、アプリの設定ページで使用するためのものです。チェックアウトと支払いには、アプリ内支払い を使用してください。は、支払い方法の保存と表示にも対応しており、支払い方法設定シートよりも多くの支払い方法をサポートしています。

注

コードでは、このコンポーネントは歴史的な理由からCustomerSheet として参照されます。ドキュメント全体を通して、コード例でCustomerSheet と記載されている場合、これは支払い方法設定シートを指します。

支払い方法設定シートは、顧客が保存した支払い方法を管理できるようにする組み込み済みの UI コンポーネントです。決済フローの外側で支払い方法設定シートの UI を使用することができ、外観とスタイルはアプリの外観と美観に合わせてカスタマイズ可能です。顧客は支払い方法の追加と削除ができ、顧客オブジェクトに保存され、デバイスにローカルに保存されたデフォルトの支払い方法を設定できます。アプリ内支払いと支払い方法設定シートの両方を使用して、顧客に保存された支払い方法の一貫したエンドツーエンドのソリューションを提供します。

iOS アプリに保存された複数の支払い方法を提示する支払い方法設定シートのスクリーンショット。

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
Swift
No results
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
curl
Ruby
Python
PHP
Node.js
Java
No results
# 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
curl
Ruby
Python
PHP
Node.js
Java
No results
# 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"]!
})

画面を設定する

次に、CustomerSheet クラスとStripeCustomerAdapter およびCustomerSheet.Configuration を使用して支払い方法設定シートを設定します。

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)

支払い画面を表示する

CustomerSheet を使用して支払い方法設定シートを提示します。顧客がシートを閉じると、CustomerSheet は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 を有効にする方法をご確認ください。

オプションACH 決済を有効にする

ACH デビット支払いを有効にするには、以下を行います。

  1. アプリの依存関係として StripeFinancialConnections を含めます。
  2. ダッシュボードの設定セクションで、支払い方法としてアメリカの銀行口座を有効化します。

オプション選択した支払い方法を取得する

支払い方法設定シートを表示せずにデフォルトの支払い方法を取得するには、StripeCustomerAdapter でretrievePaymentOptionSelection() を呼び出します。

let paymentMethodOption = try await customerAdapter.retrievePaymentOptionSelection()

// Configure your UI based on the payment option
self.paymentLabel.text = paymentOption?.displayData().label ?? "None"

// Send the selected payment method ID to your backend
switch paymentOption {
case .paymentMethod(paymentMethod: let paymentMethod, paymentOptionDisplayData: let paymentOptionDisplayData):
    try await MyBackend.setDefaultPaymentMethod(paymentMethod.stripeId)
case .applePay(paymentOptionDisplayData: let paymentOptionDisplayData):
    try await MyBackend.setDefaultPaymentMethodIsApplePay()
}

オプション画面をカスタマイズする

デザイン

Appearance API を使用して、アプリのデザインに合わせて色、フォント、その他のデザインの属性をカスタマイズします。

動作

保存された支払い方法の関連付け、関連付け解除、一覧表示を行うためのカスタム動作を追加するには、StripeCustomerAdapter をサブクラス化するか、CustomerAdapter に準拠した自社で構築済みのアダプターを実装します。

class MyCustomerAdapter: StripeCustomerAdapter {
    override func fetchPaymentMethods() async throws -> [STPPaymentMethod] {
        let pms = try await super.fetchPaymentMethods()
        // Only return debit cards
        return pms.filter { $0.card?.funding == "debit" }
    }
}

注

fetchPaymentMethods は、保存された決済手段を除外して表示しないようにできますが、追加可能な決済手段のタイプには影響しません。

デフォルトの請求詳細

支払い画面で収集される請求詳細のデフォルト値を設定するには、defaultBillingDetails プロパティを設定します。CustomerSheet の各フィールドに、指定した値が事前に読み込まれます。

var configuration = CustomerSheet.Configuration()
configuration.defaultBillingDetails.address.country = "US"
configuration.defaultBillingDetails.email = "foo@bar.com"

請求詳細の収集

billingDetailsCollectionConfiguration を使用して、決済画面で請求詳細を収集する方法を指定します。

顧客の名前、メールアドレス、電話番号、住所を収集できます。

CustomerSheet によって収集されない値を関連付けるには、defaultBillingDetails プロパティに値を追加し、billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod を true に設定します。決済手段が必要とする値を収集する予定がない場合は、必ずこの手順を実行してください。

var configuration = CustomerSheet.Configuration()
configuration.defaultBillingDetails.email = "foo@bar.com"
configuration.billingDetailsCollectionConfiguration.name = .always
configuration.billingDetailsCollectionConfiguration.email = .never
configuration.billingDetailsCollectionConfiguration.address = .full
configuration.billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod = true

注

情報の収集に適用される法律については、法務チームに相談してください。電話番号は、取引に必要な場合にのみ収集してください。

このページはお役に立ちましたか。
はいいいえ