# iDEAL | Wero の決済を受け付ける

オランダで良く使われている決済手段である、iDEAL | Wero を受け付ける方法を紹介します。

# Checkout

> This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/ideal/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)を使用するチェックアウトの統合機能を構築します。
- 動的な決済手段を使用しない場合は、チェックアウトの導入で、決済方法を手動で設定するために以下のステップに従ってください。

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

> iDEAL | Wero を受け付けるには、Stripe の [iDEAL 利用規約](https://stripe.com/ideal/legal)に準拠する必要があります。

## 互換性の判定

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

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

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

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

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

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

iDEAL | Wero 決済に対応するには、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)はすべて、ユーロ (通貨コード `eur`) で示す必要があります。

## 支払いの受け付け

> このガイドは、Checkout システムに基本的な[決済の受け付け](https://docs.stripe.com/payments/accept-a-payment.md?ui=stripe-hosted)が存在することを前提として作成されています。

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

### 決済手段として iDEAL | Wero を有効にする

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

1. `ideal` を `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]"=ideal \
  --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]"=ideal \
  --data-urlencode return_url="https://example.com/return" \
  -d ui_mode=embedded
```

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

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

## 組み込みのテスト

Checkout の組み込みをテストする際は、決済手段として iDEAL | Wero を選択して、**決済**ボタンをクリックします。

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

iDEAL | Wero の返金期間は元の決済後、最長 180 日間です。

不審請求の申請プロセスはありません。顧客は当該の銀行の認証を受けます。

## See also

- [iDEAL | Wero の詳細](https://docs.stripe.com/payments/ideal.md)
- [Checkout のフルフィルメント](https://docs.stripe.com/checkout/fulfillment.md)
- [決済フローをカスタマイズする](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/ideal/accept-a-payment?payment-ui=mobile&platform=ios.

> サーバー側での手動確定を使用する必要がある場合、またはお使いの実装で決済手段を別途表示する必要がある場合を除き、[決済を受け付ける](https://docs.stripe.com/payments/accept-a-payment.md)ガイドに従うことをお勧めします。すでに Elements との連携が完了している場合は、[Payment Element 移行ガイド](https://docs.stripe.com/payments/payment-element/migration.md)をご覧ください。

アプリで iDEAL | Wero を受け付ける際は、WebView を表示して顧客を銀行のオンラインポータルに転送し、そこで顧客が決済をオーソリします。承認後に顧客がアプリに戻ると、決済が成功したか失敗したかがお客様に[直ちに通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)されます。

> iDEAL | Wero を受け付けるには、Stripe の [iDEAL 利用規約](https://stripe.com/ideal/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` を作成し、徴収する金額と `eur` 通貨を指定します (iDEAL | Wero は他の通貨に対応していません)。iDEAL | Wero には最少の決済金額はないため、決済`金額`の値は最低 1 にすることができます。すでに [Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) を使用した組み込みがある場合は、`PaymentIntent` の[決済手段タイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)のリストに `ideal` を追加します。

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

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)) を返すだけです。PaymentIntent の client secret は、支払い額などの機密情報の操作を許可することなく、クライアントで支払いを*確定* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects)し、支払い情報の詳細を更新できる一意のキーです。

### クライアント側

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

#### Swift

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

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

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

アプリで顧客の氏名を収集します。この詳細を用いて [STPPaymentIntentParams](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentIntentParams.html) オブジェクトを作成します。

#### Swift

```swift
let billingDetails = STPPaymentMethodBillingDetails()
billingDetails.name = "Jane Doe"
```

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

ステップ 2 で作成した PaymentIntent から client secret を取得し、[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)
paymentIntentParams.paymentMethodParams = STPPaymentMethodParams(billingDetails: billingDetails,
                                                                 metadata: nil)

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

    case .canceled:
        // Payment was cancelled

    case .failed:
        // Payment failed

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

## 導入をテストする

[テスト API キー](https://docs.stripe.com/keys.md#test-live-modes)を使用して PaymentIntent を確定します。確定すると、決済を承認または失敗させるオプションのあるテストページにリダイレクトされます。

- **Authorize test payment (テスト支払いをオーソリする)** をクリックして、支払い成功のケースをテストします。PaymentIntent が `requires_action` から `succeeded` に変わります。
- **Fail test payment (テスト支払いを失敗させる)** をクリックして、認証失敗のケースをテストします。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)をご確認ください。

- **ダッシュボードでイベントを手動で処理する**

  ダッシュボードを使用して、テスト決済を[ダッシュボードで表示](https://dashboard.stripe.com/test/payments)したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。

- **Custom Webhook を構築する**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **構築済みアプリを導入する**

  パートナーアプリケーションを統合することで、[自動化](https://stripe.partners/?f_category=automation)や[マーケティング/セールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを処理します。

## 取引銀行

| 銀行名                     | 値              |
| ----------------------- | -------------- |
| ABN AMRO                | `abn_amro`     |
| ASN Bank                | `asn_bank`     |
| Bunq                    | `bunq`         |
| ING                     | `ing`          |
| Knab                    | `knab`         |
| N26                     | `n26`          |
| Nationale-Nederlanden   | `nn`           |
| Rabobank                | `rabobank`     |
| Revolut                 | `revolut`      |
| RegioBank               | `regiobank`    |
| SNS Bank (De Volksbank) | `sns_bank`     |
| Triodos Bank            | `triodos_bank` |
| Van Lanschot            | `van_lanschot` |
| Yoursafe                | `yoursafe`     |


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

> サーバー側での手動確定を使用する必要がある場合、またはお使いの実装で決済手段を別途表示する必要がある場合を除き、[決済を受け付ける](https://docs.stripe.com/payments/accept-a-payment.md)ガイドに従うことをお勧めします。すでに Elements との連携が完了している場合は、[Payment Element 移行ガイド](https://docs.stripe.com/payments/payment-element/migration.md)をご覧ください。

アプリで iDEAL | Wero を受け付ける際は、WebView を表示して顧客を銀行のオンラインポータルに転送し、そこで顧客が決済をオーソリします。承認後に顧客がアプリに戻ると、決済が成功したか失敗したかがお客様に[直ちに通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)されます。

> iDEAL | Wero を受け付けるには、Stripe の [iDEAL 利用規約](https://stripe.com/ideal/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.0.2")
  // Include the financial connections SDK to support US bank account as a payment method
  implementation("com.stripe:financial-connections:23.0.2")
}
```

> 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` を作成し、徴収する金額と `eur` 通貨を指定します (iDEAL | Wero は他の通貨に対応していません)。iDEAL | Wero には最少の決済金額はないため、決済`金額`の値は最低 1 にすることができます。すでに [Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) を使用した組み込みがある場合は、`PaymentIntent` の[決済手段タイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)のリストに `ideal` を追加します。

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

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)) を返すだけです。PaymentIntent の client secret は、支払い額などの機密情報の操作を許可することなく、クライアントで支払いを*確定* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects)し、支払い情報の詳細を更新できる一意のキーです。

### クライアント側

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

#### Kotlin

```kotlin
class CheckoutActivity: 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](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-payment-method-create-params/index.html) オブジェクトを作成します。

#### Kotlin

```kotlin
val paymentMethodCreateParams = PaymentMethodCreateParams.create(
  ideal = PaymentMethodCreateParams.Ideal(null),
  billingDetails = PaymentMethod.BillingDetails(
    name = "Jane Doe"
  )
)
```

## 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 が表示され、顧客は銀行のウェブサイトまたはアプリで支払いを完了できます。完了後、支払い結果とともに完了ブロックが呼び出されます。

#### Kotlin

```kotlin
class CheckoutActivity : 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 may need to choose a new payment
                // method)
            }
        }
    }
}
```

## 導入をテストする

[テスト API キー](https://docs.stripe.com/keys.md#test-live-modes)を使用して PaymentIntent を確定します。確定すると、決済を承認または失敗させるオプションのあるテストページにリダイレクトされます。

- **Authorize test payment (テスト支払いをオーソリする)** をクリックして、支払い成功のケースをテストします。PaymentIntent が `requires_action` から `succeeded` に変わります。
- **Fail test payment (テスト支払いを失敗させる)** をクリックして、認証失敗のケースをテストします。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)をご確認ください。

- **ダッシュボードでイベントを手動で処理する**

  ダッシュボードを使用して、テスト決済を[ダッシュボードで表示](https://dashboard.stripe.com/test/payments)したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。

- **Custom Webhook を構築する**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **構築済みアプリを導入する**

  パートナーアプリケーションを統合することで、[自動化](https://stripe.partners/?f_category=automation)や[マーケティング/セールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを処理します。

## 取引銀行

| 銀行名                     | 値              |
| ----------------------- | -------------- |
| ABN AMRO                | `abn_amro`     |
| ASN Bank                | `asn_bank`     |
| Bunq                    | `bunq`         |
| ING                     | `ing`          |
| Knab                    | `knab`         |
| N26                     | `n26`          |
| Nationale-Nederlanden   | `nn`           |
| Rabobank                | `rabobank`     |
| Revolut                 | `revolut`      |
| RegioBank               | `regiobank`    |
| SNS Bank (De Volksbank) | `sns_bank`     |
| Triodos Bank            | `triodos_bank` |
| Van Lanschot            | `van_lanschot` |
| Yoursafe                | `yoursafe`     |


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

> サーバー側での手動確定を使用する必要がある場合、またはお使いの実装で決済手段を別途表示する必要がある場合を除き、[決済を受け付ける](https://docs.stripe.com/payments/accept-a-payment.md)ガイドに従うことをお勧めします。すでに Elements との連携が完了している場合は、[Payment Element 移行ガイド](https://docs.stripe.com/payments/payment-element/migration.md)をご覧ください。

アプリで iDEAL | Wero を受け付ける際は、WebView を表示して顧客を銀行のオンラインポータルに転送し、そこで顧客が決済をオーソリします。承認後に顧客がアプリに戻ると、決済が成功したか失敗したかがお客様に[直ちに通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)されます。

> iDEAL | Wero を受け付けるには、Stripe の [iDEAL 利用規約](https://stripe.com/ideal/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` を作成し、徴収する金額と `eur` 通貨を指定します (iDEAL | Wero は他の通貨に対応していません)。iDEAL | Wero には最少の決済金額はないため、決済`金額`の値は最低 1 にすることができます。すでに [Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) を使用した組み込みがある場合は、`PaymentIntent` の[決済手段タイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)のリストに `ideal` を追加します。

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

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)) を返します。PaymentIntent の client secret は、支払い額などの機密情報の操作を許可することなく、クライアントで支払いを*確定* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects)し、支払い情報の詳細を更新できる一意のキーです。

### クライアント側

クライアント側で、サーバーの 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({
      email,
      currency: 'eur',
      payment_method_types: ['ideal'],
    }),
  });
  const {clientSecret, error} = await response.json();

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

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

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

```javascript
export default function IdealPaymentScreen() {
  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 IdealPaymentScreen() {
  const [name, setName] = useState();

  const handlePayPress = async () => {
    const {clientSecret} = await fetchPaymentIntentClientSecret();

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

    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>{/* ... */}</Screen>;
}
```

## 導入をテストする

[テスト API キー](https://docs.stripe.com/keys.md#test-live-modes)を使用して PaymentIntent を確定します。確定すると、決済を承認または失敗させるオプションのあるテストページにリダイレクトされます。

- **Authorize test payment (テスト支払いをオーソリする)** をクリックして、支払い成功のケースをテストします。PaymentIntent が `requires_action` から `succeeded` に変わります。
- **Fail test payment (テスト支払いを失敗させる)** をクリックして、認証失敗のケースをテストします。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)をご確認ください。

- **ダッシュボードでイベントを手動で処理する**

  ダッシュボードを使用して、テスト決済を[ダッシュボードで表示](https://dashboard.stripe.com/test/payments)したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。

- **Custom Webhook を構築する**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **構築済みアプリを導入する**

  パートナーアプリケーションを統合することで、[自動化](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) のドキュメントをご覧ください。

## 取引銀行

| 銀行名                     | 値              |
| ----------------------- | -------------- |
| ABN AMRO                | `abn_amro`     |
| ASN Bank                | `asn_bank`     |
| Bunq                    | `bunq`         |
| ING                     | `ing`          |
| Knab                    | `knab`         |
| N26                     | `n26`          |
| Nationale-Nederlanden   | `nn`           |
| Rabobank                | `rabobank`     |
| Revolut                 | `revolut`      |
| RegioBank               | `regiobank`    |
| SNS Bank (De Volksbank) | `sns_bank`     |
| Triodos Bank            | `triodos_bank` |
| Van Lanschot            | `van_lanschot` |
| Yoursafe                | `yoursafe`     |


# Elements

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

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

[Payment Element](https://docs.stripe.com/payments/payment-element.md) を使用して、ウェブサイトまたはアプリケーションにカスタム Stripe 決済フォームを埋め込みます。Payment Element を使用すると、iDEAL | Wero やその他の決済方法に自動的に対応できます。詳細設定とカスタマイズについては、[決済の受け付け](https://docs.stripe.com/payments/accept-a-payment.md)組み込みガイドをご覧ください。

> iDEAL | Wero を受け付けるには、Stripe の [iDEAL 利用規約](https://stripe.com/ideal/legal)に準拠する必要があります。

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

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

アプリケーションから 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'
```

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

A [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) is an object that represents your intent to collect payment from a customer and tracks the lifecycle of the payment process through each stage. First, create a `PaymentIntent` on your server and specify the amount to collect and the `eur` currency (iDEAL | Wero doesn’t support other currencies). iDEAL | Wero has no minimum charge amount, so the payment `amount` value can be as low as 1. If you already have an integration using the [Payment Intents API](https://docs.stripe.com/payments/payment-intents.md), add `ideal` to the list of [payment method types](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) for your `PaymentIntent`.

#### ダッシュボードから決済手段を管理する

金額と通貨を使用してサーバー上に PaymentIntent を作成します。最新バージョンの API では、Stripe はデフォルトでその機能を有効にするため、`automatic_payment_methods` パラメーターの指定はオプションです。決済方法は[ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)から管理できます。Stripe は、取引金額、通貨、決済フローなどの要因に基づいて、対象となる決済方法を決定します。[決済方法の設定](https://dashboard.stripe.com/settings/payment_methods)ページで、**iDEAL | Wero** がオンになっていることを確認します。

クライアント側ではなく、信頼できる環境のサーバー側で常に支払い金額を指定してください。これにより、悪意のある顧客が価格を操作できないようにします。

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

#### 決済手段を手動でリストアップする

ダッシュボードを使用しない場合、または支払い方法を手動で指定する場合は、`payment_method_types` 属性を使用して一覧表示することができます。

金額、通貨、支払い方法のリストを使用して、サーバーで PaymentIntent を作成します。支払い額は常に、クライアント側ではなく、信頼性の高い環境であるサーバー側で決定してください。これにより、悪意のある顧客が価格を操作できないようにします。

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

### 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 %>">
  <div id="payment-element">
    <!-- placeholder for Elements -->
  </div>
  <button id="submit">Submit</button>
</form>
```

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

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

[Payment Element](https://docs.stripe.com/payments/payment-element.md) を使用してクライアント側で支払い詳細を収集します。Payment Element は事前構築された UI コンポーネントであり、さまざまな決済手段の詳細の収集をシンプルにします。

Payment Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。一部の支払い方法では、支払いを確定するために別のページにリダイレクトする必要があるため、Payment Element を別の iframe 内に配置しないでください。

iframe を使用して Apple Pay または Google Pay を受け付けたい場合は、iframe の [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) 属性を `"payment *"` と等しく設定する必要があります。

構築済みのシステムを機能させるには、決済ページのアドレスの先頭を `http://` ではなく `https://` にする必要があります。HTTPS を使用しなくてもシステムをテストできますが、本番環境で決済を受け付ける準備が整ったら、必ず、HTTPS を[有効](https://docs.stripe.com/security/guide.md#tls)にしてください。

#### HTML + JS

### Stripe.js を設定する

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

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

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

```javascript
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');
```

### Payment Element を支払いページに追加する

Payment Element を決済ページに配置する場所が必要です。決済フォームで、一意の ID を持つ空の DOM ノード (コンテナー) を作成します。

```html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>
```

前のフォームが読み込まれたら、Payment Element のインスタンスを作成して、それをコンテナーの DOM ノードにマウントします。[Elements](https://docs.stripe.com/js/elements_object/create) インスタンスを作成する際に、前のステップからの [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を `options` に渡します。

client secret は支払いを完了できるため、慎重に取り扱う必要があります。記録したり、URL に埋め込んだり、当該の顧客以外に漏洩することがないようにしてください。

```javascript
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous stepconst elements = stripe.elements(options);
// Optional: Autofill user's saved payment methods. If the customer's
// email is known when the page is loaded, you can pass the email
// to the linkAuthenticationElement on mount:
//
//   linkAuthenticationElement.mount("#link-authentication-element",  {
//     defaultValues: {
//       email: 'jenny.rosen@example.com',
//     }
//   })

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

```

#### React

### Stripe.js を設定する

次の 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
```

### Elements プロバイダーを支払いページに追加して設定する

Payment Element コンポーネントを使用するには、決済ページコンポーネントを [Elements プロバイダー](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider)でラップします。公開キーを使用して `loadStripe` を呼び出し、返された `Promise` を `Elements` プロバイダーに渡します。加えて、前のステップの [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を `options` にして `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() {
  const options = {
    // passing the client secret obtained in step 3
    clientSecret: '{{CLIENT_SECRET}}',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

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

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

### Payment Element コンポーネントを追加する

`PaymentElement` コンポーネントを使用して、フォームを構築します。

```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  return (
    <form>
      // Optional: Autofill user's saved payment methods. If the customer's
      // email is known when the page is loaded, you can pass the email
      // to the linkAuthenticationElement
      //
      // <LinkAuthenticationElement id="link-authentication-element"
        // Prefill the email field like so:
        // options={{defaultValues: {email: 'foo@bar.com'}}}
      // /><PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;
```

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

Payment Element からの詳細を指定して [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) を使用し、支払いを完了します。ユーザーが支払いを完了した後に Stripe がユーザーをリダイレクトする場所を指定するには、この関数に [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) を指定します。ユーザーはまず、銀行のオーソリページなどの中間サイトにリダイレクトされ、その後 `return_url` にリダイレクトされます。カード支払いでは、支払いが正常に完了するとすぐに `return_url` にリダイレクトします。

#### HTML + JS

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

form.addEventListener('submit', async (event) => {
  event.preventDefault();
const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

#### React

支払いフォームコンポーネントから [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) を呼び出すには、[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, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState(null);

  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 {error} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });


    if (error) {
      // This point will only be reached if there is an immediate error when
      // confirming the payment. Show error to your customer (for example, payment
      // details incomplete)
      setErrorMessage(error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe}>Submit</button>
      {/* Show error message to your customers */}
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
};

export default CheckoutForm;
```

`return_url` が、Web サイト上の支払いステータスを表示するページと対応していることを確認します。Stripe が顧客を `return_url` にリダイレクトするときは、以下の 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)。 |

> 顧客のブラウザーセッションを追跡するツールを利用している場合、リファラー除外リストに `stripe.com` ドメインの追加が必要になる場合があります。リダイレクトを行うと、一部のツールでは新しいセッションが作成され、セッション全体の追跡ができなくなります。

クエリパラメーターのいずれか 1 つを使用して PaymentIntent を取得します。[PaymentIntent のステータス](https://docs.stripe.com/payments/paymentintents/lifecycle.md)を調べて、顧客に表示する内容を決定します。また、`return_url` を指定するときにカスタムのクエリパラメーターを追加することもできます。このパラメーターはリダイレクトプロセスの間維持されます。

#### HTML + JS

```javascript

// Initialize Stripe.js using your publishable key
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'payment_intent_client_secret'
);

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});
```

#### React

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

const PaymentStatus = () => {
  const stripe = useStripe();
  const [message, setMessage] = useState(null);

  useEffect(() => {
    if (!stripe) {
      return;
    }

    // Retrieve the "payment_intent_client_secret" query parameter appended to
    // your return_url by Stripe.js
    const clientSecret = new URLSearchParams(window.location.search).get(
      'payment_intent_client_secret'
    );

    // Retrieve the PaymentIntent
    stripe
      .retrievePaymentIntent(clientSecret)
      .then(({paymentIntent}) => {
        // Inspect the PaymentIntent `status` to indicate the status of the payment
        // to your customer.
        //
        // Some payment methods will [immediately succeed or fail][0] upon
        // confirmation, while others will first enter a `processing` state.
        //
        // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
        switch (paymentIntent.status) {
          case 'succeeded':
            setMessage('Success! Payment received.');
            break;

          case 'processing':
            setMessage("Payment processing. We'll update you when payment is received.");
            break;

          case 'requires_payment_method':
            // Redirect your user back to your payment page to attempt collecting
            // payment again
            setMessage('Payment failed. Please try another payment method.');
            break;

          default:
            setMessage('Something went wrong.');
            break;
        }
      });
  }, [stripe]);


  return message;
};

export default PaymentStatus;
```

## 構築したシステムをテストする

[テスト API キー](https://docs.stripe.com/keys.md#test-live-modes)を使用して PaymentIntent を確定します。確定すると、決済を承認または失敗させるオプションのあるテストページにリダイレクトされます。

- **Authorize test payment (テスト支払いをオーソリする)** をクリックして、支払い成功のケースをテストします。PaymentIntent が `requires_action` から `succeeded` に変わります。
- **Fail test payment (テスト支払いを失敗させる)** をクリックして、認証失敗のケースをテストします。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)をご確認ください。

- **ダッシュボードでイベントを手動で処理する**

  ダッシュボードを使用して、テスト決済を[ダッシュボードで表示](https://dashboard.stripe.com/test/payments)したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。

- **Custom Webhook を構築する**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **構築済みアプリを導入する**

  パートナーアプリケーションを統合することで、[自動化](https://stripe.partners/?f_category=automation)や[マーケティング/セールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを処理します。

## Optional: iDEAL | Wero リダイレクトの手動処理

iDEAL | Wero のリダイレクトと決済を `confirmIdealPayment` で処理するには、Stripe.js を使用することをお勧めします。ただし、サーバーで決済を完了し、顧客を手動でリダイレクトすることもできます。

1. [決済手段の詳細を収集](https://docs.stripe.com/payments/ideal/accept-a-payment.md#web-collect-payment-method-details)したら、[stripe.createPaymentMethod](https://docs.stripe.com/js/payment_methods/create_payment_method) を呼び出して *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) を作成します。
   ```javascript
   const paymentMethod = await stripe.createPaymentMethod({
     type: 'ideal',
     billing_details: {
       name: accountholderName.value,
     },
   });
   ```
1. サーバーで PaymentIntent と PaymentMethod ID を[確認](https://docs.stripe.com/api/payment_intents/confirm.md)し、支払い完了後に顧客をリダイレクトする [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) を指定します。
   ```curl
   curl https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/confirm \
     -u "<<YOUR_SECRET_KEY>>:" \
     -d payment_method="{{PAYMENTMETHOD_ID}}" \
     --data-urlencode return_url="https://example.com/checkout/complete"
   ```
`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": {
             "ideal": {
             "bank": "ing",
             "bic": "INGBNL2A",
             "iban_last4": "****",
             "verified_name": "JENNY ROSEN"
           },
           "type": "ideal"
           },
           "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": "ideal",
           "usage": "single_use"
         }
       ],
       "object": "list",
       "has_more": false,
       "url": "/v1/charges?payment_intent=pi_1G1sgdKi6xqXeNtkldRRE6HT"
     },
     "payment_method_options": {
       "ideal": {}
     },
     "payment_method_types": [
       "ideal"
     ],
     "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` にリダイレクトされます。この URL には、クエリパラメーター `payment_intent` および `payment_intent_client_secret` が含まれています。上記のように独自のクエリパラメーターを追加することもできます。

## 取引銀行

| 銀行名                     | 値              |
| ----------------------- | -------------- |
| ABN AMRO                | `abn_amro`     |
| ASN Bank                | `asn_bank`     |
| Bunq                    | `bunq`         |
| ING                     | `ing`          |
| Knab                    | `knab`         |
| N26                     | `n26`          |
| Nationale-Nederlanden   | `nn`           |
| Rabobank                | `rabobank`     |
| Revolut                 | `revolut`      |
| RegioBank               | `regiobank`    |
| SNS Bank (De Volksbank) | `sns_bank`     |
| Triodos Bank            | `triodos_bank` |
| Van Lanschot            | `van_lanschot` |
| Yoursafe                | `yoursafe`     |