Collect physical addresses and phone numbers
Learn how to collect addresses and phone number in your mobile app.
To collect complete addresses for billing or shipping, use the Address Element.
You can also use the Address Element to:
- Collect customer phone numbers
- Utilize autocomplete (enabled by default in iOS)
- Prefill billing information in the Payment Element by passing in a shipping address
Stripe combines the collected address information and the payment method to create a PaymentIntent.
Address Element
Address Element を使用して、顧客の配送先住所または請求先住所、電話番号を収集します。オートコンプリートはどの住所収集フィールドにも設定できます。収集した住所情報を Payment Element に渡して、請求先住所を事前入力できます。
Set up 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 にリクエストを送信できるようになります。
Set up address autocomplete suggestions
Autocomplete is enabled by default on iOS.
Configure the Address Element
You can configure the Address Element with details such as displaying default values, setting allowed countries, customizing the appearance, and so on. Refer to AddressViewController.Configuration for the complete list of configuration options.
let addressConfiguration = AddressViewController.Configuration( additionalFields: .init(phone: .required), allowedCountries: ["US", "CA", "GB"], title: "Shipping Address" )
Retrieve address details
Retrieve the address details by conforming to AddressViewControllerDelegate
and then using addressViewControllerDidFinish to dismiss the view controller. The address value is either a valid address or nil.
extension MyViewController: AddressViewControllerDelegate { func addressViewControllerDidFinish(_ addressViewController: AddressViewController, with address: AddressViewController.AddressDetails?) { addressViewController.dismiss(animated: true) self.addressDetails = address } }
Present the Address Element
Create an AddressViewController using the address configuration and delegate from the previous steps. You can either present it in a navigation controller or push it onto a navigation controller.
self.addressViewController = AddressViewController(configuration: addressConfiguration, delegate: self) let navigationController = UINavigationController(rootViewController: addressViewController) present(navigationController, animated: true)
Prefill shipping addresses in the Payment Element
Mobile Payment Element を使用する場合は、PaymentSheet.Configuration.shippingDetails を、Address Element で収集された住所に設定します。shippingDetails
が入力されている場合、ユーザーには請求先住所が事前入力され、Billing address is the same as shipping (請求先住所は配送先住所と同じ) チェックボックスが表示されます。shippingDetails
が入力されている確定済みの支払いインテントでは、支払いインテントの確定時に shipping intent プロパティも入力されます。
var configuration = PaymentSheet.Configuration() // ... configuration.shippingDetails = { [weak self] in return self?.addressDetails }
Customize the appearance
Now that you’ve added the Address Element to your app, you can customize the appearance to fit with the design of the rest of your app. You can configure the appearance with the Appearance API using AddressViewController.Configuration.appearance.
Payment Element
Configure the PaymentSheet
to either collect only the billing details required for the payment or customize it to collect additional details.
Billing details
支払い画面で収集される請求詳細のデフォルト値を設定するには、defaultBillingDetails
プロパティーを設定します。PaymentSheet
の各フィールドに、指定したそれらの値が事前に読み込まれます。
var configuration = PaymentSheet.Configuration() configuration.defaultBillingDetails.address.country = "US" configuration.defaultBillingDetails.email = "foo@bar.com"
Billing details collection
billingDetailsCollectionConfiguration
を使用して、決済画面で請求の詳細を収集する方法を指定します。
顧客の名前、メールアドレス、電話番号、住所を収集できます。
支払い方法で必須の請求詳細のみを収集する場合は、billingDetailsCollectionConfiguration.
を true に設定します。その場合、PaymentSheet.
が支払い方法の請求詳細として設定されます。
支払い方法で必ずしも必須ではない追加の請求詳細を収集する場合は、billingDetailsCollectionConfiguration.
を false に設定します。 その場合、PaymentSheet
で収集した請求詳細が支払い方法の請求詳細として設定されます。
var configuration = PaymentSheet.Configuration() configuration.defaultBillingDetails.email = "foo@bar.com" configuration.billingDetailsCollectionConfiguration.name = .always configuration.billingDetailsCollectionConfiguration.email = .never configuration.billingDetailsCollectionConfiguration.address = .full configuration.billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod = true
注
情報の収集に適用される法律については、弁護士に相談してください。電話番号は、取引に必要な場合にのみ収集してください。