# Accepter un paiement d’iDEAL | Wero

Découvrez comment accepter les paiements effectués à l’aide de d’iDEAL | Wero, un moyen de paiement très répandu aux Pays-Bas.

# 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 peut automatiquement proposer les moyens de paiement pertinents à vos clients en évaluant la devise, les restrictions liées aux moyens de paiement et d’autres paramètres.
> 
> - Suivez le guide [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted) pour créer une intégration de paiement qui utilise des [moyens de paiement dynamiques](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md).
- Si vous ne souhaitez pas utiliser de moyens de paiement dynamiques, suivez les étapes ci-dessous pour configurer manuellement les moyens de paiement dans votre intégration Checkout.

iDEAL | Wero (anciennement iDEAL) est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) qui nécessite l’[authentification](https://docs.stripe.com/payments/payment-methods.md#customer-actions) du paiement par le client. Pour effectuer un paiement avec iDEAL | Wero, les *clients* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) quittent votre site web, autorisent le paiement, puis reviennent vers votre site web. Vous recevez alors une [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification) indiquant si le paiement a abouti ou échoué.

> Pour accepter iDEAL | Wero, vous devez vous conformer à nos [Conditions d’utilisation du service iDEAL](https://stripe.com/ideal/legal).

## Déterminer la compatibilité

**Lieux d’implantation pris en charge** : Europe, US, CA, NZ, SG, HK, JP, AU, MX

**Devises prises en charge** : `eur`

**Devises de règlement** : `eur`

**Mode de paiement** : Yes

**Mode de configuration** : Yes

**Mode d’abonnement** : Yes

Une Checkout Session doit remplir toutes les conditions suivantes pour prendre en charge les paiements d’iDEAL | Wero :

- Le *tarif* (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) de tous les postes doit être indiqué en euros (code de devise `eur`).

## Accepter un paiement

> Ce guide s’appuie sur l’intégration de base de Checkout permettant d’[accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md?ui=stripe-hosted).

Il vous guide tout au long de l’activation d’d’iDEAL | Wero et vous montre les différences entre l’acceptation de paiements à l’aide de moyens de paiement dynamiques et la configuration manuelle des moyens de paiement.

### Activer le moyen de paiement iDEAL | Wero

Lors de la création d’une nouvelle [session Checkout](https://docs.stripe.com/api/checkout/sessions.md), vous devez :

1. Ajouter `ideal` à la liste `payment_method_types`.
1. Assurez-vous que tous vos `line_items` utilisent la devise `eur`.

#### Page hébergée par 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"
```

#### Formulaire intégré

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

### Traiter vos commandes

Maintenant que vous savez accepter des paiements, découvrez comment [traiter les commandes](https://docs.stripe.com/checkout/fulfillment.md).

## Tester votre intégration

Lors du test de votre intégration Checkout, sélectionnez le moyen de paiement d’iDEAL | Wero, puis cliquez sur le bouton **Payer**.

## Gérer les litiges et remboursements

La période de remboursement applicable aux paiements d’iDEAL | Wero est limitée à 180&nbsp;jours après le paiement d’origine.

Il n’existe pas de processus de litige&nbsp;: les clients s’authentifient auprès de leur banque.

## See also

- [En savoir plus sur iDEAL | Wero](https://docs.stripe.com/payments/ideal.md)
- [Exécution Checkout](https://docs.stripe.com/checkout/fulfillment.md)
- [Personnalisation de 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/ideal/accept-a-payment?payment-ui=mobile&platform=ios.

> Nous vous recommandons de suivre le guide [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md), sauf si vous devez exécuter la confirmation manuelle côté serveur, ou si votre intégration requiert la présentation de moyens de paiement de manière distincte. Si vous avez déjà intégré Elements, consultez le [Guide de migration du Payment&nbsp;Element](https://docs.stripe.com/payments/payment-element/migration.md).

Le processus d’acceptation d’un paiement d’iDEAL | Wero dans votre application consiste à afficher une vue Web qui renvoie votre client vers le portail en ligne de sa banque pour autoriser le paiement. Votre client retourne ensuite dans votre application et vous recevez [immédiatement une notification](https://docs.stripe.com/payments/payment-methods.md#payment-notification) indiquant si le paiement a abouti ou échoué.

> Pour accepter iDEAL | Wero, vous devez vous conformer à nos [Conditions d’utilisation du service iDEAL](https://stripe.com/ideal/legal).

## Configurer Stripe [Côté serveur] [Côté client]

Tout d’abord, il vous faut un compte Stripe. [Inscrivez-vous](https://dashboard.stripe.com/register).

### Côté serveur

Pour cette intégration, votre serveur doit être doté d’endpoints qui communiquent avec l’API Stripe. Utilisez les bibliothèques officielles pour accéder à l’API Stripe depuis votre serveur&nbsp;:

#### 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'
```

### Côté client

Le [SDK iOS de Stripe](https://github.com/stripe/stripe-ios) est disponible en open source et [fait l’objet d’une documentation complète](https://stripe.dev/stripe-ios/index.html). Il est également compatible avec les applications prenant en charge iOS 13 et les versions ultérieures.

#### Swift Package Manager

Pour installer le SDK, veuillez suivre les étapes ci-dessous&nbsp;:

1. Dans Xcode, sélectionnez **File** > **Add Package Dependencies…** puis saisissez `https://github.com/stripe/stripe-ios-spm` en tant qu’URL du référentiel.
1. Sélectionnez le dernier numéro de version, visible sur notre [page des versions](https://github.com/stripe/stripe-ios/releases).
1. Ajoutez le produit **StripePaymentsUI** à la [cible de votre application](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app).

#### CocoaPods

1. Si vous ne l’avez pas encore fait, installez la version la plus récente de [CocoaPods](https://guides.cocoapods.org/using/getting-started.html).
1. Si vous n’avez pas de fichier [Podfile](https://guides.cocoapods.org/syntax/podfile.html), exécutez la commande suivante pour en créer un&nbsp;:
   ```bash
   pod init
   ```
1. Ajoutez cette ligne à votre `Podfile`&nbsp;:
   ```podfile
   pod 'StripePaymentsUI'
   ```
1. Exécutez la commande suivante&nbsp;:
   ```bash
   pod install
   ```
1. À partir de maintenant, n’oubliez pas d’utiliser le fichier .xcworkspace au lieu du fichier .xcodeproj pour ouvrir votre projet dans Xcode.
1. Pour mettre à jour ultérieurement le SDK vers la version la plus récente, il vous suffit d’exécuter&nbsp;:
   ```bash
   pod update StripePaymentsUI
   ```

#### Carthage

1. Si vous ne l’avez pas encore fait, installez la version la plus récente de [Carthage](https://github.com/Carthage/Carthage#installing-carthage).
1. Ajoutez cette ligne à votre `Cartfile`&nbsp;:
   ```cartfile
   github "stripe/stripe-ios"
   ```
1. Suivez les [instructions d’installation de Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Veillez à intégrer tous les cadres requis listés [ici](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking).
1. Pour mettre à jour ultérieurement le SDK vers la version la plus récente, exécutez la commande suivante&nbsp;:
   ```bash
   carthage update stripe-ios --platform ios
   ```

#### Cadre manuel

1. Accédez à notre [page des versions GitHub](https://github.com/stripe/stripe-ios/releases/latest), puis téléchargez et décompressez **Stripe.xcframework.zip**.
1. Faites glisser **StripePaymentsUI.xcframework** vers la section **Embedded Binaries (Fichiers binaires incorporés)** des paramètres **General (Général)** de votre projet Xcode. Veillez à sélectionner **Copy items if needed (Copier les éléments si nécessaire)**.
1. Répétez l’étape 2 pour tous les cadres requis listés [ici](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking).
1. À l’avenir, pour mettre à jour vers la version la plus récente de notre SDK, répétez les étapes&nbsp;1 à 3.

> Pour obtenir de plus amples informations sur la version la plus récente du SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-ios/releases) sur GitHub. Pour recevoir une notification lors de la publication d’une nouvelle version, [surveillez les versions](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) à partir du référentiel.

Configurez le SDK avec votre [clé publiable](https://dashboard.stripe.com/test/apikeys) Stripe au démarrage de votre application. Cela lui permet d’envoyer des requêtes à l’API Stripe.

#### 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
    }
}
```

> Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) lors de vos activités de test et de développement et vos clés du [mode production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application.

## Créer un PaymentIntent [Côté serveur] [Côté client]

Un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) est un objet qui représente votre intention d’encaisser le paiement d’un client et qui suit le cycle de vie du processus de paiement étape par étape.

### Côté serveur

Créez tout d’abord un `PaymentIntent` sur votre serveur, puis indiquez le montant à percevoir et la devise `eur` (iDEAL | Wero ne prend pas en charge les autres devises). iDEAL | Wero n’a pas de montant minimal de paiement&nbsp;; la valeur `amount` du paiement peut descendre jusqu’à 1. Si votre intégration inclut déjà l’[API&nbsp;Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `ideal` à la liste des [types de moyens de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) pour votre `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
```

Au lieu de transmettre à l’application la totalité de l’objet PaymentIntent, il vous suffit de renvoyer sa *clé secrète du client* (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)). Il s’agit d’une clé unique qui vous permet de *confirmer* (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) le paiement et d’actualiser les informations de paiement côté client, le tout sans autoriser la manipulation d’informations sensibles comme le montant du paiement.

### Côté client

Côté client, demandez un PaymentIntent auprès de votre serveur et sauvegardez la clé secrète du client.

#### Swift

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

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

## Collecter les informations du moyen de paiement [Côté client]

Dans votre application, recueillez le nom complet de votre client. Créez un objet [STPPaymentIntentParams](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentIntentParams.html) avec cette information.

#### Swift

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

## Soumettre le paiement à Stripe [Côté client]

Récupérez la clé secrète du client dans le PaymentIntent que vous avez créé à l’étape&nbsp;3, puis appelez [STPPaymentHandler confirmPayment](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentHandler.html#/c:@M@StripePayments@objc\(cs\)STPPaymentHandler\(im\)confirmPayment:withAuthenticationContext:completion:). Une vue Web s’affichera ainsi pour permettre au client de mener à bien son paiement sur le site Web ou l’application de sa banque, ce qui appellera le bloc de finalisation avec le résultat du paiement.

#### 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()
    }
}
```

## Tester votre intégration

Utilisez vos [clés API de test](https://docs.stripe.com/keys.md#test-live-modes) pour confirmer le PaymentIntent. Après avoir confirmé, vous êtes redirigé vers une page de test avec des options pour valider ou non le paiement.

- Cliquez sur **Autorisation du paiement test** pour tester le cas où la configuration réussit. Le PaymentIntent passe de `requires_action` à `succeeded`.
- Cliquez sur **Échec du paiement test** pour tester le cas où le client ne parvient pas à s’authentifier. Le PaymentIntent passe de `requires_action` à `requires_payment_method`.

## Optional: Gérer les événements post-paiement

Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez le Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison.

Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les [différences entre les différents moyens de paiement pris en charge](https://stripe.com/payments/payment-methods-guide).

- **Gérer les événements manuellement dans le Dashboard**

  Utilisez le Dashboard pour [afficher vos paiements de test dans le Dashboard](https://dashboard.stripe.com/test/payments), envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués.

- **Créer un webhook personnalisé**

  [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.

- **Intégrer une application prédéfinie**

  Gérez les événements commerciaux courants, tels que l’[automatisation](https://stripe.partners/?f_category=automation) ou le [marketing et les ventes](https://stripe.partners/?f_category=marketing-and-sales), en intégrant une application partenaire.

## Référence bancaire

| Nom de la banque        | Valeur         |
| ----------------------- | -------------- |
| 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.

> Nous vous recommandons de suivre le guide [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md), sauf si vous devez exécuter la confirmation manuelle côté serveur, ou si votre intégration requiert la présentation de moyens de paiement de manière distincte. Si vous avez déjà intégré Elements, consultez le [Guide de migration du Payment&nbsp;Element](https://docs.stripe.com/payments/payment-element/migration.md).

Le processus d’acceptation d’un paiement d’iDEAL | Wero dans votre application consiste à afficher une vue Web qui renvoie votre client vers le portail en ligne de sa banque pour autoriser le paiement. Votre client retourne ensuite dans votre application et vous recevez [immédiatement une notification](https://docs.stripe.com/payments/payment-methods.md#payment-notification) indiquant si le paiement a abouti ou échoué.

> Pour accepter iDEAL | Wero, vous devez vous conformer à nos [Conditions d’utilisation du service iDEAL](https://stripe.com/ideal/legal).

## Configurer Stripe [Côté serveur] [Côté client]

Tout d’abord, il vous faut un compte Stripe. [Inscrivez-vous](https://dashboard.stripe.com/register).

### Côté serveur

Pour cette intégration, votre serveur doit être doté d’endpoints qui communiquent avec l’API Stripe. Utilisez les bibliothèques officielles pour accéder à l’API Stripe depuis votre serveur&nbsp;:

#### 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'
```

### Côté client

Le [SDK Stripe Android](https://github.com/stripe/stripe-android) est disponible en open source et [fait l’objet d’une documentation complète](https://stripe.dev/stripe-android/).

Pour installer le SDK, ajoutez `stripe-android` au bloc `dependencies` de votre fichier [app/build.gradle](https://developer.android.com/studio/build/dependencies)&nbsp;:

#### 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")
}
```

> Pour obtenir de plus amples informations sur la version la plus récente du SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-android/releases) sur GitHub. Pour savoir quand une nouvelle version est disponible, [surveillez les versions du référentiel](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository).

Configurez le SDK avec votre [clé publique](https://dashboard.stripe.com/apikeys) Stripe de façon à ce qu’il puisse envoyer des requêtes à l’API Stripe, par exemple à la sous-classe `Application`&nbsp;:

#### Kotlin

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

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

> Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) lors de vos activités de test et de développement et vos clés du [mode production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application.

Les échantillons de code de Stripe utilisent également [OkHttp](https://github.com/square/okhttp) et [GSON](https://github.com/google/gson) pour envoyer des requêtes HTTP à un serveur.

## Créer un PaymentIntent [Côté serveur] [Côté client]

Un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) est un objet qui représente votre intention d’encaisser le paiement d’un client et qui suit le cycle de vie du processus de paiement étape par étape.

### Côté serveur

Créez tout d’abord un `PaymentIntent` sur votre serveur, puis indiquez le montant à percevoir et la devise `eur` (iDEAL | Wero ne prend pas en charge les autres devises). iDEAL | Wero n’a pas de montant minimal de paiement&nbsp;; la valeur `amount` du paiement peut descendre jusqu’à 1. Si votre intégration inclut déjà l’[API&nbsp;Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `ideal` à la liste des [types de moyens de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) pour votre `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
```

Au lieu de transmettre à l’application la totalité de l’objet PaymentIntent, il vous suffit de renvoyer sa *clé secrète du client* (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)). Il s’agit d’une clé unique qui vous permet de *confirmer* (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) le paiement et d’actualiser les informations de paiement côté client, le tout sans autoriser la manipulation d’informations sensibles comme le montant du paiement.

### Côté client

Côté client, demandez un PaymentIntent auprès de votre serveur et sauvegardez la clé secrète du client.

#### 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
    }
}
```

## Collecter les informations du moyen de paiement [Côté client]

Dans votre application, recueillez le nom complet de votre client. Créez un objet [PaymentMethodCreateParams](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-payment-method-create-params/index.html) avec cette information.

#### Kotlin

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

## Soumettre le paiement à Stripe [Côté client]

Récupérez la clé secrète du client auprès du PaymentIntent que vous avez créé, puis appelez la fonction [confirm de PaymentLauncher](https://stripe.dev/stripe-android/payments-core/com.stripe.android.payments.paymentlauncher/-payment-launcher/index.html#74063765%2FFunctions%2F-1622557690). Une page Web s’affiche dans laquelle le client peut finaliser le paiement sur le site Web ou l’application de sa banque. Une fois l’opération terminée, un bloc de finalisation est appelé avec le résultat du paiement.

#### 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)
            }
        }
    }
}
```

## Tester votre intégration

Utilisez vos [clés API de test](https://docs.stripe.com/keys.md#test-live-modes) pour confirmer le PaymentIntent. Après avoir confirmé, vous êtes redirigé vers une page de test avec des options pour valider ou non le paiement.

- Cliquez sur **Autorisation du paiement test** pour tester le cas où la configuration réussit. Le PaymentIntent passe de `requires_action` à `succeeded`.
- Cliquez sur **Échec du paiement test** pour tester le cas où le client ne parvient pas à s’authentifier. Le PaymentIntent passe de `requires_action` à `requires_payment_method`.

## Optional: Gérer les événements post-paiement

Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez le Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison.

Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les [différences entre les différents moyens de paiement pris en charge](https://stripe.com/payments/payment-methods-guide).

- **Gérer les événements manuellement dans le Dashboard**

  Utilisez le Dashboard pour [afficher vos paiements de test dans le Dashboard](https://dashboard.stripe.com/test/payments), envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués.

- **Créer un webhook personnalisé**

  [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.

- **Intégrer une application prédéfinie**

  Gérez les événements commerciaux courants, tels que l’[automatisation](https://stripe.partners/?f_category=automation) ou le [marketing et les ventes](https://stripe.partners/?f_category=marketing-and-sales), en intégrant une application partenaire.

## Référence bancaire

| Nom de la banque        | Valeur         |
| ----------------------- | -------------- |
| 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.

> Nous vous recommandons de suivre le guide [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md), sauf si vous devez exécuter la confirmation manuelle côté serveur, ou si votre intégration requiert la présentation de moyens de paiement de manière distincte. Si vous avez déjà intégré Elements, consultez le [Guide de migration du Payment&nbsp;Element](https://docs.stripe.com/payments/payment-element/migration.md).

Le processus d’acceptation d’un paiement d’iDEAL | Wero dans votre application consiste à afficher une vue Web qui renvoie votre client vers le portail en ligne de sa banque pour autoriser le paiement. Votre client retourne ensuite dans votre application et vous recevez [immédiatement une notification](https://docs.stripe.com/payments/payment-methods.md#payment-notification) indiquant si le paiement a abouti ou échoué.

> Pour accepter iDEAL | Wero, vous devez vous conformer à nos [Conditions d’utilisation du service iDEAL](https://stripe.com/ideal/legal).

## Configurer Stripe [Côté serveur] [Côté client]

### Côté serveur

Pour cette intégration, votre serveur doit être doté d’endpoints qui communiquent avec l’API Stripe. Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre serveur&nbsp;:

#### 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'
```

### Côté client

Le [SDK React Native](https://github.com/stripe/stripe-react-native) est disponible en open source et fait l’objet d’une documentation complète. En interne, il utilise des SDK [Android](https://github.com/stripe/stripe-android) et [iOS natifs](https://github.com/stripe/stripe-ios). Pour installer le SDK React Native de Stripe, exécutez l’une des commandes suivantes dans le répertoire de votre projet (selon le gestionnaire de paquets que vous utilisez)&nbsp;:

#### yarn

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

#### npm

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

Ensuite, installez les autres dépendances nécessaires&nbsp;:

- Pour iOS, accédez au directeur **ios** et exécutez `pod install` pour vous assurer que vous installez également les dépendances natives requises.
- Pour Android, il n’y a plus de dépendances à installer.

> Nous vous recommandons de suivre le [guide officiel de TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) pour ajouter la prise en charge de TypeScript.

### Initialisation de Stripe

Pour initialiser Stripe dans votre application React&nbsp;Native, wrappez votre écran de paiement avec le composant `StripeProvider` ou utilisez la méthode d’initialisation `initStripe`. Seule la [clé publiable](https://docs.stripe.com/keys.md#obtain-api-keys) de l’API dans `publishableKey` est nécessaire. L’exemple suivant montre comment initialiser Stripe à l’aide du composant `StripeProvider`.

```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>
  );
}
```

> Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) d’API lors de vos activités de test et de développement, et vos clés du [mode production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application.

## Créer un PaymentIntent [Côté serveur] [Côté client]

Un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) est un objet qui représente votre intention d’encaisser le paiement d’un client et qui suit le cycle de vie du processus de paiement étape par étape.

### Côté serveur

Créez tout d’abord un `PaymentIntent` sur votre serveur, puis indiquez le montant à percevoir et la devise `eur` (iDEAL | Wero ne prend pas en charge les autres devises). iDEAL | Wero n’a pas de montant minimal de paiement&nbsp;; la valeur `amount` du paiement peut descendre jusqu’à 1. Si votre intégration inclut déjà l’[API&nbsp;Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `ideal` à la liste des [types de moyens de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) pour votre `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
```

Au lieu de transmettre à l’application la totalité de l’objet PaymentIntent, renvoyez sa *clé secrète du client* (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)). Il s’agit d’une clé unique qui vous permet de *confirmer* (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) le paiement et d’actualiser les informations de paiement côté client, le tout sans autoriser la manipulation d’informations sensibles comme le montant du paiement.

### Côté client

Côté client, demandez un PaymentIntent auprès de votre serveur et sauvegardez la clé secrète du client.

```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};
};
```

## Collecter les informations du moyen de paiement [Côté client]

Dans votre application, recueillez le nom complet de votre client.

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

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

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

## Soumettre le paiement à Stripe [Côté client]

Récupérez la clé secrète du client auprès du PaymentIntent que vous avez créé, puis appelez le `confirmPayment`. Une page Web s’affiche dans laquelle le client peut finaliser le paiement sur le site Web ou l’application de sa banque. L’intention de paiement est alors finalisée avec le résultat du paiement.

```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>;
}
```

## Tester votre intégration

Utilisez vos [clés API de test](https://docs.stripe.com/keys.md#test-live-modes) pour confirmer le PaymentIntent. Après avoir confirmé, vous êtes redirigé vers une page de test avec des options pour valider ou non le paiement.

- Cliquez sur **Autorisation du paiement test** pour tester le cas où la configuration réussit. Le PaymentIntent passe de `requires_action` à `succeeded`.
- Cliquez sur **Échec du paiement test** pour tester le cas où le client ne parvient pas à s’authentifier. Le PaymentIntent passe de `requires_action` à `requires_payment_method`.

## Optional: Gérer les événements post-paiement

Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez le Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison.

Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les [différences entre les différents moyens de paiement pris en charge](https://stripe.com/payments/payment-methods-guide).

- **Gérer les événements manuellement dans le Dashboard**

  Utilisez le Dashboard pour [afficher vos paiements de test dans le Dashboard](https://dashboard.stripe.com/test/payments), envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués.

- **Créer un webhook personnalisé**

  [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.

- **Intégrer une application prédéfinie**

  Gérez les événements commerciaux courants, tels que l’[automatisation](https://stripe.partners/?f_category=automation) ou le [marketing et les ventes](https://stripe.partners/?f_category=marketing-and-sales), en intégrant une application partenaire.

## Optional: Gérez les liens profonds

Lorsqu’un client quitte votre application (par exemple, pour s’authentifier dans Safari ou dans son application bancaire), donnez-lui un moyen de revenir automatiquement dans votre application. De nombreux types de moyens de paiement *nécessitent* une URL de redirection. Si vous n’en fournissez pas, nous ne pourrons pas présenter à vos utilisateurs les moyens de paiement nécessitant une URL de redirection, même si vous les avez activés.

Pour fournir une URL de redirection&nbsp;:

1. [Enregistrez](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app#Register-your-URL-scheme) une URL personnalisée. Les liens universels ne sont pas pris en charge.
1. [Configurez](https://reactnative.dev/docs/linking) votre URL personnalisée.
1. Configurez votre composant racine pour qu’il transfère l’URL au SDK de Stripe, comme illustré ci-dessous.

> Si vous utilisez Expo, [définissez votre schéma](https://docs.expo.io/guides/linking/#in-a-standalone-app) dans le fichier `app.json`.

```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>
  );
}
```

Pour plus d’informations sur les schémas d’URL natifs, consultez la documentation [Android](https://developer.android.com/training/app-links/deep-linking) et [iOS](https://developer.apple.com/documentation/xcode/allowing_apps_and_websites_to_link_to_your_content/defining_a_custom_url_scheme_for_your_app).

## Référence bancaire

| Nom de la banque        | Valeur         |
| ----------------------- | -------------- |
| 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 est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) qui nécessite l’[authentification](https://docs.stripe.com/payments/payment-methods.md#customer-actions) du paiement par le client. Pour effectuer un paiement avec iDEAL | Wero, les *clients* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) quittent votre site web, autorisent le paiement, puis reviennent vers votre site web. Vous recevez alors une [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification) indiquant si le paiement a abouti ou échoué.

Utilisez l’[Element Payment](https://docs.stripe.com/payments/payment-element.md) pour intégrer un formulaire de paiement Stripe personnalisé sur votre site web ou application. L’Element Payment vous permet de prendre en charge iDEAL | Wero et d’autres moyens de paiement automatiquement. Pour des configurations avancées et des personnalisations, consultez le guide d’intégration [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md).

> Pour accepter iDEAL | Wero, vous devez vous conformer à nos [Conditions d’utilisation du service iDEAL](https://stripe.com/ideal/legal).

## Configurer Stripe [Côté serveur]

Tout d’abord, vous avez besoin d’un compte Stripe. [Inscrivez-vous dès maintenant](https://dashboard.stripe.com/register).

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application&nbsp;:

#### 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'
```

## Créer un PaymentIntent [Côté serveur]

Un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) est un objet qui représente votre intention collecter le paiement d’un client et qui filière le cycle de vie du processus de paiement à chaque étape. Tout d’abord, créez un `PaymentIntent` sur votre serveur et spécifiez le montant à collecter ainsi que la devise en `eur` (iDEAL | Wero ne prend pas en charge les autres devises). iDEAL | Wero ne requiert aucune valeur minimale de paiement, la valeur `amount` du paiement peut donc descendre jusqu’à&nbsp;1. Si vous disposez déjà d’une intégration utilisant l’[API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `ideal` à la liste des [types de moyens de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) pour votre `PaymentIntent`.

#### Gérer les moyens de paiement dans le Dashboard

Créez un PaymentIntent sur votre serveur avec un montant et une devise. Dans la dernière version de l’API, la spécification du paramètre `automatic_payment_methods` est facultative, car Stripe active ses fonctionnalités par défaut. Vous pouvez gérer les moyens de paiement à partir du [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe détermine les moyens de paiement éligibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement. Assurez-vous que **iDEAL | Wero** est activé dans la page des [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods).

Définissez toujours le montant à débiter côté serveur car il s’agit d’un environnement sécurisé, contrairement à l’environnement client. De cette façon, un client malveillant ne pourra pas fixer son propre tarif.

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

#### Répertorier manuellement les moyens de paiement

Si vous ne souhaitez pas utiliser le Dashboard ou souhaitez spécifier manuellement des moyens de paiement, vous pouvez les répertorier à l’aide de l’attribut `payment_method_types`.

Créez un PaymentIntent sur votre serveur avec un montant, une devise et la liste des moyens de paiement que vous souhaitez proposer. Définissez toujours le montant à débiter côté serveur, car il s’agit d’un environnement sécurisé, contrairement à l’environnement client. De cette façon, un client malveillant ne pourra pas fixer son propre tarif.

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

### Récupérer la clé secrète du client

Le PaymentIntent contient une *clé secrète* (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)) à utiliser côté client pour finaliser le processus de paiement en toute sécurité. Vous pouvez adopter différentes approches pour transmettre cette clé secrète côté client.

#### Application monopage

Récupérez la clé secrète du client à partir d’un endpoint sur votre serveur, à l’aide de la fonction `fetch` du navigateur. Cette approche est recommandée si votre côté client est une application d’une seule page, en particulier si elle repose sur un framework front-end moderne tel que React. Créez l’endpoint de serveur qui gère la clé secrète du client&nbsp;:

#### Ruby

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

Récupérez ensuite la clé secrète du client à l’aide JavaScript côté client&nbsp;:

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

#### Rendu côté serveur

Transmettez la clé secrète à votre client depuis votre serveur. Cette approche fonctionne mieux si votre application génère du contenu statique sur le serveur avant de l’envoyer sur le navigateur.

Ajoutez le [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) à votre formulaire de paiement. Dans votre code côté serveur, récupérez la clé secrète du client à partir du PaymentIntent&nbsp;:

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

## Collecter les informations du moyen de paiement [Côté client]

Collectez les informations de paiement du client avec le [Payment&nbsp;Element](https://docs.stripe.com/payments/payment-element.md). Le Payment&nbsp;Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations pour de nombreux moyens de paiement.

Le Payment&nbsp;Element contient un iframe qui envoie les informations de paiement à Stripe de manière sécurisée via une connexion HTTPS. Évitez de placer le Payment&nbsp;Element dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement.

Si vous choisissez d’utiliser un iframe et que vous souhaitez accepter Apple Pay ou Google Pay, l’attribut [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) de l’iframe doit être défini sur égal à `"payment *"`.

Pour que votre intégration fonctionne, l’adresse de la page de paiement doit commencer par `https://` et non par `http://`. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS, mais n’oubliez pas de l’[activer](https://docs.stripe.com/security/guide.md#tls) lorsque vous souhaitez commencer à accepter des paiements réels.

#### HTML + JS

### Configurer Stripe.js

Le composant Element Payment est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js à votre page de paiement en l’ajoutant entre les balises `head` de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans une offre groupée ni en héberger de copie.

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

Créez une instance de Stripe avec le code JavaScript suivant sur votre page de paiement&nbsp;:

```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>>');
```

### Ajouter le Payment Element à votre page de paiement

Le composant Element Payment doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneur) vide doté d’un ID unique dans votre formulaire de paiement&nbsp;:

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

Lors du chargement du formulaire précédent, créez une instance du composant Payment&nbsp;Element et intégrez-la au nœud DOM conteneur. Lorsque vous créez l’instance [Elements](https://docs.stripe.com/js/elements_object/create), transmettez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) définie à l’étape précédente dans les `options`&nbsp;:

Utilisez la clé secrète du client avec prudence, car elle peut servir à finaliser le paiement. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne la dévoilez à personne d’autre que votre client.

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

### Configurer Stripe.js

Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm&nbsp;:

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

### Ajouter le fournisseur Elements à votre page de paiement et le configurer

Pour utiliser le composant Payment Element, enveloppez votre composant de page de paiement dans un [fournisseur Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Appelez `loadStripe` avec votre clé publique, puis transmettez au fournisseur `Elements` l’élément `Promise` renvoyé. Transmettez également la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) de l’étape précédente en tant que `options`, toujours au fournisseur `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'));
```

### Ajouter le composant Element Payment

Utilisez le composant `PaymentElement` pour créer votre formulaire&nbsp;:

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

## Envoyer le paiement à Stripe [Côté client]

Utilisez [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) pour effectuer le paiement à l’aide des informations du composant Payment&nbsp;Element. Ajoutez un paramètre [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) à cette fonction pour indiquer la page vers laquelle Stripe doit rediriger l’utilisateur à l’issue du paiement. Votre utilisateur peut être redirigé en premier lieu vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers la page spécifiée par le paramètre `return_url`. L’utilisateur sera immédiatement redirigé vers la page `return_url` après un paiement réussi par carte.

#### 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

Pour appeler [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) depuis votre composant de formulaire de paiement, utilisez les hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) et [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook).

Si vous préférez les composants de classe traditionnels aux hooks, vous pouvez utiliser un [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;
```

Veillez à ce que le paramètre `return_url` corresponde à une page de votre site web qui indique l’état du paiement. Lorsque Stripe redirige le client vers la page `return_url`, nous fournissons les paramètres de requête d’URL suivants&nbsp;:

| Paramètre                      | Description                                                                                                                                       |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent`               | L’identifiant unique du `PaymentIntent`.                                                                                                          |
| `payment_intent_client_secret` | La [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) de l’objet `PaymentIntent`. |

> Si vous disposez d’outils qui assurent le suivi de la session navigateur du client, vous devrez peut-être ajouter le domaine `stripe.com` à la liste d’exclusion des sites référents. Les redirections font que certains outils créent de nouvelles sessions, ce qui empêche le suivi de la session dans son ensemble.

Utilisez l’un des paramètres de requête pour récupérer le PaymentIntent. Consultez l’[état du PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md) pour déterminer les informations à présenter à vos clients. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous ajoutez l’URL `return_url`&nbsp;; ils seront conservés tout au long du processus de redirection.

#### 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;
```

## Tester votre intégration

Utilisez vos [clés API de test](https://docs.stripe.com/keys.md#test-live-modes) pour confirmer le PaymentIntent. Après avoir confirmé, vous êtes redirigé vers une page de test avec des options pour valider ou non le paiement.

- Cliquez sur **Autorisation du paiement test** pour tester le cas où la configuration réussit. Le PaymentIntent passe de `requires_action` à `succeeded`.
- Cliquez sur **Échec du paiement test** pour tester le cas où le client ne parvient pas à s’authentifier. Le PaymentIntent passe de `requires_action` à `requires_payment_method`.

## Optional: Gérer les événements post-paiement

Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez le Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison.

Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les [différences entre les différents moyens de paiement pris en charge](https://stripe.com/payments/payment-methods-guide).

- **Gérer les événements manuellement dans le Dashboard**

  Utilisez le Dashboard pour [afficher vos paiements de test dans le Dashboard](https://dashboard.stripe.com/test/payments), envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués.

- **Créer un webhook personnalisé**

  [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.

- **Intégrer une application prédéfinie**

  Gérez les événements commerciaux courants, tels que l’[automatisation](https://stripe.partners/?f_category=automation) ou le [marketing et les ventes](https://stripe.partners/?f_category=marketing-and-sales), en intégrant une application partenaire.

## Optional: Gérer la redirection d’iDEAL | Wero manuellement

Nous recommandons d’utiliser Stripe.js pour gérer les redirections et paiements iDEAL | Wero avec `confirmIdealPayment`. Toutefois, vous pouvez également effectuer le paiement sur votre serveur et rediriger manuellement vos clients.

1. Après avoir [recueilli les informations du moyen de paiement](https://docs.stripe.com/payments/ideal/accept-a-payment.md#web-collect-payment-method-details), appelez [stripe.createPaymentMethod](https://docs.stripe.com/js/payment_methods/create_payment_method) pour créer un objet *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. Sur votre serveur, [confirmez](https://docs.stripe.com/api/payment_intents/confirm.md) le PaymentIntent avec l’ID du PaymentMethod et fournissez un [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) pour rediriger votre client après qu’il ait effectué le paiement.
   ```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"
   ```
Vérification que l’état du `PaymentIntent` est bien `requires_action`avec un `next_action` de `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. Redirigez votre client vers l’URL fournie dans la propriété `next_action` afin qu’il puisse s’authentifier et terminer le paiement.
   ```javascript
   const action = intent.next_action;
   if (action && action.type === 'redirect_to_url') {
     window.location = action.redirect_to_url.url;
   }
   ```
Votre client est redirigé vers `return_url` après avoir effectué le paiement. L’URL comprend les paramètres de requête `payment_intent` et `payment_intent_client_secret` et vous pouvez également ajouter vos propres paramètres de requête, comme décrit ci-dessus.

## Référence bancaire

| Nom de la banque        | Valeur         |
| ----------------------- | -------------- |
| 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`     |