# Enregistrer les informations de paiement lors d'un paiement dans l'application

Enregistrez les informations de paiement lors d'un paiement dans votre application mobile.

# iOS

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

Utilisez l’[API Payment Intents](https://docs.stripe.com/api/payment_intents.md) pour enregistrer des informations de paiement à partir d’un achat. Il existe plusieurs cas d’usage :

- Débiter un client pour une commande en ligne et enregistrer les informations pour des achats ultérieurs.
- Entreprendre le premier paiement d’une série de paiements récurrents.
- Débiter un acompte et enregistrer les détails pour facturer plus tard le montant total.

> #### Transactions avec présentation de la carte
> 
> Les transactions avec présentation de la carte, telles que les paiements via Stripe Terminal, utilisent un processus différent pour enregistrer le mode de paiement. Pour en savoir plus, consultez [la documentation de Terminal](https://docs.stripe.com/terminal/features/saving-payment-details/save-after-payment.md).

## Conformité

Vous êtes responsable de votre conformité à toutes les lois, réglementations et règles du réseau applicables lorsque vous enregistrez les informations de paiement d’un client pour une utilisation future, par exemple pour lui présenter son mode de paiement lors du flux de paiement pour un achat futur ou pour le facturer lorsqu’il n’utilise pas activement votre site Web ou votre application. Avant d’enregistrer ou de facturer le mode de paiement d’un client, assurez-vous :

- Ajoutez à votre site Web ou à votre application des conditions indiquant comment vous comptez enregistrer les informations relatives aux modes de paiement, par exemple :
  - Le consentement du client vous autorisant à effectuer un paiement ou une série de paiements en son nom pour des transactions spécifiques.
  - Le calendrier et la fréquence des paiements prévus (par exemple, si les frais concernent des versements planifiés, des paiements d’abonnement ou des recharges non planifiées).
  - La façon dont vous déterminez le montant du paiement.
  - Vos conditions d’annulation, si le moyen de paiement est un service d’abonnement.
- Utilisez un mode de paiement enregistré uniquement aux fins indiquées dans vos conditions générales.
- Obtenez le consentement explicite du client pour cette utilisation précise. Par exemple, ajoutez une case à cocher « Enregistrer mon mode de paiement pour une utilisation ultérieure ».
- Conservez une trace de l’accord écrit de votre client à vos conditions.

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

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

### Côté serveur

Cette intégration nécessite des points de terminaison sur votre serveur qui communiquent avec l’API Stripe. Utilisez nos bibliothèques officielles pour accéder à l’API Stripe à partir de votre serveur :

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

La [trousse SDK iOS de Stripe](https://github.com/stripe/stripe-ios) est à code source libre et [possède 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 la trousse SDK, suivez les étapes ci-après :

1. Dans Xcode, sélectionnez **File** (Fichier) > **Add Package Dependencies…** (Ajouter des dépendances de paquet…), puis saisissez `https://github.com/stripe/stripe-ios-spm` comme URL du référentiel.
1. Sélectionnez la dernière version dans notre [page des versions](https://github.com/stripe/stripe-ios/releases).
1. Ajoutez le produit **StripePaymentSheet** à 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 :
   ```bash
   pod init
   ```
1. Ajoutez cette ligne à votre `Podfile` :
   ```podfile
   pod 'StripePaymentSheet'
   ```
1. Exécutez la commande suivante :
   ```bash
   pod install
   ```
1. À partir de maintenant, n’oubliez pas d’utiliser le fichier `.xcworkspace`, au lieu de `.xcodeproj`, pour ouvrir votre projet dans Xcode.
1. Pour mettre à jour ultérieurement la trousse SDK vers la version la plus récente, il vous suffit d’exécuter :
   ```bash
   pod update StripePaymentSheet
   ```

#### 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`:
   ```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/StripePaymentSheet/README.md#manual-linking).
1. Pour mettre à jour ultérieurement la trousse SDK vers la version la plus récente, exécutez la commande suivante ;
   ```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 **StripePaymentSheet.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/StripePaymentSheet/README.md#manual-linking).
1. À l’avenir, pour mettre à jour vers la version la plus récente de notre trousse SDK, répétez les étapes 1 à 3.

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

## Activer les moyens de paiement

Les paiements par carte sont activés par défaut. Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) pour activer d’autres moyens de paiement que vous souhaitez prendre en charge.

## Ajouter un point de terminaison [Côté serveur]

> #### Remarque
> 
> Pour afficher PaymentSheet avant de créer un PaymentIntent, consultez la [Collecter les détails du paiement avant de créer un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment).

Si votre plateforme Connect utilise des [comptes configurés par le client](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utilisez notre [guide](https://docs.stripe.com/connect/use-accounts-as-customers.md) pour remplacer le `Client` et des références d’événements dans votre code avec les références équivalentes de l’API Accounts v2.

Cette intégration utilise trois objets de l’API Stripe :

1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) : Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise cet objet qui suit les tentatives de débit et les changements d’état du paiement tout au long du processus.

1. [Client](https://docs.stripe.com/api/customers.md) : Pour configurer un mode de paiement pour les paiements futurs, vous devrez l’associer à un *client* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Créez un objet Customer lorsque votre client crée un compte auprès de votre entreprise. Si votre client effectue un paiement en tant qu’invité, vous pourrez créer un objet Customer avant le paiement, puis l’associer ultérieurement à votre représentation interne du compte du client.

1. [Session Client](https://docs.stripe.com/api/customer_sessions.md) : L’objet Customer contient des informations sensibles qu’il n’est pas possible de récupérer directement à partir d’une application. Un objet CustomerSession accorde à la trousse SDK un accès temporaire à l’objet Customer et fournit des options de configuration supplémentaires. Consultez la liste complète des [options de configuration](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components).

Pour des raisons de sécurité, votre application ne peut pas créer ces objets. Ajoutez plutôt un point de terminaison sur votre serveur qui :

1. Récupère l’objet Customer ou en crée un nouveau.
1. Crée une [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) pour le client.
1. Crée un PaymentIntent comportant les paramètres [amount](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), [currency](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency), [customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer) et [setup_future_usage](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-setup_future_usage) .
1. Renvoi de la *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)) du Payment Intent, de l’objet `client_secret` de la CustomerSession, de l’[id](https://docs.stripe.com/api/customers/object.md#customer_object-id) du client et de votre [clé publiable](https://dashboard.stripe.com/apikeys) à votre application.

> Le Payment Element mobile ne prend en charge que `setup_future_usage` avec les cartes et les comptes bancaires américains.

Les modes de paiement présentés aux clients lors du processus de paiement sont également compris dans le PaymentIntent. Les modes de paiement peuvent être récupérés par Stripe à partir de vos paramètres Dashboard, ou vous pouvez les ajouter manuellement. Quelle que soit l’option que vous choisissez, sachez que la devise transmise dans le PaymentIntent filtre les modes de paiement présentés au client. Par exemple, si vous transmettez `eur` dans le PaymentIntent et que vous avez activé OXXO dans le Dashboard, OXXO ne sera pas présenté au client, car OXXO ne prend pas en charge les paiements `eur`.

À moins que votre intégration ne nécessite du code pour la présentation des modes de paiement, Stripe vous recommande l’option automatisée. En effet, Stripe évalue la devise, les restrictions sur les modes de paiement et d’autres paramètres pour déterminer la liste des modes de paiement pris en charge. Les modes de paiement qui augmentent le taux de conversion et qui sont les plus pertinents pour la devise et le lieu de résidence du client sont priorisés.

#### Gérer les moyens de paiement à partir du Dashboard

Vous pouvez gérer les moyens de paiement à partir du [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le retour des moyens de paiement admissibles en fonction de facteurs tels que le montant, la devise et le flux de paiement de la transaction. Le PaymentIntent est créé à l’aide des moyens de paiement configurés dans le Dashboard. Si vous ne souhaitez pas utiliser le Dashboard ou si vous souhaitez préciser des moyens de paiement manuellement, vous pouvez les répertorier à l’aide de l’attribut `payment_method_types`.

#### curl

```bash
# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  -d "setup_future_usage"="off_session" \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter
  # is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \
```

#### Référencement manuel des moyens de paiement

#### curl

```bash
# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  -d "setup_future_usage"="off_session" \
  -d "payment_method_types[]"="card" \
```

> Chacun des modes de paiement doit prendre en charge la devise transmise dans le PaymentIntent, et votre entreprise doit par ailleurs être établie dans l’un des pays pris en charge par chaque mode de paiement. Consultez la section [Options d’intégration des modes de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md) pour en savoir plus sur les modes de paiement pris en charge.

## Collectez les informations de paiement [Côté client]

Pour afficher le Mobile Payment Element dans votre page de paiement, assurez-vous d’effectuer ce qui suit&nbsp;:

- Afficher les produits achetés par le client ainsi que le montant total
- Utilisez [Address Element](https://docs.stripe.com/elements/address-element.md?platform=ios) pour collecter toutes les informations de livraison requises auprès du client.
- Ajouter un bouton de paiement pour afficher l’interface utilisateur de Stripe

#### UIKit

Dans l’écran paiement de votre application, récupérez la clé secrète du client Intent Payment, la clé secrète du client de session cliente, l’ID du client et la clé publique à partir du point de terminaison que vous avez créé à l’étape précédente. Utilisez`STPAPIClient.shared` pour configurer votre clé publique et initialiser le[PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html).

#### iOS (Swift)

```swift
import UIKit@_spi(CustomerSessionBetaAccess) import StripePaymentSheet

class CheckoutViewController: UIViewController {
  @IBOutlet weak var checkoutButton: UIButton!
  var paymentSheet: PaymentSheet?
  let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint

  override func viewDidLoad() {
    super.viewDidLoad()

    checkoutButton.addTarget(self, action: #selector(didTapCheckoutButton), for: .touchUpInside)
    checkoutButton.isEnabled = false

    // MARK: Fetch the PaymentIntent client secret, CustomerSession client secret, Customer ID, and publishable key
    var request = URLRequest(url: backendCheckoutUrl)
    request.httpMethod = "POST"
    let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in
      guard let data = data,
            let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any],
            let customerId = json["customer"] as? String,
            let customerSessionClientSecret = json["customerSessionClientSecret"] as? String,
            let paymentIntentClientSecret = json["paymentIntent"] as? String,
            let publishableKey = json["publishableKey"] as? String,
            let self = self else {
        // Handle error
        return
      }
STPAPIClient.shared.publishableKey = publishableKey// MARK: Create a PaymentSheet instance
      var configuration = PaymentSheet.Configuration()
      configuration.merchantDisplayName = "Example, Inc."
      configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret)
      // Set `allowsDelayedPaymentMethods` to true if your business handles
      // delayed notification payment methods like US bank accounts.
      configuration.allowsDelayedPaymentMethods = true
      self.paymentSheet = PaymentSheet(paymentIntentClientSecret:paymentIntentClientSecret, configuration: configuration)

      DispatchQueue.main.async {
        self.checkoutButton.isEnabled = true
      }
    })
    task.resume()
  }

}
```

Lorsque le client touche le bouton **Paiement**, faites appel à `present` pour afficher la PaymentSheet. Une fois que le client a effectué le paiement, Stripe ferme la PaymentSheet et appelle le bloc de finalisation avec [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html).

#### iOS (Swift)

```swift
@objc
func didTapCheckoutButton() {
  // MARK: Start the checkout process
  paymentSheet?.present(from: self) { paymentResult in
    // MARK: Handle the payment result
    switch paymentResult {
    case .completed:
      print("Your order is confirmed")
    case .canceled:
      print("Canceled!")
    case .failed(let error):
      print("Payment failed: \(error)")
    }
  }
}
```

#### SwiftUI

Créez un modèle `ObservableObject` pour votre écran de paiement. Ce modèle publie un [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html) et un [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html).

```swift
import StripePaymentSheet
import SwiftUI

class CheckoutViewModel: ObservableObject {
  let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint
  @Published var paymentSheet: PaymentSheet?
  @Published var paymentResult: PaymentSheetResult?
}
```

Récupérez la clé secrète du client Intent Payment, la clé secrète du client de session cliente, l’ID du client et la clé publique à partir du point de terminaison que vous avez créé à l’étape précédente. Utilisez`STPAPIClient.shared` pour configurer votre clé publique et initialiser le[PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html).

```swift
@_spi(CustomerSessionBetaAccess) import StripePaymentSheet
import SwiftUI

class CheckoutViewModel: ObservableObject {
  let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint
  @Published var paymentSheet: PaymentSheet?
  @Published var paymentResult: PaymentSheetResult?
func preparePaymentSheet() {
    // MARK: Fetch thePaymentIntent and Customer information from the backend
    var request = URLRequest(url: backendCheckoutUrl)
    request.httpMethod = "POST"
    let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in
      guard let data = data,
            let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any],
            let customerId = json["customer"] as? String,
            let customerSessionClientSecret = json["customerSessionClientSecret"] as? String,
            letpaymentIntentClientSecret = json["paymentIntent"] as? String,
            let publishableKey = json["publishableKey"] as? String,
            let self = self else {
        // Handle error
        return
      }

      STPAPIClient.shared.publishableKey = publishableKey// MARK: Create a PaymentSheet instance
      var configuration = PaymentSheet.Configuration()
      configuration.merchantDisplayName = "Example, Inc."
      configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret)
      // Set `allowsDelayedPaymentMethods` to true if your business handles
      // delayed notification payment methods like US bank accounts.
      configuration.allowsDelayedPaymentMethods = true

      DispatchQueue.main.async {
        self.paymentSheet = PaymentSheet(paymentIntentClientSecret:paymentIntentClientSecret, configuration: configuration)
      }
    })
    task.resume()
  }
}
struct CheckoutView: View {
  @ObservedObject var model = CheckoutViewModel()

  var body: some View {
    VStack {
      if model.paymentSheet != nil {
        Text("Ready to pay.")
      } else {
        Text("Loading…")
      }
    }.onAppear { model.preparePaymentSheet() }
  }
}
```

Ajoutez un [PaymentSheet.PaymentButton](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/PaymentButton.html) à votre `View`. Ce bouton fonctionne de la même manière qu’un `Button` SwiftUI, ce qui vous permet de le personnaliser en ajoutant un objet `View`. Lorsque vous appuyez sur le bouton, la PaymentSheet est affichée. Une fois le paiement effectué, Stripe ferme la PaymentSheet et appelle le gestionnaire `onCompletion` avec un objet [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html).

```swift
@_spi(CustomerSessionBetaAccess) import StripePaymentSheet
import SwiftUI

class CheckoutViewModel: ObservableObject {
  let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint
  @Published var paymentSheet: PaymentSheet?
  @Published var paymentResult: PaymentSheetResult?

  func preparePaymentSheet() {
    // MARK: Fetch the PaymentIntent and Customer information from the backend
    var request = URLRequest(url: backendCheckoutUrl)
    request.httpMethod = "POST"
    let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in
      guard let data = data,
            let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any],
            let customerId = json["customer"] as? String,
            let customerSessionClientSecret = json["customerSessionClientSecret"] as? String,
            let paymentIntentClientSecret = json["paymentIntent"] as? String,
            let publishableKey = json["publishableKey"] as? String,
            let self = self else {
        // Handle error
        return
      }

      STPAPIClient.shared.publishableKey = publishableKey
      // MARK: Create a PaymentSheet instance
      var configuration = PaymentSheet.Configuration()
      configuration.merchantDisplayName = "Example, Inc."
      configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret)
      // Set `allowsDelayedPaymentMethods` to true if your business can handle payment methods
      // that complete payment after a delay, like SEPA Debit and Sofort.
      configuration.allowsDelayedPaymentMethods = true

      DispatchQueue.main.async {
        self.paymentSheet = PaymentSheet(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration)
      }
    })
    task.resume()
  }
func onPaymentCompletion(result: PaymentSheetResult) {
    self.paymentResult = result
  }
}

struct CheckoutView: View {
  @ObservedObject var model = CheckoutViewModel()

  var body: some View {
    VStack {if let paymentSheet = model.paymentSheet {
        PaymentSheet.PaymentButton(
          paymentSheet: paymentSheet,
          onCompletion: model.onPaymentCompletion
        ) {
          Text("Buy")
        }
      } else {
        Text("Loading…")
      }if let result = model.paymentResult {
        switch result {
        case .completed:
          Text("Payment complete")
        case .failed(let error):
          Text("Payment failed: \(error.localizedDescription)")
        case .canceled:
          Text("Payment canceled.")
        }
      }
    }.onAppear { model.preparePaymentSheet() }
  }
}
```

Si la valeur de `PaymentSheetResult` est `.completed`, informez l’utilisateur (par exemple, en affichant un écran de confirmation de commande).

Si vous définissez `allowsDelayedPaymentMethods` à true, les modes de paiement à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), comme les comptes bancaires américains, seront acceptés. Pour ces modes de paiement, l’état final du paiement n’est pas connu à la fin de la `PaymentSheet`. À la place, il réussit ou échoue plus tard. Si vous prenez en charge ces types de modes de paiement, informez le client que sa commande est confirmée et ne la traitez (par exemple, n’expédiez son produit) qu’une fois le paiement reçu.

## Configurer une URL de retour [Côté client]

Le client peut être amené à quitter votre application pour s’authentifier (par exemple, dans Safari ou dans son application bancaire). Pour lui permettre de revenir automatiquement sur votre application après s’être authentifié, [configurez un schéma d’URL personnalisé](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app) et configurez votre délégué d’application pour qu’il transmette l’URL à la trousse SDK. Stripe ne prend pas en charge les [liens universels](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content).

#### SceneDelegate

#### Swift

```swift
// This method handles opening custom URL schemes (for example, "your-app://stripe-redirect")
func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
    guard let url = URLContexts.first?.url else {
        return
    }
    let stripeHandled = StripeAPI.handleURLCallback(with: url)
    if (!stripeHandled) {
        // This was not a Stripe url – handle the URL normally as you would
    }
}

```

#### AppDelegate

#### Swift

```swift
// This method handles opening custom URL schemes (for example, "your-app://stripe-redirect")
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
    let stripeHandled = StripeAPI.handleURLCallback(with: url)
    if (stripeHandled) {
        return true
    } else {
        // This was not a Stripe url – handle the URL normally as you would
    }
    return false
}
```

#### SwiftUI

#### Swift

```swift

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      Text("Hello, world!").onOpenURL { incomingURL in
          let stripeHandled = StripeAPI.handleURLCallback(with: incomingURL)
          if (!stripeHandled) {
            // This was not a Stripe url – handle the URL normally as you would
          }
        }
    }
  }
}
```

Définissez également le paramètre [returnURL](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV9returnURLSSSgvp) correspondant à votre objet [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html) sur l’URL de votre application.

```swift
var configuration = PaymentSheet.Configuration()
configuration.returnURL = "your-app://stripe-redirect"
```

## Gestion des événements de postpaiement [Côté serveur]

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 l’[outil de webhook du Dashboard](https://dashboard.stripe.com/webhooks) ou suivez le [guide sur les webhooks](https://docs.stripe.com/webhooks/quickstart.md) pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par courriel à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison.

Écoutez ces événements plutôt que d’attendre un rappel de votre client. Du côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant même l’exécution du rappel, et des clients malveillants pourraient manipuler la réponse. En configurant votre intégration de manière à ce qu’elle écoute les événements asynchrones, vous pourrez accepter [plusieurs types de moyens de paiement](https://stripe.com/payments/payment-methods-guide) avec une seule intégration.

En plus de gérer l’événement `payment_intent.succeeded`, nous vous recommandons de gérer les autres événements suivants lorsque vous encaissez des paiements à l’aide du Payment Element&nbsp;:

| Événement                                                                                                                       | Description                                                                                                                                                                                                                                                                                  | Action                                                                                                                                                                                                                        |
| ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded)           | Envoyé lorsqu’un client a effectué un paiement.                                                                                                                                                                                                                                              | Envoyez au client une confirmation de commande et *traitez* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) sa commande.                        |
| [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing)         | Envoyé lorsqu’un client a entrepris un paiement, mais qu’il ne l’a pas encore finalisé. Dans la plupart des cas, cet événement est envoyé lorsque le client entreprend un prélèvement bancaire. Il est suivi par un événement `payment_intent.succeeded` ou `payment_intent.payment_failed`. | Envoyez au client une confirmation de commande qui indique que son paiement est en attente. Pour des marchandises dématérialisées, nous vous recommandons de traiter la commande sans attendre que le paiement soit effectué. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Envoyé lorsqu’un client tente d’effectuer un paiement, mais que le paiement échoue.                                                                                                                                                                                                          | Si un paiement passe de l’état `processing` à l’état `payment_failed`, proposez au client de retenter le paiement.                                                                                                            |

## Débiter le moyen de paiement enregistré ultérieurement [Côté serveur]

> #### Conformité
> 
> Lorsque vous enregistrez les informations de paiement d’un client, vous êtes responsable du respect de toutes les lois, réglementations et règles du réseau applicables. Lorsque vous présentez au client final des modes de paiement précédemment utilisés en vue d’effectuer des achats futurs, assurez-vous de répertorier les modes de paiement pour lesquels vous avez obtenu le consentement du client afin d’enregistrer les informations du mode de paiement pour cette utilisation future spécifique. Pour différencier les modes de paiement associés aux clients qui peuvent ou non être présentés au client final en tant que mode de paiement enregistré pour des achats futurs, utilisez le paramètre [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay).

Au moment de débiter votre client *hors session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information), utilisez l’ID des objets Customer et PaymentMethod pour créer un PaymentIntent. Pour trouver un mode de paiement à débiter, répertoriez les modes de paiement associés à votre client. Cet exemple répertorie des cartes, mais vous pouvez répertorier n’importe quel [type de carte](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type) pris en charge.

```curl
curl -G https://api.stripe.com/v1/payment_methods \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d customer="{{CUSTOMER_ID}}" \
  -d type=card
```

Après avoir obtenu les ID de Customer et de PaymentMethod, créez un PaymentIntent indiquant le montant et la devise du paiement. Définissez quelques autres paramètres afin d’effectuer le paiement hors session&nbsp;:

- Définissez l’attribut [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) à `true` pour indiquer que le client ne se trouve pas dans votre flux de paiement lors d’une tentative de paiement, et qu’il ne peut donc pas répondre à une demande d’authentification effectuée par un partenaire, comme un émetteur de cartes, une institution financière ou un autre établissement de paiement. Si un partenaire demande une authentification dans le flux de paiement, Stripe demandera une exemption en s’appuyant sur les informations utilisées par le client *pendant une session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method) précédente. Si les conditions d’exemption ne sont pas remplies, le PaymentIntent peut générer une erreur.
- Définissez la valeur `true` à la propriété [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) du PaymentIntent, ce qui aura pour effet de générer immédiatement une confirmation lors de la création du PaymentIntent.
- Définissez [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) sur l’ID du PaymentMethod et [customer](https://docs.stripe.com/api.md#create_payment_intent-customer) sur l’ID du client.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d amount=1099 \
  -d currency=usd \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \-d customer="{{CUSTOMER_ID}}" \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \
  -d return_url="https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true
```

## Testez l'intégration

#### Cartes

| Moyen de paiement | Scénario                                                                                                                                                                                                                                                                                                                         | Méthode de test                                                                                                                                                                                    |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Carte de crédit   | La configuration de la carte aboutit et ne requiert aucune *authentification* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4242 4242 4242 4242` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. |
| Carte de crédit   | La carte exige une authentification pour la configuration initiale, mais la transaction aboutit pour les paiements suivants.                                                                                                                                                                                                     | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4000 0025 0000 3155` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. |
| Carte de crédit   | La carte exige une authentification pour la configuration initiale et pour les paiements suivants.                                                                                                                                                                                                                               | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4000 0027 6000 3184` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. |
| Carte de crédit   | La carte est refusée durant la configuration.                                                                                                                                                                                                                                                                                    | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4000 0000 0000 9995` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. |

## Optional: Activer Apple Pay

> Si votre écran de paiement comporte un bouton **Apple Pay** dédié, suivez le [guide Apple Pay](https://docs.stripe.com/apple-pay.md#present-payment-sheet) et utilisez `ApplePayContext` pour encaisser le paiement à partir de votre bouton Apple Pay. Vous pouvez utiliser `PaymentSheet` pour gérer d’autres types de moyens de paiement.

### Demander un ID de marchand Apple

Pour obtenir un ID de marchand Apple, [demandez un nouvel identifiant](https://developer.apple.com/account/resources/identifiers/add/merchant) sur le site Web Apple Developer.

Renseignez le formulaire en indiquant une description et un identifiant. La description n’est destinée qu’à votre propre information et vous pourrez la modifier ultérieurement au besoin. En ce qui concerne l’identifiant, Stripe vous recommande d’utiliser le nom de votre application (par exemple, `merchant.com.{{YOUR_APP_NAME}}`).

### Créer un nouveau certificat Apple Pay

Créez un certificat permettant à votre application de chiffrer les données de paiement.

Accédez aux [paramètres des certificats iOS](https://dashboard.stripe.com/settings/ios_certificates) dans le Dashboard, cliquez sur **Ajouter une nouvelle application** et suivez le guide.

Téléchargez un fichier de demande de signature de certificat (CSR) pour obtenir un certificat sécurisé auprès d’Apple qui vous permet d’utiliser Apple Pay.

Un fichier CSR doit être utilisé pour émettre exactement un certificat. Si vous changez votre identifiant Apple Merchant ID, vous devez accéder aux [paramètres de certificat iOS](https://dashboard.stripe.com/settings/ios_certificates) du Dashboard pour obtenir un nouveau CSR et un nouveau certificat.

### Réaliser une intégration avec Xcode

Ajoutez la fonctionnalité Apple Pay à votre application. Dans Xcode, ouvrez les paramètres de votre projet, cliquez sur l’onglet **Signing & Capabilities** (Signature et fonctionnalités), et ajoutez la fonctionnalité **Apple Pay**. On pourrait alors vous demander de vous connecter à votre compte de développeur. Sélectionnez l’ID du marchand que vous venez de créer, et votre application peut maintenant accepter Apple Pay.
![](https://b.stripecdn.com/docs-statics-srv/assets/xcode.a701d4c1922d19985e9c614a6f105bf1.png)

Activer la fonctionnalité Apple Pay dans Xcode

### Ajouter Apple Pay

#### Paiement ponctuel

Pour ajouter Apple&nbsp;Pay à PaymentSheet, configurez [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp) après avoir lancé `PaymentSheet.Configuration` avec votre ID de marchand Apple et le [code pays de votre entreprise](https://dashboard.stripe.com/settings/account).

#### iOS (Swift)

```swift
var configuration = PaymentSheet.Configuration()
configuration.applePay = .init(
  merchantId: "merchant.com.your_app_name",
  merchantCountryCode: "US"
)
```

#### Paiements récurrents

Pour ajouter Apple&nbsp;Pay à PaymentSheet, configurez [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp) après avoir lancé `PaymentSheet.Configuration` avec votre ID de marchand Apple et le [code pays de votre entreprise](https://dashboard.stripe.com/settings/account).

Conformément aux [directives d’Apple](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Supporting-subscriptions) pour les paiements récurrents, vous devez également définir des attributs supplémentaires sur la `PKPaymentRequest`. Ajoutez un gestionnaire dans [ApplePayConfiguration.paymentRequestHandlers](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/applepayconfiguration/handlers/paymentrequesthandler) pour configurer les [PKPaymentRequest.paymentSummaryItems](https://developer.apple.com/documentation/passkit/pkpaymentrequest/1619231-paymentsummaryitems) avec le montant que vous avez l’intention de facturer (par exemple, 9,95&nbsp;USD par mois).

Vous pouvez également adopter [les jetons du marchand](https://developer.apple.com/apple-pay/merchant-tokens/) en définissant les propriétés `recurringPaymentRequest` ou `automaticReloadPaymentRequest` sur la propriété `PKPaymentRequest`.

Pour en savoir plus sur l’utilisation des paiements récurrents avec Apple Pay, consultez [la documentation PassKit d’Apple](https://developer.apple.com/documentation/passkit/pkpaymentrequest).

#### iOS (Swift)

```swift
let customHandlers = PaymentSheet.ApplePayConfiguration.Handlers(
    paymentRequestHandler: { request in
        // PKRecurringPaymentSummaryItem is available on iOS 15 or later
        if #available(iOS 15.0, *) {
            let billing = PKRecurringPaymentSummaryItem(label: "My Subscription", amount: NSDecimalNumber(string: "59.99"))

            // Payment starts today
            billing.startDate = Date()

            // Payment ends in one year
            billing.endDate = Date().addingTimeInterval(60 * 60 * 24 * 365)

            // Pay once a month.
            billing.intervalUnit = .month
            billing.intervalCount = 1

            // recurringPaymentRequest is only available on iOS 16 or later
            if #available(iOS 16.0, *) {
                request.recurringPaymentRequest = PKRecurringPaymentRequest(paymentDescription: "Recurring",
                                                                            regularBilling: billing,
                                                                            managementURL: URL(string: "https://my-backend.example.com/customer-portal")!)
                request.recurringPaymentRequest?.billingAgreement = "You'll be billed $59.99 every month for the next 12 months. To cancel at any time, go to Account and click 'Cancel Membership.'"
            }
            request.paymentSummaryItems = [billing]
            request.currencyCode = "USD"
        } else {
            // On older iOS versions, set alternative summary items.
            request.paymentSummaryItems = [PKPaymentSummaryItem(label: "Monthly plan starting July 1, 2022", amount: NSDecimalNumber(string: "59.99"), type: .final)]
        }
        return request
    }
)
var configuration = PaymentSheet.Configuration()
configuration.applePay = .init(merchantId: "merchant.com.your_app_name",
                                merchantCountryCode: "US",
                                customHandlers: customHandlers)
```

### Suivi des commandes

Pour ajouter des informations de [suivi de commande](https://developer.apple.com/design/human-interface-guidelines/technologies/wallet/designing-order-tracking) dans iOS&nbsp;16 ou version ultérieure, configurez un [authorizationResultHandler](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/applepayconfiguration/handlers/authorizationresulthandler) dans votre `PaymentSheet.ApplePayConfiguration.Handlers`. Stripe appelle votre implémentation une fois le paiement effectué, mais avant qu’iOS ne ferme la fiche Apple Pay.

Lors de la mise en œuvre d’`authorizationResultHandler`, récupérez les détails de la commande auprès de votre serveur pour la commande terminée. Ajoutez les détails au [PKPaymentAuthorizationResult](https://developer.apple.com/documentation/passkit/pkpaymentauthorizationresult) fourni et renvoyez le résultat modifié.

Pour en savoir plus sur le suivi des commandes, consultez la documentation [documentation sur les commandes du portefeuille numérique Apple](https://developer.apple.com/documentation/walletorders).

#### iOS (Swift)

```swift
let customHandlers = PaymentSheet.ApplePayConfiguration.Handlers(
    authorizationResultHandler: { result in
      do {
        // Fetch the order details from your service
        let myOrderDetails = try await MyAPIClient.shared.fetchOrderDetails(orderID: orderID)
        result.orderDetails = PKPaymentOrderDetails(
          orderTypeIdentifier: myOrderDetails.orderTypeIdentifier, // "com.myapp.order"
          orderIdentifier: myOrderDetails.orderIdentifier, // "ABC123-AAAA-1111"
          webServiceURL: myOrderDetails.webServiceURL, // "https://my-backend.example.com/apple-order-tracking-backend"
          authenticationToken: myOrderDetails.authenticationToken) // "abc123"
        // Return your modified PKPaymentAuthorizationResult
        return result
      } catch {
        return PKPaymentAuthorizationResult(status: .failure, errors: [error])
      }
    }
)
var configuration = PaymentSheet.Configuration()
configuration.applePay = .init(merchantId: "merchant.com.your_app_name",
                               merchantCountryCode: "US",
                               customHandlers: customHandlers)
```

## Activer le balayage des cartes

Afin d’activer la prise en charge de la numérisation des cartes pour iOS, configurez l’objet `NSCameraUsageDescription` (**Privacy - Camera Usage Description**) (Confidentialité – Description de l’utilisation de la caméra) dans la `Info.plist` de votre application, et indiquez un motif pour l’accès à la caméra (p. ex., «&nbsp;Pour numériser des cartes&nbsp;»).

## Optional: Personnaliser la feuille

Pour personnaliser le formulaire de paiement, vous devez obligatoirement utiliser l’objet [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html).

### Appearance

Customize colors, fonts, and so on to match the look and feel of your app by using the [appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=ios).

### Présentation des modes de paiement

Configurez la mise en page des modes de paiement dans la feuille à l’aide de [paymentMethodLayout](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/configuration-swift.struct/paymentmethodlayout). Vous pouvez les afficher horizontalement, verticalement ou laisser Stripe optimiser la mise en page automatiquement.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-mpe-payment-method-layouts.9d0513e2fcec5660378ba1824d952054.png)

#### Swift

```swift
var configuration = PaymentSheet.Configuration()
configuration.paymentMethodLayout = .automatic
```

### Collecter les adresses des utilisateurs

Collectez les adresses de livraison ou de facturation locales et internationales à l’aide du composant [Address Element](https://docs.stripe.com/elements/address-element.md?platform=ios).

### Nom d’affichage du marchand

Précisez un nom d’entreprise pour le client en définissant [merchantDisplayName](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:18StripePaymentSheet0bC0C13ConfigurationV19merchantDisplayNameSSvp). Par défaut, il s’agit du nom de votre application.

#### Swift

```swift
var configuration = PaymentSheet.Configuration()
configuration.merchantDisplayName = "My app, Inc."
```

### Mode sombre

`PaymentSheet` s’ajuste automatiquement aux paramètres d’affichage du système de l’utilisateur (mode clair et mode sombre). Si votre application ne prend pas en charge le mode sombre, vous pouvez définir la propriété [style](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:18StripePaymentSheet0bC0C13ConfigurationV5styleAC18UserInterfaceStyleOvp) sur le mode `alwaysLight` ou `alwaysDark`.

```swift
var configuration = PaymentSheet.Configuration()
configuration.style = .alwaysLight
```

### Informations de facturation par défaut

Pour définir des valeurs par défaut pour les informations de facturation collectées dans la feuille de paiement, configurez la propriété `defaultBillingDetails`. `PaymentSheet` pré-remplit ses champs avec les valeurs que vous fournissez.

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

### Collecte des informations de facturation

Utilisez `billingDetailsCollectionConfiguration` pour spécifier la façon dont vous souhaitez collecter les informations de facturation dans le formulaire de paiement.

Vous pouvez recueillir le nom, l’adresse de courriel, le numéro de téléphone et l’adresse de votre client.

Si vous souhaitez uniquement indiquer les informations de facturation requises par le mode de paiement, définissez `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` à true. Dans ce cas, le paramètre `PaymentSheet.Configuration.defaultBillingDetails` est défini comme les [informations de facturation](https://docs.stripe.com/api/payment_methods/object.md?lang=node#payment_method_object-billing_details) du mode de paiement.

Si vous souhaitez collecter des informations de facturation supplémentaires qui ne sont pas nécessairement requises pour le moyen de paiement, définissez `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` sur false. Dans ce cas, les informations de facturation collectées via la `PaymentSheet` sont définies comme les informations de facturation du moyen de paiement.

```swift
var configuration = PaymentSheet.Configuration()
configuration.defaultBillingDetails.email = "foo@bar.com"
configuration.billingDetailsCollectionConfiguration.name = .always
configuration.billingDetailsCollectionConfiguration.email = .never
configuration.billingDetailsCollectionConfiguration.address = .full
configuration.billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod = true
```

> Consultez votre conseiller juridique au sujet des lois qui s’appliquent à la collecte de renseignements. Ne collectez les numéros de téléphone que si vous en avez besoin pour la transaction.

## Optional: Finalisez le paiement dans votre interface utilisateur

Vous pouvez présenter le formulaire de paiement pour la seule collecte des données du moyen de paiement, puis appeler une méthode `confirm` pour mener à bien l’opération de paiement dans l’interface utilisateur de votre application. Cette approche est utile si vous avez intégré un bouton d’achat personnalisé ou si des étapes supplémentaires sont nécessaires après la collecte des informations de paiement.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-multi-step.cd631ea4f1cd8cf3f39b6b9e1e92b6c5.png)

Finaliser le paiement dans l’interface utilisateur de votre application

#### UIKit

Les étapes suivantes vous expliquent comment effectuer un paiement dans l’interface utilisateur de votre application. Consultez notre exemple d’intégration sur [GitHub](https://github.com/stripe/stripe-ios/blob/master/Example/PaymentSheet%20Example/PaymentSheet%20Example/ExampleCustomCheckoutViewController.swift).

1. Tout d’abord, initialisez [PaymentSheet.FlowController](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller) plutôt que `PaymentSheet` et mettez à jour votre interface utilisateur avec sa propriété`paymentOption`. Cette propriété contient une image et une étiquette représentant le moyen de paiement par défaut initialement sélectionné par le client.

```swift
PaymentSheet.FlowController.create(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) { [weak self] result in
  switch result {
  case .failure(let error):
    print(error)
  case .success(let paymentSheetFlowController):
    self?.paymentSheetFlowController = paymentSheetFlowController
    // Update your UI using paymentSheetFlowController.paymentOption
  }
}
```

1. Appelez ensuite `presentPaymentOptions` pour collecter les données de paiement. Une fois l’opération effectuée, mettez à nouveau à jour votre interface utilisateur avec la propriété `paymentOption`.

```swift
paymentSheetFlowController.presentPaymentOptions(from: self) {
  // Update your UI using paymentSheetFlowController.paymentOption
}
```

1. Enfin, appelez `confirm`.

```swift
paymentSheetFlowController.confirm(from: self) { paymentResult in
  // MARK: Handle the payment result
  switch paymentResult {
  case .completed:
    print("Payment complete!")
  case .canceled:
    print("Canceled!")
  case .failed(let error):
    print(error)
  }
}
```

#### SwiftUI

Les étapes suivantes vous expliquent comment effectuer un paiement dans l’interface utilisateur de votre application. Consultez notre exemple d’intégration sur [GitHub](https://github.com/stripe/stripe-ios/blob/master/Example/PaymentSheet%20Example/PaymentSheet%20Example/ExampleSwiftUICustomPaymentFlow.swift).

1. Tout d’abord, initialisez [PaymentSheet.FlowController](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller) plutôt que `PaymentSheet`. Sa propriété `paymentOption` contient une image et une étiquette représentant le moyen de paiement actuellement sélectionné par le client, que vous pouvez utiliser dans votre interface utilisateur.

```swift
PaymentSheet.FlowController.create(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) { [weak self] result in
  switch result {
  case .failure(let error):
    print(error)
  case .success(let paymentSheetFlowController):
    self?.paymentSheetFlowController = paymentSheetFlowController
    // Use the paymentSheetFlowController.paymentOption properties in your UI
    myPaymentMethodLabel = paymentSheetFlowController.paymentOption?.label ?? "Select a payment method"
    myPaymentMethodImage = paymentSheetFlowController.paymentOption?.image ?? UIImage(systemName: "square.and.pencil")!
  }
}
```

1. Utilisez [PaymentSheet.FlowController.PaymentOptionsButton](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/paymentoptionsbutton) pour inclure le bouton qui présente la fiche de collecte des informations de paiement. Lorsque `PaymentSheet.FlowController` appelle l’argument `onSheetDismissed`, la propriété `paymentOption` de l’instance de `PaymentSheet.FlowController` reflète le mode de paiement actuellement sélectionné.

```swift
PaymentSheet.FlowController.PaymentOptionsButton(
  paymentSheetFlowController: paymentSheetFlowController,
  onSheetDismissed: {
    myPaymentMethodLabel = paymentSheetFlowController.paymentOption?.label ?? "Select a payment method"
    myPaymentMethodImage = paymentSheetFlowController.paymentOption?.image ?? UIImage(systemName: "square.and.pencil")!
  },
  content: {
    /* An example button */
    HStack {
      Text(myPaymentMethodLabel)
      Image(uiImage: myPaymentMethodImage)
    }
  }
)
```

1. Utilisez [PaymentSheet.FlowController.PaymentOptionsButton](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/paymentoptionsbutton) pour inclure le bouton qui confirme le paiement.

```swift
PaymentSheet.FlowController.ConfirmButton(
  paymentSheetFlowController: paymentSheetFlowController,
  onCompletion: { result in
    // MARK: Handle the payment result
    switch result {
    case .completed:
      print("Payment complete!")
    case .canceled:
      print("Canceled!")
    case .failed(let error):
      print(error)
    }
  },
  content: {
    /* An example button */
    Text("Pay")
  }
)
```

Si vous définissez `allowsDelayedPaymentMethods` à true, les modes de paiement à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), comme les comptes bancaires américains, seront acceptés. Pour ces modes de paiement, l’état final du paiement n’est pas connu à la fin de la `PaymentSheet`. À la place, il réussit ou échoue plus tard. Si vous prenez en charge ces types de modes de paiement, informez le client que sa commande est confirmée et ne la traitez (par exemple, n’expédiez son produit) qu’une fois le paiement reçu.


# Android

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

Utilisez l’[API Payment Intents](https://docs.stripe.com/api/payment_intents.md) pour enregistrer des informations de paiement à partir d’un achat. Il existe plusieurs cas d’usage&nbsp;:

- Débiter un client pour une commande en ligne et enregistrer les informations pour des achats ultérieurs.
- Entreprendre le premier paiement d’une série de paiements récurrents.
- Débiter un acompte et enregistrer les détails pour facturer plus tard le montant total.

> #### Transactions avec présentation de la carte
> 
> Les transactions avec présentation de la carte, telles que les paiements via Stripe Terminal, utilisent un processus différent pour enregistrer le mode de paiement. Pour en savoir plus, consultez [la documentation de Terminal](https://docs.stripe.com/terminal/features/saving-payment-details/save-after-payment.md).

## Conformité

Vous êtes responsable de votre conformité à toutes les lois, réglementations et règles du réseau applicables lorsque vous enregistrez les informations de paiement d’un client pour une utilisation future, par exemple pour lui présenter son mode de paiement lors du flux de paiement pour un achat futur ou pour le facturer lorsqu’il n’utilise pas activement votre site Web ou votre application. Avant d’enregistrer ou de facturer le mode de paiement d’un client, assurez-vous&nbsp;:

- Ajoutez à votre site Web ou à votre application des conditions indiquant comment vous comptez enregistrer les informations relatives aux modes de paiement, par exemple&nbsp;:
  - Le consentement du client vous autorisant à effectuer un paiement ou une série de paiements en son nom pour des transactions spécifiques.
  - Le calendrier et la fréquence des paiements prévus (par exemple, si les frais concernent des versements planifiés, des paiements d’abonnement ou des recharges non planifiées).
  - La façon dont vous déterminez le montant du paiement.
  - Vos conditions d’annulation, si le moyen de paiement est un service d’abonnement.
- Utilisez un mode de paiement enregistré uniquement aux fins indiquées dans vos conditions générales.
- Obtenez le consentement explicite du client pour cette utilisation précise. Par exemple, ajoutez une case à cocher «&nbsp;Enregistrer mon mode de paiement pour une utilisation ultérieure&nbsp;».
- Conservez une trace de l’accord écrit de votre client à vos conditions.

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

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

### Côté serveur

Cette intégration nécessite des points de terminaison sur votre serveur qui communiquent avec l’API Stripe. Utilisez les bibliothèques officielles pour accéder à l’API Stripe à partir de 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

La [trousse SDK Stripe Android](https://github.com/stripe/stripe-android) est à code source libre et [possède une documentation complète](https://stripe.dev/stripe-android/).

Pour installer la trousse 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 de la trousse 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).

## Activer les moyens de paiement

Les paiements par carte sont activés par défaut. Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) pour activer d’autres moyens de paiement que vous souhaitez prendre en charge.

## Ajouter un point de terminaison [Côté serveur]

> #### Remarque
> 
> Pour afficher PaymentSheet avant de créer un PaymentIntent, consultez la [Collecter les détails du paiement avant de créer un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment).

Si votre plateforme Connect utilise des [comptes configurés par le client](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utilisez notre [guide](https://docs.stripe.com/connect/use-accounts-as-customers.md) pour remplacer le `Client` et des références d’événements dans votre code avec les références équivalentes de l’API Accounts v2.

Cette intégration utilise trois objets de l’API Stripe&nbsp;:

1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md)&nbsp;: Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise cet objet qui suit les tentatives de débit et les changements d’état du paiement tout au long du processus.

1. [Client](https://docs.stripe.com/api/customers.md)&nbsp;: Pour configurer un mode de paiement pour les paiements futurs, vous devrez l’associer à un *client* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Créez un objet Customer lorsque votre client crée un compte auprès de votre entreprise. Si votre client effectue un paiement en tant qu’invité, vous pourrez créer un objet Customer avant le paiement, puis l’associer ultérieurement à votre représentation interne du compte du client.

1. [Session Client](https://docs.stripe.com/api/customer_sessions.md)&nbsp;: L’objet Customer contient des informations sensibles qu’il n’est pas possible de récupérer directement à partir d’une application. Un objet CustomerSession accorde à la trousse SDK un accès temporaire à l’objet Customer et fournit des options de configuration supplémentaires. Consultez la liste complète des [options de configuration](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components).

Pour des raisons de sécurité, votre application ne peut pas créer ces objets. Ajoutez plutôt un point de terminaison sur votre serveur qui&nbsp;:

1. Récupère l’objet Customer ou en crée un nouveau.
1. Crée une [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) pour le client.
1. Crée un PaymentIntent comportant les paramètres [amount](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), [currency](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency), [customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer) et [setup_future_usage](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-setup_future_usage) .
1. Renvoi de la *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)) du Payment Intent, de l’objet `client_secret` de la CustomerSession, de l’[id](https://docs.stripe.com/api/customers/object.md#customer_object-id) du client et de votre [clé publiable](https://dashboard.stripe.com/apikeys) à votre application.

> Le Payment Element mobile ne prend en charge que `setup_future_usage` avec les cartes et les comptes bancaires américains.

Les modes de paiement présentés aux clients lors du processus de paiement sont également compris dans le PaymentIntent. Les modes de paiement peuvent être récupérés par Stripe à partir de vos paramètres Dashboard, ou vous pouvez les ajouter manuellement. Quelle que soit l’option que vous choisissez, sachez que la devise transmise dans le PaymentIntent filtre les modes de paiement présentés au client. Par exemple, si vous transmettez `eur` dans le PaymentIntent et que vous avez activé OXXO dans le Dashboard, OXXO ne sera pas présenté au client, car OXXO ne prend pas en charge les paiements `eur`.

À moins que votre intégration ne nécessite du code pour la présentation des modes de paiement, Stripe vous recommande l’option automatisée. En effet, Stripe évalue la devise, les restrictions sur les modes de paiement et d’autres paramètres pour déterminer la liste des modes de paiement pris en charge. Les modes de paiement qui augmentent le taux de conversion et qui sont les plus pertinents pour la devise et le lieu de résidence du client sont priorisés.

#### Gérer les moyens de paiement à partir du Dashboard

Vous pouvez gérer les moyens de paiement à partir du [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le retour des moyens de paiement admissibles en fonction de facteurs tels que le montant, la devise et le flux de paiement de la transaction. Le PaymentIntent est créé à l’aide des moyens de paiement configurés dans le Dashboard. Si vous ne souhaitez pas utiliser le Dashboard ou si vous souhaitez préciser des moyens de paiement manuellement, vous pouvez les répertorier à l’aide de l’attribut `payment_method_types`.

#### curl

```bash
# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  -d "setup_future_usage"="off_session" \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter
  # is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \
```

#### Référencement manuel des moyens de paiement

#### curl

```bash
# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  -d "setup_future_usage"="off_session" \
  -d "payment_method_types[]"="card" \
```

> Chacun des modes de paiement doit prendre en charge la devise transmise dans le PaymentIntent, et votre entreprise doit par ailleurs être établie dans l’un des pays pris en charge par chaque mode de paiement. Consultez la section [Options d’intégration des modes de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md) pour en savoir plus sur les modes de paiement pris en charge.

## Collectez les informations de paiement [Côté client]

Avant d’afficher le Payment Element mobile, votre page de paiement doit&nbsp;:

- Afficher les produits achetés et le montant total
- Collecter toutes les informations de livraison requises à l’aide du composant [Address Element](https://docs.stripe.com/elements/address-element.md?platform=android)
- Inclure un bouton de paiement pour afficher l’interface utilisateur de Stripe

#### Jetpack Compose

[Lancez](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-builder/index.html) une instance `PaymentSheet` dans la méthode `onCreate` de votre classe CheckoutActivity, puis transmettez une méthode pour gérer le résultat.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import com.stripe.android.paymentsheet.PaymentSheet
import com.stripe.android.paymentsheet.PaymentSheetResult

@Composable
fun App() {
  val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build()
}

private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {
  // implemented in the next steps
}
```

Ensuite, récupérez la clé secrète du client du PaymentIntent, la clé secrète du client de session cliente, l’ID du client et la clé publique à partir du point de terminaison que vous avez créé à l’étape précédente. Configurez la clé publique à l’aide du paramètre `PaymentConfiguration` et utilisez les autres lorsque vous présentez le PaymentSheet.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberimport androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.platform.LocalContext
import com.stripe.android.PaymentConfiguration
import com.stripe.android.paymentsheet.PaymentSheet
import com.stripe.android.paymentsheet.PaymentSheetResult

@Composable
fun App() {
  val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build()val context = LocalContext.current
  var customerConfig by remember { mutableStateOf<PaymentSheet.CustomerConfiguration?>(null) }
  varpaymentIntentClientSecret by remember { mutableStateOf<String?>(null) }

  LaunchedEffect(context) {
    // Make a request to your own server and retrieve payment configurations
    val networkResult = ...
    if (networkResult.isSuccess) {paymentIntentClientSecret = networkResult.paymentIntent
        customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession(
          id = networkResult.customer,
          clientSecret = networkResult.customerSessionClientSecret
        )PaymentConfiguration.init(context, networkResult.publishableKey)}
  }
}

private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {
  // implemented in the next steps
}
```

Lorsque le client touche votre bouton de paiement, appelez [presentWithPaymentIntent](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#1814490530%2FFunctions%2F2002900378) pour présenter le formulaire de paiement. Une fois que le client a effectué le paiement, le formulaire se ferme et le [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) est appelé avec un [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html).

```kotlin
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.platform.LocalContext
import com.stripe.android.PaymentConfiguration
import com.stripe.android.paymentsheet.PaymentSheet
import com.stripe.android.paymentsheet.PaymentSheetResult

@Composable
fun App() {
  val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build()
  val context = LocalContext.current
  var customerConfig by remember { mutableStateOf<PaymentSheet.CustomerConfiguration?>(null) }
  var paymentIntentClientSecret by remember { mutableStateOf<String?>(null) }

  LaunchedEffect(context) {
    // Make a request to your own server and retrieve payment configurations
    val networkResult = ...
    if (networkResult.isSuccess) {
        paymentIntentClientSecret = networkResult.paymentIntent
        customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession(
          id = networkResult.customer,
          clientSecret = networkResult.customerSessionClientSecret
        )
        PaymentConfiguration.init(context, networkResult.publishableKey)
    }
  }Button(
    onClick = {
      val currentConfig = customerConfig
      val currentClientSecret =paymentIntentClientSecret

      if (currentConfig != null && currentClientSecret != null) {
        presentPaymentSheet(paymentSheet, currentConfig, currentClientSecret)
      }
    }
  ) {
    Text("Checkout")
  }
}private fun presentPaymentSheet(
  paymentSheet: PaymentSheet,
  customerConfig: PaymentSheet.CustomerConfiguration,paymentIntentClientSecret: String
) {
  paymentSheet.presentWithPaymentIntent(paymentIntentClientSecret,
    PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name")
      .customer(customerConfig)
      // Set `allowsDelayedPaymentMethods` to true if your business handles
      // delayed notification payment methods like US bank accounts.
      .allowsDelayedPaymentMethods(true)
      .build()
  )
}
private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) {
    is PaymentSheetResult.Canceled -> {
      print("Canceled")
    }
    is PaymentSheetResult.Failed -> {
      print("Error: ${paymentSheetResult.error}")
    }
    is PaymentSheetResult.Completed -> {
      // Display for example, an order confirmation screen
      print("Completed")
    }
  }
}
```

#### Affichages (Classic)

[Initialisez](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#-394860221%2FConstructors%2F2002900378) une instance `PaymentSheet` dans la méthode `onCreate` de votre classe CheckoutActivity, puis transmettez une méthode pour gérer le résultat.

#### Kotlin

```kotlin
import com.stripe.android.paymentsheet.PaymentSheet

class CheckoutActivity : AppCompatActivity() {
  lateinit var paymentSheet: PaymentSheet

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult).build(this)
  }

  fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {
    // implemented in the next steps
  }
}
```

Ensuite, récupérez la clé secrète du client du PaymentIntent, la clé secrète du client de session cliente, l’ID du client et la clé publique à partir du point de terminaison que vous avez créé à l’étape précédente. Configurez la clé publique à l’aide du paramètre `PaymentConfiguration` et utilisez les autres lorsque vous présentez le PaymentSheet.

#### Kotlin

```kotlin
import com.stripe.android.paymentsheet.PaymentSheet

class CheckoutActivity : AppCompatActivity() {
  lateinit var paymentSheet: PaymentSheetlateinit var customerConfig: PaymentSheet.CustomerConfiguration
  lateinit varpaymentIntentClientSecret: String

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult).build(this)lifecycleScope.launch {
      // Make a request to your own server and retrieve payment configurations
      val networkResult = MyBackend.getPaymentConfig()
      if (networkResult.isSuccess) {paymentIntentClientSecret = networkResult.paymentIntent
        customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession(
          id = networkResult.customer,
          clientSecret = networkResult.customerSessionClientSecret
        )PaymentConfiguration.init(context, networkResult.publishableKey)}
    }
  }

  fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {
    // implemented in the next steps
  }
}
```

Lorsque le client touche votre bouton de paiement, appelez [presentWithPaymentIntent](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#1814490530%2FFunctions%2F2002900378) pour présenter le formulaire de paiement. Une fois que le client a effectué le paiement, le formulaire se ferme et le [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) est appelé avec un [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html).

#### Kotlin

```kotlin
// ...
class CheckoutActivity : AppCompatActivity() {
  lateinit var paymentSheet: PaymentSheet
  lateinit var customerConfig: PaymentSheet.CustomerConfiguration
  lateinit var paymentIntentClientSecret: String
  // ...fun presentPaymentSheet() {
    paymentSheet.presentWithPaymentIntent(paymentIntentClientSecret,
      PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name")
        .customer(customerConfig)
        // Set `allowsDelayedPaymentMethods` to true if your business handles
        // delayed notification payment methods like US bank accounts.
        .allowsDelayedPaymentMethods(true)
        .build()
    )
  }

  fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) {
      is PaymentSheetResult.Canceled -> {
        print("Canceled")
      }
      is PaymentSheetResult.Failed -> {
        print("Error: ${paymentSheetResult.error}")
      }
      is PaymentSheetResult.Completed -> {
        // Display for example, an order confirmation screen
        print("Completed")
      }
    }
  }
}
```

Si vous définissez `allowsDelayedPaymentMethods` à true, les modes de paiement à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), comme les comptes bancaires américains, seront acceptés. Pour ces modes de paiement, l’état final du paiement n’est pas connu à la fin de la `PaymentSheet`. À la place, il réussit ou échoue plus tard. Si vous prenez en charge ces types de modes de paiement, informez le client que sa commande est confirmée et ne la traitez (par exemple, n’expédiez son produit) qu’une fois le paiement reçu.

## Gestion des événements de postpaiement [Côté serveur]

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 l’[outil de webhook du Dashboard](https://dashboard.stripe.com/webhooks) ou suivez le [guide sur les webhooks](https://docs.stripe.com/webhooks/quickstart.md) pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par courriel à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison.

Écoutez ces événements plutôt que d’attendre un rappel de votre client. Du côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant même l’exécution du rappel, et des clients malveillants pourraient manipuler la réponse. En configurant votre intégration de manière à ce qu’elle écoute les événements asynchrones, vous pourrez accepter [plusieurs types de moyens de paiement](https://stripe.com/payments/payment-methods-guide) avec une seule intégration.

En plus de gérer l’événement `payment_intent.succeeded`, nous vous recommandons de gérer les autres événements suivants lorsque vous encaissez des paiements à l’aide du Payment Element&nbsp;:

| Événement                                                                                                                       | Description                                                                                                                                                                                                                                                                                  | Action                                                                                                                                                                                                                        |
| ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded)           | Envoyé lorsqu’un client a effectué un paiement.                                                                                                                                                                                                                                              | Envoyez au client une confirmation de commande et *traitez* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) sa commande.                        |
| [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing)         | Envoyé lorsqu’un client a entrepris un paiement, mais qu’il ne l’a pas encore finalisé. Dans la plupart des cas, cet événement est envoyé lorsque le client entreprend un prélèvement bancaire. Il est suivi par un événement `payment_intent.succeeded` ou `payment_intent.payment_failed`. | Envoyez au client une confirmation de commande qui indique que son paiement est en attente. Pour des marchandises dématérialisées, nous vous recommandons de traiter la commande sans attendre que le paiement soit effectué. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Envoyé lorsqu’un client tente d’effectuer un paiement, mais que le paiement échoue.                                                                                                                                                                                                          | Si un paiement passe de l’état `processing` à l’état `payment_failed`, proposez au client de retenter le paiement.                                                                                                            |

## Débiter le moyen de paiement enregistré ultérieurement [Côté serveur]

> #### Conformité
> 
> Lorsque vous enregistrez les informations de paiement d’un client, vous êtes responsable du respect de toutes les lois, réglementations et règles du réseau applicables. Lorsque vous présentez au client final des modes de paiement précédemment utilisés en vue d’effectuer des achats futurs, assurez-vous de répertorier les modes de paiement pour lesquels vous avez obtenu le consentement du client afin d’enregistrer les informations du mode de paiement pour cette utilisation future spécifique. Pour différencier les modes de paiement associés aux clients qui peuvent ou non être présentés au client final en tant que mode de paiement enregistré pour des achats futurs, utilisez le paramètre [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay).

Au moment de débiter votre client *hors session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information), utilisez l’ID des objets Customer et PaymentMethod pour créer un PaymentIntent. Pour trouver un mode de paiement à débiter, répertoriez les modes de paiement associés à votre client. Cet exemple répertorie des cartes, mais vous pouvez répertorier n’importe quel [type de carte](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type) pris en charge.

```curl
curl -G https://api.stripe.com/v1/payment_methods \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d customer="{{CUSTOMER_ID}}" \
  -d type=card
```

Après avoir obtenu les ID de Customer et de PaymentMethod, créez un PaymentIntent indiquant le montant et la devise du paiement. Définissez quelques autres paramètres afin d’effectuer le paiement hors session&nbsp;:

- Définissez l’attribut [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) à `true` pour indiquer que le client ne se trouve pas dans votre flux de paiement lors d’une tentative de paiement, et qu’il ne peut donc pas répondre à une demande d’authentification effectuée par un partenaire, comme un émetteur de cartes, une institution financière ou un autre établissement de paiement. Si un partenaire demande une authentification dans le flux de paiement, Stripe demandera une exemption en s’appuyant sur les informations utilisées par le client *pendant une session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method) précédente. Si les conditions d’exemption ne sont pas remplies, le PaymentIntent peut générer une erreur.
- Définissez la valeur `true` à la propriété [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) du PaymentIntent, ce qui aura pour effet de générer immédiatement une confirmation lors de la création du PaymentIntent.
- Définissez [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) sur l’ID du PaymentMethod et [customer](https://docs.stripe.com/api.md#create_payment_intent-customer) sur l’ID du client.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d amount=1099 \
  -d currency=usd \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \-d customer="{{CUSTOMER_ID}}" \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \
  -d return_url="https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true
```

## Testez l'intégration

#### Cartes

| Moyen de paiement | Scénario                                                                                                                                                                                                                                                                                                                         | Méthode de test                                                                                                                                                                                    |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Carte de crédit   | La configuration de la carte aboutit et ne requiert aucune *authentification* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4242 4242 4242 4242` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. |
| Carte de crédit   | La carte exige une authentification pour la configuration initiale, mais la transaction aboutit pour les paiements suivants.                                                                                                                                                                                                     | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4000 0025 0000 3155` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. |
| Carte de crédit   | La carte exige une authentification pour la configuration initiale et pour les paiements suivants.                                                                                                                                                                                                                               | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4000 0027 6000 3184` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. |
| Carte de crédit   | La carte est refusée durant la configuration.                                                                                                                                                                                                                                                                                    | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4000 0000 0000 9995` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. |

## Optional: Activer Google Pay

### Configurer votre intégration

Pour utiliser Google Pay, commencez par activer l’API Google Pay. Pour cela, ajoutez les informations suivantes au libellé `<application>` de votre **AndroidManifest.xml**&nbsp;:

```xml
<application>
  ...
  <meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />
</application>
```

Pour en savoir plus, consultez la page de Google Pay [Configurer l’API Google Pay](https://developers.google.com/pay/api/android/guides/setup) pour Android.

### Ajouter Google Pay

Pour ajouter Google Pay à votre intégration, transmettez un objet [PaymentSheet.GooglePayConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-google-pay-configuration/index.html) avec votre environnement Google Pay (production ou test) et le [code de pays de votre entreprise](https://dashboard.stripe.com/settings/account) lors de l’initialisation de l’objet [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html).

#### Kotlin

```kotlin
val googlePayConfiguration = PaymentSheet.GooglePayConfiguration(
  environment = PaymentSheet.GooglePayConfiguration.Environment.Test,
  countryCode = "US",
  currencyCode = "USD" // Required for Setup Intents, optional for Payment Intents
)
val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name")
  .googlePay(googlePayConfiguration)
  .build()
```

### Tester Google Pay

Google vous permet d’effectuer des paiements tests par [sa suite de cartes tests](https://developers.google.com/pay/api/android/guides/resources/test-card-suite). La suite de tests prend en charge l’utilisation des [cartes tests Stripe](https://docs.stripe.com/testing.md).

Vous devez tester Google&nbsp;Pay à l’aide d’un appareil Android physique plutôt que d’un appareil de simulation, dans un pays où Google&nbsp;Pay est pris en charge. Connectez-vous à un compte Google sur votre appareil de test à l’aide d’une vraie carte enregistrée dans Google&nbsp;Wallet.

## Optional: Personnaliser la feuille

Pour personnaliser le formulaire de paiement, vous devez obligatoirement utiliser l’objet [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html).

### Appearance

Customize colors, fonts, and more to match the look and feel of your app by using the [appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=android).

### Présentation des modes de paiement

Configurez la mise en page des modes de paiement dans la feuille à l’aide de [paymentMethodLayout](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/-builder/index.html#2123253356%2FFunctions%2F2002900378). Vous pouvez les afficher horizontalement, verticalement ou laisser Stripe optimiser la mise en page automatiquement.
![](https://b.stripecdn.com/docs-statics-srv/assets/android-mpe-payment-method-layouts.3bcfe828ceaad1a94e0572a22d91733f.png)

#### Kotlin

```kotlin
PaymentSheet.Configuration.Builder("Example, Inc.")
  .paymentMethodLayout(PaymentSheet.PaymentMethodLayout.Automatic)
  .build()
```

### Collecter les adresses des utilisateurs

Collectez les adresses de livraison ou de facturation locales et internationales à l’aide du composant [Address Element](https://docs.stripe.com/elements/address-element.md?platform=android).

### Nom d’affichage de l’entreprise

Précisez un nom d’entreprise pour le client en définissant [merchantDisplayName](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-191101533%2FProperties%2F2002900378). Par défaut, il s’agit du nom de votre application.

#### Kotlin

```kotlin
PaymentSheet.Configuration.Builder(
  merchantDisplayName = "My app, Inc."
).build()
```

### Mode sombre

Par défaut, `PaymentSheet` s’adapte automatiquement aux paramètres d’affichage du système de l’utilisateur (mode clair ou mode sombre). Vous pouvez modifier ce comportement en sélectionnant le mode clair ou le mode sombre sur votre application&nbsp;:

#### Kotlin

```kotlin
// force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
// force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
```

### Informations de facturation par défaut

Pour définir des valeurs par défaut pour les informations de facturation collectées dans la feuille de paiement, configurez la propriété `defaultBillingDetails`. `PaymentSheet` pré-remplit ses champs avec les valeurs que vous fournissez.

#### Kotlin

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

### Configurer la collecte des données de facturation

Utilisez `BillingDetailsCollectionConfiguration` pour préciser la façon dont vous souhaitez collecter les informations de facturation dans la PaymentSheet.

Vous pouvez recueillir le nom, l’adresse de courriel, le numéro de téléphone et l’adresse de votre client.

Si vous souhaitez associer les informations de facturation par défaut à l’objet PaymentMethod même lorsque ces champs ne sont pas collectés dans l’interface utilisateur, définissez `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` sur `true`.

#### Kotlin

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

> Consultez votre conseiller juridique au sujet des lois qui s’appliquent à la collecte de renseignements. Ne collectez les numéros de téléphone que si vous en avez besoin pour la transaction.

## Optional: Finalisez le paiement dans votre interface utilisateur

Vous pouvez présenter le formulaire de paiement pour collecter uniquement les informations du moyen de paiement et finaliser l’opération dans l’interface utilisateur de votre application. Cette méthode est utile si vous avez intégré un bouton d’achat personnalisé ou si vous avez besoin d’étapes supplémentaires après la collecte des informations de paiement.
![](https://b.stripecdn.com/docs-statics-srv/assets/android-multi-step.84d8a0a44b1baa596bda491322b6d9fd.png)

> Vous pouvez retrouver un exemple d’intégration [sur notre GitHub](https://github.com/stripe/stripe-android/blob/master/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/samples/ui/paymentsheet/custom_flow/CustomFlowActivity.kt).

1. Tout d’abord, lancez [PaymentSheet.FlowController](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html) au lieu de `PaymentSheet` à l’aide de l’une des méthodes [Builder](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/-builder/index.html).

#### Android (Kotlin)

```kotlin
class CheckoutActivity : AppCompatActivity() {
  private lateinit var flowController: PaymentSheet.FlowController

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    val flowController = PaymentSheet.FlowController.Builder(
      resultCallback = ::onPaymentSheetResult,
      paymentOptionResultCallback = ::onPaymentOption,
    ).build(this)
  }
}
```

1. Appelez ensuite `configureWithPaymentIntent` avec les clés d’objet Stripe récupérées depuis votre application dorsale et mettez à jour votre interface utilisateur dans le rappel au moyen de [getPaymentOption()](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#-2091462043%2FFunctions%2F2002900378). Celui-ci contient une image et une étiquette représentant le mode de paiement actuellement sélectionné par le client.

#### Android (Kotlin)

```kotlin
flowController.configureWithPaymentIntent(
  paymentIntentClientSecret = paymentIntentClientSecret,
  configuration = PaymentSheet.Configuration.Builder("Example, Inc.")
    .customer(PaymentSheet.CustomerConfiguration(
      id = customerId,
      ephemeralKeySecret = ephemeralKeySecret
    ))
    .build()
) { isReady, error ->
  if (isReady) {
    // Update your UI using `flowController.getPaymentOption()`
  } else {
    // handle FlowController configuration failure
  }
}
```

1. Appelez ensuite [presentPaymentOptions](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#449924733%2FFunctions%2F2002900378) pour collecter les données de paiement. Lorsque le client a terminé, la fiche se ferme et appelle [paymentOptionCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-option-callback/index.html) transmis plus tôt dans `create`. Déployez cette méthode pour mettre à jour votre interface utilisateur avec la propriété `paymentOption` renvoyée.

#### Android (Kotlin)

```kotlin
// ...
  flowController.presentPaymentOptions()
// ...
  private fun onPaymentOption(paymentOptionResult: PaymentOptionResult) {
    val paymentOption = paymentOptionResult.paymentOption
    if (paymentOption != null) {
      paymentMethodButton.text = paymentOption.label
      paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds(
        paymentOption.drawableResourceId,
        0,
        0,
        0
      )
    } else {
      paymentMethodButton.text = "Select"
      paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds(
        null,
        null,
        null,
        null
      )
    }
  }
```

1. Enfin, appelez [confirm](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#-479056656%2FFunctions%2F2002900378) pour finaliser le paiement. Lorsque le client a terminé, la fiche se ferme et appelle [paymentResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html#237248767%2FFunctions%2F2002900378) transmis plus tôt dans `create`.

#### Android (Kotlin)

```kotlin
  // ...
    flowController.confirmPayment()
  // ...

  private fun onPaymentSheetResult(
    paymentSheetResult: PaymentSheetResult
  ) {
    when (paymentSheetResult) {
      is PaymentSheetResult.Canceled -> {
        // Payment canceled
      }
      is PaymentSheetResult.Failed -> {
        // Payment Failed. See logcat for details or inspect paymentSheetResult.error
      }
      is PaymentSheetResult.Completed -> {
        // Payment Complete
      }
    }
  }
```

Si vous définissez `allowsDelayedPaymentMethods` à true, les modes de paiement à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), comme les comptes bancaires américains, seront acceptés. Pour ces modes de paiement, l’état final du paiement n’est pas connu à la fin de la `PaymentSheet`. À la place, il réussit ou échoue plus tard. Si vous prenez en charge ces types de modes de paiement, informez le client que sa commande est confirmée et ne la traitez (par exemple, n’expédiez son produit) qu’une fois le paiement reçu.


# React Native

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

Utilisez l’[API Payment Intents](https://docs.stripe.com/api/payment_intents.md) pour enregistrer des informations de paiement à partir d’un achat. Il existe plusieurs cas d’usage&nbsp;:

- Débiter un client pour une commande en ligne et enregistrer les informations pour des achats ultérieurs.
- Entreprendre le premier paiement d’une série de paiements récurrents.
- Débiter un acompte et enregistrer les détails pour facturer plus tard le montant total.

> #### Transactions avec présentation de la carte
> 
> Les transactions avec présentation de la carte, telles que les paiements via Stripe Terminal, utilisent un processus différent pour enregistrer le mode de paiement. Pour en savoir plus, consultez [la documentation de Terminal](https://docs.stripe.com/terminal/features/saving-payment-details/save-after-payment.md).

## Conformité

Vous êtes responsable de votre conformité à toutes les lois, réglementations et règles du réseau applicables lorsque vous enregistrez les informations de paiement d’un client pour une utilisation future, par exemple pour lui présenter son mode de paiement lors du flux de paiement pour un achat futur ou pour le facturer lorsqu’il n’utilise pas activement votre site Web ou votre application. Avant d’enregistrer ou de facturer le mode de paiement d’un client, assurez-vous&nbsp;:

- Ajoutez à votre site Web ou à votre application des conditions indiquant comment vous comptez enregistrer les informations relatives aux modes de paiement, par exemple&nbsp;:
  - Le consentement du client vous autorisant à effectuer un paiement ou une série de paiements en son nom pour des transactions spécifiques.
  - Le calendrier et la fréquence des paiements prévus (par exemple, si les frais concernent des versements planifiés, des paiements d’abonnement ou des recharges non planifiées).
  - La façon dont vous déterminez le montant du paiement.
  - Vos conditions d’annulation, si le moyen de paiement est un service d’abonnement.
- Utilisez un mode de paiement enregistré uniquement aux fins indiquées dans vos conditions générales.
- Obtenez le consentement explicite du client pour cette utilisation précise. Par exemple, ajoutez une case à cocher «&nbsp;Enregistrer mon mode de paiement pour une utilisation ultérieure&nbsp;».
- Conservez une trace de l’accord écrit de votre client à vos conditions.

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

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

### Côté serveur

Cette intégration nécessite des points de terminaison sur votre serveur qui communiquent avec l’API Stripe. Utilisez les bibliothèques officielles pour accéder à l’API Stripe à partir de 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

La [trousse SDK de React Native](https://github.com/stripe/stripe-react-native) est un logiciel libre très bien documenté. À l’interne, elle utilise les trousses SDK pour [iOS natif](https://github.com/stripe/stripe-ios) et pour [Android](https://github.com/stripe/stripe-android). Pour installer la trousse SDK de React Native, exécutez l’une des commandes suivantes dans le répertoire de votre projet (qui dépend du gestionnaire de progiciel que vous utilisez)&nbsp;:

#### laine

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

#### npm

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

Ensuite, installez les autres dépendances nécessaires :

- Pour iOS, accédez au répertoire **&nbsp;ios&nbsp;** et exécutez la fonctionnalité `pod install` pour vous assurer d’installer é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 Native, enveloppez 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 est requise dans l’objet `publishableKey`. 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 [de production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application.

## Activer les moyens de paiement

Les paiements par carte sont activés par défaut. Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) pour activer d’autres moyens de paiement que vous souhaitez prendre en charge.

## Ajouter un point de terminaison [Côté serveur]

> #### Remarque
> 
> Pour afficher PaymentSheet avant de créer un PaymentIntent, consultez la [Collecter les détails du paiement avant de créer un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment).

Si votre plateforme Connect utilise des [comptes configurés par le client](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utilisez notre [guide](https://docs.stripe.com/connect/use-accounts-as-customers.md) pour remplacer le `Client` et des références d’événements dans votre code avec les références équivalentes de l’API Accounts v2.

Cette intégration utilise trois objets de l’API Stripe&nbsp;:

1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md)&nbsp;: Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise cet objet qui suit les tentatives de débit et les changements d’état du paiement tout au long du processus.

1. [Client](https://docs.stripe.com/api/customers.md)&nbsp;: Pour configurer un mode de paiement pour les paiements futurs, vous devrez l’associer à un *client* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Créez un objet Customer lorsque votre client crée un compte auprès de votre entreprise. Si votre client effectue un paiement en tant qu’invité, vous pourrez créer un objet Customer avant le paiement, puis l’associer ultérieurement à votre représentation interne du compte du client.

1. [Session Client](https://docs.stripe.com/api/customer_sessions.md)&nbsp;: L’objet Customer contient des informations sensibles qu’il n’est pas possible de récupérer directement à partir d’une application. Un objet CustomerSession accorde à la trousse SDK un accès temporaire à l’objet Customer et fournit des options de configuration supplémentaires. Consultez la liste complète des [options de configuration](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components).

Pour des raisons de sécurité, votre application ne peut pas créer ces objets. Ajoutez plutôt un point de terminaison sur votre serveur qui&nbsp;:

1. Récupère l’objet Customer ou en crée un nouveau.
1. Crée une [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) pour le client.
1. Crée un PaymentIntent comportant les paramètres [amount](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), [currency](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency), [customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer) et [setup_future_usage](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-setup_future_usage) .
1. Renvoi de la *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)) du Payment Intent, de l’objet `client_secret` de la CustomerSession, de l’[id](https://docs.stripe.com/api/customers/object.md#customer_object-id) du client et de votre [clé publiable](https://dashboard.stripe.com/apikeys) à votre application.

> Le Payment Element mobile ne prend en charge que `setup_future_usage` avec les cartes et les comptes bancaires américains.

Les modes de paiement présentés aux clients lors du processus de paiement sont également compris dans le PaymentIntent. Les modes de paiement peuvent être récupérés par Stripe à partir de vos paramètres Dashboard, ou vous pouvez les ajouter manuellement. Quelle que soit l’option que vous choisissez, sachez que la devise transmise dans le PaymentIntent filtre les modes de paiement présentés au client. Par exemple, si vous transmettez `eur` dans le PaymentIntent et que vous avez activé OXXO dans le Dashboard, OXXO ne sera pas présenté au client, car OXXO ne prend pas en charge les paiements `eur`.

À moins que votre intégration ne nécessite du code pour la présentation des modes de paiement, Stripe vous recommande l’option automatisée. En effet, Stripe évalue la devise, les restrictions sur les modes de paiement et d’autres paramètres pour déterminer la liste des modes de paiement pris en charge. Les modes de paiement qui augmentent le taux de conversion et qui sont les plus pertinents pour la devise et le lieu de résidence du client sont priorisés.

#### Gérer les moyens de paiement à partir du Dashboard

Vous pouvez gérer les moyens de paiement à partir du [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le retour des moyens de paiement admissibles en fonction de facteurs tels que le montant, la devise et le flux de paiement de la transaction. Le PaymentIntent est créé à l’aide des moyens de paiement configurés dans le Dashboard. Si vous ne souhaitez pas utiliser le Dashboard ou si vous souhaitez préciser des moyens de paiement manuellement, vous pouvez les répertorier à l’aide de l’attribut `payment_method_types`.

#### curl

```bash
# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  -d "setup_future_usage"="off_session" \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter
  # is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \
```

#### Référencement manuel des moyens de paiement

#### curl

```bash
# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  -d "setup_future_usage"="off_session" \
  -d "payment_method_types[]"="card" \
```

> Chacun des modes de paiement doit prendre en charge la devise transmise dans le PaymentIntent, et votre entreprise doit par ailleurs être établie dans l’un des pays pris en charge par chaque mode de paiement. Consultez la section [Options d’intégration des modes de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md) pour en savoir plus sur les modes de paiement pris en charge.

## Collectez les informations de paiement [Côté client]

Avant d’afficher le Payment Element mobile, votre page de paiement doit&nbsp;:

- Présenter les produits commandés et le montant total des achats
- Collecter les éventuelles informations de livraison requises
- Inclure un bouton de paiement pour afficher l’interface utilisateur de Stripe

Au cours du processus de paiement de votre application, effectuez une demande réseau auprès du point de terminaison de l’application dorsale que vous avez créé à l’étape précédente, puis appelez `initPaymentSheet` à partir du hook `useStripe`.

```javascript

export default function CheckoutScreen() {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();
  const [loading, setLoading] = useState(false);

  const fetchPaymentSheetParams = async () => {
    const response = await fetch(`${API_URL}/payment-sheet`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const { paymentIntent, ephemeralKey, customer } = await response.json();

    return {
      paymentIntent,
      ephemeralKey,
      customer,
    };
  };

  const initializePaymentSheet = async () => {
    const {
      paymentIntent,
      ephemeralKey,
      customer,
    } = await fetchPaymentSheetParams();

    const { error } = await initPaymentSheet({
      merchantDisplayName: "Example, Inc.",
      customerId: customer,
      customerEphemeralKeySecret: ephemeralKey,
      paymentIntentClientSecret: paymentIntent,
      // Set `allowsDelayedPaymentMethods` to true if your business can handle payment
      //methods that complete payment after a delay, like SEPA Debit and Sofort.
      allowsDelayedPaymentMethods: true,
      defaultBillingDetails: {
        name: 'Jane Doe',
      }
    });
    if (!error) {
      setLoading(true);
    }
  };

  const openPaymentSheet = async () => {
    // see below
  };

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

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}
```

Lorsque votre client touche le bouton **Paiement**, appelez `presentPaymentSheet()` pour ouvrir le formulaire de paiement. Une fois la transaction finalisée, le formulaire se ferme et la promesse aboutit avec le résultat facultatif `StripeError<PaymentSheetError>`.

```javascript
export default function CheckoutScreen() {
  // continued from above

  const openPaymentSheet = async () => {
    const { error } = await presentPaymentSheet();

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else {
      Alert.alert('Success', 'Your order is confirmed!');
    }
  };

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}
```

En l’absence d’erreur, informez l’utilisateur que l’opération est terminée (par exemple, en affichant un écran de confirmation de commande).

Si vous définissez `allowsDelayedPaymentMethods` à true, les modes de paiement à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), comme les comptes bancaires américains, seront acceptés. Pour ces modes de paiement, l’état final du paiement n’est pas connu à la fin de la `PaymentSheet`. À la place, il réussit ou échoue plus tard. Si vous prenez en charge ces types de modes de paiement, informez le client que sa commande est confirmée et ne la traitez (par exemple, n’expédiez son produit) qu’une fois le paiement reçu.

## Configurer une URL de retour (iOS uniquement) [Côté client]

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

Pour fournir une URL de redirection&nbsp;:

1. [Enregistrer](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. [Configurer](https://reactnative.dev/docs/linking) votre URL personnalisée.
1. Configurez votre composant racine pour qu’il transfère l’URL à la trousse SDK 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>
  );
}
```

De plus, définissez le `returnURL` lorsque vous appelez la méthode `initPaymentSheet`&nbsp;:

```js
await initPaymentSheet({
  ...
  returnURL: 'your-app://stripe-redirect',
  ...
});
```

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

## Gestion des événements de postpaiement

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 l’[outil de webhook du Dashboard](https://dashboard.stripe.com/webhooks) ou suivez le [guide sur les webhooks](https://docs.stripe.com/webhooks/quickstart.md) pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par courriel à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison.

Écoutez ces événements plutôt que d’attendre un rappel de votre client. Du côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant même l’exécution du rappel, et des clients malveillants pourraient manipuler la réponse. En configurant votre intégration de manière à ce qu’elle écoute les événements asynchrones, vous pourrez accepter [plusieurs types de moyens de paiement](https://stripe.com/payments/payment-methods-guide) avec une seule intégration.

En plus de gérer l’événement `payment_intent.succeeded`, nous vous recommandons de gérer les autres événements suivants lorsque vous encaissez des paiements à l’aide du Payment Element&nbsp;:

| Événement                                                                                                                       | Description                                                                                                                                                                                                                                                                                  | Action                                                                                                                                                                                                                        |
| ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded)           | Envoyé lorsqu’un client a effectué un paiement.                                                                                                                                                                                                                                              | Envoyez au client une confirmation de commande et *traitez* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) sa commande.                        |
| [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing)         | Envoyé lorsqu’un client a entrepris un paiement, mais qu’il ne l’a pas encore finalisé. Dans la plupart des cas, cet événement est envoyé lorsque le client entreprend un prélèvement bancaire. Il est suivi par un événement `payment_intent.succeeded` ou `payment_intent.payment_failed`. | Envoyez au client une confirmation de commande qui indique que son paiement est en attente. Pour des marchandises dématérialisées, nous vous recommandons de traiter la commande sans attendre que le paiement soit effectué. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Envoyé lorsqu’un client tente d’effectuer un paiement, mais que le paiement échoue.                                                                                                                                                                                                          | Si un paiement passe de l’état `processing` à l’état `payment_failed`, proposez au client de retenter le paiement.                                                                                                            |

## Débiter le moyen de paiement enregistré ultérieurement [Côté serveur]

> #### Conformité
> 
> Lorsque vous enregistrez les informations de paiement d’un client, vous êtes responsable du respect de toutes les lois, réglementations et règles du réseau applicables. Lorsque vous présentez au client final des modes de paiement précédemment utilisés en vue d’effectuer des achats futurs, assurez-vous de répertorier les modes de paiement pour lesquels vous avez obtenu le consentement du client afin d’enregistrer les informations du mode de paiement pour cette utilisation future spécifique. Pour différencier les modes de paiement associés aux clients qui peuvent ou non être présentés au client final en tant que mode de paiement enregistré pour des achats futurs, utilisez le paramètre [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay).

Au moment de débiter votre client *hors session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information), utilisez l’ID des objets Customer et PaymentMethod pour créer un PaymentIntent. Pour trouver un mode de paiement à débiter, répertoriez les modes de paiement associés à votre client. Cet exemple répertorie des cartes, mais vous pouvez répertorier n’importe quel [type de carte](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type) pris en charge.

```curl
curl -G https://api.stripe.com/v1/payment_methods \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d customer="{{CUSTOMER_ID}}" \
  -d type=card
```

Après avoir obtenu les ID de Customer et de PaymentMethod, créez un PaymentIntent indiquant le montant et la devise du paiement. Définissez quelques autres paramètres afin d’effectuer le paiement hors session&nbsp;:

- Définissez l’attribut [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) à `true` pour indiquer que le client ne se trouve pas dans votre flux de paiement lors d’une tentative de paiement, et qu’il ne peut donc pas répondre à une demande d’authentification effectuée par un partenaire, comme un émetteur de cartes, une institution financière ou un autre établissement de paiement. Si un partenaire demande une authentification dans le flux de paiement, Stripe demandera une exemption en s’appuyant sur les informations utilisées par le client *pendant une session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method) précédente. Si les conditions d’exemption ne sont pas remplies, le PaymentIntent peut générer une erreur.
- Définissez la valeur `true` à la propriété [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) du PaymentIntent, ce qui aura pour effet de générer immédiatement une confirmation lors de la création du PaymentIntent.
- Définissez [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) sur l’ID du PaymentMethod et [customer](https://docs.stripe.com/api.md#create_payment_intent-customer) sur l’ID du client.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d amount=1099 \
  -d currency=usd \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \-d customer="{{CUSTOMER_ID}}" \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \
  -d return_url="https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true
```

## Testez l'intégration

#### Cartes

| Moyen de paiement | Scénario                                                                                                                                                                                                                                                                                                                         | Méthode de test                                                                                                                                                                                    |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Carte de crédit   | La configuration de la carte aboutit et ne requiert aucune *authentification* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4242 4242 4242 4242` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. |
| Carte de crédit   | La carte exige une authentification pour la configuration initiale, mais la transaction aboutit pour les paiements suivants.                                                                                                                                                                                                     | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4000 0025 0000 3155` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. |
| Carte de crédit   | La carte exige une authentification pour la configuration initiale et pour les paiements suivants.                                                                                                                                                                                                                               | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4000 0027 6000 3184` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. |
| Carte de crédit   | La carte est refusée durant la configuration.                                                                                                                                                                                                                                                                                    | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4000 0000 0000 9995` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. |

## Optional: Activer Apple Pay

### Demander un ID de marchand Apple

Pour obtenir un ID de marchand Apple, [demandez un nouvel identifiant](https://developer.apple.com/account/resources/identifiers/add/merchant) sur le site Web Apple Developer.

Renseignez le formulaire en indiquant une description et un identifiant. La description n’est destinée qu’à votre propre information et vous pourrez la modifier ultérieurement au besoin. En ce qui concerne l’identifiant, Stripe vous recommande d’utiliser le nom de votre application (par exemple, `merchant.com.{{YOUR_APP_NAME}}`).

### Créer un nouveau certificat Apple Pay

Créez un certificat permettant à votre application de chiffrer les données de paiement.

Accédez aux [paramètres des certificats iOS](https://dashboard.stripe.com/settings/ios_certificates) dans le Dashboard, cliquez sur **Ajouter une nouvelle application** et suivez le guide.

Téléchargez un fichier de demande de signature de certificat (CSR) pour obtenir un certificat sécurisé auprès d’Apple qui vous permet d’utiliser Apple Pay.

Un fichier CSR doit être utilisé pour émettre exactement un certificat. Si vous changez votre identifiant Apple Merchant ID, vous devez accéder aux [paramètres de certificat iOS](https://dashboard.stripe.com/settings/ios_certificates) du Dashboard pour obtenir un nouveau CSR et un nouveau certificat.

### Réaliser une intégration avec Xcode

Ajoutez la fonctionnalité Apple Pay à votre application. Dans Xcode, ouvrez les paramètres de votre projet, cliquez sur l’onglet **Signing & Capabilities** (Signature et fonctionnalités), et ajoutez la fonctionnalité **Apple Pay**. On pourrait alors vous demander de vous connecter à votre compte de développeur. Sélectionnez l’ID du marchand que vous venez de créer, et votre application peut maintenant accepter Apple Pay.
![](https://b.stripecdn.com/docs-statics-srv/assets/xcode.a701d4c1922d19985e9c614a6f105bf1.png)

Activer la fonctionnalité Apple Pay dans Xcode

### Ajouter Apple Pay

#### Paiement ponctuel

Transmettez votre ID de marchand lors de la création de `StripeProvider`&nbsp;:

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

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

Lorsque vous appelez `initPaymentSheet`, transmettez vos [ApplePayParams](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#ApplePayParams):

```javascript
await initPaymentSheet({
  // ...
  applePay: {
    merchantCountryCode: 'US',
  },
});
```

#### Paiements récurrents

Lorsque vous appelez `initPaymentSheet`’, transmettez-le dans un [ApplePayParams](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#ApplePayParams) avec `merchantCountryCode` défini sur le code de pays de votre entreprise.

In accordance with [Apple’s guidelines](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Supporting-subscriptions) for recurring payments, you must also set a `cardItems` that includes a [RecurringCartSummaryItem](https://stripe.dev/stripe-react-native/api-reference/modules/ApplePay.html#RecurringCartSummaryItem) with the amount you intend to charge (for example, “59.95 USD a month”).

Vous pouvez également adopter [des jetons du marchand](https://developer.apple.com/apple-pay/merchant-tokens/) en définissant `request` et son `type` à `PaymentRequestType.Recurring`.

Pour en savoir plus sur l’utilisation des paiements récurrents avec Apple Pay, consultez [la documentation PassKit d’Apple](https://developer.apple.com/documentation/passkit/pkpaymentrequest).

#### iOS (React Native)

```javascript
const initializePaymentSheet = async () => {
  const recurringSummaryItem = {
    label: 'My Subscription',
    amount: '59.99',
    paymentType: 'Recurring',
    intervalCount: 1,
    intervalUnit: 'month',
    // Payment starts today
    startDate: new Date().getTime() / 1000,

    // Payment ends in one year
    endDate: new Date().getTime() / 1000 + 60 * 60 * 24 * 365,
  };

  const {error} = await initPaymentSheet({
    // ...
    applePay: {
      merchantCountryCode: 'US',
      cartItems: [recurringSummaryItem],
      request: {
        type: PaymentRequestType.Recurring,
        description: 'Recurring',
        managementUrl: 'https://my-backend.example.com/customer-portal',
        billing: recurringSummaryItem,
        billingAgreement:
          "You'll be billed $59.99 every month for the next 12 months. To cancel at any time, go to Account and click 'Cancel Membership.'",
      },
    },
  });
};
```

### Suivi des commandes

Pour ajouter des informations [de suivi des commandes](https://developer.apple.com/design/human-interface-guidelines/technologies/wallet/designing-order-tracking) dans la version iOS 16 ou une version ultérieure, configurez une fonction de rappel `setOrderTracking` . Stripe fait appel à votre implémentation une fois le paiement effectué, mais avant qu’iOS ne rejette la feuille Apple Pay.

Dans votre implémentation de la fonction de rappel `setOrderTracking`, récupérez les détails de la commande dans votre serveur pour la commande terminée et transmettez les détails à la fonction `completion` fournie.

Pour en savoir plus sur le suivi des commandes, consultez la [documentation sur les commandes du portefeuille numérique Apple](https://developer.apple.com/documentation/walletorders).

#### iOS (React Native)

```javascript
await initPaymentSheet({
  // ...
  applePay: {
    // ...
    setOrderTracking: async complete => {
      const apiEndpoint =
        Platform.OS === 'ios'
          ? 'http://localhost:4242'
          : 'http://10.0.2.2:4567';
      const response = await fetch(
        `${apiEndpoint}/retrieve-order?orderId=${orderId}`,
        {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        },
      );
      if (response.status === 200) {
        const orderDetails = await response.json();
        // orderDetails should include orderIdentifier, orderTypeIdentifier,
        // authenticationToken and webServiceUrl
        complete(orderDetails);
      }
    },
  },
});
```

## Optional: Activer Google Pay

### Configurer votre intégration

Pour utiliser Google Pay, commencez par activer l’API Google Pay. Pour cela, ajoutez les informations suivantes au libellé `<application>` de votre **AndroidManifest.xml**&nbsp;:

```xml
<application>
  ...
  <meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />
</application>
```

Pour en savoir plus, consultez la page de Google Pay [Configurer l’API Google Pay](https://developers.google.com/pay/api/android/guides/setup) pour Android.

### Ajouter Google Pay

Lorsque vous initialisez `PaymentSheet`, définissez `merchantCountryCode` sur le code pays de votre entreprise et définissez `googlePay` à true.

Vous pouvez également utiliser l’environnement de test en transmettant le paramètre `testEnv`. Vous ne pouvez tester Google&nbsp;Pay que sur un appareil Android physique. Suivez la [documentation React Native](https://reactnative.dev/docs/running-on-device) pour tester votre application sur un appareil physique.

```javascript
const { error, paymentOption } = await initPaymentSheet({
  // ...
  googlePay: {
    merchantCountryCode: 'US',
    testEnv: true, // use test environment
  },
});
```

## Activer le balayage des cartes [Côté client]

> L’activation de la lecture des cartes est requise pour le processus de vérification des applications iOS d’Apple. La lecture des cartes n’est pas requise pour le processus de vérification des applications Android, mais nous vous recommandons de l’activer.

### iOS

Afin d’activer la prise en charge de la numérisation des cartes pour iOS, configurez l’objet `NSCameraUsageDescription` (**Privacy - Camera Usage Description**) (Confidentialité – Description de l’utilisation de la caméra) dans la `Info.plist` de votre application, et indiquez un motif pour l’accès à la caméra (p. ex., «&nbsp;Pour numériser des cartes&nbsp;»).

### (Optional) Android

Pour activer le balayage de cartes, [demandez un accès de production ](https://developers.google.com/pay/api/android/guides/test-and-deploy/request-prod-access) à l’API Google&nbsp;Play[depuis la console Google&nbsp;Pay et portefeuille numérique](https://pay.google.com/business/console?utm_source=devsite&utm_medium=devsite&utm_campaign=devsite).

- Si vous avez activé Google&nbsp;Pay, la fonctionnalité de balayage de carte est automatiquement disponible dans notre interface utilisateur sur les appareils admissibles. Pour en savoir plus sur les appareils admissibles, consultez les [contraintes de l’API Google&nbsp;Pay](https://developers.google.com/pay/payment-card-recognition/debit-credit-card-recognition)
- **Important&nbsp;:** la fonction balayage de la carte apparaît uniquement dans les versions signées avec la même clé de signature enregistrée dans la console [Google&nbsp;Pay et portefeuille numérique](https://pay.google.com/business/console). Les versions de test ou de débogage utilisant différentes clés de signature (par exemple, les versions distribuées via Firebase&nbsp;App&nbsp;Tester) remporté(e)s n’afficheront pas l’option **Balayer la carte**. Pour tester la fonctionnalité de balayage de carte dans les versions préversions, vous devez&nbsp;:
  - Signer vos versions de test avec votre clé de signature de production
  - Ajouter votre empreinte clé de signature de test à la console Google&nbsp;Pay et portefeuille numérique

## Optional: Personnaliser la feuille [Côté client]

Toute personnalisation est configurée au moyen de l’objet `initPaymentSheet`.

### Appearance

Customize colors, fonts, and so on to match the look and feel of your app by using the [appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=react-native).

### Nom d’affichage du marchand

Renseignez le nom usuel de votre entreprise en configurant `merchantDisplayName`. Par défaut, il s’agit du nom de votre application.

```javascript
await initPaymentSheet({
  // ...
  merchantDisplayName: 'Example Inc.',
});
```

### Mode sombre

Par défaut, `PaymentSheet` s’adapte automatiquement aux paramètres d’affichage du système de l’utilisateur (mode clair ou mode sombre). Sur iOS, vous pouvez modifier ce comportement en définissant la propriété `style` sur le mode `alwaysLight` ou `alwaysDark`.

```javascript
await initPaymentSheet({
  // ...
  style: 'alwaysDark',
});
```

Sur Android, configurez le mode clair ou le mode sombre sur votre application&nbsp;:

```
// force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
// force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
```

### Informations de facturation par défaut

Pour définir des valeurs par défaut des informations de facturation recueillies dans la PaymentSheet, configurez la propriété `defaultBillingDetails`. La`PaymentSheet` pré-remplit ses champs en fonction des valeurs que vous fournissez.

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

### Recueillir les informations de facturation

Utilisez `billingDetailsCollectionConfiguration` pour préciser comment vous souhaitez recueillir les informations de facturation dans la PaymentSheet.

Vous pouvez recueillir le nom, l’adresse de courriel, le numéro de téléphone et l’adresse de votre client.

Si vous n’avez pas l’intention de collecter les valeurs requises par le mode de paiement, vous devez suivre les étapes ci-après&nbsp;:

1. Joignez les valeurs qui ne sont pas collectées par `PaymentSheet` à la propriété `defaultBillingDetails`.
1. Définissez `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` sur `true`.

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

> Consultez votre conseiller juridique au sujet des lois qui s’appliquent à la collecte de renseignements. Ne collectez les numéros de téléphone que si vous en avez besoin pour la transaction.

## Optional: Finalisez le paiement dans votre interface utilisateur

Vous pouvez présenter le formulaire de paiement pour la seule collecte des données du moyen de paiement, puis appeler une méthode `confirm` pour mener à bien l’opération de paiement dans l’interface utilisateur de votre application. Cette approche est utile si vous avez intégré un bouton d’achat personnalisé ou si des étapes supplémentaires sont nécessaires après la collecte des données de paiement.
![](https://b.stripecdn.com/docs-statics-srv/assets/react-native-multi-step.84d8a0a44b1baa596bda491322b6d9fd.png)

> Un exemple d’intégration est [disponible sur notre GitHub](https://github.com/stripe/stripe-react-native/blob/master/example/src/screens/PaymentsUICustomScreen.tsx).

1. Tout d’abord, appelez `initPaymentSheet` et transmettez `customFlow: true`. `initPaymentSheet` se résout avec une option de paiement initiale contenant une image et une étiquette représentant le moyen de paiement du client. Mettez à jour votre interface utilisateur avec ces informations.

```javascript
const {
  initPaymentSheet,
  presentPaymentSheet,
  confirmPaymentSheetPayment,
} = useStripe()

const { error, paymentOption } = await initPaymentSheet({
  customerId: customer,
  customerEphemeralKeySecret: ephemeralKey,
  paymentIntentClientSecret: paymentIntent,
  customFlow: true,
  merchantDisplayName: 'Example Inc.',
});
// Update your UI with paymentOption
```

1. Utilisez `presentPaymentSheet` pour collecter les données de paiement. Lorsque le client a terminé, la fiche se ferme et résout la promesse. Mettez à jour votre interface utilisateur avec les détails du moyen de paiement sélectionné.

```javascript
const { error, paymentOption } = await presentPaymentSheet();
```

1. Utilisez `confirmPaymentSheetPayment` pour confirmer le paiement. L’opération se résout avec le résultat du paiement.

```javascript
const { error } = await confirmPaymentSheetPayment();

if (error) {
  Alert.alert(`Error code: ${error.code}`, error.message);
} else {
  Alert.alert(
    'Success',
    'Your order is confirmed!'
  );
}
```

Si vous définissez `allowsDelayedPaymentMethods` à true, les modes de paiement à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), comme les comptes bancaires américains, seront acceptés. Pour ces modes de paiement, l’état final du paiement n’est pas connu à la fin de la `PaymentSheet`. À la place, il réussit ou échoue plus tard. Si vous prenez en charge ces types de modes de paiement, informez le client que sa commande est confirmée et ne la traitez (par exemple, n’expédiez son produit) qu’une fois le paiement reçu.