# EPS の支払いを受け付ける

オーストリアで一般的な支払い方法である EPS を受け付ける方法をご紹介します。

# Checkout

> This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/eps/accept-a-payment?payment-ui=checkout.

> Stripe は、通貨、支払い方法の制限、その他のパラメーターを評価することで、適切な支払い方法を顧客に自動的に提示できます。
> 
> - [決済の受け付け](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted)ガイドに従って、[動的な決済手段](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md)を使用するチェックアウトの統合機能を構築します。
- 動的な決済手段を使用しない場合は、チェックアウトの導入で、決済方法を手動で設定するために以下のステップに従ってください。

EPS は [1 回限りの使用](https://docs.stripe.com/payments/payment-methods.md#usage)の決済手段であり、顧客は支払いの[認証](https://docs.stripe.com/payments/payment-methods.md#customer-actions)を求められます。EPS を使用して支払う場合、*顧客* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments)はお客様のウェブサイトからリダイレクトされ、支払いを承認すると、ウェブサイトに戻されます。ここで、お客様は支払いが成功したか失敗したかに関する[即時通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)を受け取ります。

> EPS を使用する際は、[EPS 利用規約](https://stripe.com/eps/legal)に従う必要があります。

## 互換性を判定する

**サポート対象のビジネスの所在地**: Europe, US, CA, NZ, SG, HK, JP, AU, MX

**対応可能な通貨**: `eur`

**取引通貨**: `eur`

**支払いモード**: Yes

**セットアップモード**: No

**サブスクリプションモード**: No

EPS の支払いに対応するには、Checkout セッションが次の条件をすべて満たしている必要があります。

- すべてのラインアイテムの*価格* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions)が、同じ通貨である必要があります。異なる通貨のラインアイテムが存在する場合は、通貨ごとに別の Checkout セッションを作成します。
- 使用できるのは単一の項目だけです (継続的な*サブスクリプション* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis)プランには対応していません)。

## 支払いを受け付ける

> このガイドを使用する前に、まず Checkout で[決済を受け付ける](https://docs.stripe.com/payments/accept-a-payment.md?integration=checkout)ための実装を構築します。

このガイドでは、EPS を有効にする方法について手順を追って説明し、動的な支払い方法を使用して決済を受け付ける場合と支払い方法を手動で設定する場合の違いを示します。

### 支払い方法として EPS を有効にする

新しい [Checkout Session (セッション)](https://docs.stripe.com/api/checkout/sessions.md) を作成する際は、以下を行う必要があります。

1. `EPS` を `payment_method_types` のリストに追加する
1. すべての `line_items` が `eur` 通貨を使用していることを確認する

#### Stripe がオンラインで提供するページ

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=eur" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=eps" \
  --data-urlencode "success_url=https://example.com/success"
```

#### 組み込みフォーム

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=eur" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=eps" \
  --data-urlencode "return_url=https://example.com/return" \
  -d ui_mode=embedded_page
```

### 注文のフルフィルメント

決済受け付け後に、[注文のフルフィルメントを実行](https://docs.stripe.com/checkout/fulfillment.md)する方法を説明します。

## 組み込みをテストする

Checkout の組み込みをテストする際は、支払い方法として EPS を選択して、**支払う**ボタンをクリックします。

## 返金および不審請求の申請を処理する

EPS の返金期間は元の支払いから最長 180 日間です。

不審請求の申請プロセスはありません。顧客は各自の銀行で認証を行います。

## See also

- [Checkout のフルフィルメント](https://docs.stripe.com/checkout/fulfillment.md)
- [Checkout のカスタマイズ](https://docs.stripe.com/payments/checkout/customization.md)


# iOS

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

EPS は [1 回限りの使用](https://docs.stripe.com/payments/payment-methods.md#usage)の決済手段であり、顧客は支払いの[認証](https://docs.stripe.com/payments/payment-methods.md#customer-actions)を求められます。EPS を使用して支払う場合、*顧客* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments)はお客様のウェブサイトからリダイレクトされ、支払いを承認すると、ウェブサイトに戻されます。ここで、お客様は支払いが成功したか失敗したかに関する[即時通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)を受け取ります。

> EPS を使用する際は、[EPS 利用規約](https://stripe.com/eps/legal)に従う必要があります。

## Stripe を設定する [サーバ側] [クライアント側]

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

### サーバ側

この組み込みには、サーバ上に Stripe API と通信するエンドポイントが必要です。サーバから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

### クライアント側

[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. **StripePaymentsUI** 製品を[アプリのターゲット](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 'StripePaymentsUI'
   ```
1. 以下のコマンドを実行します。
   ```bash
   pod install
   ```
1. これ以降は、Xcode でプロジェクトを開く際に、`.xcodeproj` ファイルではなく、必ず `.xcworkspace` ファイルを使用するということを忘れないでください。
1. 今後、SDK の最新バージョンに更新するには、以下を実行します。
   ```bash
   pod update StripePaymentsUI
   ```

#### 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/StripePaymentsUI/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. **StripePaymentsUI.xcframework** を、Xcode プロジェクトの **General (一般) ** 設定の **Embedded Binaries (埋め込みバイナリー)** セクションにドラッグします。**Copy items if needed (必要に応じてアイテムをコピーする)** を必ず選択してください。
1. [こちら](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/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 UIKitimportStripePaymentsUI

@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)キーを使用します。

## PaymentIntent を作成する [サーバ側] [クライアント側]

[PaymentIntent (支払いインテント)](https://docs.stripe.com/api/payment_intents/object.md) は、顧客から支払いを回収する意図を示し、支払いプロセスのライフサイクルを追跡します。

### サーバ側

サーバーで `PaymentIntent` を作成し、回収する `amount` と `eur` 通貨を指定します (EPS は他の通貨に対応していません)。既存の [Payment Intents](https://docs.stripe.com/payments/payment-intents.md) のシステムがある場合は、`eps` を[決済手段タイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)のリストに追加します。

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=eur \
  -d "payment_method_types[]=eps"
```

### クライアント側

クライアントで、サーバの PaymentIntent をリクエストし、その client secret を保存します。

#### Swift

```swift
class CheckoutViewController: UIViewController {
    var paymentIntentClientSecret: String?

    func startCheckout() {
        // Request a PaymentIntent from your server and store its client secret
    }
}
```

## 支払い方法の詳細を収集する [クライアント側]

アプリで顧客の氏名を収集します。

#### Swift

```swift
class CheckoutViewController: UIViewController {
    private let nameField: UITextField = UITextField()
    // ...

    override func viewDidLoad() {
        super.viewDidLoad()

        nameField.textContentType = .name
        nameField.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(nameField)

        // ...
    }

    // ...
}
```

## Stripe に支払いを送信する [クライアント側]

作成した PaymentIntent から client secret を取得し、請求先情報を使用して [STPPaymentMethodBillingDetails](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentMethodBillingDetails.html) を作成し、[STPPaymentHandler confirmPayment](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentHandler.html#/c:@M@StripePayments@objc\(cs\)STPPaymentHandler\(im\)confirmPayment:withAuthenticationContext:completion:) を呼び出します。これにより、Webview が表示され、顧客はそこで支払いを完了できます。完了後、支払い結果とともに、完了ブロックが呼び出されます。

#### Swift

```swift
let paymentIntentParams = STPPaymentIntentParams(clientSecret: paymentIntentClientSecret)
let billingDetails = STPPaymentMethodBillingDetails()
billingDetails.name = nameField.text

// EPS doesn't require additional parameters so we only need to pass the init-ed
// STPPaymentMethoEPSParams instance to STPPaymentMethodParams
let eps = STPPaymentMethodEPSParams()
let paymentMethodParams = STPPaymentMethodParams(eps: eps, billingDetails: billingDetails, metadata: nil)

paymentIntentParams.paymentMethodParams = paymentMethodParams

STPPaymentHandler.shared().confirmPayment(paymentIntentParams,
                                          with: self)
{ (handlerStatus, paymentIntent, error) in
    switch handlerStatus {
    case .succeeded:
        // Payment succeeded
        // ...

    case .canceled:
        // Payment canceled
        // ...

    case .failed:
        // Payment failed
        // ...

    @unknown default:
        fatalError()
    }
}
```

## Optional: 支払い後のイベントを処理する

支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。ダッシュボード、カスタム *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。[サポートされているすべての決済手段の違い](https://stripe.com/payments/payment-methods-guide)をご確認ください。

### イベントを受信し、ビジネスアクションを実行する

ビジネスアクションを受信して実行するためのいくつかのオプションがあります。

#### 手動

Stripe ダッシュボードは、すべての Stripe での支払いの確認、メール領収書の送信、入金処理、または失敗した支払いの再試行に使用できます。

- [ダッシュボードでテスト支払いを確認する](https://dashboard.stripe.com/test/payments)

#### カスタムコード

Webhook ハンドラを作成してイベントをリッスンし、非同期型のカスタムの支払いフローを作成します。Stripe CLI を使用して、ローカルで Webhook 組み込みのテストとデバッグを行います。

- [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook)

#### 事前構築のアプリ

[オートメーション](https://stripe.partners/?f_category=automation)や[マーケティングとセールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを、パートナーアプリケーションとの連携によって処理します。


# 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/eps/accept-a-payment?payment-ui=mobile&platform=android.

EPS は [1 回限りの使用](https://docs.stripe.com/payments/payment-methods.md#usage)の決済手段であり、顧客は支払いの[認証](https://docs.stripe.com/payments/payment-methods.md#customer-actions)を求められます。EPS を使用して支払う場合、*顧客* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments)はお客様のウェブサイトからリダイレクトされ、支払いを承認すると、ウェブサイトに戻されます。ここで、お客様は支払いが成功したか失敗したかに関する[即時通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)を受け取ります。

> EPS を使用する際は、[EPS 利用規約](https://stripe.com/eps/legal)に従う必要があります。

## Stripe を設定する [サーバ側] [クライアント側]

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

### サーバ側

この組み込みには、サーバ上に Stripe API と通信するエンドポイントが必要です。サーバから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

### クライアント側

[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.3.0")
  // Include the financial connections SDK to support US bank account as a payment method
  implementation("com.stripe:financial-connections:23.3.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)キーを使用します。

Stripe サンプルでは、サーバへの HTTP リクエストの作成に、[OkHttp](https://github.com/square/okhttp) および [GSON](https://github.com/google/gson) も使用します。

## PaymentIntent を作成する [サーバ側] [クライアント側]

[PaymentIntent (支払いインテント)](https://docs.stripe.com/api/payment_intents/object.md) は、顧客から支払いを回収する意図を示し、支払いプロセスのライフサイクルを追跡します。

### サーバ側

サーバーで `PaymentIntent` を作成し、回収する `amount` と `eur` 通貨を指定します (EPS は他の通貨に対応していません)。既存の [Payment Intents](https://docs.stripe.com/payments/payment-intents.md) のシステムがある場合は、`eps` を[決済手段タイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)のリストに追加します。

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=eur \
  -d "payment_method_types[]=eps"
```

### クライアント側

クライアントで、サーバの PaymentIntent をリクエストし、その client secret を保存します。

#### Kotlin

```kotlin
class EpsPaymentActivity: AppCompatActivity() {
    private lateinit var paymentIntentClientSecret: String

    override fun onCreate(savedInstanceState: Bundle?) {
        // ...
        startCheckout()
    }


    private fun startCheckout() {
        // Request a PaymentIntent from your server and store its client secret
    }
}
```

## 支払い方法の詳細を収集する [クライアント側]

アプリでは、顧客の氏名を収集し、詳細情報を使用して `PaymentMethodCreateParams` を作成します。

#### Kotlin

```kotlin
val billingDetails = PaymentMethod.BillingDetails(name = "Jenny Rosen")
val paymentMethodCreateParams = PaymentMethodCreateParams.createEps(billingDetails)
```

## Stripe に支払いを送信する [クライアント側]

作成した PaymentIntent から client secret を取得し、[PaymentLauncher confirm](https://stripe.dev/stripe-android/payments-core/com.stripe.android.payments.paymentlauncher/-payment-launcher/index.html#74063765%2FFunctions%2F-1622557690) を呼び出します。これにより、Webview が表示され、顧客はここで支払いを完了できます。完了後、支払い結果とともに `onPaymentResult` が呼び出されます。

#### Kotlin

```kotlin
class EpsPaymentActivity : AppCompatActivity() {
    // ...
    private lateinit var paymentIntentClientSecret: String
    private val paymentLauncher: PaymentLauncher by lazy {
        val paymentConfiguration = PaymentConfiguration.getInstance(applicationContext)
        PaymentLauncher.Companion.create(
            this,
            paymentConfiguration.publishableKey,
            paymentConfiguration.stripeAccountId,
            ::onPaymentResult
        )
    }

    private fun startCheckout() {
        // ...

        val confirmParams = ConfirmPaymentIntentParams
                .createWithPaymentMethodCreateParams(
                  paymentMethodCreateParams = paymentMethodCreateParams,
                  clientSecret = paymentIntentClientSecret
                )
        paymentLauncher.confirm(confirmParams)
    }

    private fun onPaymentResult(paymentResult: PaymentResult) {
        when (paymentResult) {
            is PaymentResult.Completed -> {
                // show success UI
            }
            is PaymentResult.Canceled -> {
                // handle cancel flow
            }
            is PaymentResult.Failed -> {
                // handle failures
                // (for example, the customer might need to choose a new payment
                // method)
            }
        }
    }
}
```

## Optional: 支払い後のイベントを処理する

支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。ダッシュボード、カスタム *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。[サポートされているすべての決済手段の違い](https://stripe.com/payments/payment-methods-guide)をご確認ください。

### イベントを受信し、ビジネスアクションを実行する

ビジネスアクションを受信して実行するためのいくつかのオプションがあります。

#### 手動

Stripe ダッシュボードは、すべての Stripe での支払いの確認、メール領収書の送信、入金処理、または失敗した支払いの再試行に使用できます。

- [ダッシュボードでテスト支払いを確認する](https://dashboard.stripe.com/test/payments)

#### カスタムコード

Webhook ハンドラを作成してイベントをリッスンし、非同期型のカスタムの支払いフローを作成します。Stripe CLI を使用して、ローカルで Webhook 組み込みのテストとデバッグを行います。

- [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook)

#### 事前構築のアプリ

[オートメーション](https://stripe.partners/?f_category=automation)や[マーケティングとセールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを、パートナーアプリケーションとの連携によって処理します。


# 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/eps/accept-a-payment?payment-ui=mobile&platform=react-native.

EPS は [1 回限りの使用](https://docs.stripe.com/payments/payment-methods.md#usage)の決済手段であり、顧客は支払いの[認証](https://docs.stripe.com/payments/payment-methods.md#customer-actions)を求められます。EPS を使用して支払う場合、*顧客* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments)はお客様のウェブサイトからリダイレクトされ、支払いを承認すると、ウェブサイトに戻されます。ここで、お客様は支払いが成功したか失敗したかに関する[即時通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)を受け取ります。

> EPS を使用する際は、[EPS 利用規約](https://stripe.com/eps/legal)に従う必要があります。

## Stripe を設定する [サーバ側] [クライアント側]

### サーバ側

この組み込みには、Stripe API と通信するエンドポイントがサーバ上に必要です。Stripe の公式ライブラリを使用して、サーバから Stripe API にアクセスします。

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

### クライアント側

[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 の場合は、依存関係をインストールする必要はありません。

> [公式の TypeScript ガイド](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project)に従って TypeScript のサポートを追加することをお勧めします。

### Stripe の初期化

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

```jsx
import { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}
```

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

## PaymentIntent を作成する [サーバ側] [クライアント側]

[PaymentIntent (支払いインテント)](https://docs.stripe.com/api/payment_intents/object.md) は、顧客から支払いを回収する意図を示し、支払いプロセスのライフサイクルを追跡します。

### サーバ側

サーバーで `PaymentIntent` を作成し、回収する `amount` と `eur` 通貨を指定します (EPS は他の通貨に対応していません)。既存の [Payment Intents](https://docs.stripe.com/payments/payment-intents.md) のシステムがある場合は、`eps` を[決済手段タイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)のリストに追加します。

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=eur \
  -d "payment_method_types[]=eps"
```

### クライアント側

クライアントで、サーバの PaymentIntent をリクエストし、その client secret を保存します。

```javascript
const fetchPaymentIntentClientSecret = async () => {
  const response = await fetch(`${API_URL}/create-payment-intent`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      currency: 'eur',
      payment_method_types: ['eps'],
    }),
  });
  const { clientSecret, error } = await response.json();

  return { clientSecret, error };
};
```

## 支払い方法の詳細を収集する [クライアント側]

アプリで顧客の氏名を収集します。

```javascript
export default function EpsPaymentScreen() {
  const [name, setName] = useState();

  const handlePayPress = async () => {
    // ...
  };

  return (
    <Screen>
      <TextInput
        placeholder="Name"
        onChange={(value) => setName(value.nativeEvent.text)}
      />
    </Screen>
  );
}
```

## Stripe に支払いを送信する [クライアント側]

作成した PaymentIntent から client secret を取得し、`confirmPayment` をコールします。これにより、WebView が表示され、顧客はここから銀行の Web サイトまたはアプリで支払いを完了できます。完了後、支払い結果によって Promise が解決されます。

```javascript
export default function EPSPaymentScreen() {
  const [name, setName] = useState();

  const handlePayPress = async () => {
    const billingDetails: PaymentMethodCreateParams.BillingDetails = {
      name,
    };
  };

  const { error, paymentIntent } = await confirmPayment(clientSecret, {
    paymentMethodType: 'Eps',
    paymentMethodData: {
      billingDetails,
    }
  });

  if (error) {
    Alert.alert(`Error code: ${error.code}`, error.message);
  } else if (paymentIntent) {
    Alert.alert(
      'Success',
      `The payment was confirmed successfully! currency: ${paymentIntent.currency}`
    );
  }

  return (
    <Screen>
      <TextInput
        placeholder="Name"
        onChange={(value) => setName(value.nativeEvent.text)}
      />
    </Screen>
  );
}
```

## Optional: 支払い後のイベントを処理する

支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。ダッシュボード、カスタム *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。[サポートされているすべての決済手段の違い](https://stripe.com/payments/payment-methods-guide)をご確認ください。

### イベントを受信し、ビジネスアクションを実行する

ビジネスアクションを受信して実行するためのいくつかのオプションがあります。

#### 手動

Stripe ダッシュボードは、すべての Stripe での支払いの確認、メール領収書の送信、入金処理、または失敗した支払いの再試行に使用できます。

- [ダッシュボードでテスト支払いを確認する](https://dashboard.stripe.com/test/payments)

#### カスタムコード

Webhook ハンドラを作成してイベントをリッスンし、非同期型のカスタムの支払いフローを作成します。Stripe CLI を使用して、ローカルで Webhook 組み込みのテストとデバッグを行います。

- [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook)

#### 事前構築のアプリ

[オートメーション](https://stripe.partners/?f_category=automation)や[マーケティングとセールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを、パートナーアプリケーションとの連携によって処理します。

## Optional: ディープリンクを処理する

顧客がアプリを終了すると (Safari やバンキングアプリで認証するなど)、自動的にアプリに戻るための方法を提供します。多くの決済手段タイプで、戻り先 URL の指定が「必須」です。戻り先 URL を有効にしていても、指定がされていないと、戻り先 URL が必要な決済手段をユーザーに提示できません。

戻り先 URL を指定するには、以下のようにします。

1. カスタム URL を[登録](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app#Register-your-URL-scheme)します。ユニバーサルリンクはサポートされていません。
1. カスタム URL を[設定](https://reactnative.dev/docs/linking) します。
1. 以下のように、URL を Stripe SDK に転送するようにルートコンポーネントを設定します。

> Expo を使用している場合は、`app.json` ファイルで[スキームを設定](https://docs.expo.io/guides/linking/#in-a-standalone-app)します。

```jsx
import { useEffect, useCallback } from 'react';
import { Linking } from 'react-native';
import { useStripe } from '@stripe/stripe-react-native';

export default function MyApp() {
  const { handleURLCallback } = useStripe();

  const handleDeepLink = useCallback(
    async (url: string | null) => {
      if (url) {
        const stripeHandled = await handleURLCallback(url);
        if (stripeHandled) {
          // This was a Stripe URL - you can return or add extra handling here as you see fit
        } else {
          // This was NOT a Stripe URL – handle as you normally would
        }
      }
    },
    [handleURLCallback]
  );

  useEffect(() => {
    const getUrlAsync = async () => {
      const initialUrl = await Linking.getInitialURL();
      handleDeepLink(initialUrl);
    };

    getUrlAsync();

    const deepLinkListener = Linking.addEventListener(
      'url',
      (event: { url: string }) => {
        handleDeepLink(event.url);
      }
    );

    return () => deepLinkListener.remove();
  }, [handleDeepLink]);

  return (
    <View>
      <AwesomeAppComponent />
    </View>
  );
}
```

ネイティブ URL スキームの詳細については、[Android](https://developer.android.com/training/app-links/deep-linking) および [iOS](https://developer.apple.com/documentation/xcode/allowing_apps_and_websites_to_link_to_your_content/defining_a_custom_url_scheme_for_your_app) のドキュメントをご覧ください。


# Elements

> This is a Elements for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/eps/accept-a-payment?payment-ui=elements.

> このセクションには*レガシー* (Technology that's no longer recommended)プロダクトについてのコンテンツが含まれています。最新の導入パスについては、代わりに[決済を受け付ける](https://docs.stripe.com/payments/accept-a-payment.md)のガイドを使用する必要があります。Stripe はこのプロダクトを引き続きサポートしていますが、プロダクトが非推奨になった場合にはサポートが終了する可能性があります。

EPS は [1 回限りの使用](https://docs.stripe.com/payments/payment-methods.md#usage)の決済手段であり、顧客は支払いの[認証](https://docs.stripe.com/payments/payment-methods.md#customer-actions)を求められます。EPS を使用して支払う場合、*顧客* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments)はお客様のウェブサイトからリダイレクトされ、支払いを承認すると、ウェブサイトに戻されます。ここで、お客様は支払いが成功したか失敗したかに関する[即時通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)を受け取ります。

> EPS を使用する際は、[EPS 利用規約](https://stripe.com/eps/legal)に従う必要があります。

## Stripe を設定する [サーバ側]

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

アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## PaymentIntent を作成する [サーバ側]

[PaymentIntent (支払いインテント)](https://docs.stripe.com/api/payment_intents/object.md) は、顧客から支払いを回収する意図を示し、支払いプロセスのライフサイクルを追跡します。

サーバーで `PaymentIntent` を作成し、回収する `amount` と `eur` 通貨を指定します (EPS は他の通貨に対応していません)。既存の [Payment Intents](https://docs.stripe.com/payments/payment-intents.md) のシステムがある場合は、`eps` を[決済手段タイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)のリストに追加します。

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=eur \
  -d "payment_method_types[]=eps"
```

### client secret を取得する

PaymentIntent には、*client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。

#### 1 ページのアプリケーション

ブラウザーの `fetch` 関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。

#### Ruby

```ruby
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end
```

その後、クライアント側で JavaScript を使用して client secret を取得します。

```javascript
(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();
```

#### サーバ側のレンダリング

サーバーからクライアントに client secret を渡します。この方法は、アプリケーションがブラウザーへの送信前に静的なコンテンツをサーバーで生成する場合に最適です。

決済フォームに [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を追加します。サーバー側のコードで、PaymentIntent から client secret を取得します。

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the PaymentIntent
  erb :checkout
end
```

## 支払い方法の詳細を収集する [クライアント側]

[Stripe Elements](https://docs.stripe.com/payments/elements.md) を使用してクライアントで支払い情報を収集する準備ができました。Elements は、支払いの詳細を収集するための構築済み UI コンポーネントのセットです。

Stripe Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。組み込みを機能させるには、決済ページのアドレスの先頭を http:// ではなく https:// にする必要があります。

HTTPS を使用せずに実装をテストできます。本番環境で決済を受け付ける準備が整ったら、HTTPS を[有効化](https://docs.stripe.com/security/guide.md#tls)します。

### Stripe Elements を設定する

#### HTML + JS

Stripe Elements は Stripe.js の機能として自動的に使用できるようになります。支払いページに Stripe.js スクリプトを含めるには、HTML ファイルの `head` にこのスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストすることがないようにしてください。

```html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

決済ページで、以下の JavaScript を使用して Elements のインスタンスを作成します。

```javascript
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');
const elements = stripe.elements();
```

### epsBank Element を追加して設定する

> このドキュメントでは、最新バージョンの Stripe.js では使用できなくなった*レガシー* (Technology that's no longer recommended)機能について説明しています。[Payment Element](https://docs.stripe.com/payments/payment-element.md)の使用をお勧めします。これは、40 以上の支払い方法を受け付け、入力を検証し、エラーを処理するウェブ用の UI コンポーネントです。

Elements には、支払いフォーム内での配置場所が必要です。支払いフォームで、一意の ID を持つ空の DOM ノード (コンテナ) を作成し、その ID を Elements に渡します。

#### HTML

```html
<form id="payment-form">
  <div class="form-row">
    <label for="accountholder-name">
      Name
    </label>
    <input id="accountholder-name" name="accountholder-name">
  </div>

  <div class="form-row">
    <!--
      Using a label with a for attribute that matches the ID of the
      Element container enables the Element to automatically gain focus
      when the customer clicks on the label.
    --><label for="eps-bank-element">
      EPS Bank
    </label>
    <div id="eps-bank-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>
  </div>

  <button>Submit Payment</button>

  <!-- Used to display form errors. -->
  <div id="error-message" role="alert"></div>
</form>
```

上記のフォームが読み込まれたら、`epsBank` Element の[インスタンスを作成](https://docs.stripe.com/js/elements_object/create_element?type=epsBank)し、それを上記で作成した Element コンテナにマウントします。

```javascript
const options = {
  // Custom styling can be passed to options when creating an Element
  style: {
    base: {
      padding: '10px 12px',
      color: '#32325d',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      },
    },
  },
};

// Create an instance of the epsBank Element
const epsBank = elements.create('epsBank', options);

// Add an instance of the epsBank Element into
// the `eps-bank-element` <div>
epsBank.mount('#eps-bank-element');
```

Elements は全面的にカスタマイズできます。ご使用のサイトのデザインに合わせて [Elements のスタイルを設定](https://docs.stripe.com/js/elements_object/create_element?type=epsBank#elements_create-options)することで、顧客にシームレスな決済体験を提供できます。Element が選択されているときなど、さまざまな入力状態のスタイルを設定することもできます。

#### React

#### npm

npm パブリックレジストリーから [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) と [Stripe.js ローダー](https://www.npmjs.com/package/@stripe/stripe-js)をインストールします。

```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```

#### umd

Stripe は npm やモジュールを使用しないサイト向けに UMD ビルドも提供しています。

グローバルな `Stripe` 機能をエクスポートする Stripe.js スクリプトと、グローバルな `ReactStripe` オブジェクトをエクスポートする React Stripe.js の UMD ビルドを含めてください。常に **js.stripe.com** から Stripe.js スクリプトを直接読み込むことにより、PCI への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストすることがないようにしてください。

```html
<!-- Stripe.js -->
<script src="https://js.stripe.com/dahlia/stripe.js"></script>

<!-- React Stripe.js development build -->
<script src="https://unpkg.com/@stripe/react-stripe-js@latest/dist/react-stripe.umd.js"></script>

<!-- When you are ready to deploy your site to production, remove the
      above development script, and include the following production build. -->
<script src="https://unpkg.com/@stripe/react-stripe-js@latest/dist/react-stripe.umd.min.js"></script>
```

> [CodeSandbox でのデモ](https://codesandbox.io/s/react-stripe-official-q1loc?fontsize=14&hidenavigation=1&theme=dark)を使用すると、新しいプロジェクトを作成することなく、React Stripe.js を試してみることができます。

### お客様のページへの Stripe.js および Elements の追加

Element コンポーネントを使用するには、決済ページコンポーネントを [Elements プロバイダー](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider)でラップします。公開キーを使用して `loadStripe` を呼び出し、返された `Promise` を `Elements` プロバイダーに渡します。

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';

// Make sure to call `loadStripe` outside of a component's render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

function App() {
  return (
    <Elements stripe={stripePromise}>
      <CheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

### EpsBankElement コンポーネントを追加して設定する

`EpsBankElement` を使用して、顧客が任意の銀行を選択できるようにします。

#### JSX

```jsx
/**
* Use the CSS tab above to style your Element's container.
*/
import React from 'react';
import {EpsBankElement} from '@stripe/react-stripe-js';
import './EpsBankSectionStyles.css'

const EPS_ELEMENT_OPTIONS = {
  // Custom styling can be passed to options when creating an Element
  style: {
    base: {
      padding: '10px 12px',
      color: '#32325d',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      },
    },
  },
};

function EpsBankSection() {
  return (
    <label>
      EPS Bank
      <EpsBankElement options={EPS_ELEMENT_OPTIONS} />
    </label>
  );
};

export default EpsBankSection;
```

Elements は全面的にカスタマイズできます。ご使用のサイトのデザインに合わせて [Elements のスタイルを設定](https://docs.stripe.com/js/elements_object/create_element?type=epsBank#elements_create-options)することで、顧客にシームレスな決済体験を提供できます。Element が選択されているときなど、さまざまな入力状態のスタイルを設定することもできます。

## Stripe に支払いを送信する [クライアント側]

PaymentIntent オブジェクト全体をクライアントに送信するのではなく、[client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を使用します。これは、 Stripe API リクエストを認証する API キーとは異なります。client secret は支払いを完了できるため、慎重に扱う必要があります。記録したり、URL に含めたり、当該の顧客以外に漏洩することがないようにしてください。

#### HTML + JS

[stripe.confirmEpsPayment](https://docs.stripe.com/js/payment_intents/confirm_eps_payment) を使用し、お客様のページからのリダイレクトを処理して支払いを完了します。この関数に [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) を追加して、ユーザーが銀行のウェブサイトまたはモバイルアプリケーションで支払いを完了した後に Stripe がユーザーをリダイレクトする場所を指示します。

```javascript
const form = document.getElementById('payment-form');
const accountholderName = document.getElementById('accountholder-name');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  // Redirects away from the client
  const {error} = await stripe.confirmEpsPayment(
    '{{PAYMENT_INTENT_CLIENT_SECRET}}',
    {
      payment_method: {
        eps: epsBank,
        billing_details: {
          name: accountholderName.value,
        },
      },
      return_url: 'https://example.com/checkout/complete',
    }
  );
});
```

#### React

[stripe.confirmEpsPayment](https://docs.stripe.com/js/payment_intents/confirm_eps_payment) を使用し、お客様のページからのリダイレクトを処理して支払いを完了します。この関数に [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) を追加して、ユーザーが銀行のウェブサイトまたはモバイルアプリケーションで支払いを完了した後に Stripe がユーザーをリダイレクトする場所を指示します。

支払いフォームコンポーネントから `stripe.confirmEpsPayment` を呼び出すには、[useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) フックと [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook) フックを使用します。

フックではなく従来のクラスコンポーネントを使用する場合は、代わりに [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer) を使用します。

#### フック

```jsx
import React from 'react';
import {useStripe, useElements, EpsBankElement} from '@stripe/react-stripe-js';

import EpsBankSection from './EpsBankSection';

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();
    if (!stripe || !elements) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    const epsBank = elements.getElement(EpsBankElement);

    // For brevity, this example is using uncontrolled components for
    // the accountholder's name. In a real world app you will
    // probably want to use controlled components.
    // https://reactjs.org/docs/uncontrolled-components.html
    // https://reactjs.org/docs/forms.html#controlled-components
    const accountholderName = event.target['accountholder-name'];
    const {error} = await stripe.confirmEpsPayment('{CLIENT_SECRET}', {
      payment_method: {
        eps: epsBank,
        billing_details: {
          name: accountholderName.value,
        },
      },
      return_url: 'https://example.com/checkout/complete',
    });

    if (error) {
      // Show error to your customer.
      console.log(error.message);
    }

    // Otherwise the customer will be redirected away from your
    // page to complete the payment with their bank.
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="form-row">
        <label>
          Name
          <input name="accountholder-name" placeholder="Jenny Rosen" required autocomplete />
        </label>
      </div>
      <div className="form-row">
        <EpsBankSection />
      </div>
      <button type="submit" disabled={!stripe}>
        Submit Payment
      </button>
    </form>
  );
}
```

#### クラスコンポーネント

```jsx
import React from 'react';
import {ElementsConsumer, EpsBankElement} from '@stripe/react-stripe-js';

import EpsBankSection from './EpsBankSection';

class CheckoutForm extends React.Component {
  handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();
    const {stripe, elements} = this.props
    if (!stripe || !elements) {
      // Stripe.js hasn't yet loaded.
      // Make  sure to disable form submission until Stripe.js has loaded.
      return;
    }

    const epsBank = elements.getElement(EpsBankElement);

    // For brevity, this example is using uncontrolled components for
    // the accountholder's name. In a real world app you will
    // probably want to use controlled components.
    // https://reactjs.org/docs/uncontrolled-components.html
    // https://reactjs.org/docs/forms.html#controlled-components

    const accountholderName = event.target['accountholder-name'];
    const {error} = await stripe.confirmEpsPayment('{CLIENT_SECRET}', {
      payment_method: {
        eps: epsBank,
        billing_details: {
          name: accountholderName.value,
        },
      },
      return_url: 'https://example.com/checkout/complete',
    });

    if (error) {
      // Show error to your customer.
      console.log(error.message);
    }

    // Otherwise the customer will be redirected away from your
    // page to complete the payment with their bank.
  };

  render() {
    const {stripe} = this.props;

    return (
      <form onSubmit={this.handleSubmit}>
        <div className="form-row">
          <label>
            Name
            <input name="accountholder-name" placeholder="Jenny Rosen" required />
          </label>
        </div>
        <div className="form-row">
          <EpsBankSection />
        </div>
        <button type="submit" disabled={!stripe}>
          Submit Payment
        </button>
      </form>
    );
  }
}

export default function InjectedCheckoutForm() {
  return (
    <ElementsConsumer>
      {({stripe, elements}) => (
        <CheckoutForm stripe={stripe} elements={elements} />
      )}
    </ElementsConsumer>
  );
}
```

顧客が支払いを送信すると、Stripe は顧客を `return_url` にリダイレクトし、以下の URL クエリーパラメーターを含めます。返品ページでは、これらを使用して PaymentIntent のステータスを取得し、顧客に支払いステータスを表示できます。

`return_url` を指定する際に、返品ページで使用する独自のクエリパラメーターを追加することもできます。

| パラメーター                         | 説明                                                                                                                                                                                                                                                                                                             |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent`               | `PaymentIntent` の一意の識別子。                                                                                                                                                                                                                                                                                       |
| `payment_intent_client_secret` | `PaymentIntent` オブジェクトの [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret)。サブスクリプションの実装の場合、この client_secret は [`confirmation_secret`](https://docs.stripe.com/api/invoices/object.md#invoice_object-confirmation_secret) を通じて `Invoice` オブジェクトでも公開されます |

顧客が自社のサイトにリダイレクトされたら、`payment_intent_client_secret` を使用して PaymentIntent をクエリし、顧客に取引ステータスを表示できます。

顧客が支払いの実行に使用した銀行口座の詳細は、生成された Charge の [payment_method_details](https://docs.stripe.com/api/charges/object.md#charge_object-payment_method_details-eps) プロパティで確認することができます。

#### Json

```json
{
  "charges": {
    "data": [
      {"payment_method_details": {
          "eps": {
            "bank": "bank_austria",
            "verified_name": "JENNY ROSEN"
          },
          "type": "eps"
        },
        "id": "src_16xhynE8WzK49JbAs9M21jaR",
        "object": "source",
        "amount": 1099,
        "client_secret": "src_client_secret_UfwvW2WHpZ0s3QEn9g5x7waU",
        "created": 1445277809,
        "currency": "eur",
        "flow": "redirect",
        "livemode": true,
        "statement_descriptor": null,
        "status": "pending",
        "type": "eps",
        "usage": "single_use"
      }
    ],
    "object": "list",
    "has_more": false,
    "url": "/v1/charges?payment_intent=pi_1G1sgdKi6xqXeNtkldRRE6HT"
  },
  "payment_method_options": {
    "eps": {}
  },
  "payment_method_types": [
    "eps"
  ],
  "id": "pi_1G1sgdKi6xqXeNtkldRRE6HT",
  "object": "payment_intent",
  "amount": 1099,
  "client_secret": "pi_1G1sgdKi6xqXeNtkldRRE6HT_secret_h9B56ObhTN72fQiBAuzcVPb2E",
  "confirmation_method": "automatic",
  "created": 1579259303,
  "currency": "eur",
  "livemode": true,
  "next_action": null
}
```

## 組み込みをテストする

テスト API キーを使用して、EPS 銀行リストの中から任意の銀行を選択します。支払いを確定後、テストページにリダイレクトされます。そこには、支払いを成功させるか、失敗させるかを選択するオプションがあります。支払い成功のケースをテストするには、リダイレクトページで支払いを認証します。PaymentIntent が、`requires_action` から `succeeded` に移行します。

ユーザが認証に失敗するケースをテストするには、テスト API キーを使用して任意の銀行を選択します。リダイレクトページで**テスト支払い失敗**をクリックします。PaymentIntent が、`requires_action` から `requires_payment_method`に移行します。

## Optional: 支払い後のイベントを処理する [サーバ側]

支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。ダッシュボード、カスタム *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。[サポートされているすべての決済手段の違い](https://stripe.com/payments/payment-methods-guide)をご確認ください。

### イベントを受信し、ビジネスアクションを実行する

ビジネスアクションを受信して実行するためのいくつかのオプションがあります。

#### 手動

Stripe ダッシュボードは、すべての Stripe での支払いの確認、メール領収書の送信、入金処理、または失敗した支払いの再試行に使用できます。

- [ダッシュボードでテスト支払いを確認する](https://dashboard.stripe.com/test/payments)

#### カスタムコード

Webhook ハンドラを作成してイベントをリッスンし、非同期型のカスタムの支払いフローを作成します。Stripe CLI を使用して、ローカルで Webhook 組み込みのテストとデバッグを行います。

- [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook)

#### 事前構築のアプリ

[オートメーション](https://stripe.partners/?f_category=automation)や[マーケティングとセールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを、パートナーアプリケーションとの連携によって処理します。

## Optional: EPS 銀行 Element の変更を処理する [クライアント側]

EPS 銀行 Element は、顧客が選択した銀行が変更されたときにその銀行を出力します。銀行の値を使用して追加のロジック (たとえば、フォーム検証用のフィールドの要求など) を実行する場合は、変更イベントをリッスンできます。

#### HTML + JS

```javascript
epsBank.on('change', (event) => {
  const bank = event.value;
  // Perform any additional logic here...
});
```

#### React

```jsx
<EpsBankElement onChange={(event) => {
  const bank = event.value;
  // Perform any additional logic here...
}}>
```

変更イベントには、より充実したユーザー体験の構築に役立つパラメーターが他にも含まれています。詳細については、[Stripe.js リファレンス](https://docs.stripe.com/js/element/events/on_change?type=epsBankElement#element_on_change-handler)をご覧ください。

## Optional: EPS リダイレクトを手動で処理する [サーバ側]

`confirmEpsPayment` で EPS リダイレクトと支払いを処理するには、Stripe.js を利用することをお勧めします。ただし、次の方法で顧客を手動でリダイレクトすることもできます。

1. 顧客が支払いを完了した後にリダイレクトされる URL を指定します。
1. オプションで顧客の銀行を指定し、そこに顧客をリダイレクトして支払いをオーソリできるようにします。利用可能な銀行のリストは、[銀行の値](https://docs.stripe.com/payments/eps/accept-a-payment.md#bank-values)セクションで確認できます。

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/confirm \
  -u <<YOUR_SECRET_KEY>>: \
  -d "return_url"="https://example.com/checkout/complete" \
  -d "payment_method_data[type]"="eps" \
  -d "payment_method_data[eps][bank]"="bank_austria"
```

1. `PaymentIntent` のステータスが `requires_action` であることを確認します。`next_action` のタイプは `redirect_to_url` になります。

#### Json

```json
{"next_action": {
    "type": "redirect_to_url",
    "redirect_to_url": {
      "url": "https://hooks.stripe.com/...",
      "return_url": "https://example.com/checkout/complete"
    }
  },
  "charges": {
    "data": [
      {
        "payment_method_details": {
          "eps": {
          "bank": "bank_austria",
          "verified_name": "JENNY ROSEN"
        },
        "type": "eps"
        },
        "id": "src_16xhynE8WzK49JbAs9M21jaR",
        "object": "source",
        "amount": 1099,
        "client_secret": "src_client_secret_UfwvW2WHpZ0s3QEn9g5x7waU",
        "created": 1445277809,
        "currency": "eur",
        "flow": "redirect",
        "livemode": true,
        "statement_descriptor": null,
        "status": "pending",
        "type": "eps",
        "usage": "single_use"
      }
    ],
    "object": "list",
    "has_more": false,
    "url": "/v1/charges?payment_intent=pi_1G1sgdKi6xqXeNtkldRRE6HT"
  },
  "payment_method_options": {
    "eps": {}
  },
  "payment_method_types": [
    "eps"
  ],
  "id": "pi_1G1sgdKi6xqXeNtkldRRE6HT",
  "object": "payment_intent",
  "amount": 1099,
  "client_secret": "pi_1G1sgdKi6xqXeNtkldRRE6HT_secret_h9B56ObhTN72fQiBAuzcVPb2E",
  "confirmation_method": "automatic",
  "created": 1579259303,
  "currency": "eur",
  "livemode": true
}
```

1. `next_action` プロパティで指定された URL に顧客をリダイレクトします。

```javascript
const action = intent.next_action;
if (action && action.type === 'redirect_to_url') {
  window.location = action.redirect_to_url.url;
}
```

支払いプロセスを完了した顧客は、`return_url` の指定先に送られます。`payment_intent` と `payment_intent_client_secret` の URL クエリパラメーターが含まれ、上記のように独自のクエリパラメーターを渡すことができます。

## Optional: 顧客の銀行設定を保存する [クライアント側]

EPS *PaymentMethods* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) を再利用したり、顧客に保存したりすることはできません。顧客が決済フローでこの支払い方法を選択するたびに、EPS 銀行 Element を使用して新たに EPS PaymentMethod を作成する必要があります。顧客の銀行設定を追跡するには、お客様のデータベースに顧客の設定を保存するか、*Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) オブジェクトの `metadata` プロパティーを使用します。

Element 作成時の顧客の銀行設定を、EPS 銀行 Element に事前入力できます。

#### HTML + JS

```javascript
const options = {
  // Include the bank name along with any custom stylingvalue: "bank_austria",
  style: {
    base: {
      padding: '10px 12px',
      color: '#32325d',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      },
    },
  },
}

// Create an instance of the Element
const epsBank = elements.create('epsBank', options);

// Mount the Element
epsBank.mount('#eps-bank-element');TODO: highlight: [3]
```

#### React

```jsx
const EPS_ELEMENT_OPTIONS = {
  // Include the bank name along with any custom stylingvalue: "bank_austria",
  style: {
    base: {
      padding: '10px 12px',
      color: '#32325d',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      },
    },
  },
}

<EpsBankElement options={EPS_ELEMENT_OPTIONS} />
```

## 銀行の値

| 銀行名                                       | 値                                       |
| ----------------------------------------- | --------------------------------------- |
| Ärzte- und Apothekerbank                  | arzte_und_apotheker_bank                |
| Austrian Anadi Bank AG                    | austrian_anadi_bank_ag                  |
| Bank Austria                              | bank_austria                            |
| Bankhaus Carl Spängler & Co.AG            | bankhaus_carl_spangler                  |
| Bankhaus Schelhammer & Schattera AG       | bankhaus_schelhammer_und_schattera_ag   |
| BAWAG P.S.K. AG                           | bawag_psk_ag                            |
| BKS Bank AG                               | bks_bank_ag                             |
| Brüll Kallmus Bank AG                     | brull_kallmus_bank_ag                   |
| BTV VIER LÄNDER BANK                      | btv_vier_lander_bank                    |
| Capital Bank Grawe Gruppe AG              | capital_bank_grawe_gruppe_ag            |
| Dolomitenbank                             | dolomitenbank                           |
| Easybank AG                               | easybank_ag                             |
| Erste Bank und Sparkassen                 | erste_bank_und_sparkassen               |
| Hypo Alpe-Adria-Bank International AG     | hypo_alpeadriabank_international_ag     |
| HYPO NOE LB für Niederösterreich u. Wien  | hypo_noe_lb_fur_niederosterreich_u_wien |
| HYPO Oberösterreich, Salzburg, Steiermark | hypo_oberosterreich_salzburg_steiermark |
| Hypo Tirol Bank AG                        | hypo_tirol_bank_ag                      |
| Hypo Vorarlberg Bank AG                   | hypo_vorarlberg_bank_ag                 |
| HYPO-BANK BURGENLAND Aktiengesellschaft   | hypo_bank_burgenland_aktiengesellschaft |
| Marchfelder Bank                          | marchfelder_bank                        |
| Oberbank AG                               | oberbank_ag                             |
| Raiffeisen Bankengruppe Österreich        | raiffeisen_bankengruppe_osterreich      |
| Schoellerbank AG                          | schoellerbank_ag                        |
| Sparda-Bank Wien                          | sparda_bank_wien                        |
| Volksbank Gruppe                          | volksbank_gruppe                        |
| Volkskreditbank AG                        | volkskreditbank_ag                      |
| VR-Bank Braunau                           | vr_bank_braunau                         |