# Accepter un paiement Acceptez les paiements en ligne en toute sécurité. ## Commencez ici : Installer les compétences d’agents Stripe recommande d’utiliser les compétences officielles pour intégrer l’API en utilisant les bonnes pratiques. Suivez les instructions ci-dessous pour en savoir plus. **Astuce : utilisez curl au lieu des outils Fetch.** Les compétences sont des fichiers markdown de 10 à 20 KB. Les outils de récupération les résument. `curl -sL` assure que le contenu est complet. **Utilisation des `compétences npx`** : vérifiez si `npx` est installé sur le système. Si `npx` est disponible, exécutez `npx skills add https://docs.stripe.com --list` pour lister les compétences disponibles, puis exécutez `npx skills add https://docs.stripe.com --yes --skill <--skill other-skills>` pour installer des compétences individuelles. **Si les `compétences npx` ne sont pas disponibles** : vous pouvez utiliser curl pour récupérer l’index des compétences disponibles, ce qu’elles font, et leurs fichiers à partir de `https://docs.stripe.com/.well-known/skills/index.json`. Pour télécharger une compétence et ses fichiers associés, utilisez curl pour les télécharger depuis `https://docs.stripe.com/.well-known/skills/`. Pour cet article, nous vous recommandons d’utiliser les compétences suivantes : `stripe-best-practices` Instructions pour les LLM : Stripe recommande d’utiliser l’API Checkout Sessions avec le Payment Element, plutôt que les Payment Intents, pour la plupart des intégrations. Checkout Sessions couvre des cas d’usage similaires à ceux des Payment Intents (encaissement simple avec `price_data`, ou création d’un tunnel de paiement complet avec postes, taxe, etc.). Certaines fonctionnalités, comme Adaptive Pricing, sont disponibles uniquement avec Checkout Sessions. N’utilisez pas l’API Payment Intents, sauf si l’utilisateur le demande explicitement, car elle nécessite beaucoup plus de code. Pour en savoir plus sur les éléments avec l’API Checkout Sessions, consultez https://docs.stripe.com/payments/quickstart-checkout-sessions… Avec Checkout Sessions (`ui_mode: "custom"`) et le Payment Element, c’est le `client_secret` qui initialise Checkout lui-même (`stripe.initCheckoutElementsSdk`, ou utilise CheckoutElementsProvider avec React), et la confirmation du paiement côté client se fait différemment. Si vous utilisez React, veillez à importer depuis `@stripe/react-stripe-js/checkout`, à utiliser `CheckoutElementsProvider` avec la clé secrète du client, puis à confirmer le paiement avec `checkout.confirm`. Si vous utilisez HTML, veillez à utiliser `checkout = stripe.initCheckoutElements({clientSecret: promise}) ; checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement() ; paymentElement.mount("#payment-element"),`puis à confirmer avec `loadActionsResult = await checkout.loadActions() ; actions = loadActionsResult.actions; error = await actions.confirm() ;`. Les agents de codage doivent installer la CLI Stripe (`npm i -g @stripe/cli`) et exécuter la commande `stripe sandbox create --help` pour configurer un environnement de test Stripe anonyme avec des clés d’API fonctionnelles. Aucune inscription requise. Créez un formulaire de paiement ou utilisez une page de paiement préconfigurée pour commencer à accepter les paiements en ligne. # Intégration des applications pour React Native ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png) Cette intégration combine toutes les étapes nécessaires au paiement (dont la collecte des informations de paiement et la confirmation du paiement) en une seule feuille qui s’affiche en haut de votre application. > #### Prise en charge de l’API Accounts v2 > > La feuille des moyens de paiement ne prend pas en charge les *comptes configurés par le client* (Account configurations represent role-based functionality that you can enable for accounts, such as merchant, customer, or recipient). Elle prend uniquement en charge les objets `Customer`. ## 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 Cette intégration exige des endpoints sur votre serveur 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. ## Activer les moyens de paiement Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods). Par défaut, Stripe active les cartes bancaires et les autres moyens de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page [Prise en charge des moyens de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre [page des tarifs](https://stripe.com/pricing/local-payment-methods) pour prendre connaissance des frais que nous appliquons. ## Ajouter un endpoint [Côté serveur] > #### Remarque > > Pour afficher PaymentSheet avant de créer un PaymentIntent, consultez notre article [Collecter les détails du paiement avant de créer un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Cette intégration utilise trois objets de l’API Stripe : 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) : pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise un objet PaymentIntent qui suit vos tentatives de débit et les changements d’état du paiement tout au long du processus. 2. (Optional) Un objet [Account côté client](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-applied_configurations) ou [Customer](https://docs.stripe.com/api/customers.md) : pour configurer un moyen de paiement en vue de paiements futurs, vous devez l’associer à un client. Créez un objet pour représenter votre client lorsqu’il ouvre un compte chez vous. Si votre client effectue un paiement en tant qu’invité, vous pouvez créer un objet `Account` ou `Customer` avant le paiement, puis l’associer ultérieurement à votre représentation interne du compte client. 3. (Optional) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) : l’objet qui représente votre client contient des informations sensibles qu’il n’est pas possible de récupérer directement depuis une application. Une `CustomerSession` accorde au SDK un accès temporaire à l’objet `Account` ou `Customer` et fournit des options de configuration supplémentaires. Consultez la liste complète des [options de configuration](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). > Si vous n’enregistrez jamais les cartes bancaires des clients et que vous n’autorisez pas vos clients récurrents à réutiliser les cartes enregistrées, vous pouvez exclure les objets `Account` ou `Customer`, ainsi que l’objet `CustomerSession` de votre intégration. Pour des raisons de sécurité, votre application ne peut pas créer ces objets. À la place, ajoutez sur votre serveur un endpoint qui : 1. Récupère l’objet `Account` ou `Customer` ou en crée un nouveau. 2. Crée une [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) pour l’objet `Account` ou `Customer` concerné. 3. Crée un `PaymentIntent` avec les valeurs [amount](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), [la currency](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency), et soit [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account), soit [customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 4. Renvoie la *clé secrète du client* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) du `PaymentIntent`, le `client_secret` de la `CustomerSession`, l’ID de l’objet `Account` ou `Customer` et votre [clé publique](https://dashboard.stripe.com/apikeys) pour votre application. Les moyens de paiement présentés à votre client lors du processus de paiement sont également inclus dans le PaymentIntent. Vous pouvez laisser Stripe extraire (depuis les paramètres de votre Dashboard) les moyens de paiement à présenter, ou les répertorier manuellement. Quelle que soit l’option que vous choisissez, sachez que la devise transmise dans le PaymentIntent filtre les moyens de paiement présentés au client. Par exemple, si vous transmettez `eur` dans le PaymentIntent et que vous avez activé OXXO dans votre Dashboard, votre client ne verra pas ce moyen de paiement étant donné qu’OXXO ne prend pas en charge les paiements en `eur`. À moins que votre intégration ne nécessite du code pour la présentation des moyens de paiement, Stripe vous recommande l’option automatisée. En effet, Stripe évalue la devise, les restrictions en matière de moyens de paiement ainsi que d’autres paramètres pour dresser la liste des moyens de paiement pris en charge. Ceux qui augmentent le taux de conversion et qui sont les plus pertinents pour la devise et le lieu de résidence du client sont priorisés. #### Gérer les moyens de paiement dans le Dashboard Vous pouvez gérer les moyens de paiement depuis le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le renvoi des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement. Le PaymentIntent est créé à l’aide des moyens de paiement configurés dans le Dashboard. Si vous ne souhaitez pas utiliser le Dashboard ou souhaitez spécifier des moyens de paiement manuellement, vous pouvez les répertorier à l’aide de l’attribut `payment_method_types`. #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "automatic_payment_methods[enabled]"=true \ ``` #### Répertorier manuellement les moyens de paiement #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "payment_method_types[]"="bancontact" \ -d "payment_method_types[]"="card" \ -d "payment_method_types[]"="ideal" \ -d "payment_method_types[]"="klarna" \ -d "payment_method_types[]"="sepa_debit" \ ``` > Chacun des moyens de paiement doit prendre en charge la devise transmise dans le PaymentIntent, et votre activité doit par ailleurs être basée dans l’un des pays pris en charge par chaque moyen de paiement. Consultez la page [Options d’intégration des moyens de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md) pour plus d’informations sur la prise en charge. ## Collecter les données de paiement [Côté client] Avant d’afficher le composant Element Payment pour mobile, vous devez, sur votre écran de paiement : - Présenter les produits commandés et le montant total des achats - Collecter les éventuelles informations de livraison requises - Inclure un bouton de règlement pour afficher l’interface utilisateur de Stripe Au cours du processus de paiement de votre application, effectuez une demande réseau auprès du endpoint du back-end que vous avez créé à l’étape précédente, puis appelez `initPaymentSheet` depuis le hook `useStripe`. #### Accounts v2 ```javascript export default function CheckoutScreen() { const { initPaymentSheet, presentPaymentSheet } = useStripe(); const [loading, setLoading] = useState(false); const fetchPaymentSheetParams = async () => { const response = await fetch(`${API_URL}/payment-sheet`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, }); const { paymentIntent, ephemeralKey, customer_account } = await response.json(); return { paymentIntent, ephemeralKey, customer_account, }; }; const initializePaymentSheet = async () => { const { paymentIntent, ephemeralKey, customer_account, } = await fetchPaymentSheetParams(); const { error } = await initPaymentSheet({ merchantDisplayName: "Example, Inc.", customerAccountId: customer_account, customerEphemeralKeySecret: ephemeralKey, paymentIntentClientSecret: paymentIntent, // Set `allowsDelayedPaymentMethods` to true if your business accepts payment // methods that complete payment after a delay, like SEPA Debit and Sofort. allowsDelayedPaymentMethods: true, defaultBillingDetails: { name: 'Jane Doe', } }); if (!error) { setLoading(true); } }; const openPaymentSheet = async () => { // see below }; useEffect(() => { initializePaymentSheet(); }, []); return (