# 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`**&nbsp;: 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-name> <--skill other-skills>` pour installer des compétences individuelles.

**Si les `compétences npx` ne sont pas disponibles**&nbsp;: 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/<filepath>`.

Pour cet article, nous vous recommandons d’utiliser les compétences suivantes&nbsp;: `stripe-best-practices`

Instructions pour les LLM&nbsp;: 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.

# API Payment Intents


Créez un formulaire de paiement personnalisé en utilisant les composants [Stripe&nbsp;Elements](https://docs.stripe.com/payments/elements.md) et [l’API Payment&nbsp;Intents](https://docs.stripe.com/api/payment_intents.md). Découvrez comment cette intégration se [compare aux autres types](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability) d’intégration de Stripe.

L’API Payment Intents est une API de bas niveau que vous pouvez utiliser pour construire votre propre flux de paiement, mais elle nécessite beaucoup plus de code et une maintenance continue. Nous recommandons d’utiliser [Payment Element avec Checkout Sessions](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) pour la plupart des intégrations, car il couvre des flux de paiement similaires à ceux de Payment Intents. En savoir plus sur les cas où il convient d’[utiliser Checkout Sessions plutôt que Payment Intents](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md).

Le code côté client et côté serveur crée un formulaire de paiement qui accepte différents moyens de paiement.

#### Effort d'intégration
Complexity: 4/5
#### Type d'intégration

Combinez des composants d’interface utilisateur dans un tunnel de paiement personnalisé

#### Personnalisation de l'interface utilisateur

Personnalisation au niveau CSS avec l’[API Appearance](https://docs.stripe.com/elements/appearance-api.md)

> #### Vous souhaitez utiliser Stripe Tax, les réductions, les frais de livraison ou la conversion de devises&nbsp;?
> 
> Stripe dispose d’une intégration du composant Payment Element qui gère pour vous les taxes, les réductions, les frais de livraison et la conversion des devises. Pour en savoir plus, consultez la section[ créer une page de paiement ](https://docs.stripe.com/payments/quickstart-checkout-sessions.md).

## Configurer Stripe [Côté serveur]

Tout d’abord, [créez un compte Stripe](https://dashboard.stripe.com/register) ou [connectez-vous](https://dashboard.stripe.com/login).

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.

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application&nbsp;:

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Créer un PaymentIntent [Côté serveur]

> Si vous souhaitez afficher le Payment&nbsp;Element sans créer au préalable de PaymentIntent, consultez la page [Collecter les informations de paiement avant de créer un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment).

L’objet [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) représente votre intention d’encaisser le paiement d’un client et suit les tentatives de débit et changements d’état tout au long du processus de paiement.
Vue d'ensemble de l'intégration des paiements illustrée par ce document. (See full diagram at https://docs.stripe.com/payments/accept-a-payment)
### Créer le PaymentIntent

Créez un PaymentIntent sur votre serveur avec les attribut [amount](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount) et [currency](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency) (devise). Dans la dernière version de l’API, le paramètre `automatic_payment_methods` est facultatif, car Stripe active déjà cette fonctionnalité par défaut. 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.

Stripe utilise vos [paramètres de moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) pour afficher les moyens de paiement que vous avez activés. Pour voir comment vos moyens de paiement apparaissent aux clients, saisissez un ID de transaction ou définissez un montant de commande et une devise dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods/review). Pour remplacer ces paramètres, listez manuellement les moyens de paiement que vous souhaitez activer à l’aide de l’attribut [payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types).

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]=true"
```

> Définissez toujours le montant à débiter côté serveur car il s’agit d’un environnement sécurisé contrairement à l’environnement client. De cette façon un client malveillant ne pourra pas fixer son propre tarif.

### 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&nbsp;:

#### 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&nbsp;:

```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&nbsp;:

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <div id="payment-element">
    <!-- placeholder for Elements -->
  </div>
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the PaymentIntent
  erb :checkout
end
```

## Collecter les données de paiement [Côté client]

Collectez les informations de paiement du client avec le [Payment&nbsp;Element](https://docs.stripe.com/payments/payment-element.md). Le Payment&nbsp;Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations pour de nombreux moyens de paiement.

Le Payment&nbsp;Element contient un iframe qui envoie les informations de paiement à Stripe de manière sécurisée via une connexion HTTPS. Évitez de placer le Payment&nbsp;Element dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement.

Si vous choisissez d’utiliser un iframe et que vous souhaitez accepter Apple Pay ou Google Pay, l’attribut [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) de l’iframe doit être défini sur égal à `"payment *"`.

Pour que votre intégration fonctionne, l’adresse de la page de paiement doit commencer par `https://` et non par `http://`. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS, mais n’oubliez pas de l’[activer](https://docs.stripe.com/security/guide.md#tls) lorsque vous souhaitez commencer à accepter des paiements réels.

#### HTML + JS

### Configurer Stripe.js

Le composant Element Payment est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js à votre page de paiement en l’ajoutant 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 une offre groupée ni en héberger de copie.

```html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

Créez une instance de Stripe avec le code JavaScript suivant sur votre page de paiement&nbsp;:

```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('<<YOUR_PUBLISHABLE_KEY>>');
```

### Ajouter le Payment Element à votre page de paiement

Le composant Element Payment doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneur) vide doté d’un ID unique dans votre formulaire de paiement&nbsp;:

```html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>
```

Lors du chargement du formulaire précédent, créez une instance du composant Payment&nbsp;Element et intégrez-la au nœud DOM conteneur. Lorsque vous créez l’instance [Elements](https://docs.stripe.com/js/elements_object/create), transmettez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) définie à l’étape précédente dans les `options`&nbsp;:

Utilisez la clé secrète du client avec prudence, car elle peut servir à finaliser le paiement. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne la dévoilez à personne d’autre que votre client.

```javascript
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous stepconst elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

```

#### React

### Configurer Stripe.js

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&nbsp;:

```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```

### Ajouter le fournisseur Elements à votre page de paiement et le configurer

Pour utiliser le composant Payment 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é publique, puis transmettez au fournisseur `Elements` l’élément `Promise` renvoyé. Transmettez également la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) de l’étape précédente en tant que `options`, toujours 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('<<YOUR_PUBLISHABLE_KEY>>');

function App() {
  const options = {
    // passing the client secret obtained in step 3
    clientSecret: '{{CLIENT_SECRET}}',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

### Ajouter le composant Element Payment

Utilisez le composant `PaymentElement` pour créer votre formulaire&nbsp;:

```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  return (
    <form><PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;
```

Stripe&nbsp;Elements est un ensemble de composants d’interface utilisateur modulables. Pour personnaliser davantage votre formulaire ou collecter d’autres informations client, consultez la [documentation relative à Elements](https://docs.stripe.com/payments/elements.md).

Le composant Payment Element affiche un formulaire dynamique qui permet à votre client de choisir un moyen de paiement. Pour chaque moyen de paiement, le formulaire demande automatiquement au client de renseigner toutes les informations de paiement nécessaires.

### Personnaliser l’apparence

Personnalisez le Payment&nbsp;Element pour qu’il corresponde à l’apparence de votre site en ajoutant l’[objet Appearance](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) dans `options` lors de la création du fournisseur `Elements`.

### Collecter les adresses

Par défaut, le Payment Element ne collecte que les informations nécessaires à la facturation. Certaines opérations, telles que le [calcul des taxes](https://docs.stripe.com/api/tax/calculations/create.md) ou la saisie des informations de livraison, nécessitent l’adresse complète de votre client. Vous pouvez&nbsp;:

- Utilisez l’[Address Element](https://docs.stripe.com/elements/address-element.md) pour tirer parti des fonctionnalités de saisie automatique et de localisation et recueillir l’adresse complète de votre client. Cela permet de garantir un calcul des taxes le plus précis possible.
- Recueillez l’adresse à l’aide de votre propre formulaire personnalisé.

### Demander un token de marchand Apple Pay

Si vous avez configuré votre intégration pour [accepter les paiements Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout), nous vous recommandons de configurer l’interface Apple Pay afin de renvoyer un token de marchand pour activer les transactions initiées par le marchand (MIT). [Demandez le type de token de marchand approprié](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) dans le composant Payment Element.

## Optional: Enregistrer et récupérer les moyens de paiement des clients

Vous pouvez configurer le composant Payment Element de façon à enregistrer les moyens de paiement de vos clients en vue d’une utilisation ultérieure. Cette section vous montre comment intégrer la [fonctionnalité d’enregistrement des moyens de paiement](https://docs.stripe.com/payments/save-customer-payment-methods.md), qui permet à Payment Element de&nbsp;:

- De demander aux acheteurs s’ils consentent à ce que leur moyen de paiement soit enregistré
- Enregistrer les moyens de paiement lorsque les clients y consentent
- Afficher les moyens de paiement enregistrés des acheteurs lors de leurs futurs achats
- [Mise à jour automatique des cartes perdues ou expirées](https://docs.stripe.com/payments/cards/overview.md#automatic-card-updates) lorsque les clients les remplacent
![Le composant Payment Element et une case à cocher pour le moyen de paiement enregistré](https://b.stripecdn.com/docs-statics-srv/assets/spm-save.fe0b24afd0f0a06e0cf4eecb0ce2403a.png)

Enregistrez les moyens de paiement.
![Le composant Payment Element avec un moyen de paiement enregistré sélectionné](https://b.stripecdn.com/docs-statics-srv/assets/spm-saved.5dba5a8a190a9a0e9f1a99271bed3f4b.png)

Réutilisez un moyen de paiement précédemment enregistré.

### Activer l’enregistrement du moyen de paiement dans le composant Payment Element

Lorsque vous créez un [PaymentIntent](https://docs.stripe.com/api/payment_intents/.md) sur votre serveur, créez également une [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) en fournissant l’ID du client (en utilisant soit `customer` pour un objet `Customer`, soit `customer_account` pour un objet `Account` configuré pour le client) et en activant le composant [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element) pour votre session. Configurez les [fonctionnalités](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) des moyens de paiement enregistrés que vous souhaitez activer. Par exemple, l’activation de [payment_method_save](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_save) affiche une case à cocher permettant aux clients d’enregistrer leurs informations de paiement pour une utilisation ultérieure.

Vous pouvez définir `setup_future_usage` sur un PaymentIntent ou une Checkout Session pour déroger au comportement par défaut d’enregistrement des moyens de paiement. Cela permet d’enregistrer automatiquement le moyen de paiement pour une utilisation ultérieure, même si le client ne choisit pas explicitement de l’enregistrer. Si vous prévoyez de définir `setup_future_usage`, ne définissez pas `payment_method_save_usage` dans la même transaction de paiement, car cela provoque une erreur d’intégration.

> #### Utiliser l’API Accounts v2 pour représenter les clients
> 
> L’API Accounts&nbsp;v2 est généralement disponible pour les utilisateurs de Connect et en aperçu public pour les autres utilisateurs de Stripe. Si vous avez accès à l’aperçu Accounts&nbsp;v2, vous devez spécifier une [version d’aperçu](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code.
> 
> Pour demander l’accès à l’aperçu Accounts&nbsp;v2, 
> 
> Dans la plupart des cas d’usage, nous vous recommandons de [modéliser vos clients en tant qu’objets Account configurés par le client](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md), plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md).

#### Accounts&nbsp;v2

#### 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.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent-and-customer-session' do
  intent = client.v1.payment_intents.create({
    amount: 1099,
    currency: 'usd',
    automatic_payment_methods: {enabled: true},
    customer_account: {{CUSTOMER_ACCOUNT_ID}},
  })
  customer_session = client.v1.customer_sessions.create({
    customer_account: {{CUSTOMER_ACCOUNT_ID}},
    components: {
      payment_element: {
          enabled: true,
          features: {
            payment_method_redisplay: 'enabled',
            payment_method_save: 'enabled',
            payment_method_save_usage: 'off_session',
            payment_method_remove: 'enabled',
          },
        },
    },
  })
  {
    client_secret: intent.client_secret,
    customer_session_client_secret: customer_session.client_secret
  }.to_json
end
```

#### Customers&nbsp;v1

#### 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.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent-and-customer-session' do
  intent = client.v1.payment_intents.create({
    amount: 1099,
    currency: 'usd',
    # In the latest version of the API, specifying the `automatic_payment_methods` parameter
    # is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
    customer: {{CUSTOMER_ID}},
  })
  customer_session = client.v1.customer_sessions.create({
    customer: {{CUSTOMER_ID}},
    components: {
      payment_element: {
          enabled: true,
          features: {
            payment_method_redisplay: 'enabled',
            payment_method_save: 'enabled',
            payment_method_save_usage: 'off_session',
            payment_method_remove: 'enabled',
          },
        },
    },
  })
  {
    client_secret: intent.client_secret,
    customer_session_client_secret: customer_session.client_secret
  }.to_json
end
```

Votre instance Elements utilise la *clé secrète du client* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) de la session Client pour accéder aux moyens de paiement enregistrés de ce client. [Gérez les erreurs](https://docs.stripe.com/error-handling.md) correctement lorsque vous créez la session Client. Si une erreur se produit, vous n’avez pas besoin de fournir la clé secrète du client de la session Client à l’instance Elements, car elle est facultative.

Créez l’instance Elements à l’aide des clés secrètes du client pour le PaymentIntent et la session Client. Ensuite, utilisez cette instance d’Elements pour créer un Payment Element.

```javascript
// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-intent-and-customer-session", {
  method: "POST"
});

const {
  customer_session_client_secret: customerSessionClientSecret
} = await res.json();

const elementsOptions = {
  clientSecret: '{{CLIENT_SECRET}}',customerSessionClientSecret,
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret
// and CustomerSession's client secret obtained in a previous step
const elements = stripe.elements(elementsOptions);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```

Lors de la confirmation du PaymentIntent, Stripe.js contrôle automatiquement le paramètre [setup_future_usage](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-setup_future_usage) sur le PaymentIntent et le paramètre [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) sur le PaymentMethod, selon que le client a coché ou non la case permettant d’enregistrer ses informations de paiement.

### Exiger la collecte du CVC

Au besoin, spécifiez `require_cvc_recollection` [lors de la création du PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-card-require_cvc_recollection) pour appliquer la collecte du CVC lors des paiements par carte.

### Détecter la sélection d’un moyen de paiement enregistré

Pour contrôler le contenu dynamique qui s’affiche lors de la sélection d’un moyen de paiement enregistré, écoutez l’événement `change` du composant Element Payment, qui contient le moyen de paiement sélectionné.

```javascript
paymentElement.on('change', function(event) {
  if (event.value.payment_method) {
    // Control dynamic content if a saved payment method is selected
  }
})
```

## Optional: Link in your checkout page [Côté client]

Permettez à vos clients de payer plus rapidement en utilisant [Link](https://docs.stripe.com/payments/link.md) dans le [composant Element Payment](https://docs.stripe.com/payments/payment-element.md). Vous pouvez remplir automatiquement les informations pour tout client connecté utilisant déjà Link, même s’il a initialement enregistré ses informations avec Link auprès d’une autre entreprise. L’intégration par défaut du composant Element Payment inclut une invite Link dans le formulaire de carte bancaire. Pour gérer Link dans le composant Element Payment, accédez à vos [paramètres de moyens de paiement](https://dashboard.stripe.com/settings/payment_methods).
![S'identifier ou s'inscrire auprès de Link directement dans le composant Payment Element au moment du paiement](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png)

Collecter l’adresse e-mail du client pour l’authentification ou l’inscription Link

### Options d’intégration

L’intégration de Link au composant Element Payment peut se faire de deux façons. Parmi celles-ci, Stripe recommande de transmettre l’adresse e-mail d’un client au composant Element Payment, le cas échéant. N’oubliez pas de tenir compte du fonctionnement de votre tunnel de paiement lorsque vous choisissez l’une des options suivantes&nbsp;:

| Option d’intégration                                                      | Tunnel de paiement                                                                                                                                                                                                               | Description                                                                                                                                                                                                                                                                                              |
| ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Transmettre l’adresse e-mail d’un client au Payment Element (Recommended) | - Votre client saisit son adresse e-mail avant d’accéder à la page de paiement (lors d’une précédente étape de création de compte, par exemple).
  - Vous préférez utiliser votre propre champ de saisie de l’adresse e-mail     | Transmettez par voie programmatique l’adresse e-mail d’un client au composant Element Payment. Dans ce scénario, le client s’identifie directement auprès de Link dans le formulaire de paiement au lieu d’utiliser un composant d’interface utilisateur distinct.                                       |
| Recueillir l’adresse e-mail d’un client dans le Payment Element           | - Vos clients peuvent choisir de saisir leur adresse e-mail et de s’identifier ou de s’inscrire auprès de Link directement dans le composant Element Payment lors du paiement.
  - Aucune modification du code n’est nécessaire. | Si un client ne s’est pas inscrit auprès de Link et qu’il choisit un moyen de paiement pris en charge dans le composant Element Payment, il est invité à enregistrer ses informations à l’aide de Link. Pour ceux qui sont déjà inscrits, Link renseigne automatiquement leurs informations de paiement. |

Utilisez le paramètre [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) pour transmettre l’adresse e-mail d’un client au Payment Element.

```javascript
const paymentElement = elements.create('payment', {
  defaultValues: {
    billingDetails: {
      email: 'foo@bar.com',
    }
  },
  // Other options
});
```

Pour plus d’informations, lisez comment [créer une page de paiement personnalisée qui inclut Link](https://docs.stripe.com/payments/link/add-link-elements-integration.md).

## Optional: Récupérer des mises à jour à partir du serveur [Côté client]

Pour modifier des attributs du Paymentintent tels que le [montant](https://docs.stripe.com/api/payment_intents/update.md#update_payment_intent-amount) (par exemple, les codes de réduction ou les frais d’expédition) après l’affichage du composant Payment&nbsp;Element, vous pouvez [modifier le PaymentIntent](https://docs.stripe.com/api/payment_intents/update.md) sur votre serveur, puis appeler [elements.fetchUpdates](https://docs.stripe.com/js/elements_object/fetch_updates) pour faire apparaître le nouveau montant dans le composant Payment&nbsp;Element. Cet exemple vous montre comment créer un endpoint de serveur capable de mettre à jour le montant du PaymentIntent&nbsp;:

#### 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.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')
get '/update' do
  intent = client.v1.payment_intents.update(
    '{{PAYMENT_INTENT_ID}}',
    {amount: 1499},
  )
  {status: intent.status}.to_json
end
```

Cet exemple vous montre comment mettre à jour l’interface utilisateur pour refléter ces modifications côté client&nbsp;:

```javascript
(async () => {
  const response = await fetch('/update');
  if (response.status === 'requires_payment_method') {
    const {error} = await elements.fetchUpdates();
  }
})();
```

## Soumettre le paiement à Stripe [Côté client]

Utilisez [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) pour effectuer le paiement à l’aide des informations du composant Payment&nbsp;Element. Ajoutez un paramètre [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) à cette fonction pour indiquer la page vers laquelle Stripe doit rediriger l’utilisateur à l’issue du paiement. Votre utilisateur peut être redirigé en premier lieu vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers la page spécifiée par le paramètre `return_url`. L’utilisateur sera immédiatement redirigé vers la page `return_url` après un paiement réussi par carte.

Si vous ne souhaitez pas effectuer de redirection à la fin des paiements par carte, vous pouvez assigner au paramètre [redirect](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) la valeur `if_required`. De cette manière, seuls les clients qui choisissent un moyen de paiement avec redirection seront redirigés.

#### HTML + JS

```javascript
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

#### React

Pour appeler [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) 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).

```jsx
import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState(null);

  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 {error} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });


    if (error) {
      // This point will only be reached if there is an immediate error when
      // confirming the payment. Show error to your customer (for example, payment
      // details incomplete)
      setErrorMessage(error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe}>Submit</button>
      {/* Show error message to your customers */}
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
};

export default CheckoutForm;
```

Veillez à ce que le paramètre `return_url` corresponde à une page de votre site web qui indique l’état du paiement. Lorsque Stripe redirige le client vers la page `return_url`, nous fournissons les paramètres de requête d’URL suivants&nbsp;:

| 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`. |

> Si vous disposez d’outils qui assurent le suivi de la session navigateur du client, vous devrez peut-être ajouter le domaine `stripe.com` à la liste d’exclusion des sites référents. Les redirections font que certains outils créent de nouvelles sessions, ce qui empêche le suivi de la session dans son ensemble.

Utilisez l’un des paramètres de requête pour récupérer le PaymentIntent. Consultez l’[état du PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md) pour déterminer les informations à présenter à vos clients. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous ajoutez l’URL `return_url`&nbsp;; ils seront conservés tout au long du processus de redirection.

#### HTML + JS

```javascript

// Initialize Stripe.js using your publishable key
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'payment_intent_client_secret'
);

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});
```

#### React

```jsx
import React, {useState, useEffect} from 'react';
import {useStripe} from '@stripe/react-stripe-js';

const PaymentStatus = () => {
  const stripe = useStripe();
  const [message, setMessage] = useState(null);

  useEffect(() => {
    if (!stripe) {
      return;
    }

    // Retrieve the "payment_intent_client_secret" query parameter appended to
    // your return_url by Stripe.js
    const clientSecret = new URLSearchParams(window.location.search).get(
      'payment_intent_client_secret'
    );

    // Retrieve the PaymentIntent
    stripe
      .retrievePaymentIntent(clientSecret)
      .then(({paymentIntent}) => {
        // Inspect the PaymentIntent `status` to indicate the status of the payment
        // to your customer.
        //
        // Some payment methods will [immediately succeed or fail][0] upon
        // confirmation, while others will first enter a `processing` state.
        //
        // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
        switch (paymentIntent.status) {
          case 'succeeded':
            setMessage('Success! Payment received.');
            break;

          case 'processing':
            setMessage("Payment processing. We'll update you when payment is received.");
            break;

          case 'requires_payment_method':
            // Redirect your user back to your payment page to attempt collecting
            // payment again
            setMessage('Payment failed. Please try another payment method.');
            break;

          default:
            setMessage('Something went wrong.');
            break;
        }
      });
  }, [stripe]);


  return message;
};

export default PaymentStatus;
```

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

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

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

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

## Tester votre intégration

Pour tester votre intégration de paiement personnalisée&nbsp;:

1. Créez un Paiement Intent et récupérez la clé secrète du client.
2. Renseignez les informations d’un moyen de paiement du tableau suivant.
   - Saisissez une date d’expiration postérieure à la date du jour.
   - Saisissez un code CVC à 3&nbsp;chiffres.
   - Saisissez un code postal de facturation.
3. Envoyez le paiement à Stripe. Vous êtes redirigé(e) vers votre `return_url`.
4. Accédez au Dashboard et recherchez le paiement sur la page [Transactions](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Si votre paiement a abouti, il apparaîtra dans cette liste.
5. Cliquez sur votre paiement afin d’afficher plus d’informations, par exemple les informations de facturation et la liste des articles achetés. Vous pouvez utiliser ces informations pour traiter votre commande.

Découvrez comment [tester votre intégration](https://docs.stripe.com/testing.md).

#### Cartes bancaires

| Numéro de carte     | Scénario                                                                                                                                                                                                                                                                                                          | Méthode de test                                                                                                                                                   |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | Le paiement par carte bancaire aboutit et ne nécessite pas d’authentification.                                                                                                                                                                                                                                    | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix. |
| 4000002500003155    | Le paiement par carte bancaire requiert une *authentification* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix. |
| 4000000000009995    | La carte est refusée avec un code de refus de type `insufficient_funds`.                                                                                                                                                                                                                                          | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix. |
| 6205500000000000004 | La carte UnionPay a un numéro d’une longueur variable, allant de 13 à 19&nbsp;chiffres.                                                                                                                                                                                                                           | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix. |

#### Portefeuilles

| Moyen de paiement | Scénario                                                                                                                                                                   | Méthode de test                                                                                                                                                                                   |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Alipay            | Le montant dû est réglé via un moyen de paiement avec redirection et à [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Choisissez un moyen de paiement avec redirection, renseignez les informations demandées, puis confirmez le paiement. Enfin, cliquez sur **Finaliser le paiement test** sur la page qui s’affiche. |

#### Virements avec redirection bancaire

| Moyen de paiement                    | Scénario                                                                                                                                                                                                               | Méthode de test                                                                                                                                                                                                             |
| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Prélèvement automatique BECS         | Le montant dû est réglé par prélèvement automatique BECS.                                                                                                                                                              | Remplissez le formulaire à l’aide du numéro de compte `900123456` et du BSB `000000`.La confirmation de la demande de PaymentIntent passe d’abord à l’état `processing`, puis à l’état `succeeded` trois minutes plus tard. |
| Prélèvement automatique BECS         | Le paiement de votre client échoue avec un code d’erreur `account_closed`.                                                                                                                                             | Remplissez le formulaire à l’aide du numéro de compte `111111113` et du BSB `000000`.                                                                                                                                       |
| Bancontact, EPS, iDEAL et Przelewy24 | Votre client ne parvient pas à s’authentifier sur la page de redirection en utilisant un moyen de paiement avec redirection et à notification immédiate.                                                               | Choisissez un moyen de paiement avec redirection, renseignez les informations demandées, puis confirmez le paiement. Enfin, cliquez sur **Faire échouer le paiement test** sur la page qui s’affiche.                       |
| Pay by Bank                          | Le montant dû est réglé via un moyen de paiement avec redirection et à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification).                                              | Choisissez le moyen de paiement, renseignez les informations demandées, puis confirmez le paiement. Enfin, cliquez sur **Finaliser le paiement test** sur la page qui s’affiche.                                            |
| Pay by Bank                          | Votre client ne parvient pas à s’authentifier sur la page de redirection en utilisant un moyen de paiement avec redirection et à notification différée.                                                                | Choisissez le moyen de paiement, renseignez les informations demandées, puis confirmez le paiement. Enfin, cliquez sur **Faire échouer le paiement test** sur la page qui s’affiche.                                        |
| BLIK                                 | Les paiements BLIK échouent de diverses manières&nbsp;: échecs immédiats (par exemple, code expiré ou non valide), erreurs différées (refus de la banque) ou expirations du délai (le client n’a pas répondu à temps). | Utiliser des modèles d’e-mail pour [simuler les différents échecs.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                                            |

#### Prélèvements bancaires

| Moyen de paiement            | Scénario                                                                                                 | Méthode de test                                                                                                                                                                                  |
| ---------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Prélèvement automatique SEPA | Le montant dû est réglé par prélèvement automatique SEPA.                                                | Remplissez le formulaire à l’aide du numéro de compte `AT321904300235473204`. Le PaymentIntent confirmé passe d’abord à l’état processing, puis à l’état succeeded trois&nbsp;minutes plus tard. |
| Prélèvement automatique SEPA | L’intention de paiement de votre client passe de l’état `processing` à l’état `requires_payment_method`. | Remplissez le formulaire à l’aide du numéro de compte `AT861904300235473202`.                                                                                                                    |

#### Coupons

| Moyen de paiement | Scénario                                           | Méthode de test                                                                                                           |
| ----------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| Boleto, OXXO      | Le montant dû est réglé par coupon Boleto ou OXXO. | Sélectionnez Boleto ou OXXO comme moyen de paiement, puis envoyez le paiement. Fermez la boîte de dialogue qui s’affiche. |

Consultez la section consacrée aux [tests](https://docs.stripe.com/testing.md) pour obtenir des informations supplémentaires sur la manière de tester votre intégration.

## Optional: Ajouter d'autres moyens de paiement

Payment&nbsp;Element [prend en charge de nombreux moyens de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md#choose-how-to-add-payment-methods) par défaut. Vous devez prendre des mesures supplémentaires pour activer et afficher certains moyens de paiement.

### Affirm

Pour utiliser Affirm, vous devez d’abord l’activer dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Lorsque vous créez un PaymentIntent avec le moyen de paiement Affirm, vous devez inclure une [adresse de livraison](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping). Cet exemple suggère de transmettre les informations de livraison côté client après que votre client a [sélectionné son moyen de paiement](https://docs.stripe.com/payments/accept-a-payment.md#web-create-intent). En savoir plus sur l’utilisation d’[Affirm](https://docs.stripe.com/payments/affirm.md) avec Stripe.

#### HTML + JS

```javascript
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://my-site.com/order/123/complete',shipping: {
        name: 'Jenny Rosen',
        address: {
          line1: '1 Street',
          city: 'Seattle',
          state: 'WA',
          postal_code: '95123',
          country: 'US'
        }
      },

    }
  });

  if (error) {
    // This point is reached if there's an immediate error when
    // confirming the payment. Show error to your customer (for example,
    // payment details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

#### React

```jsx

import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState(null);

  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 {error} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://my-site.com/order/123/complete',shipping: {
          name: 'Jenny Rosen',
          address: {
            line1: '1 Street',
            city: 'Seattle',
            state: 'WA',
            postal_code: '95123',
            country: 'US'
          }
        },

      }
    });


    if (error) {
      // This point will only be reached if there is an immediate error when
      // confirming the payment. Show error to your customer (for example,
      // payment details incomplete)
      setErrorMessage(error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe}>Submit</button>
      {/* Show error message to your customers */}
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  )
};

export default CheckoutForm;
```

#### Tester Affirm

Découvrez comment tester différents scénarios à l’aide du tableau suivant&nbsp;:

| Scénario                                                                         | Comment tester                                                                                              |
| -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| Le paiement de votre client avec Affirm aboutit.                                 | Remplissez le formulaire (en prenant soin d’indiquer une adresse de livraison) et authentifiez le paiement. |
| Votre client ne parvient pas à s’authentifier sur la page de redirection Affirm. | Remplissez le formulaire et cliquez sur **Faire échouer le paiement test** sur la page de redirection.      |

### Afterpay (Clearpay)

Lorsque vous créez un PaymentIntent avec Afterpay comme moyen de paiement, vous devez inclure une [adresse de livraison](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping). En savoir plus sur l’utilisation d’[Afterpay](https://docs.stripe.com/payments/afterpay-clearpay.md) avec Stripe.

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. Dans la dernière version de l’API, spécifier le paramètre `automatic_payment_methods` est facultatif, car Stripe active ses fonctionnalités par défaut. Veillez à activer Afterpay / Clearpay dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods).

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]=true" \
  -d "shipping[name]=Jenny Rosen" \
  -d "shipping[address][line1]=1234 Main Street" \
  -d "shipping[address][city]=San Francisco" \
  -d "shipping[address][state]=CA" \
  -d "shipping[address][country]=US" \
  -d "shipping[address][postal_code]=94111"
```

#### Tester Afterpay (Clearpay)

Découvrez comment tester différents scénarios à l’aide du tableau suivant&nbsp;:

| Scénario                                                                           | Comment tester                                                                                              |
| ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| Le paiement de votre client avec Afterpay aboutit.                                 | Remplissez le formulaire (en prenant soin d’indiquer une adresse de livraison) et authentifiez le paiement. |
| Votre client ne parvient pas à s’authentifier sur la page de redirection Afterpay. | Remplissez le formulaire et cliquez sur **Faire échouer le paiement test** sur la page de redirection.      |

### Apple&nbsp;Pay et Google&nbsp;Pay

Lorsque vous [activez les paiements par carte](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#create-the-paymentintent), nous affichons Apple Pay et Google Pay pour les clients dont l’environnement répond aux [conditions d’affichage du wallet](https://docs.stripe.com/testing/wallets.md). Pour accepter des paiements via ces wallets, vous devez également&nbsp;:

- Activez-les dans les [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods). Apple Pay est activé par défaut.
- Fournissez votre application via HTTPS en développement et en production.
- [Enregistrez votre domaine](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).
- [Récupérez les mises à jour depuis le serveur](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#fetch-updates) si vous mettez à jour le montant d’un [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) pour synchroniser le moyen de paiement du wallet.

> #### Tests régionaux
> 
> Stripe Elements ne prend pas en charge Google Pay ou Apple Pay pour les comptes et clients Stripe en Inde. Par conséquent, vous ne pouvez pas tester votre intégration Google Pay ou Apple Pay si l’adresse&nbsp;IP du testeur se trouve en Inde, même si le compte Stripe est basé en dehors de l’Inde.

En savoir plus sur l’utilisation d’[Apple&nbsp;Pay](https://docs.stripe.com/apple-pay.md) et de [Google&nbsp;Pay](https://docs.stripe.com/google-pay.md) avec Stripe.

### Prélèvement automatique ACH

Lorsque vous utilisez le composant Element Payment avec le prélèvement automatique ACH comme moyen de paiement, procédez comme suit&nbsp;:

1. Créez un objet [Account](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer) configuré par le client ou un objet [Customer](https://docs.stripe.com/api/customers/create.md) pour représenter votre client.

#### Accounts v2

```curl
curl -X POST https://api.stripe.com/v2/core/accounts \
  -H "Authorization: Bearer <<YOUR_SECRET_KEY>>" \
  -H "Stripe-Version: 2026-05-27.preview" \
  --json '{
    "configuration": {
        "customer": {}
    }
  }'
```

#### Customers v1

```curl
curl -X POST https://api.stripe.com/v1/customers \
  -u "<<YOUR_SECRET_KEY>>:"
```

1. Indiquez l’ID du client lors de la création du `PaymentIntent`.

   #### Accounts&nbsp;v2

   ```curl
   curl https://api.stripe.com/v1/payment_intents \
     -u "<<YOUR_SECRET_KEY>>:" \
     -d amount=1099 \
     -d currency=usd \
     -d "automatic_payment_methods[enabled]=true" \
     -d setup_future_usage=off_session \
     -d "customer_account={{CUSTOMERACCOUNT_ID}}"
   ```

   #### Customers&nbsp;v1

   ```curl
   curl https://api.stripe.com/v1/payment_intents \
     -u "<<YOUR_SECRET_KEY>>:" \
     -d amount=1099 \
     -d currency=usd \
     -d "automatic_payment_methods[enabled]=true" \
     -d setup_future_usage=off_session \
     -d "customer={{CUSTOMER_ID}}"
   ```

2. Sélectionnez une [méthode de vérification](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_options-us_bank_account-verification_method).

Lorsque vous utilisez le prélèvement automatique ACH avec le Payment Element, vous pouvez uniquement sélectionner `automatic` ou `instant` .

En savoir plus sur l’utilisation du [prélèvement automatique ACH](https://docs.stripe.com/payments/ach-direct-debit.md) avec Stripe.

#### Tester le prélèvement automatique ACH

| Scénario                                                                                                           | Comment tester                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Le paiement de votre client avec un compte bancaire américain et vérification instantanée aboutit.                 | Sélectionnez **Compte bancaire américain** et remplissez le formulaire. Cliquez sur l’établissement de test. Pour associer votre compte bancaire, suivez les instructions affichées dans la fenêtre modale. Enfin, cliquez sur le bouton de paiement.                                                                                                                                                                                           |
| Le paiement de votre client avec un compte bancaire américain et vérification à l’aide de microversements aboutit. | Sélectionnez **Compte bancaire américain** et remplissez le formulaire. Cliquez sur **Saisir les coordonnées bancaires manuellement**. Pour associer votre compte bancaire, suivez les instructions affichées dans la fenêtre modale. Vous pouvez utiliser ces [numéros de comptes de test](https://docs.stripe.com/payments/ach-direct-debit/accept-a-payment.md?platform=web#test-account-numbers). Enfin, cliquez sur le bouton de paiement. |
| Votre client ne parvient pas à finaliser le processus de rattachement de son compte bancaire.                      | Sélectionnez **Compte bancaire américain** et cliquez sur l’établissement de test ou sur **Saisir les coordonnées bancaires manuellement**. Fermez la fenêtre modale sans la remplir.                                                                                                                                                                                                                                                           |

### BLIK

Lorsqu’il utilise Payment&nbsp;Element avec BLIK, l’utilisateur peut fermer la fenêtre modale l’invitant à autoriser le paiement dans son application bancaire. Cela déclenche une redirection vers votre `return_url` et ne renvoie pas l’utilisateur vers la page de paiement. En savoir plus sur l’utilisation de [BLIK](https://docs.stripe.com/payments/blik.md) avec Stripe.

Afin de gérer la fermeture des fenêtres modales par les utilisateurs au niveau du gestionnaire côté serveur pour votre `return_url`, inspectez le PaymentIntent et vérifiez si son `status` est `succeeded` ou `requires_action` (ce qui signifie que le client a fermé la boîte de dialogue sans autoriser le paiement), puis traitez chaque cas de la manière appropriée.

### Moyens de paiement par code QR

En cas d’utilisation du Payment Element avec un moyen de paiement par code&nbsp;QR (WeChat Pay, PayNow, Pix, PromptPay, Cash App Pay), l’utilisateur peut fermer la fenêtre modale dans laquelle est affiché le code. Cette action entraîne une redirection vers votre page `return_url` et non vers la page de paiement.

Pour gérer la fermeture des fenêtre modales de code&nbsp;QR par les utilisateurs au niveau du gestionnaire côté serveur pour votre `return_url`, inspectez le PaymentIntent et vérifiez si son `status` est `succeeded` ou `requires_action` (ce qui signifie que le client a fermé la boîte de dialogue sans effectuer le paiement), puis traitez chaque cas de la manière appropriée.

Vous pouvez également empêcher la redirection automatique vers votre page `return_url` en transmettant le paramètre facultatif avancé [`redirect=if_required`](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect), qui permet d’éviter toute redirection lors de la fermeture d’une fenêtre modale de code&nbsp;QR.

### Cash App Pay

Le Payment&nbsp;Element affiche un formulaire dynamique différent selon qu’il s’agit d’un site Web de bureau ou d’un site Web mobile, car il utilise différentes méthodes d’authentification du client. En savoir plus sur l’utilisation de [Cash&nbsp;App&nbsp;Pay](https://docs.stripe.com/payments/cash-app-pay.md) avec Stripe.

#### Élément d'application Web mobile

Cash App Pay est un moyen de paiement basé sur la redirection vers le Web mobile. Il redirige votre client vers Cash App en mode production ou vers une page de paiement test dans un environnement de test. Une fois le paiement effectué, le client est redirigé vers la `return_url`, que vous ayez défini `redirect=if_required` ou non.

#### Élément d'application Web de bureau

Cash App Pay est un moyen de paiement par code&nbsp;QR pour le Web de bureau, où le Payment Element affiche un code&nbsp;QR modal. Votre client doit scanner le code&nbsp;QR avec une application de lecture de code&nbsp;QR ou l’application mobile Cash App.

En mode production, il renvoie le client vers la `return_url` dès que celui-ci est redirigé vers l’application Cash. Dans les environnements de test, le client peut approuver ou refuser le paiement avant d’être redirigé vers la `return_url`. Les clients peuvent également fermer la fenêtre modale du code&nbsp;QR avant d’effectuer le paiement, ce qui déclenche une redirection vers votre `return_url`.

Assurez-vous que la `return_url` correspond à une page de votre site Web pour examiner le `status` du Payment Intent. Le `status` du Payment Intent peut être `succeeded`, `failed` ou `requires_action` (par exemple, le client a fermé la fenêtre modale sans scanner le code&nbsp;QR).

Vous pouvez également empêcher la redirection automatique vers votre page `return_url` en transmettant le paramètre facultatif avancé `redirect=if_required`, qui permet d’éviter toute redirection lors de la fermeture d’une fenêtre modale de code&nbsp;QR.

### PayPal

Pour utiliser PayPal, assurez-vous d’être sur un [domaine enregistré](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).

## Divulguer Stripe à vos clients

Stripe recueille des informations sur les interactions des clients avec Elements afin de vous fournir des services, de prévenir la fraude et d’améliorer ses services. Cela inclut l’utilisation de cookies et d’adresses IP pour identifier les Elements qu’un client a vus au cours d’une même session Checkout. Vous êtes responsable de la divulgation et de l’obtention de tous les droits et consentements nécessaires pour que Stripe puisse utiliser les données à cette fin. Pour en savoir plus, visitez notre [Centre de confidentialité](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe).

## See also

- [Stripe&nbsp;Elements](https://docs.stripe.com/payments/elements.md)
- [Configurer des paiements futurs](https://docs.stripe.com/payments/save-and-reuse.md)
- [Enregistrer les données de paiement pour les réutiliser](https://docs.stripe.com/payments/save-during-payment.md)
- [Calculer la taxe sur les ventes, la TPS et la TVA dans votre tunnel de paiement](https://docs.stripe.com/tax/standalone-tax-api.md)