# Accepter un paiement EPS Découvrez comment accepter les paiements effectués à l'aide de EPS, un moyen de paiement très répandu en Autriche. # Checkout > This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/eps/accept-a-payment?payment-ui=checkout. > Stripe peut automatiquement proposer les moyens de paiement pertinents à vos clients en évaluant la devise, les restrictions liées aux moyens de paiement et d’autres paramètres. > > - Suivez le guide [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted) pour créer une intégration de paiement qui utilise des [moyens de paiement dynamiques](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md). - Si vous ne souhaitez pas utiliser de moyens de paiement dynamiques, suivez les étapes ci-dessous pour configurer manuellement les moyens de paiement dans votre intégration Checkout. EPS est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) qui nécessite l’[authentification](https://docs.stripe.com/payments/payment-methods.md#customer-actions) du paiement par le client. Pour effectuer un paiement avec EPS, les *clients* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) quittent votre site Web, autorisent le paiement, puis reviennent vers votre site Web. Vous recevez alors une [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification) indiquant si le paiement a abouti ou échoué. > Votre utilisation d’EPS doit se conformer aux [Conditions d’utilisation du service EPS](https://stripe.com/eps/legal). ## Déterminer la compatibilité **Lieux d’implantation pris en charge** : Europe, US, CA, NZ, SG, HK, JP, AU, MX **Devises prises en charge** : `eur` **Devises de règlement** : `eur` **Mode de paiement** : Yes **Mode de configuration** : No **Mode d’abonnement** : No Une session Checkout doit remplir toutes les conditions suivantes pour prendre en charge les paiements EPS : - Pour tous les postes, les *tarifs* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) doivent être exprimés dans la même devise. Si vous avez des postes dans diverses devises, créez des sessions Checkout distinctes pour chaque devise. - Vous ne pouvez utiliser que des postes ponctuels (les postes récurrents dans le cadre de plans d’*abonnement* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis) ne sont pas pris en charge). ## Accepter un paiement > Avant d’utiliser ce guide, commencez par créer une intégration permettant d’[accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md?integration=checkout) avec Checkout. Cela vous explique comment activer EPS et vous montre les différences entre l’acceptation de paiements à l’aide de moyens de paiement dynamiques et la configuration manuelle des moyens de paiement. ### Activer le moyen de paiement EPS Lors de la création d’une nouvelle [session Checkout](https://docs.stripe.com/api/checkout/sessions.md), vous devez : 1. Ajouter `eps` à la liste `payment_method_types` 1. Veiller à ce que tous vos `line_items` utilisent la devise `eur`. #### Une page hébergée par Stripe ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=eur" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=eps" \ --data-urlencode "success_url=https://example.com/success" ``` #### Formulaire intégré ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=eur" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=eps" \ --data-urlencode "return_url=https://example.com/return" \ -d ui_mode=embedded_page ``` ### Traiter vos commandes Maintenant que vous savez accepter des paiements, découvrez comment [traiter les commandes](https://docs.stripe.com/checkout/fulfillment.md). ## Tester votre intégration Lors du test de votre intégration Checkout, sélectionnez le moyen de paiement EPS, puis cliquez sur le bouton **Payer**. ## Gérer les litiges et remboursements Le délai de remboursement applicable aux paiements EPS est limité à 180 jours après le paiement initial. Il n’existe pas de processus de litige, car les clients s’authentifient auprès de leur banque. ## See also - [Exécution Checkout](https://docs.stripe.com/checkout/fulfillment.md) - [Personnaliser Checkout](https://docs.stripe.com/payments/checkout/customization.md) # iOS > This is a iOS for when payment-ui is mobile and platform is ios. View the full page at https://docs.stripe.com/payments/eps/accept-a-payment?payment-ui=mobile&platform=ios. EPS est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) qui nécessite l’[authentification](https://docs.stripe.com/payments/payment-methods.md#customer-actions) du paiement par le client. Pour effectuer un paiement avec EPS, les *clients* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) quittent votre site Web, autorisent le paiement, puis reviennent vers votre site Web. Vous recevez alors une [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification) indiquant si le paiement a abouti ou échoué. > Votre utilisation d’EPS doit se conformer aux [Conditions d’utilisation du service EPS](https://stripe.com/eps/legal). ## Configurer Stripe [Côté serveur] [Côté client] Tout d’abord, il vous faut un compte Stripe. [Inscrivez-vous](https://dashboard.stripe.com/register). ### Côté serveur Pour cette intégration, votre serveur doit être doté d’endpoints qui communiquent avec l’API Stripe. Utilisez les bibliothèques officielles pour accéder à l’API Stripe depuis votre serveur : #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Côté client Le [SDK iOS de Stripe](https://github.com/stripe/stripe-ios) est disponible en open source et [fait l’objet d’une documentation complète](https://stripe.dev/stripe-ios/index.html). Il est également compatible avec les applications prenant en charge iOS 13 et les versions ultérieures. #### Swift Package Manager Pour installer le SDK, veuillez suivre les étapes ci-dessous : 1. Dans Xcode, sélectionnez **File** > **Add Package Dependencies…** puis saisissez `https://github.com/stripe/stripe-ios-spm` en tant qu’URL du référentiel. 1. Sélectionnez le dernier numéro de version, visible sur notre [page des versions](https://github.com/stripe/stripe-ios/releases). 1. Ajoutez le produit **StripePaymentsUI** à la [cible de votre application](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app). #### CocoaPods 1. Si vous ne l’avez pas encore fait, installez la version la plus récente de [CocoaPods](https://guides.cocoapods.org/using/getting-started.html). 1. Si vous n’avez pas de fichier [Podfile](https://guides.cocoapods.org/syntax/podfile.html), exécutez la commande suivante pour en créer un : ```bash pod init ``` 1. Ajoutez cette ligne à votre `Podfile` : ```podfile pod 'StripePaymentsUI' ``` 1. Exécutez la commande suivante : ```bash pod install ``` 1. À partir de maintenant, n’oubliez pas d’utiliser le fichier .xcworkspace au lieu du fichier .xcodeproj pour ouvrir votre projet dans Xcode. 1. Pour mettre à jour ultérieurement le SDK vers la version la plus récente, il vous suffit d’exécuter : ```bash pod update StripePaymentsUI ``` #### Carthage 1. Si vous ne l’avez pas encore fait, installez la version la plus récente de [Carthage](https://github.com/Carthage/Carthage#installing-carthage). 1. Ajoutez cette ligne à votre `Cartfile` : ```cartfile github "stripe/stripe-ios" ``` 1. Suivez les [instructions d’installation de Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Veillez à intégrer tous les cadres requis listés [ici](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking). 1. Pour mettre à jour ultérieurement le SDK vers la version la plus récente, exécutez la commande suivante : ```bash carthage update stripe-ios --platform ios ``` #### Cadre manuel 1. Accédez à notre [page des versions GitHub](https://github.com/stripe/stripe-ios/releases/latest), puis téléchargez et décompressez **Stripe.xcframework.zip**. 1. Faites glisser **StripePaymentsUI.xcframework** vers la section **Embedded Binaries (Fichiers binaires incorporés)** des paramètres **General (Général)** de votre projet Xcode. Veillez à sélectionner **Copy items if needed (Copier les éléments si nécessaire)**. 1. Répétez l’étape 2 pour tous les cadres requis listés [ici](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking). 1. À l’avenir, pour mettre à jour vers la version la plus récente de notre SDK, répétez les étapes 1 à 3. > Pour obtenir de plus amples informations sur la version la plus récente du SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-ios/releases) sur GitHub. Pour recevoir une notification lors de la publication d’une nouvelle version, [surveillez les versions](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) à partir du référentiel. Configurez le SDK avec votre [clé publiable](https://dashboard.stripe.com/test/apikeys) Stripe au démarrage de votre application. Cela lui permet d’envoyer des requêtes à l’API Stripe. #### Swift ```swift import UIKitimportStripePaymentsUI @main class AppDelegate: UIResponder, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {StripeAPI.defaultPublishableKey = "<>" // do any other necessary launch configuration return true } } ``` > Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) lors de vos activités de test et de développement et vos clés du [mode production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application. ## Créer un PaymentIntent [Côté serveur] [Côté client] Un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) représente votre intention d’encaisser un paiement auprès d’un client et suit le cycle de vie du processus de paiement. ### Côté serveur Créez un `PaymentIntent` sur votre serveur et précisez le montant à encaisser ainsi que la devise dans les paramètres `amount` et `eur` (EPS ne prend en charge aucune autre devise). Si vous avez déjà une intégration [Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `eps` à la liste des [types de moyens de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types). ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=eur \ -d "payment_method_types[]=eps" ``` ### Côté client Côté client, demandez un PaymentIntent depuis votre serveur et stockez sa clé secrète du client. #### Swift ```swift class CheckoutViewController: UIViewController { var paymentIntentClientSecret: String? func startCheckout() { // Request a PaymentIntent from your server and store its client secret } } ``` ## Recueillir les informations du moyen de paiement [Côté client] Dans votre application, recueillez le nom complet de votre client. #### Swift ```swift class CheckoutViewController: UIViewController { private let nameField: UITextField = UITextField() // ... override func viewDidLoad() { super.viewDidLoad() nameField.textContentType = .name nameField.translatesAutoresizingMaskIntoConstraints = false view.addSubview(nameField) // ... } // ... } ``` ## Envoyer le paiement à Stripe [Côté client] Récupérez la clé secrète du client à partir du PaymentIntent créé, puis créez un [STPPaymentMethodBillingDetails](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentMethodBillingDetails.html) avec les informations de facturation et appelez [STPPaymentHandler confirmPayment](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentHandler.html#/c:@M@StripePayments@objc\(cs\)STPPaymentHandler\(im\)confirmPayment:withAuthenticationContext:completion:). Cela déclenche l’affichage d’une vue Web dans laquelle le client peut finaliser le paiement. Une fois l’opération terminée, le bloc de finalisation est appelé avec le résultat du paiement. #### Swift ```swift let paymentIntentParams = STPPaymentIntentParams(clientSecret: paymentIntentClientSecret) let billingDetails = STPPaymentMethodBillingDetails() billingDetails.name = nameField.text // EPS doesn't require additional parameters so we only need to pass the init-ed // STPPaymentMethoEPSParams instance to STPPaymentMethodParams let eps = STPPaymentMethodEPSParams() let paymentMethodParams = STPPaymentMethodParams(eps: eps, billingDetails: billingDetails, metadata: nil) paymentIntentParams.paymentMethodParams = paymentMethodParams STPPaymentHandler.shared().confirmPayment(paymentIntentParams, with: self) { (handlerStatus, paymentIntent, error) in switch handlerStatus { case .succeeded: // Payment succeeded // ... case .canceled: // Payment canceled // ... case .failed: // Payment failed // ... @unknown default: fatalError() } } ``` ## Optional: Gérer les événements post-paiement Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez le Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison. Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les [différences entre les différents moyens de paiement pris en charge](https://stripe.com/payments/payment-methods-guide). ### Recevoir des événements et exécuter des actions métier Plusieurs options s’offrent à vous pour recevoir et exécuter des actions métier. #### Manuellement Utilisez le Dashboard pour consulter tous vos paiements Stripe, envoyer des reçus par e-mail, gérer les virements et relancer les paiements ayant échoué. - [Afficher vos paiements tests dans le Dashboard](https://dashboard.stripe.com/test/payments) #### Code personnalisé Créez un gestionnaire de webhooks pour écouter des événements et créer des tunnels de paiement asynchrones personnalisés. Testez et déboguez votre intégration de webhooks en local, grâce à la CLI Stripe. - [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) #### Applications préconfigurées Intégrez une application partenaire pour gérer les événements métier courants, comme l’[automatisation](https://stripe.partners/?f_category=automation), le [marketing ou les ventes](https://stripe.partners/?f_category=marketing-and-sales). # Android > This is a Android for when payment-ui is mobile and platform is android. View the full page at https://docs.stripe.com/payments/eps/accept-a-payment?payment-ui=mobile&platform=android. EPS est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) qui nécessite l’[authentification](https://docs.stripe.com/payments/payment-methods.md#customer-actions) du paiement par le client. Pour effectuer un paiement avec EPS, les *clients* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) quittent votre site Web, autorisent le paiement, puis reviennent vers votre site Web. Vous recevez alors une [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification) indiquant si le paiement a abouti ou échoué. > Votre utilisation d’EPS doit se conformer aux [Conditions d’utilisation du service EPS](https://stripe.com/eps/legal). ## Configurer Stripe [Côté serveur] [Côté client] Tout d’abord, il vous faut un compte Stripe. [Inscrivez-vous](https://dashboard.stripe.com/register). ### Côté serveur Pour cette intégration, votre serveur doit être doté d’endpoints qui communiquent avec l’API Stripe. Utilisez les bibliothèques officielles pour accéder à l’API Stripe depuis votre serveur : #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Côté client Le [SDK Stripe Android](https://github.com/stripe/stripe-android) est disponible en open source et [fait l’objet d’une documentation complète](https://stripe.dev/stripe-android/). Pour installer le SDK, ajoutez `stripe-android` au bloc `dependencies` de votre fichier [app/build.gradle](https://developer.android.com/studio/build/dependencies) : #### Kotlin ```kotlin plugins { id("com.android.application") } android { ... } dependencies { // ... // Stripe Android SDK implementation("com.stripe:stripe-android:23.3.0") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.3.0") } ``` > Pour obtenir de plus amples informations sur la version la plus récente du SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-android/releases) sur GitHub. Pour savoir quand une nouvelle version est disponible, [surveillez les versions du référentiel](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository). Configurez le SDK avec votre [clé publique](https://dashboard.stripe.com/apikeys) Stripe de façon à ce qu’il puisse envoyer des requêtes à l’API Stripe, par exemple à la sous-classe `Application` : #### Kotlin ```kotlin import com.stripe.android.PaymentConfiguration class MyApp : Application() { override fun onCreate() { super.onCreate() PaymentConfiguration.init( applicationContext, "<>" ) } } ``` > Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) lors de vos activités de test et de développement et vos clés du [mode production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application. Les échantillons de code de Stripe utilisent également [OkHttp](https://github.com/square/okhttp) et [GSON](https://github.com/google/gson) pour envoyer des requêtes HTTP à un serveur. ## Créer un PaymentIntent [Côté serveur] [Côté client] Un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) représente votre intention d’encaisser un paiement auprès d’un client et suit le cycle de vie du processus de paiement. ### Côté serveur Créez un `PaymentIntent` sur votre serveur et précisez le montant à encaisser ainsi que la devise dans les paramètres `amount` et `eur` (EPS ne prend en charge aucune autre devise). Si vous avez déjà une intégration [Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `eps` à la liste des [types de moyens de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types). ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=eur \ -d "payment_method_types[]=eps" ``` ### Côté client Côté client, demandez un PaymentIntent depuis votre serveur et stockez sa clé secrète du client. #### Kotlin ```kotlin class EpsPaymentActivity: AppCompatActivity() { private lateinit var paymentIntentClientSecret: String override fun onCreate(savedInstanceState: Bundle?) { // ... startCheckout() } private fun startCheckout() { // Request a PaymentIntent from your server and store its client secret } } ``` ## Recueillir les informations du moyen de paiement [Côté client] Dans votre application, recueillez le nom complet de votre client et créez un objet `PaymentMethodCreateParams` à l’aide de ces informations. #### Kotlin ```kotlin val billingDetails = PaymentMethod.BillingDetails(name = "Jenny Rosen") val paymentMethodCreateParams = PaymentMethodCreateParams.createEps(billingDetails) ``` ## Envoyer le paiement à Stripe [Côté client] Récupérez la clé secrète du client auprès du PaymentIntent que vous avez créé, puis appelez la fonction [confirm de PaymentLauncher](https://stripe.dev/stripe-android/payments-core/com.stripe.android.payments.paymentlauncher/-payment-launcher/index.html#74063765%2FFunctions%2F-1622557690). Une page Web s’affiche dans laquelle le client peut finaliser le paiement. Une fois l’opération terminée, `onPaymentResult` est appelé avec le résultat du paiement. #### Kotlin ```kotlin class EpsPaymentActivity : AppCompatActivity() { // ... private lateinit var paymentIntentClientSecret: String private val paymentLauncher: PaymentLauncher by lazy { val paymentConfiguration = PaymentConfiguration.getInstance(applicationContext) PaymentLauncher.Companion.create( this, paymentConfiguration.publishableKey, paymentConfiguration.stripeAccountId, ::onPaymentResult ) } private fun startCheckout() { // ... val confirmParams = ConfirmPaymentIntentParams .createWithPaymentMethodCreateParams( paymentMethodCreateParams = paymentMethodCreateParams, clientSecret = paymentIntentClientSecret ) paymentLauncher.confirm(confirmParams) } private fun onPaymentResult(paymentResult: PaymentResult) { when (paymentResult) { is PaymentResult.Completed -> { // show success UI } is PaymentResult.Canceled -> { // handle cancel flow } is PaymentResult.Failed -> { // handle failures // (for example, the customer might need to choose a new payment // method) } } } } ``` ## Optional: Gérer les événements post-paiement Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez le Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison. Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les [différences entre les différents moyens de paiement pris en charge](https://stripe.com/payments/payment-methods-guide). ### Recevoir des événements et exécuter des actions métier Plusieurs options s’offrent à vous pour recevoir et exécuter des actions métier. #### Manuellement Utilisez le Dashboard pour consulter tous vos paiements Stripe, envoyer des reçus par e-mail, gérer les virements et relancer les paiements ayant échoué. - [Afficher vos paiements tests dans le Dashboard](https://dashboard.stripe.com/test/payments) #### Code personnalisé Créez un gestionnaire de webhooks pour écouter des événements et créer des tunnels de paiement asynchrones personnalisés. Testez et déboguez votre intégration de webhooks en local, grâce à la CLI Stripe. - [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) #### Applications préconfigurées Intégrez une application partenaire pour gérer les événements métier courants, comme l’[automatisation](https://stripe.partners/?f_category=automation), le [marketing ou les ventes](https://stripe.partners/?f_category=marketing-and-sales). # React Native > This is a React Native for when payment-ui is mobile and platform is react-native. View the full page at https://docs.stripe.com/payments/eps/accept-a-payment?payment-ui=mobile&platform=react-native. EPS est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) qui nécessite l’[authentification](https://docs.stripe.com/payments/payment-methods.md#customer-actions) du paiement par le client. Pour effectuer un paiement avec EPS, les *clients* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) quittent votre site Web, autorisent le paiement, puis reviennent vers votre site Web. Vous recevez alors une [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification) indiquant si le paiement a abouti ou échoué. > Votre utilisation d’EPS doit se conformer aux [Conditions d’utilisation du service EPS](https://stripe.com/eps/legal). ## Configurer Stripe [Côté serveur] [Côté client] ### Côté serveur Pour cette intégration, votre serveur doit être doté d’endpoints qui communiquent avec l’API Stripe. Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre serveur : #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Côté client Le [SDK React Native](https://github.com/stripe/stripe-react-native) est disponible en open source et fait l’objet d’une documentation complète. En interne, il utilise des SDK [Android](https://github.com/stripe/stripe-android) et [iOS natifs](https://github.com/stripe/stripe-ios). Pour installer le SDK React Native de Stripe, exécutez l’une des commandes suivantes dans le répertoire de votre projet (selon le gestionnaire de paquets que vous utilisez) : #### yarn ```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 directeur **ios** et exécutez `pod install` pour vous assurer que vous installez également les dépendances natives requises. - Pour Android, il n’y a plus de dépendances à installer. > Nous vous recommandons de suivre le [guide officiel de TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) pour ajouter la prise en charge de TypeScript. ### Initialisation de Stripe Pour initialiser Stripe dans votre application React Native, wrappez votre écran de paiement avec le composant `StripeProvider` ou utilisez la méthode d’initialisation `initStripe`. Seule la [clé publiable](https://docs.stripe.com/keys.md#obtain-api-keys) de l’API dans `publishableKey` est nécessaire. L’exemple suivant montre comment initialiser Stripe à l’aide du composant `StripeProvider`. ```jsx import { useState, useEffect } from 'react'; import { StripeProvider } from '@stripe/stripe-react-native'; function App() { const [publishableKey, setPublishableKey] = useState(''); const fetchPublishableKey = async () => { const key = await fetchKey(); // fetch key from your server here setPublishableKey(key); }; useEffect(() => { fetchPublishableKey(); }, []); return ( {/* Your app code here */} ); } ``` > Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) d’API lors de vos activités de test et de développement, et vos clés du [mode production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application. ## Créer un PaymentIntent [Côté serveur] [Côté client] Un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) représente votre intention d’encaisser un paiement auprès d’un client et suit le cycle de vie du processus de paiement. ### Côté serveur Créez un `PaymentIntent` sur votre serveur et précisez le montant à encaisser ainsi que la devise dans les paramètres `amount` et `eur` (EPS ne prend en charge aucune autre devise). Si vous avez déjà une intégration [Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `eps` à la liste des [types de moyens de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types). ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=eur \ -d "payment_method_types[]=eps" ``` ### Côté client Côté client, demandez un PaymentIntent depuis votre serveur et stockez sa clé secrète du client. ```javascript const fetchPaymentIntentClientSecret = async () => { const response = await fetch(`${API_URL}/create-payment-intent`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ currency: 'eur', payment_method_types: ['eps'], }), }); const { clientSecret, error } = await response.json(); return { clientSecret, error }; }; ``` ## Recueillir les informations du moyen de paiement [Côté client] Dans votre application, recueillez le nom complet de votre client. ```javascript export default function EpsPaymentScreen() { const [name, setName] = useState(); const handlePayPress = async () => { // ... }; return ( setName(value.nativeEvent.text)} /> ); } ``` ## Envoyer le paiement à Stripe [Côté client] Récupérez la clé secrète du client auprès du PaymentIntent que vous avez créé, puis appelez le `confirmPayment`. Une page Web s’affiche dans laquelle le client peut finaliser le paiement sur le site Web ou l’application de sa banque. L’intention de paiement est alors finalisée avec le résultat du paiement. ```javascript export default function EPSPaymentScreen() { const [name, setName] = useState(); const handlePayPress = async () => { const billingDetails: PaymentMethodCreateParams.BillingDetails = { name, }; }; const { error, paymentIntent } = await confirmPayment(clientSecret, { paymentMethodType: 'Eps', paymentMethodData: { billingDetails, } }); if (error) { Alert.alert(`Error code: ${error.code}`, error.message); } else if (paymentIntent) { Alert.alert( 'Success', `The payment was confirmed successfully! currency: ${paymentIntent.currency}` ); } return ( setName(value.nativeEvent.text)} /> ); } ``` ## Optional: Gérer les événements post-paiement Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez le Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison. Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les [différences entre les différents moyens de paiement pris en charge](https://stripe.com/payments/payment-methods-guide). ### Recevoir des événements et exécuter des actions métier Plusieurs options s’offrent à vous pour recevoir et exécuter des actions métier. #### Manuellement Utilisez le Dashboard pour consulter tous vos paiements Stripe, envoyer des reçus par e-mail, gérer les virements et relancer les paiements ayant échoué. - [Afficher vos paiements tests dans le Dashboard](https://dashboard.stripe.com/test/payments) #### Code personnalisé Créez un gestionnaire de webhooks pour écouter des événements et créer des tunnels de paiement asynchrones personnalisés. Testez et déboguez votre intégration de webhooks en local, grâce à la CLI Stripe. - [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) #### Applications préconfigurées Intégrez une application partenaire pour gérer les événements métier courants, comme l’[automatisation](https://stripe.partners/?f_category=automation), le [marketing ou les ventes](https://stripe.partners/?f_category=marketing-and-sales). ## Optional: Gérer les liens profonds Lorsqu’un client quitte votre application (par exemple, pour s’authentifier dans Safari ou dans son application bancaire), donnez-lui un moyen de revenir automatiquement dans votre application. De nombreux types de moyens de paiement *nécessitent* une URL de redirection. Si vous n’en fournissez pas, nous ne pourrons pas présenter à vos utilisateurs les moyens de paiement nécessitant une URL de redirection, même si vous les avez activés. Pour fournir une URL de redirection : 1. [Enregistrez](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app#Register-your-URL-scheme) une URL personnalisée. Les liens universels ne sont pas pris en charge. 1. [Configurez](https://reactnative.dev/docs/linking) votre URL personnalisée. 1. Configurez votre composant racine pour qu’il transfère l’URL au SDK de Stripe, comme illustré ci-dessous. > Si vous utilisez Expo, [définissez votre schéma](https://docs.expo.io/guides/linking/#in-a-standalone-app) dans le fichier `app.json`. ```jsx import { useEffect, useCallback } from 'react'; import { Linking } from 'react-native'; import { useStripe } from '@stripe/stripe-react-native'; export default function MyApp() { const { handleURLCallback } = useStripe(); const handleDeepLink = useCallback( async (url: string | null) => { if (url) { const stripeHandled = await handleURLCallback(url); if (stripeHandled) { // This was a Stripe URL - you can return or add extra handling here as you see fit } else { // This was NOT a Stripe URL – handle as you normally would } } }, [handleURLCallback] ); useEffect(() => { const getUrlAsync = async () => { const initialUrl = await Linking.getInitialURL(); handleDeepLink(initialUrl); }; getUrlAsync(); const deepLinkListener = Linking.addEventListener( 'url', (event: { url: string }) => { handleDeepLink(event.url); } ); return () => deepLinkListener.remove(); }, [handleDeepLink]); return ( ); } ``` Pour plus d’informations sur les schémas d’URL natifs, consultez la documentation [Android](https://developer.android.com/training/app-links/deep-linking) et [iOS](https://developer.apple.com/documentation/xcode/allowing_apps_and_websites_to_link_to_your_content/defining_a_custom_url_scheme_for_your_app). # Elements > This is a Elements for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/eps/accept-a-payment?payment-ui=elements. > Le contenu de cette section fait référence à un produit *antérieur* (Technology that's no longer recommended). Vous devez plutôt consulter le guide relatif à l’[acceptation d’un paiement](https://docs.stripe.com/payments/accept-a-payment.md) pour en savoir plus sur le chemin d’intégration le plus récent. Stripe prend toujours en charge ce produit, néanmoins cette prise en charge peut prendre fin si le produit devient obsolète. EPS est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) qui nécessite l’[authentification](https://docs.stripe.com/payments/payment-methods.md#customer-actions) du paiement par le client. Pour effectuer un paiement avec EPS, les *clients* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) quittent votre site Web, autorisent le paiement, puis reviennent vers votre site Web. Vous recevez alors une [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification) indiquant si le paiement a abouti ou échoué. > Votre utilisation d’EPS doit se conformer aux [Conditions d’utilisation du service EPS](https://stripe.com/eps/legal). ## Configurer Stripe [Côté serveur] Pour commencer, il vous faut un compte Stripe. [Créez votre compte Stripe](https://dashboard.stripe.com/register). Utilisez nos bibliothèques officielles pour accéder à l’API Stripe à partir de votre application : #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Créer un PaymentIntent [Côté serveur] Un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) représente votre intention d’encaisser un paiement auprès d’un client et suit le cycle de vie du processus de paiement. Créez un `PaymentIntent` sur votre serveur et précisez le montant à encaisser ainsi que la devise dans les paramètres `amount` et `eur` (EPS ne prend en charge aucune autre devise). Si vous avez déjà une intégration [Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `eps` à la liste des [types de moyens de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types). ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=eur \ -d "payment_method_types[]=eps" ``` ### Récupérer la clé secrète du client Le PaymentIntent contient une *clé secrète* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) à utiliser côté client pour finaliser le processus de paiement en toute sécurité. Vous pouvez adopter différentes approches pour transmettre cette clé secrète côté client. #### Application monopage Récupérez la clé secrète du client à partir d’un endpoint sur votre serveur, à l’aide de la fonction `fetch` du navigateur. Cette approche est recommandée si votre côté client est une application d’une seule page, en particulier si elle repose sur un framework front-end moderne tel que React. Créez l’endpoint de serveur qui gère la clé secrète du client : #### Ruby ```ruby get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end ``` Récupérez ensuite la clé secrète du client à l’aide JavaScript côté client : ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### Rendu côté serveur Transmettez la clé secrète à votre client depuis votre serveur. Cette approche fonctionne mieux si votre application génère du contenu statique sur le serveur avant de l’envoyer sur le navigateur. Ajoutez le [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) à votre formulaire de paiement. Dans votre code côté serveur, récupérez la clé secrète du client à partir du PaymentIntent : #### Ruby ```erb
``` ```ruby get '/checkout' do @intent = # ... Fetch or create the PaymentIntent erb :checkout end ``` ## Recueillir les informations du moyen de paiement [Côté client] Vous êtes prêt à collecter les informations de paiement sur le client avec [Stripe Elements](https://docs.stripe.com/payments/elements.md). Elements est un ensemble de composants d’interface utilisateur prédéfinis pour la collecte des informations de paiement. Un composant Element contient une balise iframe qui envoie de manière sécurisée les informations de paiement à Stripe par une connexion HTTPS. Pour que votre intégration fonctionne, l’adresse de votre page de règlement doit aussi commencer par https:// au lieu de http://. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS. [Activez-le](https://docs.stripe.com/security/guide.md#tls) au moment d’accepter des paiements en mode production. ### Configurer Stripe Elements #### HTML + JS Stripe Elements est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js sur votre page de paiement, entre les balises `head` de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie. ```html Checkout ``` Créez une instance d’Elements avec le code JavaScript suivant sur votre page de paiement : ```javascript const stripe = Stripe('<>'); const elements = stripe.elements(); ``` ### Ajouter et configurer un élément epsBank > Cette documentation fait référence à une *Legacy* (Technology that's no longer recommended) fonctionnalité qui n’est plus disponible dans la dernière version de Stripe.js. Nous vous recommandons d’utiliser [Payment Element](https://docs.stripe.com/payments/payment-element.md), un composant d’interface utilisateur pour le web qui accepte plus de 40 moyens de paiement, valide les entrées et gère les erreurs. Elements doit avoir un emplacement dédié dans votre formulaire de paiement. Créez des nœuds de DOM (conteneurs) ayant des ID uniques dans votre formulaire de paiement, puis transmettez ces ID à Elements. #### HTML ```html
``` Lorsque le formulaire ci-dessus est chargé, [créez une instance](https://docs.stripe.com/js/elements_object/create_element?type=epsBank) d’un Element `epsBank` et intégrez-la au conteneur Element précédemment créé : ```javascript const options = { // Custom styling can be passed to options when creating an Element style: { base: { padding: '10px 12px', color: '#32325d', fontSize: '16px', '::placeholder': { color: '#aab7c4' }, }, }, }; // Create an instance of the epsBank Element const epsBank = elements.create('epsBank', options); // Add an instance of the epsBank Element into // the `eps-bank-element`
epsBank.mount('#eps-bank-element'); ``` Les composants Elements sont entièrement personnalisables. Vous pouvez [styliser les composants Elements](https://docs.stripe.com/js/elements_object/create_element?type=epsBank#elements_create-options) pour qu’ils s’intègrent visuellement à votre site afin de fournir une expérience de paiement uniforme à vos clients. Il est également possible de personnaliser différents états de saisie, par exemple lorsque le composant Element est sélectionné. #### React #### npm Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm. ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` #### umd Nous fournissons également une version UMD pour les sites qui n’utilisent pas npm ni de modules. Incluez le script Stripe.js, qui exporte une fonction `Stripe` globale, ainsi que la version UMD de React Stripe.js, qui exporte un objet `ReactStripe` global. Chargez toujours le script Stripe.js directement à partir de **js.stripe.com** pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie. ```html ``` > La [démo de CodeSandbox](https://codesandbox.io/s/react-stripe-official-q1loc?fontsize=14&hidenavigation=1&theme=dark) vous permet de tester React Stripe.js sans créer de projet. ### Ajoutez Stripe.js et Elements à votre page Pour utiliser les composants Element, enveloppez votre composant de page de paiement dans un [fournisseur Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Appelez `loadStripe` avec votre clé publiable et transmettez l’élément `Promise` renvoyé au fournisseur `Elements`. ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import CheckoutForm from './CheckoutForm'; // Make sure to call `loadStripe` outside of a component's render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('<>'); function App() { return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` ### Ajouter et configurer un composant EpsBankElement Utilisez `EpsBankElement` pour permettre à votre client de sélectionner la banque de son choix. #### JSX ```jsx /** * Use the CSS tab above to style your Element's container. */ import React from 'react'; import {EpsBankElement} from '@stripe/react-stripe-js'; import './EpsBankSectionStyles.css' const EPS_ELEMENT_OPTIONS = { // Custom styling can be passed to options when creating an Element style: { base: { padding: '10px 12px', color: '#32325d', fontSize: '16px', '::placeholder': { color: '#aab7c4' }, }, }, }; function EpsBankSection() { return ( ); }; export default EpsBankSection; ``` Les composants Elements sont entièrement personnalisables. Vous pouvez [styliser les composants Elements](https://docs.stripe.com/js/elements_object/create_element?type=epsBank#elements_create-options) pour qu’ils s’intègrent visuellement à votre site afin de fournir une expérience de paiement uniforme à vos clients. Il est également possible de personnaliser différents états de saisie, par exemple lorsque le composant Element est sélectionné. ## Envoyer le paiement à Stripe [Côté client] Plutôt que d’envoyer la totalité de l’objet PaymentIntent au client, utilisez sa [clé secrète](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Cette clé est distincte de vos clés API qui authentifient les requêtes envoyées à l’API Stripe. La clé secrète du client doit être utilisée avec prudence, car elle peut servir à finaliser le paiement. Elle ne doit être ni enregistrée, ni intégrée dans des URL, ni dévoilée à d’autres personnes que votre client. #### HTML + JS Utilisez [stripe.confirmEpsPayment](https://docs.stripe.com/js/payment_intents/confirm_eps_payment) pour gérer la redirection hors de votre page et pour terminer le paiement. Ajoutez un [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) à cette fonction pour indiquer où Stripe doit rediriger l’utilisateur après qu’il eut effectué le paiement sur le site Web ou l’application mobile de sa banque. ```javascript const form = document.getElementById('payment-form'); const accountholderName = document.getElementById('accountholder-name'); form.addEventListener('submit', (event) => { event.preventDefault(); // Redirects away from the client const {error} = await stripe.confirmEpsPayment( '{{PAYMENT_INTENT_CLIENT_SECRET}}', { payment_method: { eps: epsBank, billing_details: { name: accountholderName.value, }, }, return_url: 'https://example.com/checkout/complete', } ); }); ``` #### React Utilisez [stripe.confirmEpsPayment](https://docs.stripe.com/js/payment_intents/confirm_eps_payment) pour gérer la redirection hors de votre page et pour terminer le paiement. Ajoutez un [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) à cette fonction pour indiquer où Stripe doit rediriger l’utilisateur après qu’il eut effectué le paiement sur le site Web ou l’application mobile de sa banque. Pour appeler `stripe.confirmEpsPayment` depuis votre composant de formulaire de paiement, utilisez les hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) et [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook). Si vous préférez les composants de classe traditionnels aux crochets, vous pouvez utiliser un [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer). #### Hooks ```jsx import React from 'react'; import {useStripe, useElements, EpsBankElement} from '@stripe/react-stripe-js'; import EpsBankSection from './EpsBankSection'; export default function CheckoutForm() { const stripe = useStripe(); const elements = useElements(); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const epsBank = elements.getElement(EpsBankElement); // For brevity, this example is using uncontrolled components for // the accountholder's name. In a real world app you will // probably want to use controlled components. // https://reactjs.org/docs/uncontrolled-components.html // https://reactjs.org/docs/forms.html#controlled-components const accountholderName = event.target['accountholder-name']; const {error} = await stripe.confirmEpsPayment('{CLIENT_SECRET}', { payment_method: { eps: epsBank, billing_details: { name: accountholderName.value, }, }, return_url: 'https://example.com/checkout/complete', }); if (error) { // Show error to your customer. console.log(error.message); } // Otherwise the customer will be redirected away from your // page to complete the payment with their bank. }; return (
); } ``` #### Composants de classe ```jsx import React from 'react'; import {ElementsConsumer, EpsBankElement} from '@stripe/react-stripe-js'; import EpsBankSection from './EpsBankSection'; class CheckoutForm extends React.Component { handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); const {stripe, elements} = this.props if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const epsBank = elements.getElement(EpsBankElement); // For brevity, this example is using uncontrolled components for // the accountholder's name. In a real world app you will // probably want to use controlled components. // https://reactjs.org/docs/uncontrolled-components.html // https://reactjs.org/docs/forms.html#controlled-components const accountholderName = event.target['accountholder-name']; const {error} = await stripe.confirmEpsPayment('{CLIENT_SECRET}', { payment_method: { eps: epsBank, billing_details: { name: accountholderName.value, }, }, return_url: 'https://example.com/checkout/complete', }); if (error) { // Show error to your customer. console.log(error.message); } // Otherwise the customer will be redirected away from your // page to complete the payment with their bank. }; render() { const {stripe} = this.props; return (
); } } export default function InjectedCheckoutForm() { return ( {({stripe, elements}) => ( )} ); } ``` Lorsque votre client effectue un paiement, Stripe le redirige vers l’URL `return_url` et inclut les paramètres de requête d’URL suivants. La page de redirection peut utiliser ces paramètres pour récupérer l’état du PaymentIntent et ainsi afficher l’état du paiement pour le client. Lorsque vous spécifiez une URL `return_url`, vous pouvez également ajouter vos propres paramètres de requête à utiliser sur la page de redirection. | Paramètre | Description | | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent` | Identifiant unique du `PaymentIntent`. | | `payment_intent_client_secret` | La [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) de l’objet `PaymentIntent`. Pour les intégrations d’abonnements, le client_secret est également exposé sur l’objet `Invoice` via [`confirmation_secret`](https://docs.stripe.com/api/invoices/object.md#invoice_object-confirmation_secret) | Lorsque le client est redirigé vers votre site, vous pouvez utiliser le `payment_intent_client_secret` pour interroger le PaymentIntent et communiquer l’état de la transaction à votre client. Vous trouverez des informations sur le compte bancaire utilisé par le client en consultant la propriété [payment_method_details](https://docs.stripe.com/api/charges/object.md#charge_object-payment_method_details-eps) du paiement. #### Json ```json { "charges": { "data": [ {"payment_method_details": { "eps": { "bank": "bank_austria", "verified_name": "JENNY ROSEN" }, "type": "eps" }, "id": "src_16xhynE8WzK49JbAs9M21jaR", "object": "source", "amount": 1099, "client_secret": "src_client_secret_UfwvW2WHpZ0s3QEn9g5x7waU", "created": 1445277809, "currency": "eur", "flow": "redirect", "livemode": true, "statement_descriptor": null, "status": "pending", "type": "eps", "usage": "single_use" } ], "object": "list", "has_more": false, "url": "/v1/charges?payment_intent=pi_1G1sgdKi6xqXeNtkldRRE6HT" }, "payment_method_options": { "eps": {} }, "payment_method_types": [ "eps" ], "id": "pi_1G1sgdKi6xqXeNtkldRRE6HT", "object": "payment_intent", "amount": 1099, "client_secret": "pi_1G1sgdKi6xqXeNtkldRRE6HT_secret_h9B56ObhTN72fQiBAuzcVPb2E", "confirmation_method": "automatic", "created": 1579259303, "currency": "eur", "livemode": true, "next_action": null } ``` ## Tester votre intégration À l’aide de vos clés API de test, sélectionnez une banque dans la liste des banques compatibles avec EPS. Après avoir confirmé le paiement, vous serez redirigé vers une page de test proposant deux options : réussite ou échec du paiement. Vous pouvez tester la réussite de paiement en l’authentifiant sur la page de redirection. Le PaymentIntent passera alors de l’état `requires_action` à `succeeded`. Pour tester un échec d’authentification de l’utilisateur, sélectionnez une banque à l’aide de vos clés API de test. Puis, sur la page de redirection, cliquez sur **Échec du paiement test**. Votre PaymentIntent passera alors de l’état `requires_action` à `requires_payment_method`. ## Optional: Gérer les événements post-paiement [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 le Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison. Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les [différences entre les différents moyens de paiement pris en charge](https://stripe.com/payments/payment-methods-guide). ### Recevoir des événements et exécuter des actions métier Plusieurs options s’offrent à vous pour recevoir et exécuter des actions métier. #### Manuellement Utilisez le Dashboard pour consulter tous vos paiements Stripe, envoyer des reçus par e-mail, gérer les virements et relancer les paiements ayant échoué. - [Afficher vos paiements tests dans le Dashboard](https://dashboard.stripe.com/test/payments) #### Code personnalisé Créez un gestionnaire de webhooks pour écouter des événements et créer des tunnels de paiement asynchrones personnalisés. Testez et déboguez votre intégration de webhooks en local, grâce à la CLI Stripe. - [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) #### Applications préconfigurées Intégrez une application partenaire pour gérer les événements métier courants, comme l’[automatisation](https://stripe.partners/?f_category=automation), le [marketing ou les ventes](https://stripe.partners/?f_category=marketing-and-sales). ## Optional: Gérer les changements de l'élément EPS Bank [Côté client] L’élément EPS Bank indique la banque sélectionnée par le client, même si celle-ci a changé. Si vous souhaitez effectuer une logique supplémentaire à partir de la valeur Bank (par exemple, en rendant ce champ obligatoire pour la validation du formulaire), vous pouvez surveiller l’événement Change : #### HTML + JS ```javascript epsBank.on('change', (event) => { const bank = event.value; // Perform any additional logic here... }); ``` #### React ```jsx { const bank = event.value; // Perform any additional logic here... }}> ``` L’événement indiquant un changement contient d’autres paramètres qui peuvent vous aider à enrichir votre expérience utilisateur. Pour en savoir plus, consultez la [documentation de Stripe.js](https://docs.stripe.com/js/element/events/on_change?type=epsBankElement#element_on_change-handler). ## Optional: Gérer la redirection EPS manuellement [Côté serveur] Nous recommandons l’utilisation de Stripe.js pour gérer les redirections et paiements EPS avec `confirmEpsPayment`. Toutefois, vous pouvez également rediriger vos clients manuellement : 1. En fournissant l’URL vers laquelle vos clients sont redirigés une fois leur paiement effectué. 1. En indiquant la banque du client (facultatif), vers laquelle il sera redirigé pour autoriser son paiement. Vous trouverez la liste des banques disponibles dans la section [Valeurs des banques](https://docs.stripe.com/payments/eps/accept-a-payment.md#bank-values). #### curl ```bash curl https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/confirm \ -u <>: \ -d "return_url"="https://example.com/checkout/complete" \ -d "payment_method_data[type]"="eps" \ -d "payment_method_data[eps][bank]"="bank_austria" ``` 1. En vérifiant que l’état du `PaymentIntent` est bien `requires_action` et que le type de `next_action` est `redirect_to_url`. #### Json ```json {"next_action": { "type": "redirect_to_url", "redirect_to_url": { "url": "https://hooks.stripe.com/...", "return_url": "https://example.com/checkout/complete" } }, "charges": { "data": [ { "payment_method_details": { "eps": { "bank": "bank_austria", "verified_name": "JENNY ROSEN" }, "type": "eps" }, "id": "src_16xhynE8WzK49JbAs9M21jaR", "object": "source", "amount": 1099, "client_secret": "src_client_secret_UfwvW2WHpZ0s3QEn9g5x7waU", "created": 1445277809, "currency": "eur", "flow": "redirect", "livemode": true, "statement_descriptor": null, "status": "pending", "type": "eps", "usage": "single_use" } ], "object": "list", "has_more": false, "url": "/v1/charges?payment_intent=pi_1G1sgdKi6xqXeNtkldRRE6HT" }, "payment_method_options": { "eps": {} }, "payment_method_types": [ "eps" ], "id": "pi_1G1sgdKi6xqXeNtkldRRE6HT", "object": "payment_intent", "amount": 1099, "client_secret": "pi_1G1sgdKi6xqXeNtkldRRE6HT_secret_h9B56ObhTN72fQiBAuzcVPb2E", "confirmation_method": "automatic", "created": 1579259303, "currency": "eur", "livemode": true } ``` 1. En redirigeant le client vers l’URL indiquée dans la propriété `next_action`. ```javascript const action = intent.next_action; if (action && action.type === 'redirect_to_url') { window.location = action.redirect_to_url.url; } ``` À l’issue du processus de paiement, le client est redirigé vers la destination `return_url`. Les paramètres de requête d’URL `payment_intent` et `payment_intent_client_secret` sont inclus et vous pouvez par ailleurs transmettre vos propres paramètres de requête, comme indiqué plus haut. ## Optional: Enregistrer la préférence bancaire du client [Côté client] Vous ne pouvez pas réutiliser les *PaymentMethods* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) EPS ni les enregistrer pour les clients. Vous devez créer un nouveau PaymentMethod EPS chaque fois que votre client sélectionnera ce moyen de paiement dans votre formulaire de paiement, en utilisant l’Element EPS Bank. Pour garder une trace de la préférence bancaire de votre client, nous vous recommandons de la conserver dans votre propre base de données ou d’utiliser la propriété `metadata` de l’objet *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Lorsque vous créez l’élément EPS Bank, vous pouvez le préremplir avec la banque choisie par le client : #### HTML + JS ```javascript const options = { // Include the bank name along with any custom stylingvalue: "bank_austria", style: { base: { padding: '10px 12px', color: '#32325d', fontSize: '16px', '::placeholder': { color: '#aab7c4' }, }, }, } // Create an instance of the Element const epsBank = elements.create('epsBank', options); // Mount the Element epsBank.mount('#eps-bank-element');TODO: highlight: [3] ``` #### React ```jsx const EPS_ELEMENT_OPTIONS = { // Include the bank name along with any custom stylingvalue: "bank_austria", style: { base: { padding: '10px 12px', color: '#32325d', fontSize: '16px', '::placeholder': { color: '#aab7c4' }, }, }, } ``` ## Valeurs bancaires | Nom de la banque | Valeur | | ----------------------------------------- | --------------------------------------- | | Ärzte- und Apothekerbank | arzte_und_apotheker_bank | | Austrian Anadi Bank AG | austrian_anadi_bank_ag | | Bank Austria | bank_austria | | Bankhaus Carl Spängler & Co.AG | bankhaus_carl_spangler | | Bankhaus Schelhammer & Schattera AG | bankhaus_schelhammer_und_schattera_ag | | BAWAG P.S.K. AG | bawag_psk_ag | | BKS Bank AG | bks_bank_ag | | Brüll Kallmus Bank AG | brull_kallmus_bank_ag | | BTV VIER LÄNDER BANK | btv_vier_lander_bank | | Capital Bank Grawe Gruppe AG | capital_bank_grawe_gruppe_ag | | Dolomitenbank | dolomitenbank | | Easybank AG | easybank_ag | | Erste Bank und Sparkassen | erste_bank_und_sparkassen | | Hypo Alpe-Adria-Bank International AG | hypo_alpeadriabank_international_ag | | HYPO NOE LB für Niederösterreich u. Wien | hypo_noe_lb_fur_niederosterreich_u_wien | | HYPO Oberösterreich, Salzburg, Steiermark | hypo_oberosterreich_salzburg_steiermark | | Hypo Tirol Bank AG | hypo_tirol_bank_ag | | Hypo Vorarlberg Bank AG | hypo_vorarlberg_bank_ag | | HYPO-BANK BURGENLAND Aktiengesellschaft | hypo_bank_burgenland_aktiengesellschaft | | Marchfelder Bank | marchfelder_bank | | Oberbank AG | oberbank_ag | | Raiffeisen Bankengruppe Österreich | raiffeisen_bankengruppe_osterreich | | Schoellerbank AG | schoellerbank_ag | | Sparda-Bank Wien | sparda_bank_wien | | Volksbank Gruppe | volksbank_gruppe | | Volkskreditbank AG | volkskreditbank_ag | | VR-Bank Braunau | vr_bank_braunau |