# Accepter un paiement avec Express Checkout Element

Utilisez une seule intégration pour accepter les paiements par le biais de boutons de paiement en un clic.
![Express Checkout Element](https://b.stripecdn.com/docs-statics-srv/assets/link-in-express-checkout-element.67be6745e5a37c1c09074b0f43763cff.png)

Le composant Element Express Checkout est une intégration permettant d’accepter des paiements via des boutons de paiement en un clic. Les moyens de paiement pris en charge incluent [Link](https://docs.stripe.com/payments/link.md), [Apple Pay](https://docs.stripe.com/apple-pay.md), [Google Pay](https://docs.stripe.com/google-pay.md), [PayPal](https://docs.stripe.com/payments/paypal.md), [Klarna](https://docs.stripe.com/payments/klarna.md) et [Amazon Pay](https://docs.stripe.com/payments/amazon-pay.md).

Les clients voient différents boutons de paiement selon leur appareil et leur navigateur. Les appareils compatibles prennent automatiquement en charge Google Pay et Link. Vous devez effectuer des étapes supplémentaires pour prendre en charge Apple Pay et PayPal.

## Essayer la démonstration

Basculez les options préconfigurées dans la démo pour modifier la couleur d’arrière-plan, la mise en page, la taille et la collecte des adresses de livraison. La démo affiche Google Pay et Apple Pay uniquement sur les plateformes où ils sont disponibles. Les boutons de moyens de paiement ne s’affichent que dans les pays où ils sont pris en charge.

Si vous ne voyez pas la démo, essayez de visualiser cette page dans [un navigateur pris en charge](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers).

| Option                                    | Description                                                                                                                                                                                                                                                                                                                                                                                                              |
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Pays du marchand**                      | Définissez cette option avec la [clé publiable](https://docs.stripe.com/keys.md#obtain-api-keys) que vous utilisez pour [initialiser Stripe.js](https://docs.stripe.com/js/initializing). Pour modifier le pays, vous devez démonter l’Express Checkout Element, mettre à jour la clé publiable, puis remonter l’Express Checkout Element.                                                                               |
| **Couleur d’arrière-plan**                | Définissez les couleurs à l’aide de l’[API Elements Appearance](https://docs.stripe.com/elements/appearance-api.md). Les thèmes des boutons sont hérités de l’API Appearance, mais vous pouvez aussi [les définir directement lors de la création de l’Element](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme).                         |
| **Taille ordinateur de bureau et mobile** | Utilisez la liste déroulante pour définir la largeur maximale en pixels de l’élément parent sur lequel l’Express Checkout Element est monté. Vous pouvez la définir sur 750 px (ordinateur de bureau) ou 320 px (mobile).                                                                                                                                                                                      |
| **Max. de colonnes et max. de lignes**    | Définissez ces valeurs à l’aide du paramètre [layout](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout) lorsque vous [créez le composant Express Checkout Element](https://docs.stripe.com/js/elements_object/create_express_checkout_element).                                                                                                 |
| **Menu de débordement**                   | Définissez cette option à l’aide du paramètre [layout](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout) lorsque vous [créez l’Express Checkout Element](https://docs.stripe.com/js/elements_object/create_express_checkout_element).                                                                                                           |
| **Collecter une adresse de livraison**    | Pour collecter les informations de livraison, vous devez transmettre les options lors de la [création](https://docs.stripe.com/js/elements_object/create_express_checkout_element) de l’Express Checkout Element. En savoir plus sur [la collecte des informations des clients et l’affichage des postes de facture](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md#handle-create-event). |

# API Checkout Sessions

> This is a API Checkout Sessions for when payment-ui is embedded-components. View the full page at https://docs.stripe.com/elements/express-checkout-element/accept-a-payment?payment-ui=embedded-components.

## Before you begin

1. Ajoutez un moyen de paiement à votre navigateur. Par exemple, vous pouvez ajouter une carte à votre compte Google Pay ou à Cartes pour Safari.
1. Fournir votre application via HTTPS. Cette exigence s’applique à la fois en développement et en production. Vous pouvez également utiliser un service comme [ngrok](https://ngrok.com/).
1. [Enregistrez votre domaine](https://dashboard.stripe.com/settings/payment_method_domains) en modes *environnement de test* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) et production.

## 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).

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

#### Ruby

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

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

## Activer des moyens de paiement

Par défaut, Stripe utilise vos [paramètres de moyens de paiement](https://dashboard.stripe.com/settings/payment_methods)pour déterminer quels moyens de paiement sont activés dans le composant Element Express. Vous pouvez également configurer des moyens de paiement spécifiques dans votre session Checkout à l’aide de l’attribut [payment_method_types](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_method_types).

### Moyens de paiement pris en charge

Apple Pay et Google Pay sont automatiquement activés lorsque vous utilisez le type de moyen de paiement `card`. Lors de l’utilisation de Link, vous devez également transmettre le type de moyen de paiement `card`.

| Moyens de paiement | Type de moyen de paiement |
| ------------------ | ------------------------- |
| Amazon Pay         | `amazon_pay`              |
| Apple Pay          | `card`                    |
| Google Pay         | `card`                    |
| Link               | `link`, `card`            |
| PayPal             | `paypal`                  |

## Créer une session Checkout [Côté serveur]

Créez une session Checkout sur votre serveur pour contrôler le tunnel de paiement. La session Checkout définit vos éléments de poste, vos options de livraison et d’autres paramètres pour le paiement.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d ui_mode=elements \
  -d return_url={{RETURN_URL}}
```

Définissez `ui_mode` sur `elements` pour intégrer le composant Express Checkout Element. La session Checkout renvoyée comprend une clé secrète du client, que celui-ci utilise pour afficher en toute sécurité l’interface de paiement.

Vous pouvez configurer des options supplémentaires sur la session Checkout&nbsp;:

- [phone_number_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-phone_number_collection)&nbsp;: Collecter les numéros de téléphone des clients
- [shipping_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection)&nbsp;: Collecter les adresses de livraison
- [shipping_options](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_options): fournir des options de tarifs de livraison
- [automatic_tax](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-automatic_tax)&nbsp;: Activer le calcul automatique des taxes

## Configurer Stripe Elements [Côté client]

#### HTML + JS

L’Express Checkout Element est automatiquement disponible en tant que fonctionnalité de Stripe.js. Incluez le script Stripe.js 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>
```

Récupérez la clé secrète du client sur votre serveur&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>>');
```

Créez une fonctionnalité `fetchClientSecret` pour récupérer la clé secrète du client sur votre serveur&nbsp;:

```javascript
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);
```

Créez l’instance Checkout&nbsp;:

```javascript
const checkout = stripe.initCheckoutElementsSdk({
  clientSecret
});
```

#### React

L’Express Checkout Element est automatiquement disponible en tant que fonctionnalité de 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&nbsp;npm.

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

Créez `clientSecret` en tant que `Promise<string> | string` contenant le secret client renvoyé par votre serveur.

Encapsulez votre application avec le composant [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider), en lui transmettant `clientSecret` et l’instance `stripe`.

```jsx
import React from 'react';
import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout';
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>>');

const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

const App = () => {
  return (
    <CheckoutElementsProvider
      stripe={stripePromise}
      options={{clientSecret}}
    >
      <CheckoutForm />
    </CheckoutElementsProvider>
  );
};

export default App;
```

## Créer et intégrer l'Express Checkout Element [Côté client]

Le composant Express Checkout Element contient une iframe qui envoie en toute sécurité les informations de paiement à Stripe via une connexion HTTPS. L’adresse de la page de paiement doit également commencer par `https://`, au lieu de `http://`, pour que votre intégration fonctionne.

#### HTML + JS

L’Express Checkout Element doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneur) vide avec un ID unique dans votre formulaire de paiement.

```html
<div id="express-checkout-element">
  <!-- Express Checkout Element will be inserted here -->
</div>
<div id="error-message">
  <!-- Display an error message to your customers here -->
</div>
```

Une fois le formulaire chargé, créez une instance de l’Express Checkout Element et intégrez-la au nœud DOM du conteneur&nbsp;:

```javascript
// Create and mount the Express Checkout Element
const expressCheckoutElement = checkout.createExpressCheckoutElement();
expressCheckoutElement.mount('#express-checkout-element');
```

#### React

Ajoutez le composant `ExpressCheckoutElement` à votre page de paiement&nbsp;:

```jsx
import React from 'react';
import {useCheckout, ExpressCheckoutElement} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  const checkoutState = useCheckout();

  if (checkoutState.type === 'error') {
    return <div>Error: {checkoutState.error.message}</div>;
  }

  return (
    <div id="checkout-page">
      <ExpressCheckoutElement onConfirm={onConfirm} />
    </div>
  );
};
```

## Collecter les informations des clients et afficher des postes de facture [Côté client]

La session Checkout que vous avez créée sur le serveur détermine automatiquement les postes, le montant total et les moyens de paiement disponibles. Le composant Express Checkout Element utilise ces informations pour afficher l’interface adaptée.

#### HTML + JS

### Traiter la confirmation des paiements

Écoutez [l’événement de confirmation](https://docs.stripe.com/js/elements_object/express_checkout_element_confirm_event) lorsque votre client finalise son paiement&nbsp;:

```javascript
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  expressCheckoutElement.on('confirm', (event) => {
    loadActionsResult.actions.confirm({expressCheckoutConfirmEvent: event});
  });
}
```

### Gérer les mises à jour dynamiques

Si vous devez mettre à jour la session Checkout en fonction des choix du client (par exemple, en cas de modification de l’adresse ou du tarif de livraison), vous pouvez écouter les événements et mettre à jour la session&nbsp;:

```javascript
expressCheckoutElement.on('shippingaddresschange', async (event) => {
  const response = await fetch('/update-session-shipping', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingAddress: event.address
    })
  });
  const result = await response.json();

  if (result.error) {
    event.reject();
  } else {
    event.resolve();
  }
});

expressCheckoutElement.on('shippingratechange', async (event) => {
  const response = await fetch('/update-session-shipping-rate', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingRateId: event.shippingRate.id
    })
  });
  const result = await response.json();

  if (result.error) {
    event.reject();
  } else {
    event.resolve();
  }
});
```

#### React

### Traiter la confirmation des paiements

Gérer l’événement `confirm` lorsque votre client finalise son paiement&nbsp;:

```jsx
import {useCheckout, ExpressCheckoutElement} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  const checkoutState = useCheckout();

  if (checkoutState.type === 'loading') {
    return <div>Loading...</div>;
  } else if (checkoutState.type === 'error') {
    return <div>Error: {checkoutState.error.message}</div>;
  }

  const handleConfirmExpressCheckout = (event) => {
    if (checkoutState.type === 'success') {
      checkoutState.checkout.confirm({expressCheckoutConfirmEvent: event});
    }
  };

  return (
    <div>
      {checkoutState.type === 'success' && (
        <pre>
          {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
          Total: {checkoutState.checkout.total?.amount}
        </pre>
      )}
      <ExpressCheckoutElement onConfirm={handleConfirmExpressCheckout} />
    </div>
  );
};
```

### Gérer les mises à jour dynamiques

Si vous devez mettre à jour la session Checkout en fonction des choix du client (par exemple, en cas de modification de l’adresse ou du tarif de livraison), vous pouvez écouter les événements et mettre à jour la session&nbsp;:

```jsx
const onShippingAddressChange = async ({resolve, reject, address}) => {
  const response = await fetch('/update-session-shipping', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingAddress: address
    })
  });
  const result = await response.json();

  if (result.error) {
    reject();
  } else {
    resolve();
  }
};

const onShippingRateChange = async ({resolve, reject, shippingRate}) => {
  const response = await fetch('/update-session-shipping-rate', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingRateId: shippingRate.id
    })
  });
  const result = await response.json();

  if (result.error) {
    reject();
  } else {
    resolve();
  }
};

<ExpressCheckoutElement
  onConfirm={handleConfirmExpressCheckout}
  onShippingAddressChange={onShippingAddressChange}
  onShippingRateChange={onShippingRateChange}
/>
```

## Optional: Écouter l'événement ready [Côté client]

Une fois ajouté, le composant Express Checkout Element n’affichera pas les boutons pendant une brève période. Pour animer l’Element lorsque les boutons apparaissent, écoutez l’[événement ready](https://docs.stripe.com/js/element/events/on_ready). Examinez la valeur `availablePaymentMethods` pour déterminer quels boutons s’affichent dans l’Express Checkout Element, le cas échéant.

#### HTML + JS

```javascript
// Optional: If you're doing custom animations, hide the Element
const expressCheckoutDiv = document.getElementById('express-checkout-element');
expressCheckoutDiv.style.visibility = 'hidden';

expressCheckoutElement.on('ready', ({availablePaymentMethods}) => {
  if (!availablePaymentMethods) {
    // No buttons will show
  } else {
    // Optional: Animate in the Element
    expressCheckoutDiv.style.visibility = 'initial';
  }
});
```

#### React

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

const CheckoutForm = () => {
  // Optional: If you're doing custom animations, hide the Element
  const [visibility, setVisibility] = useState('hidden');

  const onReady = ({availablePaymentMethods}) => {
    if (!availablePaymentMethods) {
      // No buttons will show
    } else {
      // Optional: Animate in the Element
      setVisibility('initial');
    }
  };

  return (
    <div id="checkout-page">
      <div id="express-checkout-element" style={{visibility}}>
        <ExpressCheckoutElement
          onConfirm={onConfirm}
          onReady={onReady}
        />
      </div>
    </div>
  );
};
```

## Optional: Styliser le bouton [Côté client]

Vous pouvez appliquer un style différent à chaque bouton de moyen de paiement et contrôler l’apparence générale du composant Express Checkout Element.

#### HTML + JS

```javascript
const expressCheckoutElement = checkout.createExpressCheckoutElement({
  // Specify a type per payment method
  buttonType: {
    googlePay: 'checkout',
    applePay: 'check-out',
    paypal: 'buynow',
  },
  // Specify a theme per payment method
  buttonTheme: {
    applePay: 'white-outline'
  },
  // Height in pixels. Defaults to 44. The width is always '100%'.
  buttonHeight: 55
});
```

#### React

```jsx
const expressCheckoutOptions = {
  // Specify a type per payment method
  buttonType: {
    googlePay: 'checkout',
    applePay: 'check-out',
    paypal: 'buynow'
  },
  // Specify a theme per payment method
  buttonTheme: {
    applePay: 'white-outline'
  },
  // Height in pixels. Defaults to 44. The width is always '100%'.
  buttonHeight: 55
};

<ExpressCheckoutElement
  options={expressCheckoutOptions}
  onConfirm={onConfirm}
/>
```

## Tester l'intégration

Avant de passer en mode production, [testez](https://docs.stripe.com/testing.md) l’intégration de chaque moyen de paiement. Pour déterminer la compatibilité d’un moyen de paiement avec un navigateur, consultez les [navigateurs pris en charge](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers). Si vous utilisez Express Checkout Element dans un iframe, l’attribut [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) de cet iframe doit être défini sur `payment *`.

#### Lien

> Ne stockez pas de données d’utilisateur réelles sur des comptes *environnement de test* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) Link. En effet, ces données sont à considérer comme publiques étant donné que vos comptes test sont associés à votre clé publiable.

À l’heure actuelle, Link fonctionne uniquement pour les cartes de crédit, les cartes de débit et les achats effectués à partir d’un compte bancaire américain éligible. Link requiert un [enregistrement de domaine](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).

Vous pouvez créer des comptes environnement de test pour Link à l’aide d’une adresse e-mail valide. Le tableau suivant répertorie les codes à usage unique acceptés par Stripe pour l’authentification des comptes environnement de test :

| Valeur                                                      | Résultat                                     |
| ----------------------------------------------------------- | -------------------------------------------- |
| Tout autre ensemble de 6&nbsp;chiffres non listé ci-dessous | Opération réussie                            |
| 000001                                                      | Erreur, code non valide                      |
| 000002                                                      | Erreur, code expiré                          |
| 000003                                                      | Erreur, nombre maximal de tentatives dépassé |

#### Portefeuilles

> #### Tests régionaux
> 
> Stripe Elements ne prend pas en charge Google&nbsp;Pay ou Apple&nbsp;Pay pour les comptes et clients Stripe en Inde. Par conséquent, vous ne pouvez pas tester votre intégration Google&nbsp;Pay ou Apple&nbsp;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.

### Apple&nbsp;Pay

Il n’est pas possible d’enregistrer les informations des cartes de test Stripe dans Apple&nbsp;Pay. Néanmoins, Stripe reconnaît l’utilisation de vos [clés API](https://docs.stripe.com/keys.md) de test et renvoie un token de carte de test valide. Ce token vous permet de réaliser des paiements à l’aide d’une carte en mode production sans qu’elle soit débitée.

Assurez-vous d’être sur un&nbsp;[domaine enregistré](https://docs.stripe.com/payments/payment-methods/pmd-registration.md), [un service d’assistance](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers), et d’avoir une carte bancaire active enregistrée dans votre wallet Apple Pay.

### Google&nbsp;Pay

Il n’est pas possible d’enregistrer les informations des cartes de test Stripe dans Google&nbsp;Pay. Néanmoins, Stripe reconnaît l’utilisation de vos clés API de test et renvoie un token de carte de test valide. Ce token vous permet de réaliser des paiements tests à l’aide d’une carte en mode production sans qu’elle soit débitée. Vous pouvez également utiliser le [jeu de cartes de test](https://developers.google.com/pay/api/web/guides/resources/test-card-suite) de Google&nbsp;Pay pour tester votre intégration.

Assurez-vous d’être sur un [domaine enregistré](https://docs.stripe.com/payments/payment-methods/pmd-registration.md) d’utiliser un[navigateur pris en charge](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers), et d’avoir une carte bancaire active enregistrée dans votre wallet Google Pay.

### PayPal

Pour tester votre intégration PayPal&nbsp;:

1. Créez un [compte d’environnement de test](https://developer.paypal.com/dashboard/accounts), en vous assurant que vous êtes en mode environnement de test.
1. Cliquez sur le bouton **PayPal** dans Express Checkout Element et utilisez l’adresse e-mail et le mot de passe générés à partir du compte d’environnement de test pour vous connecter. Vous ne pouvez pas utiliser un compte PayPal personnel dans un environnement de test.
1. Si ce n’est pas encore fait, [enregistrez](https://dashboard.stripe.com/settings/payment_method_domains) votre domaine.

#### Amazon&nbsp;Pay

Pour créer un compte en mode environnement de test pour Amazon&nbsp;Pay&nbsp;:

1. Cliquez sur le bouton **Amazon&nbsp;Pay** en mode environnement de test.
1. Cliquez sur **Créer votre compte Amazon**.
1. Utilisez votre compte en mode environnement de test pour tester votre intégration à l’aide de vos [clés API](https://docs.stripe.com/keys.md) de test.

Utilisez les cartes bancaires suivantes pour simuler des paiements dans l’environnement de test Amazon Pay&nbsp;:

| Carte                          | Résultat          |
| ------------------------------ | ----------------- |
| Discover se terminant par 9424 | Opération réussie |
| Visa se terminant par 1111     | Opération réussie |
| Visa se terminant par 0701     | 3D Secure         |
| Amex se terminant par 0005     | Refuser           |
| JCB se terminant par 0000      | Refuser           |

## Optional: Utilisez l'Express Checkout Element avec Stripe Connect

*Connect* (Connect is Stripe's solution for multi-party businesses, such as marketplace or software platforms, to route payments between sellers, customers, and other recipients) Les plateformes peuvent utiliser le composant Express Checkout Element avec les sessions Checkout en incluant le compte connecté dans la session.

> #### Utiliser l’API Accounts v2 pour représenter des clients
> 
> Si votre intégration utilise des [Accounts configurés par le client](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), remplacez les références `Customer` et événement dans les exemples de code par les références équivalentes de l’API Accounts v2. Pour plus d’informations, consultez la page [Représenter des clients avec des objets Account](https://docs.stripe.com/connect/use-accounts-as-customers.md).

1. Lors de la création de la session Checkout sur votre serveur, incluez le compte connecté&nbsp;:

   ```curl
   curl https://api.stripe.com/v1/checkout/sessions \
     -u sk_test_...: \
     -d "line_items[0][price]"="price_..." \
     -d "line_items[0][quantity]"=1 \
     -d "mode"="payment" \
     -d "ui_mode"="elements" \
     -d "return_url"="https://example.com/return" \
     -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"
   ```

1. [Enregistrez tous les domaines](https://docs.stripe.com/payments/payment-methods/pmd-registration.md?dashboard-or-api=api#register-your-domain-while-using-connect) sur lesquels vous prévoyez d’afficher le composant Express Checkout Element.

## 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)
- [Sessions Checkout](https://docs.stripe.com/payments/checkout.md)
- [Finaliser des paiements sur le serveur](https://docs.stripe.com/payments/finalize-payments-on-the-server.md)


# API Payment Intents

> This is a API Payment Intents for when payment-ui is elements. View the full page at https://docs.stripe.com/elements/express-checkout-element/accept-a-payment?payment-ui=elements.

Nous vous recommandons de collecter les informations de paiement avant de créer un Intent lorsque vous utilisez le composant Express Checkout Element. Si vous avez déjà effectué une intégration avec le composant [Payment&nbsp;Element](https://docs.stripe.com/payments/payment-element.md), vous devrez peut-être [mettre à jour votre intégration](https://docs.stripe.com/payments/accept-a-payment-deferred.md).

## Before you begin

- Ajoutez un moyen de paiement à votre navigateur. Par exemple, vous pouvez ajouter une carte à votre compte Google Pay ou à Cartes pour Safari.
- Fournir votre application via HTTPS. Cette exigence s’applique à la fois en développement et en production. Vous pouvez également utiliser un service comme [ngrok](https://ngrok.com/).
- [Enregistrez votre domaine](https://dashboard.stripe.com/settings/payment_method_domains) en modes *environnement de test* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) et production.

## 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).

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

## Activer des moyens de paiement

Par défaut, Stripe utilise vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) pour déterminer quels moyens de paiement sont activés dans le composant Express Checkout Element.

Pour modifier manuellement les moyens de paiement activés, dressez la liste de ceux que vous souhaitez activer à l’aide de l’attribut `payment_method_types`.

- Si vous collectez des paiements avant de créer un intent, répertoriez les moyens de paiement dans l’[attribut `paymentMethodTypes` de vos options Elements provider](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodTypes).
- Si vous créez un intent avant d’afficher des composants Elements, répertoriez les moyens de paiement dans l’[attribut `payment_method_types` de votre intent](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types).

### Moyens de paiement pris en charge

Apple Pay et Google Pay sont automatiquement activés lorsque vous utilisez le type de moyen de paiement `card`. Lorsque vous utilisez Link, vous devez également transmettre le type de moyen de paiement `card`.

| Nom du moyen de paiement | Paramètres de l’API Payment Method |
| ------------------------ | ---------------------------------- |
| Apple Pay                | `card`                             |
| Google Pay               | `card`                             |
| Link                     | `link, card`                       |
| PayPal                   | `paypal`                           |
| Amazon&nbsp;Pay          | `amazon_pay`                       |
| Klarna                   | `klarna`                           |

## Configurer Stripe Elements [Côté client]

#### HTML + JS

L’Express Checkout Element est automatiquement disponible en tant que fonctionnalité de Stripe.js. Incluez le script Stripe.js 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>>');
```

Créez ensuite une instance d’Elements avec un [mode](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-mode) (paiement, configuration ou abonnement), un [montant](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-amount) et une [devise](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-currency). Ces valeurs déterminent les moyens de paiement qui seront présentés à votre client. Reportez-vous à l’étape suivante pour découvrir davantage d’options d’Elements.

```javascript
const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  // Customizable by using the Appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form.
const elements = stripe.elements(options);
```

#### React

L’Express Checkout Element est automatiquement disponible en tant que fonctionnalité de 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&nbsp;npm.

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

Pour utiliser le composant Express Checkout Element, encapsulez 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 et transmettez le paramètre `Promise` renvoyé au fournisseur `Elements`.

Le fournisseur `Elements` accepte également le mode (paiement, configuration ou abonnement), le montant et la devise. De nombreux moyens de paiement, dont Apple Pay et Google Pay, utilisent ces valeurs dans leur interface utilisateur. Reportez-vous à l’étape suivante pour découvrir davantage d’options d’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 CheckoutPage from './CheckoutPage';

// 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 = {mode: 'payment',
    amount: 1099,
    currency: 'usd',
    // Customizable with appearance API.
    appearance: {/*...*/},
  };

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

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

## Optional: Options d'éléments supplémentaires [Côté client]

L’[objet Elements](https://docs.stripe.com/js/elements_object/create_without_intent) accepte des options supplémentaires qui ont une incidence sur l’encaissement des paiements. En fonction des options proposées, l’Express Checkout Element affiche les moyens de paiement disponibles parmi ceux que vous avez activés. En savoir plus sur la [prise en charge des moyens de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md).

Assurez-vous que les options Elements que vous fournissez (telles que `captureMethod`, `setupFutureUsage` et `paymentMethodOptions`) correspondent aux paramètres équivalents que vous transmettez lors de la création et de la confirmation de l’Intent. Des paramètres incohérents peuvent entraîner un comportement inattendu ou des erreurs.

| Propriété                    | Type                                               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Obligatoire                                |
| ---------------------------- | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `mode`                       | - `payment`
  - `setup`
  - `subscription`         | Indique si l’Express Checkout Element est utilisé avec un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods), un *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) ou un *abonnement* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis). | Oui                                        |
| `currency`                   | `string`                                           | La devise du montant à facturer au client.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Oui                                        |
| `amount`                     | `number`                                           | Le montant à débiter au client, indiqué dans les interfaces utilisateur Apple Pay, Google Pay ou BNPL.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Pour les modes `payment` et `subscription` |
| `setupFutureUsage`           | - `off_session`
  - `on_session`                   | Indique que vous avez l’intention d’effectuer des paiements ultérieurs avec les informations de paiement collectées par l’Express Checkout Element. Non pris en charge pour Klarna utilisant l’Express Checkout Element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Non                                        |
| `captureMethod`              | - `automatic`
  - `automatic_async`
  - `manual`   | Détermine à quel moment capturer les fonds sur le compte du client.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Non                                        |
| `onBehalfOf`                 | `string`                                           | Connect uniquement. L’ID de compte Stripe qui correspond à l’entreprise de référence. Consultez les [cas d’usage](https://docs.stripe.com/connect/charges.md) pour déterminer si cette option est pertinente pour votre intégration.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Non                                        |
| `paymentMethodTypes`         | `string[]`                                         | Liste des types de moyens de paiement à afficher. Vous pouvez omettre cet attribut pour gérer vos moyens de paiement dans le [Dashboard Stripe](https://dashboard.stripe.com/settings/payment_methods).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Non                                        |
| `paymentMethodConfiguration` | `string`                                           | La [configuration des moyens de paiement](https://docs.stripe.com/api/payment_method_configurations.md) à utiliser lors de la gestion de vos moyens de paiement dans le [Dashboard Stripe](https://dashboard.stripe.com/settings/payment_methods). Si aucune configuration n’est spécifiée, votre configuration par défaut sera utilisée.                                                                                                                                                                                                                                                                                                                                                                                                                               | Non                                        |
| `paymentMethodCreation`      | `manual`                                           | Autorise la création d’objets PaymentMethod à partir de l’instance Elements à l’aide de [stripe.createPaymentMethod](https://docs.stripe.com/js/payment_methods/create_payment_method_elements).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Non                                        |
| `paymentMethodOptions`       | `{us_bank_account: {verification_method: string}}` | Options de vérification pour le moyen de paiement `us_bank_account`. Accepte les mêmes méthodes de vérification que les [Payment Intents](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-us_bank_account-verification_method).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Non                                        |
| `paymentMethodOptions`       | `{card: {installments: {enabled: boolean}}}`       | Permet d’activer manuellement l’interface utilisateur de sélection du calendrier de versements échelonnés par carte, le cas échéant, lorsque vous ne gérez pas vos moyens de paiement dans le [Dashboard Stripe](https://dashboard.stripe.com/settings/payment_methods). Vous devez définir `mode='payment'` *et* spécifier explicitement des `paymentMethodTypes`. Dans le cas contraire, une erreur est générée. Non compatible avec `paymentMethodCreation='manual'`.                                                                                                                                                                                                                                                                                                | Non                                        |
| `paymentMethodOptions`       | `{[paymentMethod]: {setup_future_usage: string}}`  | Vous permet de spécifier `setup_future_usage` pour les seuls moyens de paiement prenant en charge la réutilisation. Uniquement applicable lorsque `le mode` est `paiement`. La valeur de chaque moyen de paiement doit correspondre au `payment_method_options[paymentMethod][setup_future_usage]` correspondant sur le PaymentIntent lors de la confirmation. Consultez la [documentation Stripe.js](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodOptions) pour connaître les moyens de paiement et valeurs pris en charge.                                                                                                                                                                         | Non                                        |

## Créer et intégrer l'Express Checkout Element [Côté client]

L’Express Checkout Element contient une balise iframe qui envoie les informations de paiement à Stripe de manière sécurisée via une connexion HTTPS. Pour que votre intégration fonctionne, l’adresse de la page de paiement doit également commencer par `https://` et non `http://`.

#### HTML + JS

L’Express Checkout Element doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneur) vide avec un ID unique dans votre formulaire de paiement.

```html
<div id="express-checkout-element">
  <!-- Express Checkout Element will be inserted here -->
</div>
<div id="error-message">
  <!-- Display an error message to your customers here -->
</div>
```

Une fois le formulaire chargé, créez une instance de l’Express Checkout Element et intégrez-la au nœud DOM du conteneur&nbsp;:

```javascript
// Create and mount the Express Checkout Element
const expressCheckoutElement = elements.create('expressCheckout');
expressCheckoutElement.mount('#express-checkout-element');
```

#### React

Ajoutez le composant `ExpressCheckoutElement` à votre page de paiement&nbsp;:

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

const CheckoutPage = () => {
  return (
    <div id="checkout-page"><ExpressCheckoutElement onConfirm={onConfirm} />
    </div>
  );
};
```

## Collecter les informations des clients et afficher des postes de facture [Côté client]

Transmettez les options lors de la [création](https://docs.stripe.com/js/elements_object/create_express_checkout_element) de l’Express Checkout Element.

#### HTML + JS

### Collecter les informations du payeur

Définissez `emailRequired: true` pour collecter les e-mails, et `phoneNumberRequired: true` pour collecter les numéros de téléphone.

La valeur `billingAddressRequired` par défaut dépend de votre intégration&nbsp;:

- Si vous transmettez `allowedShippingCountries`, `phoneNumberRequired`, `shippingAddressRequired`, `emailRequired`, `applePay`, `lineItems`, or `business` lors de la création du composant Element Express, la valeur `billingAddressRequired` est définie sur false par défaut.
- Sinon, la valeur `billingAddressRequired` est définie sur true par défaut.

```javascript
elements.create('expressCheckout', {
  emailRequired: true,
  phoneNumberRequired: true
});
```

PayPal ne fournit généralement pas l’adresse de facturation du client (sauf le pays) ni son numéro de téléphone. Si ces informations ne sont pas fournies, l’événement de confirmation présente des chaînes vides pour ces propriétés. Si vous avez besoin de l’adresse de facturation ou du numéro de téléphone du client, le composant Express Checkout Element n’affiche pas le bouton PayPal, sauf si cette information est disponible.

### Collecter les informations de livraison

Définissez `shippingAddressRequired: true` et transmettez un tableau de [shippingRates](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-shippingRates).

```javascript
elements.create('expressCheckout', {
  shippingAddressRequired: true,
  allowedShippingCountries: ['US'],
  shippingRates: [
    {
      id: 'free-shipping',
      displayName: 'Free shipping',
      amount: 0,
      deliveryEstimate: {
        maximum: {unit: 'day', value: 7},
        minimum: {unit: 'day', value: 5}
      }
    },
  ]
});
```

Écoutez l’[événement shippingaddresschange](https://docs.stripe.com/js/elements_object/express_checkout_element_shippingaddresschange_event) pour détecter lorsqu’un client sélectionne une adresse de livraison. Vous devez appeler `resolve` ou `reject` si vous choisissez de gérer cet événement.

> #### Confidentialité de l'adresse de livraison
> 
> Pour préserver la confidentialité, les navigateurs peuvent anonymiser l’adresse de livraison en supprimant les informations sensibles qui ne sont pas nécessaires pour calculer les frais d’expédition. Selon le pays, certains champs peuvent être manquants ou partiellement expurgés. Par exemple, l’adresse de livraison aux États-Unis ne peut contenir qu’une ville, un État et un code postal. L’adresse de livraison complète apparaît dans l’objet [événement de confirmation](https://docs.stripe.com/js/elements_object/express_checkout_element_confirm_event#express_checkout_element_on_confirm-handler-shippingAddress) une fois l’achat confirmé dans l’interface de paiement du navigateur.

```javascript
expressCheckoutElement.on('shippingaddresschange', async (event) => {
  const response = await fetch('/calculate-shipping', {
    data: JSON.stringify({
      shippingAddress: event.address
    })
  });
  const result = await response.json();
  event.resolve({
    lineItems: result.updatedLineItems,
  });
});
```

Écoutez l’[événement shippingratechange](https://docs.stripe.com/js/elements_object/express_checkout_element_shippingratechange_event) pour détecter lorsqu’un client sélectionne un tarif de livraison. Vous devez appeler `resolve` ou `reject` si vous choisissez de gérer cet événement.

```javascript
expressCheckoutElement.on('shippingratechange', async (event) => {
  const response = await fetch('/calculate-and-update-amount', {
    data: JSON.stringify({
      shippingRate: event.shippingRate
    })
  });
  const result = await response.json();
  elements.update({amount: result.amount})
  event.resolve({
    lineItems: result.updatedLineItems,
  });
});
```

Écoutez l’[événement cancel](https://docs.stripe.com/js/elements_object/express_checkout_element_cancel_event) pour détecter si un client quitte l’interface de paiement. Réinitialisez le montant au montant initial.

```javascript
expressCheckoutElement.on('cancel', () => {
  elements.update({amount: 1099})
});
```

### Afficher les postes de facture

Transmettez un tableau de [lineItems](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-lineItems)&nbsp;:

```javascript
elements.create('expressCheckout', {
  lineItems: [
    {
      name: 'Sample item',
      amount: 1000
    },
    {
      name: 'Tax',
      amount: 100
    },
    {
      name: 'Shipping cost',
      amount: 1000
    }
  ]
});
```

### Configurer l'interface Apple&nbsp;Pay

Découvrez comment configurer l’interface Apple&nbsp;Pay.

### Transactions initiées par le marchand (MIT)

Vous pouvez configurer les paiements récurrents, les paiements différés ou les paiements par rechargement automatique lorsqu’un utilisateur effectue un paiement avec Apple&nbsp;Pay en demandant le [type de token de marchand](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=ece&mpan=auto-reload#merchant-token-types) concerné dans l’événement `click` d’Express Checkout Element. Nous vous recommandons d’implémenter les tokens de marchand Apple&nbsp;Pay pour vous aligner sur les dernières directives d’Apple&nbsp;Pay et pour pérenniser votre intégration.

#### React

### Collecter les informations du payeur

Définissez `emailRequired: true` pour collecter les e-mails, et `phoneNumberRequired: true` pour collecter les numéros de téléphone.

La valeur `billingAddressRequired` par défaut dépend de votre intégration&nbsp;:

- Si vous transmettez `allowedShippingCountries`, `phoneNumberRequired`, `shippingAddressRequired`, `emailRequired`, `applePay`, `lineItems`, or `business` lors de la création du composant Element Express, la valeur `billingAddressRequired` est définie sur false par défaut.
- Sinon, la valeur `billingAddressRequired` est définie sur true par défaut.

```jsx
const options = {
  emailRequired: true,
  phoneNumberRequired: true
};
```

### Collecter les informations de livraison

Définissez `shippingAddressRequired: true` et transmettez un tableau de [shippingRates](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-shippingRates)&nbsp;:

```jsx
const options = {
  emailRequired: true,
  phoneNumberRequired: true,
  shippingAddressRequired: true,
  allowedShippingCountries: ['US'],
  shippingRates: [
    {
      id: 'free-shipping',
      displayName: 'Free shipping',
      amount: 0,
      deliveryEstimate: {
        maximum: {unit: 'day', value: 7},
        minimum: {unit: 'day', value: 5}
      }
    },
  ]
};
```

Écoutez l’[événement shippingaddresschange](https://docs.stripe.com/js/elements_object/express_checkout_element_shippingaddresschange_event) pour détecter lorsqu’un client sélectionne une adresse de livraison. Vous devez appeler `resolve` ou `reject` si vous choisissez de gérer cet événement.

```jsx
const onShippingAddressChange = async ({resolve, address}) => {
  const response = await fetch('/calculate-shipping', {
    data: JSON.stringify({
      shippingAddress: address
    })
  });
  const result = await response.json();
  resolve({
    lineItems: result.updatedLineItems,
  });
};
```

Écoutez l’[événement shippingratechange](https://docs.stripe.com/js/elements_object/express_checkout_element_shippingratechange_event) pour détecter lorsqu’un client sélectionne un tarif de livraison. Vous devez appeler `resolve` ou `reject` si vous choisissez de gérer cet événement.

```jsx
const onShippingRateChange = async ({resolve, shippingRate}) => {
  const response = await fetch('/calculate-and-update-amount', {
    data: JSON.stringify({
      shippingRate: shippingRate
    })
  });
  const result = await response.json();
  elements.update({amount: result.amount})
  resolve({
    lineItems: result.updatedLineItems,
  });
};
```

Écoutez l’[événement cancel](https://docs.stripe.com/js/elements_object/express_checkout_element_cancel_event) pour détecter si un client quitte l’interface de paiement. Réinitialisez le montant au montant initial.

```jsx
const onCancel = () => {
  elements.update({amount: 1099})
};
```

Ajoutez les gestionnaires d’événements lors de la création de l’Element.

```jsx
<ExpressCheckoutElementoptions={options}
  onConfirm={onConfirm}
  onShippingAddressChange={onShippingAddressChange}
  onShippingRateChange={onShippingRateChange}
  onCancel={onCancel}
/>
```

### Afficher les postes de facture

Transmettez un tableau de [lineItems](https://docs.stripe.com/js/elements_object/express_checkout_element_click_event#express_checkout_element_on_click-handler-resolve-lineItems).

```jsx
const options = {
  lineItems: [
    {
      name: 'Sample item',
      amount: 1000
    },
    {
      name: 'Tax',
      amount: 100
    },
    {
      name: 'Shipping cost',
      amount: 1000
    }
  ]
};
```

### Configurer l'interface Apple&nbsp;Pay

Découvrez comment configurer l’interface Apple&nbsp;Pay.

### Transactions initiées par le marchand (MIT)

Nous proposons des options spécifiques à configurer pour Apple Pay. Définissez l’[option](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-applePay-recurringPaymentRequest) `applePay.recurringPaymentRequest` permettant de spécifier une demande de configuration d’un paiement récurrent. Lorsqu’il est spécifié, Apple Pay émet un [token de marchand](https://developer.apple.com/apple-pay/merchant-tokens/) et permet au client de gérer les moyens de paiement pour un paiement récurrent.

```jsx
const options = {
  applePay: {
    recurringPaymentRequest: {
      paymentDescription: 'My subscription',
      managementURL: 'https://example.com/billing',
      regularBilling: {
        amount: 2500,
        label: 'Monthly subscription fee',
        recurringPaymentIntervalUnit: 'month',
        recurringPaymentIntervalCount: 1,
      },
    }
  }
};
```

## Optional: Écouter l'événement ready [Côté client]

Une fois ajouté, le composant Express Checkout Element n’affichera pas les boutons pendant une brève période. Pour animer l’Element lorsque les boutons apparaissent, écoutez l’[événement ready](https://docs.stripe.com/js/element/events/on_ready). Examinez la valeur `availablePaymentMethods` pour déterminer quels boutons s’affichent dans l’Express Checkout Element, le cas échéant.

#### HTML + JS

```javascript
// Optional: If you're doing custom animations, hide the Element
const expressCheckoutDiv = document.getElementById('express-checkout-element');
expressCheckoutDiv.style.visibility = 'hidden';

expressCheckoutElement.on('ready', ({availablePaymentMethods}) => {
  if (!availablePaymentMethods) {
    // No buttons will show
  } else {
    // Optional: Animate in the Element
    expressCheckoutDiv.style.visibility = 'initial';
  }
});
```

#### React

```jsx
import React, {useState} from 'react';
import {ExpressCheckoutElement} from '@stripe/react-stripe-js';
import {onConfirm} from './confirmHandler';

const CheckoutPage = () => {
  // Optional: If you're doing custom animations, hide the Element
  const [visibility, setVisibility] = useState('hidden');
const onReady = ({availablePaymentMethods}) => {
    if (!availablePaymentMethods) {
      // No buttons will show
    } else {
      // Optional: Animate in the Element
      setVisibility('initial');
    }
  };

  return (
    <div id="checkout-page">
      <div id="express-checkout-element" style={{visibility}}>
        <ExpressCheckoutElement
          onConfirm={onConfirm}onReady={onReady}
        />
      </div>
    </div>
  );
};
```

## Optional: Contrôle de l'affichage des boutons de paiement [Côté client]

Vous pouvez gérer les moyens de paiement qui apparaissent dans le composant Express Checkout Element de plusieurs manières&nbsp;:

- Dans les [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) du Dashboard Stripe.
- En utilisant la [propriété paymentMethods](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods) pour désactiver les boutons de paiement. L’utilisation de cette propriété vous permet de mieux contrôler ce que voient vos clients.

Le composant Express Checkout Element affiche Apple Pay ou Google Pay lorsque le client se trouve sur une plateforme prise en charge et qu’il dispose d’une carte active. Si vous souhaitez toujours afficher Apple Pay et Google Pay même lorsque le client n’a pas de carte active, vous pouvez également configurer cette fonction avec `paymentMethods`.

## Optional: Styliser le bouton [Côté client]

Vous pouvez [styliser](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme) chaque bouton de moyen de paiement différemment. Pour des exemples de thèmes et de types de boutons, consultez les ressources de [Google](https://developers.google.com/pay/api/web/guides/resources/customize) et d’[Apple](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Using-Apple-Pay-buttons). Vous pouvez également utiliser la variable `borderRadius` dans l’[API Appearance](https://docs.stripe.com/elements/appearance-api.md?platform=web#commonly-used-variables)&nbsp;:

#### HTML + JS

```javascript
const appearance = {
  variables: {
    // This controls the border-radius of the rendered Express Checkout Element
    borderRadius: '4px',
  }
};

// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});

elements.create('expressCheckout', {
  // Specify a type per payment method
  // Defaults to 'buy' for Google, 'plain' for Apple, and 'paypal' for PayPal
  buttonType: {
    googlePay: 'checkout',
    applePay: 'check-out',
    paypal: 'buynow',
  },
  // Specify a theme per payment method
  // Default theme is based on appearance API settings
  buttonTheme: {
    applePay: 'white-outline'
  },
  // Height in pixels. Defaults to 44. The width is always '100%'.
  buttonHeight: 55
});
```

#### React

```jsx
const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',appearance: {
    variables: {
      // This controls the border-radius of the rendered Express Checkout Element
      borderRadius: '4px'
    }
  }
};

const expressCheckoutOptions = {
  // Specify a type per payment method
  // Defaults to 'buy' for Google and 'plain' for Apple
  buttonType: {
    googlePay: 'checkout',
    applePay: 'check-out'
  },
  // Specify a theme per payment method
  // Default theme is based on appearance API settings
  buttonTheme: {
    applePay: 'white-outline'
  },
  // Height in pixels. Defaults to 44. The width is always '100%'.
  buttonHeight: 55
};
```

Transmettez ces `options` lors de la création de l’Element et du fournisseur `Elements`.

```jsx
<Elements stripe={stripePromise} options={options}>
  <ExpressCheckoutElementoptions={expressCheckoutOptions}
    onConfirm={onConfirm}
  />
</Elements>
```

## Optional: Créer un ConfirmationToken [Côté client]

Lorsque le client autorise un paiement, vous pouvez créer un *ConfirmationToken* (ConfirmationTokens help capture data from your client, such as your customer's payment instruments and shipping address, and are used to confirm a PaymentIntent or SetupIntent) à envoyer à votre serveur afin de lancer un processus de validation supplémentaire ou de logique métier avant confirmation. Vous devez immédiatement utiliser le ConfirmationToken créé pour confirmer un PaymentIntent ou un SetupIntent.

#### HTML + JS

```javascript
const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
}

expressCheckoutElement.on('confirm', async (event) => {
  ...

  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create a ConfirmationToken using the details collected by the Express Checkout Element
  const {error, confirmationToken} = await stripe.createConfirmationToken({
    elements,
    params: {
      payment_method_data: {
        billing_details: {
          name: 'Jenny Rosen',
        }
      },
      return_url: 'https://example.com/order/123/complete'
    }
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
    return;
  }

  // Send the ConfirmationToken ID to your server for additional logic and attach the ConfirmationToken
  const res = await fetch('/create-intent', {
    method: 'POST',
    body: confirmationToken.id
  });
  const {client_secret: clientSecret} = await res.json();

  // Confirm the PaymentIntent
  const {error: confirmError} = await stripe.confirmPayment({
    clientSecret,
    confirmParams: {
      confirmation_token: confirmationToken.id
    },
  });

  if (confirmError) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(confirmError);
  } else {
    // The payment UI automatically closes with a success animation.
    // Your customer is redirected to your `return_url`.
  }
});
```

#### React

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

const CheckoutPage = () => {
  const stripe = useStripe();
  const elements = useElements();
  const [errorMessage, setErrorMessage] = useState();

  const onConfirm = async (event) => {
    if (!stripe) {
      // Stripe.js hasn't loaded yet.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    const {error: submitError} = await elements.submit();
    if (submitError) {
      setErrorMessage(submitError.message);
      return;
    }

    // Create a ConfirmationToken using the details collected by the Express Checkout Element
    const {error, confirmationToken} = await stripe.createConfirmationToken({
      elements,
      params: {
        payment_method_data: {
          billing_details: {
            name: 'Jenny Rosen',
          },
        },
        return_url: 'https://example.com/order/123/complete',
      }
    });

    if (error) {
      // This point is only reached if there's an immediate error when
      // creating the ConfirmationToken. Show the error to your customer (for example, payment details incomplete)
      setErrorMessage(error.message);
    }

    // Send the ConfirmationToken ID to your server for additional logic and attach the ConfirmationToken
    const res = await fetch('/create-intent', {
      method: 'POST',
      body: confirmationToken.id
    });
    const {client_secret: clientSecret} = await res.json();

    // Confirm the PaymentIntent
    const {error: confirmError} = await stripe.confirmPayment({
      clientSecret,
      confirmParams: {
        confirmation_token: confirmationToken.id
      },
    });

    if (confirmError) {
      // This point is only reached if there's an immediate error when
      // confirming the payment. Show the error to your customer (for example, payment details incomplete)
      setErrorMessage(confirmError.message);
    } else {
      // The payment UI automatically closes with a success animation.
      // Your customer is redirected to your `return_url`.
    }
  };

  return (
    <div id="checkout-page">
      <ExpressCheckoutElement onConfirm={onConfirm} />
      {errorMessage && <div>{errorMessage}</div>}
    </div>
  );
};
```

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

Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise un objet *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods), qui suit les tentatives de débit et les changements d’état du paiement tout au long du processus.

Créez un PaymentIntent sur votre serveur avec un montant et une devise. Ces informations doivent correspondre à celles définies sur l’instance `stripe.elements` à l’[étape&nbsp;3](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md#set-up-elements). Décidez toujours du montant à débiter côté serveur, un environnement sécurisé, plutôt que côté client. Cela empêchera les clients malintentionnés de fixer leurs propres tarifs.

#### Accounts&nbsp;v2

#### Ruby

```ruby
require 'stripe'
Stripe.api_key = '<<YOUR_SECRET_KEY>>'

post '/create-intent' do
  # If you used a Tax Calculation, optionally recalculate taxes
  # confirmation_token = Stripe::ConfirmationToken.retrieve(params[:confirmation_token_id])
  # summarized_payment_details = summarize_payment_details(confirmation_token)

  intent = Stripe::PaymentIntent.create({
    # To allow saving and retrieving payment methods, provide the Account ID.
    customer_account: customer_account.id,
    # If you used a Tax Calculation, use its `amount_total`.
    # amount: summarized_payment_details.amount_total,
    amount: 1099,
    currency: 'usd',
    # Specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
    # If you used a Tax Calculation, link it to the PaymentIntent to make sure any transitions accurately reflect the tax.
    # hooks: {
    #  inputs: {
    #    tax: {
    #      calculation: tax_calculation.id
    #    }
    #  }
    #}
  },
  #{
  #  stripe_version: '2025-09-30.preview' }
  )
  {client_secret: intent.client_secret}.to_json
end
```

#### Customers&nbsp;v1

#### Ruby

```ruby
require 'stripe'
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent' do
  # If you used a Tax Calculation, optionally recalculate taxes
  # confirmation_token = client.v1.confirmation_tokens.retrieve(params[:confirmation_token_id])
  # summarized_payment_details = summarize_payment_details(confirmation_token)

  intent = client.v1.payment_intents.create({
    # To allow saving and retrieving payment methods, provide the Customer ID.
    customer: customer.id,
    # If you used a Tax Calculation, use its `amount_total`.
    # amount: summarized_payment_details.amount_total,
    amount: 1099,
    currency: 'usd',
    # Specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
    # If you used a Tax Calculation, link it to the PaymentIntent to make sure any transitions accurately reflect the tax.
    # hooks: {
    #  inputs: {
    #    tax: {
    #      calculation: tax_calculation.id
    #    }
    #  }
    #}
  },
  #{
  #  stripe_version: '2025-09-30.preview' }
  )
  {client_secret: intent.client_secret}.to_json
end
```

Le PaymentIntent renvoyé inclut 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 mener à bien le processus de paiement en toute sécurité, plutôt que de transmettre l’objet PaymentIntent dans son intégralité. Vous pouvez utiliser différentes approches pour transmettre cette clé secrète côté client.

## 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 de l’Express Checkout Element.

> #### Montants automatiques
> 
> Pour Amazon Pay, Klarna et PayPal, le montant que vous confirmez dans le PaymentIntent doit correspondre au montant que l’acheteur a préautorisé. Si les montants ne correspondent pas, le paiement est refusé.

Fournissez 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 redirigé vers un site intermédiaire avant d’être redirigé vers la `return_url`. Payments redirige immédiatement l’utilisateur vers la `return_url` lorsqu’un paiement aboutit.

Si vous ne souhaitez pas effectuer de redirection une fois le paiement effectué, vous pouvez définir la [redirection](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) sur `if_required`. De cette manière, seuls les clients qui choisissent un moyen de paiement avec redirection seront redirigés.

#### HTML + JS

```javascript
const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
}

expressCheckoutElement.on('confirm', async (event) => {
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch('/create-intent', {
    method: 'POST',
  });
  const {client_secret: clientSecret} = await res.json();

  const {error} = await stripe.confirmPayment({
    // `elements` instance used to create the Express Checkout Element
    elements,
    // `clientSecret` from the created PaymentIntent
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } else {
    // The payment UI automatically closes with a success animation.
    // Your customer is redirected to your `return_url`.
  }
});
```

#### React

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

const CheckoutPage = () => {
  const stripe = useStripe();
  const elements = useElements();
  const [errorMessage, setErrorMessage] = useState();

  const onConfirm = async (event) => {
    if (!stripe) {
      // Stripe.js hasn't loaded yet.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    const {error: submitError} = await elements.submit();
    if (submitError) {
      setErrorMessage(submitError.message);
      return;
    }

    // Create the PaymentIntent and obtain clientSecret
    const res = await fetch('/create-intent', {
      method: 'POST',
    });
    const {client_secret: clientSecret} = await res.json();

    // Confirm the PaymentIntent using the details collected by the Express Checkout Element
    const {error} = await stripe.confirmPayment({
      // `elements` instance used to create the Express Checkout Element
      elements,
      // `clientSecret` from the created PaymentIntent
      clientSecret,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });

    if (error) {
      // This point is only reached if there's an immediate error when
      // confirming the payment. Show the error to your customer (for example, payment details incomplete)
      setErrorMessage(error.message);
    } else {
      // The payment UI automatically closes with a success animation.
      // Your customer is redirected to your `return_url`.
    }
  };

  return (
    <div id="checkout-page">
      <ExpressCheckoutElement onConfirm={onConfirm} />
      {errorMessage && <div>{errorMessage}</div>}
    </div>
  );
};
```

## Tester l'intégration

Avant de passer en mode production, [testez](https://docs.stripe.com/testing.md) l’intégration de chaque moyen de paiement. Pour déterminer la compatibilité d’un moyen de paiement avec un navigateur, consultez les [navigateurs pris en charge](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers). Si vous utilisez Express Checkout Element dans un iframe, l’attribut [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) de cet iframe doit être défini sur `payment *`.

#### Lien

> Ne stockez pas de données d’utilisateur réelles sur des comptes *environnement de test* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) Link. En effet, ces données sont à considérer comme publiques étant donné que vos comptes test sont associés à votre clé publiable.

À l’heure actuelle, Link fonctionne uniquement pour les cartes de crédit, les cartes de débit et les achats effectués à partir d’un compte bancaire américain éligible. Link requiert un [enregistrement de domaine](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).

Vous pouvez créer des comptes environnement de test pour Link à l’aide d’une adresse e-mail valide. Le tableau suivant répertorie les codes à usage unique acceptés par Stripe pour l’authentification des comptes environnement de test :

| Valeur                                                      | Résultat                                     |
| ----------------------------------------------------------- | -------------------------------------------- |
| Tout autre ensemble de 6&nbsp;chiffres non listé ci-dessous | Opération réussie                            |
| 000001                                                      | Erreur, code non valide                      |
| 000002                                                      | Erreur, code expiré                          |
| 000003                                                      | Erreur, nombre maximal de tentatives dépassé |

#### Portefeuilles

> #### Tests régionaux
> 
> Stripe Elements ne prend pas en charge Google&nbsp;Pay ou Apple&nbsp;Pay pour les comptes et clients Stripe en Inde. Par conséquent, vous ne pouvez pas tester votre intégration Google&nbsp;Pay ou Apple&nbsp;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.

### Apple&nbsp;Pay

Il n’est pas possible d’enregistrer les informations des cartes de test Stripe dans Apple&nbsp;Pay. Néanmoins, Stripe reconnaît l’utilisation de vos [clés API](https://docs.stripe.com/keys.md) de test et renvoie un token de carte de test valide. Ce token vous permet de réaliser des paiements à l’aide d’une carte en mode production sans qu’elle soit débitée.

Assurez-vous d’utiliser un [domaine enregistré](https://docs.stripe.com/payments/payment-methods/pmd-registration.md), d’utiliser un [navigateur pris en charge](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers) et d’avoir une carte active enregistrée dans votre wallet Apple&nbsp;Pay. Vous pouvez également définir l’option [paymentMethods](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods) `applePay` sur `always` pour supprimer l’exigence d’une carte enregistrée active.

### Google&nbsp;Pay

Il n’est pas possible d’enregistrer les informations des cartes de test Stripe dans Google&nbsp;Pay. Néanmoins, Stripe reconnaît l’utilisation de vos clés API de test et renvoie un token de carte de test valide. Ce token vous permet de réaliser des paiements tests à l’aide d’une carte en mode production sans qu’elle soit débitée. Vous pouvez également utiliser le [jeu de cartes de test](https://developers.google.com/pay/api/web/guides/resources/test-card-suite) de Google&nbsp;Pay pour tester votre intégration.

Assurez-vous d’être sur un [domaine enregistré](https://docs.stripe.com/payments/payment-methods/pmd-registration.md), dans un [navigateur pris en charge](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers) et d’avoir une carte active enregistrée dans votre portefeuille Google Pay. Sinon, définissez l’option `googlePay` des [paymentMethods](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods) sur `always` pour ne pas avoir à enregistrer de carte.

### PayPal

Pour tester votre intégration PayPal&nbsp;:

1. Créez un [compte d’environnement de test](https://developer.paypal.com/dashboard/accounts), en vous assurant que vous êtes en mode environnement de test.
1. Cliquez sur le bouton **PayPal** dans Express Checkout Element et utilisez l’adresse e-mail et le mot de passe générés à partir du compte d’environnement de test pour vous connecter. Vous ne pouvez pas utiliser un compte PayPal personnel dans un environnement de test.
1. Si ce n’est pas déjà fait, [enregistrez](https://docs.stripe.com/payments/payment-methods/pmd-registration.md) votre domaine.

#### Amazon&nbsp;Pay

Pour créer un compte en mode environnement de test pour Amazon&nbsp;Pay&nbsp;:

1. Cliquez sur le bouton Amazon&nbsp;Pay en mode environnement de test.
1. Cliquez sur **Créer votre compte Amazon**.
1. Utilisez votre compte en mode environnement de test pour tester votre intégration à l’aide de vos [clés API](https://docs.stripe.com/keys.md) de test.

Utilisez les cartes suivantes pour simuler des paiements dans l’environnement de test Amazon&nbsp;Pay&nbsp;:

| Carte                          | Résultat          |
| ------------------------------ | ----------------- |
| Discover se terminant par 9424 | Opération réussie |
| Visa se terminant par 1111     | Opération réussie |
| Visa se terminant par 0701     | 3D Secure         |
| Amex se terminant par 0005     | Refuser           |
| JCB se terminant par 0000      | Refuser           |

#### Klarna

Klarna exige [l’enregistrement de domaine](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).

> Klarna utilise des cookies pour le suivi des sessions. Pour tester différents emplacements clients, déconnectez-vous de l’environnement de test Klarna de la session précédente et utilisez les déclencheurs pertinents.

Nous avons réuni ci-dessous des données de test pour les pays pris en charge. Dans un environnement de test, Klarna s’appuie sur l’adresse e-mail fournie pour approuver ou refuser une transaction.

#### Australie

|                   | Approuvé          | Refusé                   |
| ----------------- | ----------------- | ------------------------ |
| Date de naissance | 10/07/1970        | 03-05-1994               |
| Prénom            | Test              | John                     |
| Nom               | Person-au         | snow                     |
| Rue               | Wharf&nbsp;St     | Silverwater&nbsp;Rd      |
| Numéro de rue     | 4                 | 1-5                      |
| Code postal       | 4877              | 2128                     |
| Ville             | Port Douglas      | Silverwater              |
| Région            | QLD               | NSW                      |
| Téléphone         | +61473752244      | +61473763254             |
| Adresse e-mail    | customer@email.au | customer+denied@email.au |

#### Autriche

|                   | Approuvé           | Refusé                   |
| ----------------- | ------------------ | ------------------------ |
| Date de naissance | 10/07/1970         | 10/07/1970               |
| Prénom            | Test               | Test                     |
| Nom               | Person-at          | Person-at                |
| E-mail            | customer@email.at  | customer+denied@email.at |
| Rue               | Mariahilfer Straße | Mariahilfer Straße       |
| Numéro de rue     | 47                 | 47                       |
| Ville             | Vienne             | Vienne                   |
| Code postal       | 1060               | 1060                     |
| Téléphone         | +4306762600456     | +4306762600745           |

#### Belgique

|                   | Approuvé          | Refusé                   |
| ----------------- | ----------------- | ------------------------ |
| Date de naissance | 10/07/1970        | 10/07/1970               |
| Prénom            | Test              | Test                     |
| Nom               | Person-be         | Person-be                |
| E-mail            | customer@email.be | customer+denied@email.be |
| Rue               | Grote Markt       | Grote Markt              |
| Numéro de rue     | 1                 | 1                        |
| Ville             | Bruxelles         | Bruxelles                |
| Code postal       | 1&nbsp;000        | 1&nbsp;000               |
| Téléphone         | +32485121291      | +32485212123             |

#### Canada

|                   | Approuvé          | Refusé                   |
| ----------------- | ----------------- | ------------------------ |
| Date de naissance | 10/07/1970        | 10/07/1970               |
| Prénom            | Test              | Test                     |
| Nom               | Person-ca         | Person-ca                |
| Rue               | 2693 Byron Rd     | 2693 Byron Rd            |
| Code postal       | V7H 1L9           | V7H 1L9                  |
| Ville             | North Vancouver   | North Vancouver          |
| Région            | BC                | BC                       |
| Téléphone         | +15197438620      | +15197308624             |
| Adresse e-mail    | customer@email.ca | customer+denied@email.ca |

#### République tchèque

|                   | Approuvé                | Refusé                   |
| ----------------- | ----------------------- | ------------------------ |
| Date de naissance | 01-01-1970              | 27-06-1992               |
| Prénom            | Test                    | Test                     |
| Nom               | Person-cz               | Person-cz                |
| E-mail            | customer@email.cz       | customer+denied@email.cz |
| Rue               | Zazvorkova&nbsp;1480/11 | Zázvorkova 1480/11       |
| Code postal       | 155 00                  | 155 00                   |
| Ville             | Prague                  | PRAHA&nbsp;13            |
| Téléphone         | +420771613715           | +420771623691            |

#### Danemark

|                   | Approuvé          | Refusé                   |
| ----------------- | ----------------- | ------------------------ |
| Date de naissance | 01-01-1980        | 10/07/1970               |
| Prénom            | Test              | Test                     |
| Nom               | Person-dk         | Person-dk                |
| E-mail            | customer@email.dk | customer+denied@email.dk |
| Rue               | Dantes Plads      | Nygårdsvej               |
| Numéro de rue     | 7                 | 65                       |
| Ville             | København Ø       | København Ø              |
| Code postal       | 1556              | 2100                     |
| Téléphone         | +4542555628       | +4552555348              |

#### Finlande

|                   | Approuvé          | Refusé                   |
| ----------------- | ----------------- | ------------------------ |
| Date de naissance | 01-01-1999        | 01-01-1999               |
| Prénom            | Test              | Person FI                |
| Nom               | Person-fi         | Test                     |
| E-mail            | customer@email.fi | customer+denied@email.fi |
| Rue               | Mannerheimintie   | Mannerheimintie          |
| Numéro de rue     | 34                | 34                       |
| Ville             | Helsinki          | Helsinki                 |
| Code postal       | 00100             | 00100                    |
| Téléphone         | +358401234567     | +358401234568            |

#### France

|                   | Approuvé          | Refusé                   |
| ----------------- | ----------------- | ------------------------ |
| Date de naissance | 10-07-1990        | 10-07-1990               |
| Lieu de naissance | Paris             | Paris                    |
| Prénom            | Test              | Test                     |
| Nom               | Person-fr         | Person-fr                |
| E-mail            | customer@email.fr | customer+denied@email.fr |
| Rue               | rue La Fayette    | rue La Fayette           |
| Numéro de rue     | 33                | 33                       |
| Ville             | Paris             | Paris                    |
| Code postal       | 75009             | 75009                    |
| Téléphone         | +33689854321      | +33687984322             |

#### Allemagne

|                   | Approuvé              | Refusé                   |
| ----------------- | --------------------- | ------------------------ |
| Date de naissance | 10/07/1970            | 10/07/1970               |
| Prénom            | Mock                  | Test                     |
| Nom               | Mock                  | Person-de                |
| E-mail            | customer@email.de     | customer+denied@email.de |
| Rue               | Neue Schönhauser Str. | Neue Schönhauser Str.    |
| Numéro de rue     | 2                     | 2                        |
| Ville             | Berlin                | Berlin                   |
| Code postal       | 10178                 | 10178                    |
| Téléphone         | +49017614284340       | +49017610927312          |

#### Grèce

|                   | Approuvé          | Refusé                   |
| ----------------- | ----------------- | ------------------------ |
| Numéro fiscal     | 090000045         | 090000045                |
| Date de naissance | 01-01-1960        | 11-11-1970               |
| Prénom            | Test              | Test                     |
| Nom               | Person-gr         | Test-gr                  |
| E-mail            | customer@email.gr | customer+denied@email.gr |
| Rue               | Kephisias         | Baralo                   |
| Numéro de rue     | 37                | 56                       |
| Code postal       | 151 23            | 123&nbsp;67              |
| Ville             | Athina            | Athina                   |
| Téléphone         | +306945553624     | +306945553625            |

#### Irlande

|                   | Approuvé          | Refusé                   |
| ----------------- | ----------------- | ------------------------ |
| Date de naissance | 10/07/1970        | 10/07/1970               |
| Prénom            | Test              | Test                     |
| Nom               | Person-ie         | Person-ie                |
| E-mail            | customer@email.ie | customer+denied@email.ie |
| Rue               | King Street South | King Street South        |
| Numéro de rue     | 30                | 30                       |
| Ville             | Dublin            | Dublin                   |
| Code EIR          | D02 C838          | D02 C838                 |
| Téléphone         | +353855351400     | +353855351401            |

#### Italie

|                   | Approuvé          | Refusé                   |
| ----------------- | ----------------- | ------------------------ |
| Date de naissance | 01-01-1980        | 01-01-1980               |
| Prénom            | Test              | Test                     |
| Nom               | Person-it         | Person-it                |
| E-mail            | customer@email.it | customer+denied@email.it |
| Code fiscal       | RSSBNC80A41H501B  | RSSBNC80A41H501B         |
| Rue               | Via Enrico Fermi  | Via Enrico Fermi         |
| Numéro de rue     | 150               | 150                      |
| Ville             | Rome              | Rome                     |
| Code postal       | 00146             | 00146                    |
| Téléphone         | +393339741231     | +393312232389            |

#### Pays-Bas

|                   | Approuvé          | Refusé                   |
| ----------------- | ----------------- | ------------------------ |
| Date de naissance | 10/07/1970        | 10/07/1970               |
| Prénom            | Test              | Test                     |
| Nom               | Person-nl         | Person-nl                |
| E-mail            | customer@email.nl | customer+denied@email.nl |
| Rue               | Osdorpplein       | Osdorpplein              |
| Numéro de rue     | 137               | 137                      |
| Ville             | Amsterdam         | Amsterdam                |
| Code postal       | 1068 SR           | 1068 SR                  |
| Téléphone         | +31689124321      | +31632167678             |

#### Nouvelle-Zélande

|                   | Approuvé                 | Refusé                   |
| ----------------- | ------------------------ | ------------------------ |
| Date de naissance | 10/07/1970               | 10/07/1970               |
| Prénom            | Test                     | Test                     |
| Nom               | Person-nz                | Person-nz                |
| Rue               | Mount Wellington Highway | Mount Wellington Highway |
| Numéro de rue     | 286                      | 286                      |
| Code postal       | 6011                     | 6011                     |
| Ville             | Auckland                 | Wellington               |
| Téléphone         | +6427555290              | +642993007712            |
| Adresse e-mail    | customer@email.nz        | customer+denied@email.nz |

#### Norvège

|                   | Approuvé                      | Refusé                   |
| ----------------- | ----------------------------- | ------------------------ |
| Date de naissance | 01-08-1970                    | 01-08-1970               |
| Prénom            | Jane                          | Test                     |
| Nom               | Test                          | Person-no                |
| E-mail            | customer@email.no             | customer+denied@email.no |
| Numéro personnel  | NO1087000571                  | NO1087000148             |
| Rue               | Edvard&nbsp;Munchs&nbsp;Plass | Sæffleberggate           |
| Numéro de rue     | 1                             | 56                       |
| Ville             | Oslo                          | Oslo                     |
| Code postal       | 0194                          | 0563                     |
| Téléphone         | +4740123456                   | +4740123457              |

#### Pologne

|                   | Approuvé          | Refusé                   |
| ----------------- | ----------------- | ------------------------ |
| Date de naissance | 05-05-1967        | 05-05-1967               |
| Prénom            | Test              | Test                     |
| Nom               | Person-pl         | Person-pl                |
| Rue               | Ul. Górczewska    | Ul. Górczewska           |
| Numéro de rue     | 124               | 124                      |
| Code postal       | 01-460            | 01-460                   |
| Ville             | Varsovie          | Varsovie                 |
| Téléphone         | +48795222223      | +48795223325             |
| E-mail            | customer@email.pl | customer+denied@email.pl |

#### Portugal

|                   | Approuvé                           | Refusé                             |
| ----------------- | ---------------------------------- | ---------------------------------- |
| Date de naissance | 10/07/1970                         | 10/07/1970                         |
| Prénom            | Test                               | Test                               |
| Nom               | Person-pt                          | Person-pt                          |
| Rue               | Avenida&nbsp;Dom&nbsp;João&nbsp;II | Avenida&nbsp;Dom&nbsp;João&nbsp;II |
| Numéro de rue     | 40                                 | 40                                 |
| Code postal       | 1990-094                           | 1990-094                           |
| Ville             | Lisbonne                           | Lisbonne                           |
| Téléphone         | +351935556731                      | +351915593837                      |
| E-mail            | customer@email.pt                  | customer+denied@email.pt           |

#### Roumanie

|                                         | Approuvé          | Refusé                   |
| --------------------------------------- | ----------------- | ------------------------ |
| Date de naissance                       | 25-12-1970        | 25-12-1970               |
| Prénom                                  | Test              | Test                     |
| Nom                                     | Person-ro         | Person-ro                |
| E-mail                                  | customer@email.ro | customer+denied@email.ro |
| Rue                                     | Drumul Taberei    | Drumul Taberei           |
| Numéro de rue                           | 35                | 35                       |
| Ville                                   | Bucarest          | Bucarest                 |
| Secteur                                 | Sectorul 6        | Sectorul 6               |
| Code postal                             | 061357            | 061357                   |
| Téléphone                               | +40741209876      | +40707127444             |
| Numéro d’identification personnel (CNP) | 1701225193558     |                          |

#### Espagne

|                   | Approuvé          | Refusé                   |
| ----------------- | ----------------- | ------------------------ |
| DNI/NIE           | 99999999R         | 99999999R                |
| Date de naissance | 10/07/1970        | 10/07/1970               |
| Prénom            | Test              | Test                     |
| Nom               | Person-es         | Person-es                |
| E-mail            | customer@email.es | customer+denied@email.es |
| Rue               | C. de Atocha      | C. de Atocha             |
| Numéro de rue     | 27                | 27                       |
| Ville             | Madrid            | Madrid                   |
| Code postal       | 28012             | 28012                    |
| Téléphone         | +34672563009      | +34682425101             |

#### Suède

|                   | Approuvé                     | Refusé                   |
| ----------------- | ---------------------------- | ------------------------ |
| Date de naissance | 21-03-1941                   | 28-10-1941               |
| Prénom            | Alice                        | Test                     |
| Nom               | Test                         | Person-se                |
| E-mail            | customer@email.se            | customer+denied@email.se |
| Rue               | Södra&nbsp;Blasieholmshamnen | Karlaplan                |
| Numéro de rue     | 2                            | 3                        |
| Ville             | Stockholm                    | Stockholm                |
| Code postal       | 11&nbsp;148                  | 11 460                   |
| Téléphone         | +46701740615                 | +46701740620             |

#### Suisse

|                   | Approuvé          | Refusé                   |
| ----------------- | ----------------- | ------------------------ |
| Date de naissance | 01-01-1990        | 01-01-2000               |
| Prénom            | Accepté           | Client                   |
| Nom               | Person-ch         | Person-ch                |
| Rue               | Augustinergasse   | Bahnhofstrasse           |
| Numéro de rue     | 2                 | 77                       |
| Code postal       | 4051              | 8001                     |
| Ville             | Bâle              | Zürich                   |
| Téléphone         | +41758680000      | +41758680001             |
| E-mail            | customer@email.ch | customer+denied@email.ch |

#### Royaume-Uni

|                   | Approuvé              | Refusé                   |
| ----------------- | --------------------- | ------------------------ |
| Date de naissance | 10/07/1970            | 10/07/1970               |
| Prénom            | Test                  | Test                     |
| Nom               | Person-uk             | Person-uk                |
| E-mail            | customer@email.uk     | customer+denied@email.uk |
| Rue               | New Burlington Street | New Burlington Street    |
| Numéro de rue     | 10                    | 10                       |
| Appartement       | Apt 214               | Apt 214                  |
| Code postal       | W1S&nbsp;3BE          | W1S&nbsp;3BE             |
| Ville             | Londres               | Londres                  |
| Téléphone         | +447755564318         | +447355505530            |

#### États-Unis

|                   | Approuvé          | Refusé                   |
| ----------------- | ----------------- | ------------------------ |
| Date de naissance | 07-10-1970        | 07-10-1970               |
| Prénom            | Test              | Test                     |
| Nom               | Person-us         | Person-us                |
| E-mail            | customer@email.us | customer+denied@email.us |
| Rue               | Amsterdam Ave     | Amsterdam Ave            |
| Numéro de rue     | 509               | 509                      |
| Ville             | New York          | New York                 |
| État              | New York          | New York                 |
| Code postal       | 10024-3941        | 10024-3941               |
| Téléphone         | +13106683312      | +13106354386             |

### Authentification à deux facteurs

Tout numéro à six chiffres forme un code d’authentification à deux facteurs valide. Utilisez `999999`pour que l’authentification échoue.

### Mode de remboursement

Dans le flux Klarna, vous pouvez utiliser les valeurs de test suivantes pour essayer divers types de remboursements&nbsp;:

| Type                    | Valeur                                                                                                       |
| ----------------------- | ------------------------------------------------------------------------------------------------------------ |
| Prélèvement automatique | DE11520513735120710131                                                                                       |
| Virement bancaire       | Banque de démonstration                                                                                      |
| Carte bancaire          | - Numéro&nbsp;: 4111 1111 1111 1111
  - CVV&nbsp;: 123
  - Date d’expiration&nbsp;: toute date future valide |
| Carte de débit          | - Numéro&nbsp;: 4012 8888 8888 1881
  - CVV&nbsp;: 123
  - Date d’expiration&nbsp;: toute date future valide |

## Optional: Utilisez l'Express Checkout Element avec Stripe Connect

Les plateformes *Connect* (Connect is Stripe's solution for multi-party businesses, such as marketplace or software platforms, to route payments between sellers, customers, and other recipients) qui créent des paiements directs ou ajoutent le token à un objet `Customer` sur le compte connecté doivent effectuer des actions supplémentaires.

> #### Utiliser l’API Accounts v2 pour représenter des clients
> 
> Si votre intégration utilise des [Accounts configurés par le client](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), remplacez les références `Customer` et événement dans les exemples de code par les références équivalentes de l’API Accounts v2. Pour plus d’informations, consultez la page [Représenter des clients avec des objets Account](https://docs.stripe.com/connect/use-accounts-as-customers.md).

1. Sur votre front-end, avant de créer le composant `ExpressCheckoutElement`, définissez l’option `stripeAccount` sur l’instance Stripe&nbsp;:

   ```javascript
   const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>', {
     apiVersion: "2026-03-25.dahlia",
     stripeAccount: '{{CONNECTED_ACCOUNT_ID}}',
   });
   ```

1. [Enregistrez tous les domaines](https://docs.stripe.com/payments/payment-methods/pmd-registration.md?dashboard-or-api=api#register-your-domain-while-using-connect) sur lesquels vous prévoyez d’afficher le composant Express Checkout Element.

## 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)
- [Collecter les informations de paiement avant de créer un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md)
- [Finaliser des paiements sur le serveur](https://docs.stripe.com/payments/finalize-payments-on-the-server.md)