Customer Sheet を導入する
The Customer Sheet is a prebuilt UI component that lets your customers manage their saved payment methods. It has a flexible architecture that supports advanced use cases and allows you to customize the underlying behavior. You can use the Customer Sheet UI outside of a checkout flow, and the appearance and styling is customizable to match the appearance and aesthetic of your app. Customers can add and remove payment methods, which get saved to the customer object, and set their default payment method stored locally on the device. Use both Mobile Payment Element and Customer Sheet to provide customers a consistent end-to-end solution for saved payment methods.
Stripe を設定する
まず、Stripe アカウントが必要です。今すぐ登録してください。
Stripe iOS SDK はオープンソースです。詳細なドキュメントが提供されており、iOS 13 以降をサポートするアプリと互換性があります。
注
For details on the latest SDK release and past versions, see the Releases page on GitHub. To receive notifications when a new release is published, watch releases for the repository.
アプリの起動時に Stripe 公開可能キーを使用して SDK を設定します。これにより、アプリが Stripe API にリクエストを送信できるようになります。
import UIKit import StripePaymentSheet @main class AppDelegate: UIResponder, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { StripeAPI.defaultPublishableKey =
// do any other necessary launch configuration return true } }"pk_test_TYooMQauvdEDq54NiTphI7jx"
決済手段を有効にする
決済手段の設定を表示して、サポートする決済手段を有効にします。SetupIntent を作成するには、少なくとも 1 つは決済手段を有効にする必要があります。
Stripe のデフォルトでは、カード支払いとより多くの顧客にアプローチできるその他の一般的な決済手段が有効になっていますが、ビジネスと顧客に適した追加の決済手段を有効にすることをお勧めします。製品と決済手段のサポートについては、決済手段の導入オプションを、手数料については料金体系ページをご覧ください。
注
現時点では、CustomerSheet はカードとアメリカの銀行口座のみに対応しています。
Customer エンドポイントを追加するサーバー側
Create two endpoints on your server: one for fetching a Customer’s ephemeral key, and one to create a SetupIntent for saving a new payment method to the Customer.
- Create an endpoint to return a Customer ID and an associated ephemeral key. You can view the API version used by the SDK here.
# 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
: \ -X "POST" curl https://api.stripe.com/v1/ephemeral_keys \ -usk_test_4eC39HqLyjWDarjtT1zdp7dc: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \sk_test_4eC39HqLyjWDarjtT1zdp7dc
- Customer ID を指定して設定された SetupIntent を返すエンドポイントを作成します。
# 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
: \ -X "POST" curl https://api.stripe.com/v1/setup_intents \ -usk_test_4eC39HqLyjWDarjtT1zdp7dc: \ -d "customer"="{{CUSTOMER_ID}}" \sk_test_4eC39HqLyjWDarjtT1zdp7dc
If you only plan to use the payment method for future payments when your customer is present during the checkout flow, set the usage parameter to on_session to improve authorization rates.
Customer アダプターを作成するクライアント側
A StripeCustomerAdapter
enables a CustomerSheet
to communicate with Stripe. On the client, configure a StripeCustomerAdapter
with providers that make requests to these endpoints on your server.
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
の関連値で確認できます。 - If the user cancels the sheet, the result is
.canceled
. The associated value is the original payment method selected prior to opening the customer sheet as long as that payment method is still available. - エラーが発生した場合、その結果は
.error(Error)
になります。
Learn more about how to enable Apple Pay.