# 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&nbsp;Checkout&nbsp;Sessions avec le composant&nbsp;Payment&nbsp;Element plutôt que Payment&nbsp;Intents pour la plupart des intégrations. Checkout&nbsp;Sessions couvre des cas d’usage similaires à Payment&nbsp;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&nbsp;Pricing, ne sont disponibles qu’avec Checkout&nbsp;Sessions. N’utilisez pas l’API&nbsp;Payment&nbsp;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&nbsp;Checkout&nbsp;Sessions&nbsp;: https://docs.stripe.com/payments/quickstart-checkout-sessions. Avec Checkout&nbsp;Sessions (`ui_mode: "elements"`) et Payment&nbsp;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&nbsp;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.

# API Payment&nbsp;Intents


Créez un formulaire de paiement personnalisé en utilisant [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 niveau inférieur que vous pouvez utiliser pour créer votre propre flux de paiement, mais elle nécessite beaucoup plus de code et un entretien continu. Nous recommandons [Payment Element avec Checkout Sessions](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) pour la plupart des intégrations, car elle couvre des flux de paiement similaires à ceux de Payment Intents. Apprenez-en plus sur [quand utiliser Payment Sessions plutôt que PaymentIntents](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 divers modes de paiement.

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

Combiner les composants d’interface utilisateur dans un flux de paiement personnalisé

#### Personnalisation de l'interface utilisateur

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

> #### Vous souhaitez utiliser Stripe Tax, les réductions, l'expédition ou la conversion de devises?
> 
> Stripe a développé une intégration pour le composant Payment&nbsp;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 le [guide dédié à la création d’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 à votre compte](https://dashboard.stripe.com/login).

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&nbsp;API fonctionnelles. Aucune inscription de compte n’est requise.

Utilisez nos bibliothèques officielles pour accéder à l’API de 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 présenter le Payment Element avant de créer un 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.
Un aperçu détaillé de l'intégration des paiements décrite dans le présent 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 attributs [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). Dans la dernière version de l’API, la définition du paramètre `automatic_payment_methods` est facultative, car Stripe active sa fonctionnalité par défaut. Vous pouvez gérer les modes de paiement à partir du [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le retour des modes de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le flux de paiement.

Stripe utilise vos&nbsp;[paramètres de modes de paiement](https://dashboard.stripe.com/settings/payment_methods) pour afficher les modes de paiement que vous avez activés. Pour voir comment vos modes de paiement apparaissent aux clients, saisissez un ID de transaction ou définissez un montant et des devises de commande dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods/review). Pour rectification, répertoriez manuellement ceux 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écidez toujours du montant à débiter côté serveur, un environnement sécurisé, plutôt que côté client. Cela permet d’éviter que des clients malveillants puissent définir leurs propres prix.

### Récupérer la clé secrète du client

L’objet PaymentIntent comprend une *clé secrète du client* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) utilisée côté client pour effectuer le processus de paiement en toute sécurité. Vous pouvez utiliser différentes approches pour transmettre cette clé au côté client.

#### Application monopage

Récupérez la clé secrète du client à partir d’un point de terminaison sur votre serveur, en utilisant la fonction `fetch` du navigateur. Cette approche est préférable si votre côté client est une application d’une page, en particulier si celle-ci a été créée avec un cadre d’application frontal récent comme React. Créez le point de terminaison du serveur pour récupérer 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
```

Ensuite, récupérez la clé secrète du client avec JavaScript côté client:

```javascript
(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();
```

#### Rendu côté serveur

Transmettez la clé secrète du client depuis votre serveur. Cette approche fonctionne mieux si votre application génère du contenu statique sur le serveur avant de l’envoyer au navigateur.

Ajoutez le champ [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) dans votre formulaire de paiement. Dans le 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 informations de paiement [Côté client]

Collectez les informations de paiement du client à l’aide du [Payment Element](https://docs.stripe.com/payments/payment-element.md). Le Payment Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations de paiement pour divers modes de paiement.

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

Si vous choisissez d’utiliser un iframe et souhaitez accepter Apple&nbsp;Pay ou Google&nbsp;Pay, l’attribut [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) de 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://` rather plutôt que `http://` for. 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 tout est prêt pour accepter des paiements réels.

#### HTML + JS

### Configurer Stripe.js

Le composant Payment Element 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 un lot 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 Payment Element doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneurs) vide avec 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>
```

Une fois le formulaire précédent chargé, créez une instance du Payment Element et intégrez-la au nœud DOM du conteneur. Transmettez 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 dans les `options` lorsque vous créez l’instance [Elements](https://docs.stripe.com/js/elements_object/create)&nbsp;:

Manipulez la clé secrète du client avec prudence, car elle peut finaliser le paiement. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne l’exposez à 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&nbsp;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&nbsp;Element, intégrez votre composant de page de paiement dans un [fournisseur Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Appelez `loadStripe` avec votre clé publiable et transmettez l’élément `Promise` renvoyé au fournisseur `Elements`. 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 Payment Element

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 Elements est une collection de composants d’interface utilisateur prêts à l’emploi. Pour personnaliser davantage votre formulaire ou collecter différentes informations du client, consultez la [documentation sur Elements](https://docs.stripe.com/payments/elements.md).

Le 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 remplir toutes les informations de paiement nécessaires.

### Personnaliser l’apparence

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

### Collecter les adresses

Par défaut, le composant Element Paiement collecte uniquement les détails de l’adresse de facturation nécessaires. Certains comportements, tels que le [calcul de la taxe](https://docs.stripe.com/api/tax/calculations/create.md) ou la saisie des détails d’expédition, nécessite l’adresse complète de votre client. Vous pouvez&nbsp;:

- Utilisez le composant [Element Adresse](https://docs.stripe.com/elements/address-element.md) pour profiter des fonctionnalités de saisie semi-automatique et de localisation pour collecter l’adresse complète de votre client. Cela permet d’assurer le calcul de taxe le plus précis possible.
- Collectez les coordonnées à l’aide de votre propre formulaire personnalisé.

### Demander le jeton marchand d’Apple Pay

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

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

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

- Inviter les acheteurs à consentir à enregistrer un moyen de paiement
- Enregistrer les moyens de paiement lorsque les acheteurs donnent leur consentement
- Afficher aux acheteurs les moyens de paiement enregistrés pour leurs prochains 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 mode de paiement enregistré](https://b.stripecdn.com/docs-statics-srv/assets/spm-save.fe0b24afd0f0a06e0cf4eecb0ce2403a.png)

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

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

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

Lors de la création d’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 (à l’aide soit du `customer` pour un objet `Customer`, soit du `customer_account` pour un objet `Account` configuré par 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) de mode de paiement enregistrées 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 proposant aux clients d’enregistrer leurs informations de paiement pour une utilisation ultérieure.

Vous pouvez définir le paramètre `setup_future_usage` sur un objet PaymentIntent ou une session de paiement pour remplacer le comportement par défaut concernant l’enregistrement des modes de paiement. Cela garantit que le mode de paiement sera automatiquement enregistré pour une utilisation future, 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 provoquerait une erreur d’intégration.

> #### Utilisez l’API Accounts&nbsp;v2 pour représenter les clients
> 
> L’API Accounts&nbsp;v2 est désormais accessible à tous les utilisateurs de Connect et disponible en version bêta publique pour les autres utilisateurs de Stripe. Si vous participez à la version bêta d’Accounts&nbsp;v2, vous devez [indiquer une version bêta](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code.
> 
> Pour demander l’accès à la version bêta d’Accounts&nbsp;v2, 
> 
> Dans la plupart des cas d’usage, nous vous recommandons de [modéliser vos clients en tant qu’objets Account](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) configurés par le client 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 CustomerSession pour accéder aux modes de paiement enregistrés de ce client. [Traitez les erreurs](https://docs.stripe.com/error-handling.md) correctement lorsque vous créez la session CustomerSession. Si une erreur se produit, vous n’avez pas besoin de fournir la clé secrète du client de la session CustomerSession à l’instance Elements, car ceci est facultatif.

Créez l’instance Elements à l’aide des clés secrètes du client pour le PaymentIntent et la CustomerSession. Ensuite, utilisez cette instance Elements pour créer un Payment&nbsp;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 récupération du CVC

Vous pouvez également spécifier `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) afin d’exiger à nouveau la collecte du CVC lorsque le client paie par carte.

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

Pour contrôler le contenu dynamique lorsqu’un moyen de paiement enregistré est sélectionné, écoutez l’événement `change` de Payment Element, qui est rempli avec 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 [](https://docs.stripe.com/payments/link.md) dans le [composant Element Payment](https://docs.stripe.com/payments/payment-element.md). Vous pouvez saisir automatiquement les informations de tout client connecté qui utilise déjà  qu’il ait ou non initialement enregistré ses informations dans Link auprès d’une autre entreprise. L’intégration par défaut du composant Element Payment inclut un lien d’invitation Link dans le formulaire de carte. Pour gérer  dans le composant Payment Element, accédez à vos [paramètres des modes de paiement](https://dashboard.stripe.com/settings/payment_methods).
![Authentifiez-vous ou inscrivez-vous avec Link directement dans Payment Element lors du paiement](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png)

Recueillir l’adresse de courriel d’un client pour l’authentification ou l’inscription à Link

### Options d’intégration

Il existe deux façons d’intégrer Link au composant Element Payment. Parmi ceux-ci, Stripe recommande de transmettre l’adresse de courriel du client au composant Element Payment si disponible. N’oubliez pas de tenir compte du fonctionnement de votre flux de paiement lorsque vous choisissez entre ces options&nbsp;:

| Option intégration                                                                   | Flux de paiement                                                                                                                                                                                                                             | Description                                                                                                                                                                                                                                                                           |
| ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Passez l’adresse de courriel d’un client au composant Element Paiement (Recommended) | - Votre client saisit son adresse de courriel avant d’atterrir sur la page de paiement (par exemple, lors d’une étape de création de compte précédente).
  - Vous préférez utiliser votre propre champ de saisie pour l’adresse de courriel. | Transmettez par voie programmatique une adresse de courriel client au composant Element Payment. Dans ce scénario, un client s’authentifie directement auprès de Link dans le formulaire de paiement au lieu d’un composant d’interface utilisateur distinct.                         |
| Collectez l’adresse de courriel d’un client dans le composant Element Paiement       | - Vos clients peuvent choisir de saisir leur courriel et de s’identifier ou de s’inscrire avec Link directement dans le composant Payment Element pendant le paiement.
  - Aucun changement de codage n’est requis.                          | Si un client ne s’est pas inscrit avec  et qu’il choisit un mode de paiement pris en charge dans le composant Element Payment, il sera invité à enregistrer ses informations à l’aide de . Pour les clients déjà inscrits,  renseigne automatiquement leurs informations de paiement. |

Utilisez [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) pour transmettre l’adresse de courriel d’un client au composant Element Paiement.

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

Vous pouvez mettre à jour les attributs du PaymentIntent après la présentation du Payment Element, 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 de livraison). Vous pouvez [mettre à jour 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 figurer le nouveau montant dans le Payment Element. Cet exemple vous montre comment créer le point de terminaison du serveur qui met à jour le montant sur le 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();
  }
})();
```

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

Utilisez [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) pour finaliser le paiement à l’aide des informations du Payment Element. Ajoutez une [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) à cette fonction pour indiquer où Stripe doit rediriger l’utilisateur une fois le paiement effectué. Votre utilisateur peut être d’abord redirigé vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers la page `return_url`. Une fois que le paiement par carte a fonctionné, le client est immédiatement redirigé vers la page `return_url`.

Si vous ne souhaitez pas effectuer de redirection pour les paiements par carte après la finalisation, vous pourrez définir la [redirection](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) à `if_required`. De cette manière, seuls les clients qui choisissent un mode 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 ce qui doit être présenté à vos clients. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous fournissez l’objet `return_url`. 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 sur les 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 courriel à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison.

Écoutez ces événements plutôt que d’attendre un rappel de votre client. Du côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant même l’exécution du rappel, et des clients malveillants pourraient 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 intégration.

En plus de gérer l’événement `payment_intent.succeeded`, nous vous recommandons de gérer les autres événements suivants lorsque vous encaissez des paiements à l’aide du Payment Element&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 a effectué un paiement.                                                                                                                                                                                                                                              | 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 a entrepris un paiement, mais qu’il ne l’a pas encore finalisé. Dans la plupart des cas, cet événement est envoyé lorsque le client entreprend 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, nous vous recommandons de 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 tente d’effectuer un paiement, mais que le paiement échoue.                                                                                                                                                                                                          | Si un paiement passe de l’état `processing` à l’état `payment_failed`, proposez au client de retenter le paiement.                                                                                                            |

## Testez votre intégration

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

1. Créez un Payment Intent et récupérez la clé secrète du client.
2. Remplissez le formulaire de paiement et indiquez-y une méthode qui provient 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. Soumettez le paiement à Stripe. Vous êtes alors redirigé 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 été effectué, vous le verrez dans cette liste.
5. Cliquez sur votre paiement pour voir plus d’informations, comme les informations de facturation et la liste des articles achetés. Vous pouvez utiliser ces informations pour traiter la commande.

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

#### Cartes

| Numéro de carte     | Scénario                                                                                                                                                                                                                                                                                                 | Comment tester                                                                                                                                                               |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | Le paiement par carte est réussi et ne nécessite pas d’authentification.                                                                                                                                                                                                                                 | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. |
| 4000002500003155    | Le paiement par carte 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 de crédit en saisissant le numéro de carte de crédit ainsi qu’une date d’expiration, un CVC et un 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 de crédit en saisissant le numéro de carte de crédit ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. |
| 6205500000000000004 | Le numéro de carte UnionPay a une longueur variable de 13 à 19 chiffres.                                                                                                                                                                                                                                 | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. |

#### Portefeuilles

| Moyen de paiement | Scénario                                                                                                                                                                  | Comment tester                                                                                                                                                                                     |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Alipay            | Le montant dû est réglé par un mode 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 de redirection. |

#### Redirections vers l'institution financière

| Moyen de paiement                     | Scénario                                                                                                                                                                                                                                      | Comment tester                                                                                                                                                                                                         |
| ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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&nbsp;`900123456` et BSB&nbsp;`000000`. Le PaymentIntent confirmé passe initialement à `processing`, puis passe à l’état de `succeeded` 3&nbsp;minutes plus tard. |
| Prélèvement automatique BECS          | Le paiement de votre client échoue avec le code `account_closed`.                                                                                                                                                                             | Remplissez le formulaire à l’aide du numéro de compte&nbsp;`111111113` et BSB&nbsp;`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 de redirection.                 |
| Pay by Bank                           | Le montant dû est réglé par un mode 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 différentes manières&nbsp;: des échecs immédiats (par exemple, le code est expiré ou non valide), des erreurs retardées (refus de la banque) ou des dépassements de délai (le client n’a pas répondu à temps). | Utilisez des modèles de courriel 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                                                                                   | Comment tester                                                                                                                                                                                   |
| ---------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Prélèvement automatique SEPA | Le montant dû est réglé par prélèvement 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’état du PaymentIntent de votre client passe de `processing` à `requires_payment_method`. | Remplissez le formulaire en utilisant le numéro de compte `AT861904300235473202`.                                                                                                                |

#### Bons d'achat

| Moyen de paiement | Scénario                                              | Comment tester                                                                                                            |
| ----------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| Boleto, OXXO      | Votre client paie avec un bon d’achat 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 [Test](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

Le Payment 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 faire afficher certains moyens de paiement.

### Affirm

Pour commencer à utiliser Affirm, vous devez 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 sur le client après que le client [ait sélectionné son moyen de paiement](https://docs.stripe.com/payments/accept-a-payment.md#web-create-intent). En savoir plus sur l’utilisation de [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

Apprenez 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, puis 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 de [Afterpay](https://docs.stripe.com/payments/afterpay-clearpay.md) avec Stripe.

Vous pouvez gérer les modes de paiement depuis le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le retour des modes de paiement admissibles établi en fonction de facteurs tels que le montant de la transaction, les devises et le processus de paiement. Dans la dernière version de l’API, la précision du paramètre `automatic_payment_methods` est facultative, car Stripe active ses fonctionnalités par défaut. Assurez-vous d’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 les paiements avec Afterpay (Clearpay)

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

| Scénario                                                                           | Comment tester                                                                                              |
| ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| Votre client paie avec Afterpay sans problème.                                     | 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, puis cliquez sur **Faire échouer le paiement test** sur la page de redirection.   |

### Apple Pay et Google 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&nbsp;Pay et Google&nbsp;Pay pour les clients dont l’environnement répond aux [conditions d’affichage du portefeuille](https://docs.stripe.com/testing/wallets.md). Pour accepter les paiements à partir de ces portefeuilles, vous devez également&nbsp;:

- Activez-les dans vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods). Apple Pay est activé par défaut.
- Utilisez votre application via HTTPS en mode développement et 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 mode de paiement du portefeuille numérique.

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

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

### Prélèvement automatique ACH

Lorsque vous utilisez l’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é client ou un objet [Customer](https://docs.stripe.com/api/customers/create.md) pour représenter votre client.

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

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

1. Spécifiez l’identifiant du client lors de la création du `PaymentIntent`.

   #### Comptes&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}}"
   ```

   #### Clients&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électionner 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 moyen de paiement par prélèvement automatique ACH avec le Payment Element, vous ne pouvez sélectionner que `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                                                                                                                                                                                                                                                                                                                                                                                              |
| --------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Votre client paie avec un compte bancaire américain par vérification immédiate sans problème. | Sélectionnez **Compte bancaire américain** et remplissez le formulaire. Cliquez sur l’institution de test. Pour associer votre compte bancaire, suivez les instructions affichées dans la fenêtre modale. Enfin, cliquez sur le bouton de paiement.                                                                                                                                                         |
| Votre client paie avec un compte bancaire américain par microdépôts sans problème.            | Sélectionnez **Compte bancaire américain** et remplissez le formulaire. Cliquez sur **Saisie manuelle des coordonnées bancaires**. Suivez les instructions de la modale pour associer votre compte bancaire. Vous pouvez utiliser ces [numéros de compte test](https://docs.stripe.com/payments/ach-direct-debit/accept-a-payment.md?platform=web#test-account-numbers). Cliquez sur le bouton de paiement. |
| Votre client ne parvient pas à terminer le processus de liaison du compte bancaire.           | Sélectionnez **Compte bancaire américain** et cliquez sur l’institution de test ou sur **Saisir les coordonnées bancaires manuellement**. Fermez la fenêtre modale sans la remplir.                                                                                                                                                                                                                         |

### BLIK

Lorsque vous utilisez le Payment Element avec BLIK, l’utilisateur peut fermer la fenêtre modale pour autoriser le paiement dans son application. 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.

Pour gérer les situations où des utilisateurs ferment des boîtes de dialogue modales, accédez au gestionnaire côté serveur de votre `return_url`, et vérifiez si le paramètre `status` a pour valeur `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 comme il convient.

### Moyens de paiement par code QR

Lorsque vous utilisez le 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 de dialogue sur laquelle est affichée le code. Cette action entraîne une redirection vers votre page `return_url` et non pas vers la page de paiement.

Pour gérer les situations où des utilisateurs ferment des boîtes de dialogue modales du code QR, accédez au gestionnaire côté serveur de votre `return_url`, et vérifiez si le paramètre `status` a pour valeur `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 comme il convient.

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 après la fermeture de la fenêtre modale du code&nbsp;QR.

### Paiement en espèces par application

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

#### Élément de l'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é, il est redirigé vers l’URL `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 QR sur le Web, où l’élément de paiement affiche un modal de code QR. Votre client doit numériser le code QR à l’aide d’une application de numérisation de code QR ou de l’application mobile Cash App.

En mode production, il redirige le client vers l’URL `return_url` dès qu’il est redirigé vers l’application Cash. En mode test, il peut approuver ou refuser le paiement avant d’être redirigé vers l’URL `return_url`. Les clients peuvent également fermer la fenêtre modale de code QR avant d’effectuer le paiement, ce qui déclenche une redirection vers votre URL `return_url`.

Assurez-vous que le `return_url` correspond à une page de votre site Web pour inspecter le `status` du Payment Intent. Le `status` du Payment Intent peut être `succeeded`, `failed` ou `requires_action` (par exemple, le client a fermé le modal sans numériser le code QR).

Vous pouvez également prévenir la redirection automatique vers votre `return_url` en transmettant le paramètre facultatif avancé `redirect=if_required`, qui empêche la redirection lors de la fermeture d’une fenêtre modale de code QR.

### PayPal

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

## Présenter les informations de Stripe à vos clients

Stripe recueille des informations sur les interactions des clients avec Elements pour vous fournir des services, prévenir la fraude et améliorer ses services. Cela inclut l’utilisation de témoins et d’adresses IP pour identifier les Elements qu’un client a vus au cours d’une seule session de paiement. Vous êtes responsable de la divulgation et de l’obtention de tous les droits et consentements nécessaires pour permettre à Stripe d’utiliser les données de cette manière. Pour en savoir plus, rendez-vous sur 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 Elements](https://docs.stripe.com/payments/elements.md)
- [Configurer des paiements ultérieurs](https://docs.stripe.com/payments/save-and-reuse.md)
- [Enregistrer les informations de paiement lors du paiement](https://docs.stripe.com/payments/save-during-payment.md)
- [Calculez la taxe de vente, la TPS et la TVA dans votre processus de paiement](https://docs.stripe.com/tax/standalone-tax-api.md)