# 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 composant Payment Element plutôt que Payment Intents pour la plupart des intégrations. Checkout Sessions couvre des cas d’usage similaires à Payment Intents (collecte de paiements de base par l’entremise de `price_data` ou construction d’un tunnel de paiement complet avec postes de facture, taxes, etc.). Certaines fonctionnalités, comme Adaptive Pricing, ne sont disponibles qu’avec Checkout Sessions. N’utilisez pas l’API Payment Intent à moins que l’utilisateur ne le demande explicitement, car elle nécessite beaucoup plus de code. En savoir plus sur Elements avec l’API Checkout Sessions : https://docs.stripe.com/payments/quickstart-checkout-sessions. Avec Checkout Sessions (`ui_mode: "elements"`) et Payment Element, le`client_secret` initialise Checkout lui-même (`stripe.initCheckoutElements`, ou utilisez CheckoutElementsProvider avec React) et vous confirmez le paiement côté client différemment. Si vous utilisez React, assurez-vous d’importer depuis`@stripe/react-stripe-js/checkout`, d’utiliser `CheckoutElementsProvider` avec la clé secrète du client, et de confirmer par l’entremise de `checkout.confirm`. Si vous utilisez du HTML, assurez-vous d’utiliser `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` et de confirmer avec `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`. Les agents de codage doivent installer l’interface de ligne de commande Stripe (`npm i -g @stripe/cli`) et exécuter la commande `stripe sandbox create --help` pour créer un bac à sable Stripe anonyme avec des clés API fonctionnelles. Aucune inscription de compte n’est 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 dans l'application pour React Native ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png) Cette intégration réunit toutes les étapes requises pour effectuer un paiement, y compris la collecte des données de paiement et la confirmation du paiement, dans une seule et même feuille qui s’affiche par-dessus votre application. > #### Prise en charge de l’API Accounts v2 > > Payment Sheet 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 ne prend en charge que 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 Pour cette intégration, votre serveur doit être doté de points de terminaison qui communiquent avec l’API Stripe. Utilisez les bibliothèques officielles pour accéder à l’API Stripe à partir de votre serveur : #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Côté client La [trousse SDK de React Native](https://github.com/stripe/stripe-react-native) est un logiciel libre très bien documenté. À l’interne, elle utilise les trousses SDK pour [iOS natif](https://github.com/stripe/stripe-ios) et pour [Android](https://github.com/stripe/stripe-android). Pour installer la trousse SDK de React Native, exécutez l’une des commandes suivantes dans le répertoire de votre projet (qui dépend du gestionnaire de progiciel que vous utilisez) : #### laine ```bash yarn add @stripe/stripe-react-native ``` #### npm ```bash npm install @stripe/stripe-react-native ``` Ensuite, installez les autres dépendances nécessaires : - Pour iOS, accédez au répertoire ** ios ** et exécutez la fonctionnalité `pod install` pour vous assurer d’installer également les dépendances natives requises. - Pour Android, il n’y a plus de dépendances à installer. > Nous vous recommandons de suivre le [guide officiel de TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) pour ajouter la prise en charge de TypeScript. ### Initialisation de Stripe Pour initialiser Stripe dans votre application React Native, enveloppez votre écran de paiement avec le composant `StripeProvider` ou utilisez la méthode d’initialisation `initStripe`. Seule la [clé publiable](https://docs.stripe.com/keys.md#obtain-api-keys) de l’API est requise dans l’objet `publishableKey`. L’exemple suivant montre comment initialiser Stripe à l’aide du composant `StripeProvider`. ```jsx import { useState, useEffect } from 'react'; import { StripeProvider } from '@stripe/stripe-react-native'; function App() { const [publishableKey, setPublishableKey] = useState(''); const fetchPublishableKey = async () => { const key = await fetchKey(); // fetch key from your server here setPublishableKey(key); }; useEffect(() => { fetchPublishableKey(); }, []); return ( {/* 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 [de production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application. ## Activer les moyens de paiement Accédez aux [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 et les autres modes de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres modes de paiement pertinents pour votre entreprise et vos clients. Consultez la page [Prise en charge des modes 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 modes de paiement, et notre [page de tarification](https://stripe.com/pricing/local-payment-methods) pour prendre connaissance des frais que nous appliquons. ## Ajouter un point de terminaison [Côté serveur] > #### Remarque > > Pour afficher PaymentSheet avant de créer un PaymentIntent, consultez la [Collecter les détails du paiement avant de créer un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Cette intégration utilise trois objets de l’API Stripe : 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) : Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise cet objet qui suit les tentatives de débit et les changements d’état du paiement tout au long du processus. 2. (Facultatif) Un objet [Compte configuré par le client](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-applied_configurations) ou un objet [Customer](https://docs.stripe.com/api/customers.md) : pour configurer un mode de paiement en vue de futurs paiements, vous devez l’associer à un client. Créez un objet représentant votre client lorsqu’il crée un compte auprès de votre entreprise. Si votre client effectue un paiement en tant qu’invité, vous pouvez créer un objet `Account` ou `Customer` avant le paiement et l’associer ultérieurement à votre propre représentation interne du compte du client. 3. (Facultatif) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) : les informations relatives à l’objet représentant votre client sont sensibles et ne peuvent pas être récupérées directement depuis une application. Une `CustomerSession` accorde à la trousse SDK un accès temporaire et limité au `Account` ou au `Customer`et offre 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 de cartes pour les clients et n’autorisez pas les clients existants à réutiliser les cartes enregistrées, vous pouvez omettre de votre intégration l’objet `Account` ou `Customer` et l’objet `CustomerSession`. Pour des raisons de sécurité, votre application ne peut pas créer ces objets. Ajoutez plutôt un point de terminaison sur votre serveur qui : 1. Récupère l’objet `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`. 3. Crée un `PaymentIntent` avec le [montant](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), [devises](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency), et soit le [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account), soit le [client](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 4. Renvoie la clé secrète du client du `PaymentIntent`’s ** (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)), la `client_secret` du `CustomerSession`, l’ID du `Account` ou `Customer`, et votre [clé publiable](https://dashboard.stripe.com/apikeys) à votre application. Les modes de paiement présentés aux clients lors du processus de paiement sont également compris dans le PaymentIntent. Les modes de paiement peuvent être récupérés par Stripe à partir de vos paramètres Dashboard, ou vous pouvez les ajouter manuellement. Quelle que soit l’option que vous choisissez, sachez que la devise transmise dans le PaymentIntent filtre les modes de paiement présentés au client. Par exemple, si vous transmettez `eur` dans le PaymentIntent et que vous avez activé OXXO dans le Dashboard, OXXO ne sera pas présenté au client, car OXXO ne prend pas en charge les paiements `eur`. À moins que votre intégration ne nécessite du code pour la présentation des modes de paiement, Stripe vous recommande l’option automatisée. En effet, Stripe évalue la devise, les restrictions sur les modes de paiement et d’autres paramètres pour déterminer la liste des modes de paiement pris en charge. Les modes de paiement qui augmentent le taux de conversion et qui sont les plus pertinents pour la devise et le lieu de résidence du client sont priorisés. #### Gérer les moyens de paiement à partir du Dashboard Vous pouvez gérer les moyens de paiement à partir du [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le retour des moyens de paiement admissibles en fonction de facteurs tels que le montant, la devise et le flux de paiement de la transaction. Le PaymentIntent est créé à l’aide des moyens de paiement configurés dans le Dashboard. Si vous ne souhaitez pas utiliser le Dashboard ou si vous souhaitez préciser des moyens de paiement manuellement, vous pouvez les répertorier à l’aide de l’attribut `payment_method_types`. #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -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éférencement manuel des moyens de paiement #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -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 modes de paiement doit prendre en charge la devise transmise dans le PaymentIntent, et votre entreprise doit par ailleurs être établie dans l’un des pays pris en charge par chaque mode de paiement. Consultez la section [Options d’intégration des modes de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md) pour en savoir plus sur les modes de paiement pris en charge. ## Collecter les informations de paiement [Côté client] Avant d’afficher le Payment Element mobile, votre page de paiement doit : - Présenter les produits commandés et le montant total des achats - Collecter les éventuelles informations de livraison requises - Inclure un bouton de paiement pour afficher l’interface utilisateur de Stripe Au cours du processus de paiement de votre application, effectuez une demande réseau auprès du point de terminaison de l’application dorsale que vous avez créé à l’étape précédente, puis appelez `initPaymentSheet` à partir du hook `useStripe`. #### 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 (