# 住所と電話番号を収集

Address Element を使用してモバイルアプリで顧客の住所と電話番号を収集する方法をご紹介します。

# iOS (UIKit)

> This is a iOS (UIKit) for when payment-ui is mobile and platform is ios. View the full page at https://docs.stripe.com/payments/mobile/collect-addresses?payment-ui=mobile&platform=ios.

請求や配送先の詳細な住所を収集するには、[Address Element](https://docs.stripe.com/payments/mobile/address-element.md) を使用します。

Address Element は次の目的でも使用できます。

- 顧客の[電話番号](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/addressviewcontroller/addressdetails/phone)を収集する
- オートコンプリートを利用する (iOS ではデフォルトで有効になっています)
- 配送先住所を渡して Payment Element に請求先情報を事前入力する

Stripe は、収集した住所情報と決済手段を組み合わせて、*PaymentIntent* (API object that represents your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process) を作成します。
![ユーザーが「配送先住所を追加」オプションを選択した場合の支払いプロセスの例。その後、配送先住所をフォームに追加するための新しい画面が表示されます。住所を入力しようとするとオートコンプリート候補が表示され、ユーザーはその中から選択することができます。](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.4e83bb4e46fd7d131b5c4ff8abee27ea.png)

## Stripe をセットアップする [サーバー側] [クライアント側]

まず、Stripe アカウントが必要です。[今すぐ登録してください](https://dashboard.stripe.com/register)。

[Stripe iOS SDK](https://github.com/stripe/stripe-ios) はオープンソースです。[詳細なドキュメントが提供されており](https://stripe.dev/stripe-ios/index.html)、iOS 13 以降をサポートするアプリと互換性があります。

#### Swift Package Manager

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

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

#### CocoaPods

1. まだインストールしていない場合は、[CocoaPods](https://guides.cocoapods.org/using/getting-started.html) の最新バージョンをインストールします。
1. 既存の [Podfile](https://guides.cocoapods.org/syntax/podfile.html) がない場合は、以下のコマンドを実行して作成します。
   ```bash
   pod init
   ```
1. この行を `Podfile` に追加します。
   ```podfile
   pod 'StripePaymentSheet'
   ```
1. 以下のコマンドを実行します。
   ```bash
   pod install
   ```
1. これ以降は、Xcode でプロジェクトを開く際に、`.xcodeproj` ファイルではなく、必ず `.xcworkspace` ファイルを使用するということを忘れないでください。
1. 今後、SDK の最新バージョンに更新するには、以下を実行します。
   ```bash
   pod update StripePaymentSheet
   ```

#### Carthage

1. まだインストールしていない場合は、[Carthage](https://github.com/Carthage/Carthage#installing-carthage) の最新バージョンをインストールします。
1. この行を `Cartfile` に追加します。
   ```cartfile
   github "stripe/stripe-ios"
   ```
1. [Carthage のインストール手順](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos)に従います。必ず、[こちら](https://github.com/stripe/stripe-ios/tree/master/StripePaymentSheet/README.md#manual-linking)にリストされている必要なフレームワークのすべてを埋め込んでください。
1. 今後、SDK の最新バージョンに更新するには、以下のコマンドを実行します。
   ```bash
   carthage update stripe-ios --platform ios
   ```

#### 手動のフレームワーク

1. Stripe の [GitHub リリースページ](https://github.com/stripe/stripe-ios/releases/latest)に移動して、**Stripe.xcframework.zip** をダウンロードして解凍します。
1. **StripePaymentSheet.xcframework** を、Xcode プロジェクトの **General (一般) ** 設定の **Embedded Binaries (埋め込みバイナリー)** セクションにドラッグします。**Copy items if needed (必要に応じてアイテムをコピーする)** を必ず選択してください。
1. [こちら](https://github.com/stripe/stripe-ios/tree/master/StripePaymentSheet/README.md#manual-linking)にリストされている必要なフレームワークのすべてに対して、ステップ 2 を繰り返します。
1. 今後、Stripe の SDK の最新バージョンに更新するには、ステップ 1 から 3 を繰り返します。

> SDK の最新リリースおよび過去バージョンの詳細については、GitHub の [Releases (リリース)](https://github.com/stripe/stripe-ios/releases) ページをご覧ください。リポジトリの[リリースをウォッチ](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository)して、新しいリリースの公開時に通知を受け取ることも可能です。

アプリの起動時に Stripe [公開可能キー](https://dashboard.stripe.com/test/apikeys)を使用して SDK を設定します。これにより、アプリが Stripe API にリクエストを送信できるようになります。

#### Swift

```swift
import UIKitimportStripePaymentSheet

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {StripeAPI.defaultPublishableKey = "<<YOUR_PUBLISHABLE_KEY>>"
        // do any other necessary launch configuration
        return true
    }
}
```

> テストおよび開発時には[テストキー](https://docs.stripe.com/keys.md#obtain-api-keys)を使用し、アプリの公開時には[本番環境](https://docs.stripe.com/keys.md#test-live-modes)キーを使用します。

## 住所のオートコンプリートの入力候補を設定する

iOS ではオートコンプリートがデフォルトで有効になっています。

## Address Element を設定する

Address Element では、デフォルト値の表示、許可された国の設定、デザインのカスタマイズなどの詳細を設定できます。設定オプションの一覧については、[AddressViewController.Configuration](https://github.com/stripe/stripe-ios/blob/address-element-private-beta-2/Stripe/AddressViewController%2BConfiguration.swift#L72-L162) をご覧ください。

```swift
let addressConfiguration = AddressViewController.Configuration(
  additionalFields: .init(phone: .required),
  allowedCountries: ["US", "CA", "GB"],
  title: "Shipping Address"
)
```

## 住所の詳細を取得する

`AddressViewControllerDelegate` に従って住所の詳細を取得し、[addressViewControllerDidFinish](https://github.com/stripe/stripe-ios/blob/address-element-private-beta-2/Stripe/AddressViewController.swift#L19) を使用してビューコントローラーを閉じます。住所の値は、有効な[住所](https://github.com/stripe/stripe-ios/blob/8399ea6cfe4e32190238375882e0a793b483d426/Stripe/AddressViewController%2BConfiguration.swift#L16-L36)または nil のいずれかです。

```swift
extension MyViewController: AddressViewControllerDelegate {
    func addressViewControllerDidFinish(_ addressViewController: AddressViewController, with address: AddressViewController.AddressDetails?) {
        addressViewController.dismiss(animated: true)
        self.addressDetails = address
    }
}

```

## Address Element を表示する

前のステップのアドレス設定とデリゲートを使用して、[AddressViewController](https://github.com/stripe/stripe-ios/blob/address-element-private-beta-2/Stripe/AddressViewController.swift#L26) を作成します。ナビゲーションコントローラーに表示するか、ナビゲーションコントローラーにプッシュできます。

```swift
self.addressViewController = AddressViewController(configuration: addressConfiguration, delegate: self)
let navigationController = UINavigationController(rootViewController: addressViewController)

present(navigationController, animated: true)
```

## Optional: Payment Element で配送先住所を事前入力する

モバイル支払い要素を使用する場合は、[PaymentSheet.Configuration.shippingDetails](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/configuration-swift.struct/shippingdetails/) に、address要素で収集する住所を設定します。`shippingDetails` が入力されると、ユーザーには請求先住所が事前に入力され、**Billing address is the same as shipping** チェックボックスが表示されます。`shippingDetails` が入力された確認済みの PaymentIntent には、PaymentIntent が確認されたときに[shipping](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-shipping) インテントプロパティも入力されます。

```swift
var configuration = PaymentSheet.Configuration()
// ...
configuration.shippingDetails = { [weak self] in
    return self?.addressDetails
}

```

## Optional: デザインをカスタマイズする

Address Element をアプリに追加したので、アプリの他の部分のデザインに合うよう外観をカスタマイズできます。[Appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=ios) と [AddressViewController.Configuration.appearance](https://github.com/stripe/stripe-ios/blob/address-element-private-beta-2/Stripe/AddressViewController%2BConfiguration.swift#L149) を使用して外観を設定できます。

## Optional: デフォルトの請求詳細を設定する

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

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

## Optional: 請求先の詳細の収集をカスタマイズする

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

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

支払い方法で必須の請求詳細のみを収集する場合は、`billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` を true に設定します。その場合、`PaymentSheet.Configuration.defaultBillingDetails` が支払い方法の[請求詳細](https://docs.stripe.com/api/payment_methods/object.md?lang=node#payment_method_object-billing_details)として設定されます。

支払い方法で必ずしも必須ではない追加の請求詳細を収集する場合は、`billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` を false に設定します。 その場合、`PaymentSheet` で収集した請求詳細が支払い方法の請求詳細として設定されます。

```swift
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
```

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


# iOS (SwiftUI)

> This is a iOS (SwiftUI) for when payment-ui is mobile and platform is plugins. View the full page at https://docs.stripe.com/payments/mobile/collect-addresses?payment-ui=mobile&platform=plugins.

請求または配送先の完全な住所を収集するには、SwiftUI で [Address Element](https://docs.stripe.com/payments/mobile/address-element.md) を使用します。

Address Element は次の目的でも使用できます。

- 顧客の[電話番号](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/addresselement/addressdetails/phone)を収集する
- オートコンプリートの使用 (iOS ではデフォルトで有効になっています)
- 配送先住所を渡して Payment Element に請求先情報を事前入力する

Stripe は、収集した住所情報と決済手段を組み合わせて、*PaymentIntent* (API object that represents your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process) を作成します。
![ユーザーが「配送先住所を追加」オプションを選択した場合のチェックアウトプロセスの例です。配送先住所をフォームに追加するための新しい画面が表示されます。オートコンプリートは、ユーザーが選択できるオプションを提案します。](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.4e83bb4e46fd7d131b5c4ff8abee27ea.png)

## Stripe をセットアップする [サーバー側] [クライアント側]

まず、Stripe アカウントが必要です。[今すぐ登録してください](https://dashboard.stripe.com/register)。

[Stripe iOS SDK](https://github.com/stripe/stripe-ios) はオープンソースです。[詳細なドキュメントが提供されており](https://stripe.dev/stripe-ios/index.html)、iOS 13 以降をサポートするアプリと互換性があります。

#### Swift Package Manager

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

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

#### CocoaPods

1. まだインストールしていない場合は、[CocoaPods](https://guides.cocoapods.org/using/getting-started.html) の最新バージョンをインストールします。
1. 既存の [Podfile](https://guides.cocoapods.org/syntax/podfile.html) がない場合は、以下のコマンドを実行して作成します。
   ```bash
   pod init
   ```
1. この行を `Podfile` に追加します。
   ```podfile
   pod 'StripePaymentSheet'
   ```
1. 以下のコマンドを実行します。
   ```bash
   pod install
   ```
1. これ以降は、Xcode でプロジェクトを開く際に、`.xcodeproj` ファイルではなく、必ず `.xcworkspace` ファイルを使用するということを忘れないでください。
1. 今後、SDK の最新バージョンに更新するには、以下を実行します。
   ```bash
   pod update StripePaymentSheet
   ```

#### Carthage

1. まだインストールしていない場合は、[Carthage](https://github.com/Carthage/Carthage#installing-carthage) の最新バージョンをインストールします。
1. この行を `Cartfile` に追加します。
   ```cartfile
   github "stripe/stripe-ios"
   ```
1. [Carthage のインストール手順](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos)に従います。必ず、[こちら](https://github.com/stripe/stripe-ios/tree/master/StripePaymentSheet/README.md#manual-linking)にリストされている必要なフレームワークのすべてを埋め込んでください。
1. 今後、SDK の最新バージョンに更新するには、以下のコマンドを実行します。
   ```bash
   carthage update stripe-ios --platform ios
   ```

#### 手動のフレームワーク

1. Stripe の [GitHub リリースページ](https://github.com/stripe/stripe-ios/releases/latest)に移動して、**Stripe.xcframework.zip** をダウンロードして解凍します。
1. **StripePaymentSheet.xcframework** を、Xcode プロジェクトの **General (一般) ** 設定の **Embedded Binaries (埋め込みバイナリー)** セクションにドラッグします。**Copy items if needed (必要に応じてアイテムをコピーする)** を必ず選択してください。
1. [こちら](https://github.com/stripe/stripe-ios/tree/master/StripePaymentSheet/README.md#manual-linking)にリストされている必要なフレームワークのすべてに対して、ステップ 2 を繰り返します。
1. 今後、Stripe の SDK の最新バージョンに更新するには、ステップ 1 から 3 を繰り返します。

> SDK の最新リリースおよび過去バージョンの詳細については、GitHub の [Releases (リリース)](https://github.com/stripe/stripe-ios/releases) ページをご覧ください。リポジトリの[リリースをウォッチ](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository)して、新しいリリースの公開時に通知を受け取ることも可能です。

アプリの起動時に Stripe [公開可能キー](https://dashboard.stripe.com/test/apikeys)を使用して SDK を設定します。これにより、アプリが Stripe API にリクエストを送信できるようになります。

#### Swift

```swift
import UIKitimportStripePaymentSheet

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {StripeAPI.defaultPublishableKey = "<<YOUR_PUBLISHABLE_KEY>>"
        // do any other necessary launch configuration
        return true
    }
}
```

> テストおよび開発時には[テストキー](https://docs.stripe.com/keys.md#obtain-api-keys)を使用し、アプリの公開時には[本番環境](https://docs.stripe.com/keys.md#test-live-modes)キーを使用します。

## 住所のオートコンプリートの入力候補を設定する

iOS ではオートコンプリートがデフォルトで有効になっています。

## Address Element を設定する

Address Element は、デフォルト値の表示、許可する国の設定、外観のカスタマイズなどの詳細設定が可能です。設定オプションの完全なリストについては `AddressElement.Configuration` を参照してください。

```swift
var configuration = AddressElement.Configuration()
configuration.allowedCountries = ["US", "CA", "GB", "AU"]
configuration.buttonTitle = "Save Address"
```

## Address Element を表示する

```swift
import SwiftUI
import StripePaymentSheet

struct MyView: View {
    @State private var showingAddressElement = false
    @State private var collectedAddress: AddressElement.AddressDetails?
    
    var body: some View {
        VStack {
            Button("Collect Address") {
                showingAddressElement = true
            }
            .sheet(isPresented: $showingAddressElement) {
                AddressElement(
                    address: $collectedAddress,
                    configuration: configuration
                )
            }
            
            // Display collected address
            if let address = collectedAddress {
                AddressView(address: address)
            }
        }
    }
} 
```

## 住所の詳細を取得する

Address Element は、顧客が住所入力を完了またはキャンセルした際に、バインドされた `address` 変数を自動的に更新します:

```swift
struct AddressView: View {
    let address: AddressElement.AddressDetails
    
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text("Collected Address:")
                .font(.headline)
            
            if let name = address.name {
                Text("Name: \(name)")
            }
            
            Text("Address: \(address.address.line1)")
            
            if let city = address.address.city {
                Text("City: \(city)")
            }
            
            Text("Country: \(address.address.country)")
            
            if let phone = address.phone {
                Text("Phone: \(phone)")
            }
        }
        .padding()
    }
}
```

## Optional: デザインをカスタマイズする

Address Element をアプリに追加したので、アプリの他の部分のデザインに合うよう外観をカスタマイズできます。`AddressElement.Configuration.appearance` を使用して、Appearance API で外観を設定できます。

## Optional: デフォルトの請求詳細を設定する

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

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

## Optional: 請求先の詳細の収集をカスタマイズする

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

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

支払い方法で必須の請求詳細のみを収集する場合は、`billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` を true に設定します。その場合、`PaymentSheet.Configuration.defaultBillingDetails` が支払い方法の[請求詳細](https://docs.stripe.com/api/payment_methods/object.md?lang=node#payment_method_object-billing_details)として設定されます。

支払い方法で必ずしも必須ではない追加の請求詳細を収集する場合は、`billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` を false に設定します。 その場合、`PaymentSheet` で収集した請求詳細が支払い方法の請求詳細として設定されます。

```swift
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
```

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


# Android

> This is a Android for when payment-ui is mobile and platform is android. View the full page at https://docs.stripe.com/payments/mobile/collect-addresses?payment-ui=mobile&platform=android.

請求や配送先の詳細な住所を収集するには、[Address Element](https://docs.stripe.com/payments/mobile/address-element.md) を使用します。

Address Element は次の目的でも使用できます。

- 顧客の[電話番号](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-additional-fields-configuration/index.html)を収集する
- [オートコンプリート](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-configuration/index.html)を有効にする
- 配送先住所を渡して Payment Element に請求先情報を事前入力する

Stripe は、収集した住所情報と決済手段を組み合わせて、*PaymentIntent* (API object that represents your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process) を作成します。
![ユーザーが「配送先住所を追加」オプションを選択した場合の支払いプロセスの例。その後、配送先住所をフォームに追加するための新しい画面が表示されます (住所の入力時にオートコンプリート候補が表示されます)。](https://b.stripecdn.com/docs-statics-srv/assets/android-overview.6061212dc737aa700b79242cb5f77782.png)

## Stripe をセットアップする [サーバー側] [クライアント側]

まず、Stripe アカウントが必要です。[今すぐ登録してください](https://dashboard.stripe.com/register)。

[Stripe Android SDK](https://github.com/stripe/stripe-android) はオープンソースであり、[詳細なドキュメントが提供されています](https://stripe.dev/stripe-android/)。

SDK をインストールするには、[app/build.gradle](https://developer.android.com/studio/build/dependencies) ファイルの `dependencies` ブロックに `stripe-android` を追加します。

#### Kotlin

```kotlin
plugins {
    id("com.android.application")
}

android { ... }

dependencies {
  // ...

  // Stripe Android SDK
  implementation("com.stripe:stripe-android:23.8.0")
  // Include the financial connections SDK to support US bank account as a payment method
  implementation("com.stripe:financial-connections:23.8.0")
}
```

> SDK の最新リリースおよび過去バージョンの詳細については、GitHub の [Releases](https://github.com/stripe/stripe-android/releases) ページをご覧ください。新しいリリースの公開時に通知を受け取るには、[リポジトリのリリースを確認](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository)してください。

Stripe の[公開可能キー](https://dashboard.stripe.com/apikeys)を使用して SDK を設定し、 `Application` サブクラスなどで、Stripe API へのリクエストを実行できるようにします。

#### Kotlin

```kotlin
import com.stripe.android.PaymentConfiguration

class MyApp : Application() {
    override fun onCreate() {
        super.onCreate()
        PaymentConfiguration.init(
            applicationContext,
            "<<YOUR_PUBLISHABLE_KEY>>"
        )
    }
}
```

> テストおよび開発時には[テストキー](https://docs.stripe.com/keys.md#obtain-api-keys)を使用し、アプリの公開時には[本番環境](https://docs.stripe.com/keys.md#test-live-modes)キーを使用します。

## 住所のオートコンプリートの入力候補を設定する

Address Element は、[Google Places SDK](https://developers.google.com/maps/documentation/places/android-sdk/overview) を使用して、住所のオートコンプリートの入力候補を取得します。オートコンプリートの入力候補を有効にするには、アプリの `build.gradle` に Google Places SDK の依存関係を含める必要があります。

#### Groovy

```groovy
dependencies {
    implementation 'com.google.android.libraries.places:places:2.6.0'
}
```

住所のオートコンプリートの入力候補を使用するには、Google Places API キーが必要です。[Google Places SDK 設定ガイド](https://developers.google.com/maps/documentation/places/android-sdk/cloud-setup)に従って API キーを生成します。

## Address Element を設定する

Address Element では、デフォルト値の表示、許可された国の設定、デザインのカスタマイズなどの詳細を設定できます。設定オプションの一覧については、[AddressLauncher.Configuration](https://github.com/stripe/stripe-android/blob/master/paymentsheet/src/main/java/com/stripe/android/paymentsheet/addresselement/AddressLauncher.kt#L72) をご覧ください。

```kotlin
val addressConfiguration = AddressLauncher.Configuration(
  additionalFields: AddressLauncher.AdditionalFieldsConfiguration(
    phone: AdditionalFieldsConfiguration.FieldConfiguration.Required
  ),
  allowedCountries: setOf("US", "CA", "GB"),
  title: "Shipping Address",
  googlePlacesApiKey = "(optional) YOUR KEY HERE"
)
```

## 住所の詳細を取得する

住所の詳細を取得するには、`Activity` または `Fragment` の `onCreate` ライフサイクルメソッドで `AddressLauncher` のインスタンスを作成して、`AddressLauncherResultCallback` インターフェイスを実装するコールバックメソッドを作成します。

```kotlin
private lateinit var addressLauncher: AddressLauncher
private var shippingDetails: AddressDetails? = null

override fun onCreate(savedInstanceState: Bundle?) {
    addressLauncher = AddressLauncher(this, ::onAddressLauncherResult)
}

private fun onAddressLauncherResult(result: AddressLauncherResult) {
    // TODO: Handle result and update your UI
    when (result) {
        is AddressLauncherResult.Succeeded -> {
            shippingDetails = result.address
        }
        is AddressLauncherResult.Canceled -> {
            // TODO: Handle cancel
        }
    }
}
```

`AddressLauncherResult` は `Succeeded` または `Canceled` になります。[実装の詳細](https://github.com/stripe/stripe-android/blob/master/paymentsheet/src/main/java/com/stripe/android/paymentsheet/addresselement/AddressLauncherResult.kt)をご覧ください。

> Stripe では、`onCreate` ライフサイクルイベントの間 (イベント後ではなく) に `AddressLauncher` をインスタンス化する必要があります。これを行わない場合、コールバックを正しく登録できず、アプリがクラッシュします。

## Address Element を表示する

前のステップの住所ランチャーと設定を使用して、Address Element を表示します。

```kotlin
addressLauncher.present(
   publishableKey = publishableKey,
   configuration = addressConfiguration
)
```

## Optional: Payment Element で配送先住所を事前入力する

モバイル支払い要素を使用する場合は、[PaymentSheet.Configuration.shippingDetails](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html) に、address要素で収集する住所を設定します。`shippingDetails` が入力されると、ユーザーには請求先住所が事前に入力され、**Billing address is the same as shipping** チェックボックスが表示されます。`shippingDetails` が入力された確認済みの PaymentIntent には、PaymentIntent が確認されたときに[shipping](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-shipping) インテントプロパティも入力されます

```kotlin
val configuration = PaymentSheet.Configuration.Builder("Example, Inc.")
  // ...
  .shippingDetails(shippingDetails)
  .build()
```

## Optional: デザインをカスタマイズする

Address Element をアプリに追加したので、アプリの他の部分のデザインに合うよう外観をカスタマイズできます。[Appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=android) を使用し、[AddressLauncher.Configuration.appearance](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-configuration/index.html) で外観を設定できます。

## Optional: デフォルトの請求詳細を設定する

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

#### Kotlin

```kotlin
val address = PaymentSheet.Address(country = "US")
val billingDetails = PaymentSheet.BillingDetails(
  address = address,
  email = "foo@bar.com"
)
val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Merchant, Inc.")
  .defaultBillingDetails(billingDetails)
  .build()
```

## Optional: 請求先の詳細の収集をカスタマイズする

### 請求先情報の収集を設定する

`BillingDetailsCollectionConfiguration` を使用して、PaymentSheet で請求詳細を収集する方法を指定します。

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

UI でデフォルトの請求詳細が収集されない場合でも、それらの詳細を PaymentMethod オブジェクトに関連付けるには、`billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` を `true` に設定します。

#### Kotlin

```kotlin
val billingDetails = PaymentSheet.BillingDetails(
  email = "foo@bar.com"
)
val billingDetailsCollectionConfiguration = BillingDetailsCollectionConfiguration(
  attachDefaultsToPaymentMethod = true,
  name = BillingDetailsCollectionConfiguration.CollectionMode.Always,
  email = BillingDetailsCollectionConfiguration.CollectionMode.Never,
  address = BillingDetailsCollectionConfiguration.AddressCollectionMode.Full,
)
val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Merchant, Inc.")
  .defaultBillingDetails(billingDetails)
  .billingDetailsCollectionConfiguration(billingDetailsCollectionConfiguration)
  .build()
```

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


# React Native

> This is a React Native for when payment-ui is mobile and platform is react-native. View the full page at https://docs.stripe.com/payments/mobile/collect-addresses?payment-ui=mobile&platform=react-native.

請求や配送先の詳細な住所を収集するには、[Address Element](https://docs.stripe.com/payments/mobile/address-element.md) を使用します。

Address Element は次の目的でも使用できます。

- 顧客の[電話番号](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-additional-fields-configuration/index.html)を収集する
- [オートコンプリート](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-configuration/index.html)を有効にする
- 配送先住所を渡して Payment Element に請求先情報を事前入力する

Stripe は、収集した住所情報と決済手段を組み合わせて、*PaymentIntent* (API object that represents your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process) を作成します。
![ユーザーが「配送先住所を追加」オプションを選択した場合の支払いプロセスの例。その後、配送先住所をフォームに追加するための新しい画面が表示されます (住所の入力時にオートコンプリート候補が表示されます)。](https://b.stripecdn.com/docs-statics-srv/assets/android-overview.6061212dc737aa700b79242cb5f77782.png)

## Stripe をセットアップする [サーバー側] [クライアント側]

まず、Stripe アカウントが必要です。[今すぐ登録してください](https://dashboard.stripe.com/register)。

[React Native SDK](https://github.com/stripe/stripe-react-native) はオープンソースであり、詳細なドキュメントが提供されています。内部では、ネイティブの [iOS](https://github.com/stripe/stripe-ios) および [Android](https://github.com/stripe/stripe-android) の SDK を使用します。Stripe の React Native SDK をインストールするには、プロジェクトのディレクトリーで (使用するパッケージマネージャーに応じて) 次のいずれかのコマンドを実行します。

#### yarn

```bash
yarn add @stripe/stripe-react-native
```

#### npm

```bash
npm install @stripe/stripe-react-native
```

次に、その他の必要な依存関係をインストールします。

- iOS の場合は、**ios** ディレクトリに移動して `pod install` を実行し、必要なネイティブ依存関係もインストールしてください。
- Android の場合は、これ以上の依存関係をインストールする必要はありません。

### Stripe の初期化

React Native アプリで Stripe を初期化するには、決済画面を `StripeProvider` コンポーネントでラップするか、`initStripe` 初期化メソッドを使用します。`publishableKey` の API [公開可能キー](https://docs.stripe.com/keys.md#obtain-api-keys)のみが必要です。次の例は、`StripeProvider` コンポーネントを使用して Stripe を初期化する方法を示しています。

```javascript
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  return (
    <StripeProvider
      publishableKey="<<YOUR_PUBLISHABLE_KEY>>"
    >
      // Your app code here
    </StripeProvider>
  );
}
```

> テストおよび開発時には API の[テストキー](https://docs.stripe.com/keys.md#obtain-api-keys)を使用し、アプリの公開時には[本番環境](https://docs.stripe.com/keys.md#test-live-modes)キーを使用します。

## 住所のオートコンプリートの入力候補を設定する

オートコンプリートは iOS ではデフォルトで有効になっていますが、Android でオートコンプリートの入力候補を有効にするには、アプリの `build.gradle` に [Google Places SDK](https://developers.google.com/maps/documentation/places/android-sdk/overview) の依存関係を含める必要があります。

#### Groovy

```groovy
dependencies {
    implementation 'com.google.android.libraries.places:places:2.6.0'
}
```

住所のオートコンプリートの入力候補を使用するには、Google Places API キーが必要です。[Google Places SDK 設定ガイド](https://developers.google.com/maps/documentation/places/android-sdk/cloud-setup)に従って API キーを生成します。

## Address Element を設定する

Address Element では、デフォルト値の表示、許可された国の設定、デザインのカスタマイズなどの詳細を設定できます。詳細については、[利用可能なオプションの一覧](https://github.com/stripe/stripe-react-native/blob/master/src/components/AddressSheet.tsx#L19-L51)をご覧ください。

```jsx
<AddressSheet
  appearance={{
    colors: {
      primary: '#F8F8F2',
      background: '#272822'
    }
  }}
  defaultValues={{
    phone: '111-222-3333',
    address: {
      country: 'United States',
      city: 'San Francisco',
    },
  }}
  additionalFields={{
    phoneNumber: 'required',
  }}
  allowedCountries={['US', 'CA', 'GB']}
  primaryButtonTitle={'Use this address'}
  sheetTitle={'Shipping Address'}
  googlePlacesApiKey={'(optional) YOUR KEY HERE'}
/>
```

## Address Element を表示し詳細を取得する

`visible` プロパティを `true` に設定し、`onSubmit` および `onError` プロパティにコールバックメソッドを追加して、住所の詳細を取得できます。

```jsx
<AddressSheet
  visible={true}
  onSubmit={async (addressDetails) => {
    // Make sure to set `visible` back to false to dismiss the address element.
    setAddressSheetVisible(false);

    // Handle result and update your UI
  }}
  onError={(error) => {
    if (error.code === AddressSheetError.Failed) {
      Alert.alert('There was an error.', 'Check the logs for details.');
      console.log(err?.localizedMessage);
    }
   // Make sure to set `visible` back to false to dismiss the address element.
    setAddressSheetVisible(false);
  }}
/>
```

## Optional: Payment Element で配送先住所を事前入力する

モバイル支払い要素を使用する場合、[defaultShippingDetails](https://github.com/stripe/stripe-react-native/blob/address-element-private-beta/src/types/PaymentSheet.ts#L17) を address 要素で収集する住所に設定します。`defaultShippingDetails` が入力されると、ユーザーには請求先住所が事前に入力され、**Billing address is the same as shipping** チェックボックスが表示されます。`defaultShippingDetails` が入力されたPaymentIntentが確認されると、[shipping](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-shipping) intentプロパティも入力されます

```jsx
const { error } = await initPaymentSheet({
  ...
  defaultShippingDetails: addressDetails,
});
```

## Optional: デザインをカスタマイズする

Address Element をアプリに追加したので、アプリの他の部分のデザインに合うよう外観をカスタマイズできます。[Appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=react-native) を使用し、`<AddressSheet/>` コンポーネントの `appearance` プロパティーで外観を設定できます。

## Optional: デフォルトの請求詳細を設定する

PaymentSheet で収集される請求先情報のデフォルト値を設定するには、`defaultBillingDetails` プロパティを設定します。`PaymentSheet` の各フィールドに、指定した値が事前に読み込まれます。

```javascript
await initPaymentSheet({
  // ...
  defaultBillingDetails: {
      email: 'foo@bar.com',
      address: {
        country: 'US',
      },
  },
});
```

## Optional: 請求先の詳細の収集をカスタマイズする

`billingDetailsCollectionConfiguration` を使用して、PaymentSheet で請求先情報を収集する方法を指定します。

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

支払い方法に必要な値を収集しない場合は、以下を実行する必要があります。

1. `PaymentSheet` によって収集されない値を `defaultBillingDetails` プロパティに関連付けます。
1. `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` を `true` に設定します。

```javascript
await initPaymentSheet({
  // ...
  defaultBillingDetails: {
    email: 'foo@bar.com',
  },
  billingDetailsCollectionConfiguration: {
    name: PaymentSheet.CollectionMode.ALWAYS,
    email: PaymentSheet.CollectionMode.NEVER,
    address: PaymentSheet.AddressCollectionMode.FULL,
    attachDefaultsToPaymentMethod: true
  },
});
```

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