# Accepter un paiement Bancontact Découvrez comment accepter les paiements effectués à l'aide de Bancontact, un moyen de paiement très répandu en Belgique. # Checkout > This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/bancontact/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. Bancontact 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 Bancontact, 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. 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 de Bancontact doit se conformer à nos [Conditions d’utilisation du service Bancontact](https://stripe.com/bancontact/legal). ## Déterminer la compatibilité **Lieux d’implantation pris en charge** : Europe, US, CA, NZ, SG, HK, JP, AU, MX **Devises prises en charge** : `eur` **Devises de règlement** : `eur` **Mode de paiement** : Yes **Mode de configuration** : Yes **Mode d’abonnement** : Yes Une session Checkout doit remplir toutes les conditions suivantes pour prendre en charge les paiements Bancontact : - Le *tarif* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) de tous les postes doit être indiqué en euros (code de devise `eur`). ## Accepter un paiement > 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. Ce guide vous explique comment activer Bancontact et vous montre les différences entre accepter des paiements à l’aide de moyens de paiement dynamiques et configurer manuellement ces derniers. ### Activer Bancontact en tant que moyen de paiement Lors de la création d’une nouvelle [session Checkout](https://docs.stripe.com/api/checkout/sessions.md), vous devez : 1. Ajoutez `bancontact` à la liste `payment_method_types`. 1. Veiller à ce que l’ensemble de vos `line_items` utilisent la devise `eur` #### 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]=bancontact" \ --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]=bancontact" \ --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 Il n’existe pas de numéro de test spécifique pour Bancontact. Lors du test de votre intégration Checkout, sélectionnez le moyen de paiement Bancontact, puis cliquez sur le bouton **Payer**. ## Gérer les litiges et remboursements La période de remboursement applicable aux paiements Bancontact est limitée à 180 jours après le paiement d’origine. Il n’existe pas de processus de litige : les clients s’authentifient auprès de leur banque. ## See also - [En savoir plus sur Bancontact](https://docs.stripe.com/payments/bancontact.md) - [Exécution Checkout](https://docs.stripe.com/checkout/fulfillment.md) - [Personnalisation de Checkout](https://docs.stripe.com/payments/checkout/customization.md) # API Direct > This is a API Direct for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/bancontact/accept-a-payment?payment-ui=direct-api. Bancontact est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) qui nécessite une [authentification](https://docs.stripe.com/payments/payment-methods.md#customer-actions) de son paiement par le client. Pour effectuer un paiement avec Bancontact, votre *client* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) quitte votre application, authentifie son paiement, puis revient sur votre application. Vous recevez alors une [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification) vous indiquant si le paiement a abouti ou s’il a échoué. > Votre utilisation de Bancontact doit se conformer aux [Conditions d’utilisation du service Bancontact](https://stripe.com/bancontact/legal). ## Configurer Stripe [Côté serveur] Pour commencer, vous devez créer un compte Stripe. [Inscrivez-vous maintenant](https://dashboard.stripe.com/register). Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis 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) est un objet qui représente votre intention d’encaisser le paiement d’un client et qui suit le cycle de vie du processus de paiement étape par étape. Créez un `PaymentIntent` sur votre serveur et indiquez le montant à encaisser ainsi que la devise `eur` (Bancontact ne prend pas en charge d’autres devises). Si vous disposez déjà d’une intégration avec [Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `bancontact` à 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[]=bancontact" ``` Par défaut, la langue de la page d’autorisation de Bancontact est l’anglais (`en`). Vous pouvez la remplacer par la langue préférée de votre client en réglant la propriété `preferred_language` sur `fr`, `nl` ou `de`. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=eur \ -d "payment_method_types[]=bancontact" \ -d "payment_method_options[bancontact][preferred_language]=fr" ``` ### 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 ``` ## Collecter les informations du moyen de paiement [Côté client] #### HTML + JS Créez un formulaire de paiement côté client pour collecter les informations de facturation du client : | Champ | Valeur | | ------ | ------------------------ | | `name` | Nom et prénom du client. | ```html
``` #### 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')); ``` ## Soumettre le paiement à Stripe [Côté client] Créez un paiement côté client à l’aide de la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) du `PaymentIntent`. La clé secrète du client est différente de vos clés d’API, qui servent à authentifier les requêtes adressées à l’API Stripe. Elle doit être manipulée avec précaution, car elle permet de finaliser le paiement. Ne la consignez pas dans les logs, ne l’intégrez pas dans des URL et ne l’exposez à personne d’autre que le client. #### HTML + JS Lorsqu’un client clique pour payer avec Bancontact, utilisez Stripe.js pour soumettre le paiement à Stripe. [Stripe.js](https://docs.stripe.com/payments/elements.md) est la bibliothèque JavaScript de base pour créer les tunnels de paiement : elle gère automatiquement les opérations complexes telles que la redirection décrite ci-dessous, et facilite l’extension de votre intégration à d’autres moyens de paiement. Incluez le script Stripe.js sur votre page de paiement en l’ajoutant à la section `head` de votre fichier HTML. ```html Checkout ``` Créez une instance de Stripe.js avec le code JavaScript suivant sur votre page de paiement. ```javascript // Set your publishable key. Remember to change this to your live publishable key in production! // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe('<>'); ``` Appelez [stripe.confirmBancontactPayment](https://docs.stripe.com/js/payment_intents/confirm_bancontact_payment) pour rediriger votre client vers le site Web ou l’application de Bancontact afin d’effectuer le paiement. Ajoutez une URL `return_url` pour rediriger votre client une fois le paiement effectué. Vous devez également fournir le nom complet du client dans `billing_details`. ```javascript var stripe = Stripe('<>'); // Redirects away from the client const {error} = await stripe.confirmBancontactPayment( '{{PAYMENT_INTENT_CLIENT_SECRET}}', { payment_method: { billing_details: { name: "Jenny Rosen" } }, return_url: 'https://example.com/checkout/complete', } ); if (error) { // Inform the customer that there was an error. } ``` #### React Utilisez [stripe.confirmBancontactPayment](https://docs.stripe.com/js/payment_intents/confirm_bancontact_payment) pour exécuter la redirection vers la banque et effectuer le paiement. Ajoutez une [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) à cette fonction pour indiquer à Stripe vers quelle page rediriger l’utilisateur une fois le paiement effectué sur le site Web ou l’application mobile de sa banque. Pour appeler `stripe.confirmBancontactPayment` depuis votre composant de formulaire de paiement, utilisez les hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) et [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook). Si vous préférez les composants de classe traditionnels aux hooks, vous pouvez utiliser un [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer). #### Hooks ```jsx import React from 'react'; import {useStripe, useElements} from '@stripe/react-stripe-js'; 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; } // 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.confirmBancontactPayment('{CLIENT_SECRET}', { payment_method: { 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} from '@stripe/react-stripe-js'; 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; } // 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.confirmBancontactPayment('{CLIENT_SECRET}', { payment_method: { 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}) => ( )} ); } ``` ### Effectuer la redirection Les paramètres de requête d’URL suivants sont fournis lorsque Stripe redirige le client vers l’URL `return_url`. | Paramètre | Description | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent` | L’identifiant unique du `PaymentIntent`. | | `payment_intent_client_secret` | La [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) de l’objet `PaymentIntent`. | Vous pouvez également ajouter vos propres paramètres de requête lorsque vous fournissez `return_url`. Ceux-ci resteront activés pendant toute la durée du processus de redirection. Le paramètre `return_url` doit correspondre à une page de votre site web sur laquelle l’état du paiement est fourni. Vous devez vérifier l’état du `PaymentIntent` lors de l’affichage de la page de retour. Vous pouvez le faire en utilisant la fonction `retrievePaymentIntent` de Stripe.js et en transmettant `payment_intent_client_secret`. ```javascript (async () => { const url = new URL(window.location); const clientSecret = url.searchParams.get('payment_intent_client_secret'); const {paymentIntent, error} = await stripe.retrievePaymentIntent(clientSecret); if (error) { // Handle error } else if (paymentIntent && paymentIntent.status === 'succeeded') { // Handle successful payment } })(); ``` ### Détails du compte bancaire Vous pouvez consulter les informations concernant le compte bancaire qu’utilise le client pour effectuer le paiement sur le montant facturé dans la propriété [payment_method_details](https://docs.stripe.com/api/charges/object.md#charge_object-payment_method_details-bancontact). #### Json ```json { "charges": { "data": [ {"payment_method_details": { "bancontact": { "bank_code": "VAPE", "bank_name": "VAN DE PUT & CO", "bics": "VAPEBE22", "iban_last4": "7061", "preferred_language": "en", "verified_name": "Jenny Rosen" }, "type": "bancontact" }, "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": "bancontact", "usage": "single_use" } ], "object": "list", "has_more": false, "url": "/v1/charges?payment_intent=pi_1G1sgdKi6xqXeNtkldRRE6HT" }, "payment_method_options": { "bancontact": { "preferred_language": "en" } }, "payment_method_types": [ "bancontact" ], "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 } ``` ## Optional: Gérer les événements post-paiement Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez le Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison. Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les [différences entre les différents moyens de paiement pris en charge](https://stripe.com/payments/payment-methods-guide). - **Gérer les événements manuellement dans le Dashboard** Utilisez le Dashboard pour [afficher vos paiements de test dans le Dashboard](https://dashboard.stripe.com/test/payments), envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués. - **Créer un webhook personnalisé** [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. - **Intégrer une application prédéfinie** Gérez les événements commerciaux courants, tels que l’[automatisation](https://stripe.partners/?f_category=automation) ou le [marketing et les ventes](https://stripe.partners/?f_category=marketing-and-sales), en intégrant une application partenaire. ## Optional: Gérer la redirection de Bancontact manuellement Nous recommandons d’utiliser Stripe.js pour gérer les Bancontact redirections et paiements côté client avec `confirmBancontactPayment`. L’utilisation de Stripe.js permet d’ajouter d’autres moyens de paiement à votre intégration. Cependant, vous pouvez aussi rediriger vos clients manuellement sur votre serveur en procédant comme suit : 1. Créez et *confirmez* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects) un PaymentIntent de type `bancontact`. Vous devez fournir la propriété `payment_method_data.billing_details.name`, que vous aurez recueillie auprès du client. En spécifiant `payment_method_data`, vous créez un PaymentMethod qui est utilisé immédiatement avec ce PaymentIntent. Vous devez également fournir l’URL vers laquelle votre client est redirigé après avoir terminé son paiement dans le champ `return_url`. Vous pouvez éventuellement ajouter vos propres paramètres de requête dans cette URL. Ces paramètres seront inclus dans l’URL finale une fois le flux de redirection terminé. #### Ruby ```ruby # Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. # Find your keys at https://dashboard.stripe.com/apikeys. Stripe.api_key = '<>' payment_intent = Stripe::PaymentIntent.create({ confirm: true, amount: 1099, currency: 'eur', payment_method_types: ['bancontact'], payment_method_data: { type: 'bancontact', billing_details: { name: 'Jenny Rosen', }, }, return_url: 'https://example.com/checkout/complete', }) ``` 1. Vérifiez que le `PaymentIntent` a l’état `requires_action` et que le type de `next_action` est `redirect_to_url`. #### Json ```json {"status": "requires_action", "next_action": { "type": "redirect_to_url", "redirect_to_url": { "url": "https://hooks.stripe.com/...", "return_url": "https://example.com/checkout/complete" } }, "id": "pi_1G1sgdKi6xqXeNtkldRRE6HT", "object": "payment_intent", ... } ``` 1. Redirigez le client vers l’URL fournie dans la propriété `next_action.redirect_to_url.url`. Cet exemple de code fourni ici n’a qu’une valeur illustrative : la méthode de redirection peut différer sur votre framework Web. #### Ruby ```ruby if payment_intent.status == 'requires_action' && payment_intent.next_action.type == 'redirect_to_url' url = payment_intent.next_action.redirect_to_url.url redirect(url) end ``` Le client est redirigé vers l’URL `return_url` une fois qu’il a effectué le paiement. Les paramètres de la requête d’URL `payment_intent` et `payment_intent_client_secret` sont inclus avec tous vos propres paramètres. Stripe recommande de configurer un [endpoint de webhook](https://docs.stripe.com/payments/payment-intents/verifying-status.md#webhooks) pour configurer l’état d’un paiement par voie programmatique. # 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/bancontact/accept-a-payment?payment-ui=mobile&platform=ios. > Nous vous recommandons de suivre le guide [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md), sauf si vous devez exécuter la confirmation manuelle côté serveur, ou si votre intégration requiert la présentation de moyens de paiement de manière distincte. Si vous avez déjà intégré Elements, consultez le [Guide de migration du Payment Element](https://docs.stripe.com/payments/payment-element/migration.md). Bancontact est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) qui nécessite une [authentification](https://docs.stripe.com/payments/payment-methods.md#customer-actions) de son paiement par le client. Pour effectuer un paiement avec Bancontact, votre *client* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) quitte votre application, authentifie son paiement, puis revient sur votre application. Vous recevez alors une [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification) vous indiquant si le paiement a abouti ou s’il a échoué. > Votre utilisation de Bancontact doit se conformer aux [Conditions d’utilisation du service Bancontact](https://stripe.com/bancontact/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 [Server-side,Client-side] A [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) is an object that represents your intent to collect payment from a customer and tracks the lifecycle of the payment process through each stage. ### Server-side Créez un `PaymentIntent` sur votre serveur et indiquez le montant à encaisser ainsi que la devise `eur` (Bancontact ne prend pas en charge d’autres devises). Si vous disposez déjà d’une intégration avec [Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `bancontact` à 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[]=bancontact" ``` Par défaut, la langue de la page d’autorisation de Bancontact est l’anglais (`en`). Vous pouvez la remplacer par la langue préférée de votre client en réglant la propriété `preferred_language` sur `fr`, `nl` ou `de`. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=eur \ -d "payment_method_types[]=bancontact" \ -d "payment_method_options[bancontact][preferred_language]=fr" ``` ### Client-side On the client, request a PaymentIntent from your server and store its client secret. #### Swift ```swift class CheckoutViewController: UIViewController { var paymentIntentClientSecret: String? func startCheckout() { // Request a PaymentIntent from your server and store its client secret } } ``` ## Collect payment method details [Client-side] In your app, collect the required billing details (first and last name) from the customer. Create a [STPPaymentIntentParams](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentIntentParams.html) with the billing details. #### Swift ```swift let bancontactParams = STPPaymentMethodBancontactParams() let billingDetails = STPPaymentMethodBillingDetails() billingDetails.name = "Jane Doe" ``` ## Submit the payment to Stripe [Client-side] Retrieve the client secret from the PaymentIntent you created in step 2 and call [STPPaymentHandler confirmPayment](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentHandler.html#/c:@M@StripePayments@objc\(cs\)STPPaymentHandler\(im\)confirmPayment:withAuthenticationContext:completion:). This presents a webview where the customer can complete the payment. Upon completion, the completion block is called with the result of the payment. #### Swift ```swift let paymentIntentParams = STPPaymentIntentParams(clientSecret: paymentIntentClientSecret) paymentIntentParams.paymentMethodParams = STPPaymentMethodParams( bancontact: bancontactParams, billingDetails: billingDetails, metadata: nil ) STPPaymentHandler.shared().confirmPayment(paymentIntentParams, with: self) { (handlerStatus, paymentIntent, error) in switch handlerStatus { case .succeeded: // Payment succeeded case .canceled: // Payment was canceled case .failed: // Payment failed @unknown default: fatalError() } } ``` ## Optional: Handle post-payment events Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez le Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison. Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les [différences entre les différents moyens de paiement pris en charge](https://stripe.com/payments/payment-methods-guide). - **Gérer les événements manuellement dans le Dashboard** Utilisez le Dashboard pour [afficher vos paiements de test dans le Dashboard](https://dashboard.stripe.com/test/payments), envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués. - **Créer un webhook personnalisé** [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. - **Intégrer une application prédéfinie** Gérez les événements commerciaux courants, tels que l’[automatisation](https://stripe.partners/?f_category=automation) ou le [marketing et les ventes](https://stripe.partners/?f_category=marketing-and-sales), en intégrant une application partenaire. # 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/bancontact/accept-a-payment?payment-ui=mobile&platform=android. > Nous vous recommandons de suivre le guide [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md), sauf si vous devez exécuter la confirmation manuelle côté serveur, ou si votre intégration requiert la présentation de moyens de paiement de manière distincte. Si vous avez déjà intégré Elements, consultez le [Guide de migration du Payment Element](https://docs.stripe.com/payments/payment-element/migration.md). Bancontact est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) qui nécessite une [authentification](https://docs.stripe.com/payments/payment-methods.md#customer-actions) de son paiement par le client. Pour effectuer un paiement avec Bancontact, votre *client* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) quitte votre application, authentifie son paiement, puis revient sur votre application. Vous recevez alors une [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification) vous indiquant si le paiement a abouti ou s’il a échoué. > Votre utilisation de Bancontact doit se conformer aux [Conditions d’utilisation du service Bancontact](https://stripe.com/bancontact/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.2.0") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.2.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. ## Create a PaymentIntent [Server-side,Client-side] A [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) is an object that represents your intent to collect payment from a customer and tracks the lifecycle of the payment process through each stage. ### Server-side Créez un `PaymentIntent` sur votre serveur et indiquez le montant à encaisser ainsi que la devise `eur` (Bancontact ne prend pas en charge d’autres devises). Si vous disposez déjà d’une intégration avec [Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `bancontact` à 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[]=bancontact" ``` Par défaut, la langue de la page d’autorisation de Bancontact est l’anglais (`en`). Vous pouvez la remplacer par la langue préférée de votre client en réglant la propriété `preferred_language` sur `fr`, `nl` ou `de`. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=eur \ -d "payment_method_types[]=bancontact" \ -d "payment_method_options[bancontact][preferred_language]=fr" ``` ### Client-side On the client, request a PaymentIntent from your server and store its client secret. #### Kotlin ```kotlin class BancontactPaymentActivity: 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 } } ``` ## Collect payment method details [Client-side] In your app, collect the required billing details (first and last name) from the customer. Create a `PaymentMethodCreateParams` with the billing details. #### Kotlin ```kotlin val billingDetails = PaymentMethod.BillingDetails(name = "Jenny Rosen") val paymentMethodCreateParams = PaymentMethodCreateParams.createBancontact(billingDetails) ``` ## Submit the payment to Stripe [Client-side] Retrieve the client secret from the PaymentIntent you created in step 2 and call [PaymentLauncher confirm](https://stripe.dev/stripe-android/payments-core/com.stripe.android.payments.paymentlauncher/-payment-launcher/index.html#74063765%2FFunctions%2F-1622557690). This presents a webview where the customer can complete the payment. Upon completion, `onPaymentResult` is called with the result of the payment. #### Kotlin ```kotlin class BancontactPaymentActivity : AppCompatActivity() { // ... private lateinit var paymentIntentClientSecret: String private val paymentLauncher: PaymentLauncher by lazy { PaymentLauncher.Companion.create( this, PaymentConfiguration.getInstance(applicationContext).publishableKey, PaymentConfiguration.getInstance(applicationContext).stripeAccountId, ::onPaymentResult ) } private fun startCheckout() { // ... val confirmParams = ConfirmPaymentIntentParams .createWithPaymentMethodCreateParams( paymentMethodCreateParams = paymentMethodCreateParams, clientSecret = paymentIntentClientSecret ) paymentLauncher.confirm(confirmParams) } private fun onPaymentResult(paymentResult: PaymentResult) { val message = when (paymentResult) { is PaymentResult.Completed -> { "Completed!" } is PaymentResult.Canceled -> { "Canceled!" } is PaymentResult.Failed -> { // This string comes from the PaymentIntent's error message. // See here: https://stripe.com/docs/api/payment_intents/object#payment_intent_object-last_payment_error-message "Failed: " + paymentResult.throwable.message } } } } ``` ## Optional: Handle post-payment events Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez le Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison. Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les [différences entre les différents moyens de paiement pris en charge](https://stripe.com/payments/payment-methods-guide). - **Gérer les événements manuellement dans le Dashboard** Utilisez le Dashboard pour [afficher vos paiements de test dans le Dashboard](https://dashboard.stripe.com/test/payments), envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués. - **Créer un webhook personnalisé** [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. - **Intégrer une application prédéfinie** Gérez les événements commerciaux courants, tels que l’[automatisation](https://stripe.partners/?f_category=automation) ou le [marketing et les ventes](https://stripe.partners/?f_category=marketing-and-sales), en intégrant une application partenaire. # 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/bancontact/accept-a-payment?payment-ui=mobile&platform=react-native. > Nous vous recommandons de suivre le guide [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md), sauf si vous devez exécuter la confirmation manuelle côté serveur, ou si votre intégration requiert la présentation de moyens de paiement de manière distincte. Si vous avez déjà intégré Elements, consultez le [Guide de migration du Payment Element](https://docs.stripe.com/payments/payment-element/migration.md). Bancontact est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) qui nécessite une [authentification](https://docs.stripe.com/payments/payment-methods.md#customer-actions) de son paiement par le client. Pour effectuer un paiement avec Bancontact, votre *client* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) quitte votre application, authentifie son paiement, puis revient sur votre application. Vous recevez alors une [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification) vous indiquant si le paiement a abouti ou s’il a échoué. > Votre utilisation de Bancontact doit se conformer aux [Conditions d’utilisation du service Bancontact](https://stripe.com/bancontact/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. ## Create a PaymentIntent [Server-side] [Client-side] A [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) is an object that represents your intent to collect payment from a customer and tracks the lifecycle of the payment process through each stage. ### Server-side Créez un `PaymentIntent` sur votre serveur et indiquez le montant à encaisser ainsi que la devise `eur` (Bancontact ne prend pas en charge d’autres devises). Si vous disposez déjà d’une intégration avec [Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `bancontact` à 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[]=bancontact" ``` Par défaut, la langue de la page d’autorisation de Bancontact est l’anglais (`en`). Vous pouvez la remplacer par la langue préférée de votre client en réglant la propriété `preferred_language` sur `fr`, `nl` ou `de`. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=eur \ -d "payment_method_types[]=bancontact" \ -d "payment_method_options[bancontact][preferred_language]=fr" ``` ### Client-side On the client, request a PaymentIntent from your server and store its client secret. ```javascript const fetchPaymentIntentClientSecret = async () => { const response = await fetch(`${API_URL}/create-payment-intent`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ email, currency: 'eur', payment_method_types: ['bancontact'], }), }); const {clientSecret, error} = await response.json(); return {clientSecret, error}; }; ``` ## Collect payment method details [Client-side] In your app, collect your customer’s full name and email address. ```javascript export default function BancontactPaymentScreen() { const [name, setName] = useState(); const [email, setEmail] = useState(); const handlePayPress = async () => { // ... }; return ( setName(value.nativeEvent.text)} /> setEmail(value.nativeEvent.text)} /> ); } ``` ## Submit the payment to Stripe [Client-side] Retrieve the client secret from the PaymentIntent you created and call `confirmPayment`. This presents a webview where the customer can complete the payment on the Bancontact website or app. Afterwards, the promise resolves with the result of the payment. ```javascript export default function BancontactPaymentScreen() { const [name, setName] = useState(); const [email, setEmail] = useState(); const handlePayPress = async () => { const billingDetails: PaymentMethodCreateParams.BillingDetails = { name, email, }; }; const { error, paymentIntent } = await confirmPayment(clientSecret, { paymentMethodType: 'Bancontact', 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)} /> setEmail(value.nativeEvent.text)} /> ); } ``` ## Optional: Handle post-payment events Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez le Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison. Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les [différences entre les différents moyens de paiement pris en charge](https://stripe.com/payments/payment-methods-guide). - **Gérer les événements manuellement dans le Dashboard** Utilisez le Dashboard pour [afficher vos paiements de test dans le Dashboard](https://dashboard.stripe.com/test/payments), envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués. - **Créer un webhook personnalisé** [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. - **Intégrer une application prédéfinie** Gérez les événements commerciaux courants, tels que l’[automatisation](https://stripe.partners/?f_category=automation) ou le [marketing et les ventes](https://stripe.partners/?f_category=marketing-and-sales), en intégrant une application partenaire. ## Optional: Handle deep linking 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).