# Configurer des paiements futurs à l'aide d'Elements et de Link

Enregistrez les informations de vos clients Link pour les débiter ultérieurement.

Ce guide vous explique comment accepter des paiements avec [Link](https://docs.stripe.com/payments/link.md) à l’aide de l’[API Setup Intents](https://docs.stripe.com/api/setup_intents.md) et soit du [composant Element Payment](https://docs.stripe.com/payments/payment-element.md), soit du [composant Element Contact Details](https://docs.stripe.com/payments/elements/contact-details-element.md).

Il existe trois manières d’obtenir l’adresse e-mail d’un client pour l’authentification ou l’inscription Link :

- **Transmettre une adresse e-mail :** vous pouvez transmettre une adresse e-mail au composant Payment Element à l’aide de [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues). Cette méthode est recommandée si vous recueillez déjà l’adresse e-mail ou le numéro de téléphone du client dans le tunnel de paiement.
- **Collecter une adresse e-mail :** vous pouvez collecter une adresse e-mail directement dans le composant Payment Element. Cette méthode est recommandée si vous ne recueillez d’adresse e-mail à aucune étape du tunnel de paiement.
- **Composant Element Contact Details :** vous pouvez utiliser le composant Element Contact Details pour créer un champ de saisie d’adresse e-mail unique pour la collecte de l’adresse e-mail et pour l’authentification Link. Nous recommandons cette méthode si vous utilisez le [composant Element Address](https://docs.stripe.com/elements/address-element.md).
![S'identifier ou s'inscrire auprès de Link directement dans le composant Payment Element au moment du paiement](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png)

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

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

Coding agents should install the Stripe CLI (`npm i -g @stripe/cli`) and run the command `stripe sandbox create --help` to provision an anonymous Stripe sandbox with working API keys. No account registration required.

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

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

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

#### Accounts v2

Pour configurer un moyen de paiement pour des paiements futurs, vous devez l’associer à un [Account](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer) configuré pour le client. Créez un objet `Account` lorsque votre client crée un compte auprès de votre entreprise.

```curl
curl -X POST https://api.stripe.com/v2/core/accounts \
  -H "Authorization: Bearer <<YOUR_SECRET_KEY>>" \
  -H "Stripe-Version: 2026-04-22.preview" \
  --json '{
    "contact_email": "jenny.rosen@example.com",
    "display_name": "Jenny Rosen",
    "identity": {
        "country": "us",
        "individual": {
            "given_name": "Jenny Rosen"
        }
    },
    "configuration": {
        "customer": {
            "capabilities": {
                "automatic_indirect_tax": {
                    "requested": true
                }
            }
        }
    },
    "include": [
        "configuration.customer",
        "identity"
    ]
  }'
```

#### Customers&nbsp;v1

Pour configurer un moyen de paiement pour des paiements futurs, vous devez l’associer à un *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Créez un objet `Customer` lorsque votre client crée un compte auprès de votre entreprise.

```curl
curl https://api.stripe.com/v1/customers \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "name=Jenny Rosen"
```

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

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

Un [SetupIntent](https://docs.stripe.com/api/setup_intents.md) est un objet qui représente votre intention, au cours d’une session, de configurer le moyen de paiement d’un client pour les paiements futurs. Il permet également de suivre l’état de la session. Sur votre serveur, créez un SetupIntent en spécifiant `link` et les autres moyens de paiement que vous voulez prendre en charge&nbsp;:

#### Accounts v2

```curl
curl https://api.stripe.com/v1/setup_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d "payment_method_types[]=card" \
  -d "payment_method_types[]=link"
```

#### Customers&nbsp;v1

```curl
curl https://api.stripe.com/v1/setup_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d "payment_method_types[]=card" \
  -d "payment_method_types[]=link"
```

Pour découvrir comment configurer d’autres moyens de paiement, consultez le guide [Configurer des paiements futurs](https://docs.stripe.com/payments/save-and-reuse.md).

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

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

#### Application monopage

Récupérez la clé secrète du client à partir d’un endpoint sur votre serveur, à l’aide de la fonction `fetch` du navigateur. Cette approche est recommandée si votre côté client est une application d’une seule page, en particulier si elle repose sur un framework front-end moderne tel que React. Créez l’endpoint de serveur qui gère la clé secrète du client&nbsp;:

#### Ruby

```ruby
get '/secret' do
  intent = # ... Create or retrieve the SetupIntent
  {client_secret: intent.client_secret}.to_json
end
```

Récupérez ensuite la clé secrète du client à l’aide JavaScript côté client&nbsp;:

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

#### Rendu côté serveur

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

Ajoutez le [client_secret](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) à votre formulaire de paiement. Dans votre code côté serveur, récupérez la clé secrète du client à partir du SetupIntent&nbsp;:

#### Ruby

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

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

## Collecter les adresses e-mail des clients

Link authentifie un client à l’aide de son adresse e-mail. En fonction de votre tunnel de paiement, vous disposez des options suivantes&nbsp;: transmettre une adresse e-mail au composant Element Payment, la collecter directement dans le composant Element Payment ou utiliser le composant Element Contact Details. Stripe vous recommande, si possible, de transmettre l’adresse e-mail du client au composant Element Payment.

#### Transmettre une adresse e-mail

Si *l’un* de ces cas s’applique à votre situation&nbsp;:

- Vous connaissez l’adresse e-mail de votre client avant qu’il n’arrive sur votre page de paiement (grâce à son profil client par exemple).
- Vous n’avez pas besoin de collecter l’adresse de livraison de votre client.
- Vous préférez utiliser votre propre champ de saisie d’adresse e-mail, que vous placez avant le formulaire de paiement.

Ensuite, intégrez Link en transmettant l’adresse e-mail du client au composant Element Payment, ce qui accélère le paiement en déclenchant le flux d’authentification Link dès que votre client atteint l’étape de paiement. Cette option intègre un élément, le composant Element Payment.
![Aperçu de l'utilisation de Link dans le composant Payment Element par un utilisateur non inscrit.](https://b.stripecdn.com/docs-statics-srv/assets/lape-unregistered-user.293e19b8cc97c58e2c7dc22f8ef8f75b.png)

Link saisit automatiquement l’adresse e-mail collectée dans le formulaire de paiement pour accélérer le processus de paiement.
![Aperçu de l'utilisation de Link dans le composant Payment Element par un utilisateur inscrit.](https://b.stripecdn.com/docs-statics-srv/assets/collect-email-before-returning-user.d6dee1a891e3068b1c1892edefa9c01f.png)

Pour un client déjà inscrit, Link envoie une invite d’authentification.

Dans ce flux, vous continuez à collecter l’adresse e-mail dans votre propre champ de formulaire *avant* que le client n’arrive à l’étape de paiement, puis vous transmettez l’adresse e-mail au composant Element Payment. Le composant Element Payment authentifie le client à l’étape du paiement et affiche soit les informations de paiement du client enregistrées dans son compte Link, soit le formulaire de création du compte Link après la saisie des informations de la carte. Voici à quoi cela ressemble&nbsp;:
Integrate Link using the Payment Element (See full diagram at https://docs.stripe.com/payments/link/save-and-reuse)
Ce type d’intégration ne collecte pas l’adresse de livraison du client. Si vous devez collecter cette adresse, procédez à l’intégration de Link à l’aide des composants Element Contact Details, Address et Payment.

#### Collecter une adresse e-mail

L’authentification Link dans le composant Element Payment permet à vos clients de saisir une adresse e-mail directement dans le composant Element Payment sans procéder à une intégration supplémentaire.

Dans ce flux, votre client saisit son adresse e-mail pour s’identifier ou s’inscrit directement à Link lors du paiement à l’aide du composant Element Payment. Si un client ne s’est pas inscrit à Link et qu’il choisit un moyen de paiement pris en charge dans le composant Element Payment, il est invité à enregistrer ses informations à l’aide de Link. Link saisit automatiquement les informations de paiement des clients déjà inscrits.

#### Utilisez le composant Element Contact Details

Si *l’un* de ces cas s’applique à votre situation&nbsp;:

- Vous voulez un composant unique et optimisé pour la collecte des adresses e-mail et l’authentification Link.
- Vous devez collecter l’adresse de livraison de votre client.

Utilisez le flux d’intégration qui implémente les composants Element Contact Details, Payment et Address (facultatif).

Une page de paiement sur laquelle Link est activé comprend le composant Element Contact Details, suivi du composant Element Address et enfin du composant Element Payment. Vous pouvez également afficher le composant Element Contact Details sur des pages distinctes, dans le même ordre, pour les tunnels de paiement multipages.
![Créer un formulaire de paiement à l'aide de plusieurs composants Elements](https://b.stripecdn.com/docs-statics-srv/assets/link-with-elements.d52f05825c982aaf84a4ad1e9bb422f3.png)

Créer un formulaire de paiement à l’aide de plusieurs composants Elements

L’intégration fonctionne comme suit&nbsp;:
A diagram describing how to integrate Link using the Contact Details Element (See full diagram at https://docs.stripe.com/payments/link/save-and-reuse)
## Configurer votre formulaire de paiement [Côté client]

Vous pouvez désormais personnaliser votre formulaire de paiement grâce aux composants d’interface utilisateur préconfigurés d’Elements. Pour que votre intégration fonctionne, l’adresse de votre page de paiement doit commencer par `https://` et non par `http://`. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS. [Activez HTTPS](https://docs.stripe.com/security/guide.md#tls) lorsque vous êtes prêt à accepter des paiements en mode production.

#### Transmettre une adresse e-mail

Le composant Payment Element affiche un formulaire de contact client prérempli comprenant le numéro de téléphone et l’adresse e-mail, ainsi qu’un formulaire dynamique dans lequel votre client choisit un moyen de paiement. Le formulaire collecte automatiquement toutes les informations de paiement nécessaires en fonction du moyen de paiement sélectionné par le client.

En outre, le composant Element Payment gère l’affichage des moyens de paiement enregistrés avec Link pour les clients authentifiés.

#### React

### Configurer Stripe Elements

Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm&nbsp;:

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

### Créer le formulaire de paiement

Sur votre page de paiement, wrappez votre formulaire de paiement avec le composant `Elements`, et transmettez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret).

Si vous disposez d’autres informations sur le client, transmettez-les à l’objet `defaultValues.billingDetails` de `PaymentElement`. Le pré-remplissage du plus d’informations possible, simplifie Link la création et la réutilisation des comptes de vos clients. Vous pouvez également transmettre l’[objet Appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), qui permet d’adapter les Elements au design de votre site.

Affichez ensuite le `PaymentElement` dans votre formulaire de paiement. Nous vous recommandons de transmettre au moins l’adresse e-mail du client dans [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) afin de préremplir leurs données pour Link.

```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
  Elements,
  PaymentElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};

const CheckoutPage = ({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  return (
    <form>
      <h3>Payment</h3>

      // Prefill customer data using the defaultValues option. Passing in the email
      // is required for this integration. The other fields are optional.
      <PaymentElement
        options={{
          defaultValues: {
            billingDetails: {
              email: 'foo@bar.com',
              name: 'John Doe',
              phone: '888-888-8888',
            }
          }
        }}
      />
      <button type="submit">Submit</button>
    </form>
  );
}
```

#### HTML + JS

### Configurer Stripe Elements

Incluez le script Stripe.js sur votre page de paiement en l’ajoutant au `head` de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour rester conforme à la norme 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 l’[objet Stripe](https://docs.stripe.com/js.md#stripe-function) en indiquant comme premier paramètre votre [clé API](https://docs.stripe.com/keys.md) publiable&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>>');
```

### Ajoutez Link Elements à votre page de paiement

Dans votre page de paiement, créez des nœuds DOM vides avec des ID uniques pour y afficher les Elements&nbsp;:

```html
<form id="payment-form">
  <h3>Payment</h3>
  <div id="payment-element"></div>

  <button id="submit">Submit</button>
</form>
```

Lors du chargement du formulaire que vous venez de configurer, créez un nouveau groupe Elements et transmettez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Vous pouvez également transmettre l’[objet Appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), qui permet d’adapter les Elements au design de votre site.

Si vous avez d’autres informations clients, transmettez-les à l’objet `defaultValues.billingDetails` pour le `PaymentElement`. Préremplir autant d’informations que possible simplifie la création et la réutilisation du compte {&nbsp;% $lien.brand_name %} pour vos clients.

Enfin, créez une instance de chaque composant Element et montez-la sur le nœud DOM correspondant&nbsp;:

```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };

// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance});

// Prefill customer data using the defaultValues option. Passing in the email
// is required for this integration. The other fields are optional.
const paymentElement = elements.create('payment', {
  defaultValues: {
    billingDetails: {
      email: 'foo@bar.com',
      name: 'John Doe',
      phone: '888-888-8888',
    },
  },
});

// Mount the Elements to their corresponding DOM node
paymentElement.mount("#payment-element");
```

#### Collecter une adresse e-mail

Le composant Payment Element affiche un formulaire de contact client prérempli comprenant le numéro de téléphone et l’adresse e-mail, ainsi qu’un formulaire dynamique dans lequel votre client choisit un moyen de paiement. Le formulaire collecte automatiquement toutes les informations de paiement nécessaires en fonction du moyen de paiement sélectionné par le client.

De plus, le composant Element Payment gère l’affichage des moyens de paiement enregistrés avec Link pour les clients authentifiés. Pour cette intégration, vous devez garder Link activé dans vos [paramètres de moyens de paiement](https://dashboard.stripe.com/settings/payment_methods).

#### React

### Configurer Stripe Elements

Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm&nbsp;:

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

### Créer le formulaire de paiement

Sur votre page de paiement, wrappez votre formulaire de paiement avec le composant `Elements`, et transmettez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret).

Si vous disposez d’autres informations sur le client, transmettez-les à l’objet `defaultValues.billingDetails` de `PaymentElement`. Le pré-remplissage du plus d’informations possible, simplifie Link la création et la réutilisation des comptes de vos clients. Vous pouvez également transmettre l’[objet Appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), qui permet d’adapter les Elements au design de votre site.

Affichez ensuite le `PaymentElement` dans votre formulaire de paiement. Nous vous recommandons de transmettre au moins l’adresse e-mail du client dans [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) afin de préremplir leurs données pour Link.

```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
  Elements,
  PaymentElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};

const CheckoutPage = ({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  return (
    <form>
      <h3>Payment</h3>

      // Create the Payment Element
      <PaymentElement/>
      <button type="submit">Submit</button>
    </form>
  );
}
```

#### HTML + JS

### Configurer Stripe Elements

Incluez le script Stripe.js sur votre page de paiement en l’ajoutant au `head` de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour rester conforme à la norme 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 l’[objet Stripe](https://docs.stripe.com/js.md#stripe-function) en indiquant comme premier paramètre votre [clé API](https://docs.stripe.com/keys.md) publiable&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>>');
```

### Ajoutez Link Elements à votre page de paiement

Dans votre page de paiement, créez des nœuds DOM vides avec des ID uniques pour y afficher les Elements&nbsp;:

```html
<form id="payment-form">
  <h3>Payment</h3>
  <div id="payment-element"></div>

  <button id="submit">Submit</button>
</form>
```

Lors du chargement du formulaire que vous venez de configurer, créez un nouveau groupe Elements et transmettez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Vous pouvez également transmettre l’[objet Appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), qui permet d’adapter les Elements au design de votre site.

Si vous avez d’autres informations clients, transmettez-les à l’objet `defaultValues.billingDetails` pour le `PaymentElement`. Préremplir autant d’informations que possible simplifie la création et la réutilisation du compte {&nbsp;% $lien.brand_name %} pour vos clients.

Enfin, créez une instance de chaque composant Element et montez-la sur le nœud DOM correspondant&nbsp;:

```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };

// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance});

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

// Mount the Elements to their corresponding DOM node
paymentElement.mount("#payment-element");
```

#### Utilisez le composant Element Contact Details

Le composant Element Contact Details affiche un champ de saisie dédié à l’adresse e-mail. Lorsque Link associe l’adresse e-mail d’un client à un compte Link existant, il envoie au client un code unique sécurisé sur son téléphone pour l’authentification. Si l’authentification du client aboutit, Stripe affiche automatiquement les adresses et les moyens de paiement enregistrés avec Link pour qu’il puisse les utiliser.

Cette intégration crée également le composant Element Payment, qui affiche un formulaire dynamique permettant à votre client de choisir un type de moyen de paiement. Ce formulaire collecte automatiquement toutes les informations de paiement nécessaires en fonction du type de moyen de paiement sélectionné par le client. Le composant Element Payment gère également l’affichage des moyens de paiement enregistrés avec Link pour les clients authentifiés.

#### React

### Configurer Stripe Elements

Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm.

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

Sur votre page de paiement, wrappez votre formulaire de paiement avec le composant `Elements` et transmettez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) obtenue à l’[étape précédente](https://docs.stripe.com/payments/link/save-and-reuse.md#web-create-intent). Si vous avez déjà collecté l’adresse e-mail du client ailleurs dans le formulaire, remplacez le champ de saisie existant par le composant `ContactDetailsElement​`.

Si vous ne collectez pas l’adresse e-mail, ajoutez le `ContactDetailsElement` à votre tunnel de paiement. Vous devez placer le `ContactDetailsElement` avant le `ShippingAddressElement` (facultatif si vous collectez des adresses de livraison) et le `PaymentElement` pour {&nbsp;% $link.brand_name %} pour remplir automatiquement les données sauvegardées avec {&nbsp;% $link.brand_name %} pour votre client dans le `ShippingAddressElement` et le `PaymentElement`. Vous pouvez également définir l’[option d’apparence](https://docs.stripe.com/elements/appearance-api.md), en personnalisant les composants Element pour qu’ils correspondent au design de votre site.

Si vous avez l’adresse e-mail du client, transmettez-la à l’option `defaultValues` du `ContactDetailsElement`. Cela préremplit leur adresse e-mail et lance le processus d’authentification {&nbsp;% $lien.brand_name %}.

Si vous avez d’autres informations clients, transmettez-les à l’objet `defaultValues.billingDetails` pour le `PaymentElement`. Préremplir autant d’informations que possible simplifie la création et la réutilisation du compte {&nbsp;% $lien.brand_name %} pour vos clients.

Puis, affichez les composants `ContactDetailsElement` et `PaymentElement` dans votre formulaire de paiement&nbsp;:

```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
  Elements,
  ContactDetailsElement,
  PaymentElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

const CheckoutPage = ({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance, loader}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  return (
    <form>
      <h3>Contact info</h3>
      <ContactDetailsElement
        // Optional prop for prefilling customer information
        options={{
          defaultValues: {
            email: 'foo@bar.com',
          },
        }}
      />
      <h3>Payment</h3>
      <PaymentElement
        // Optional prop for prefilling customer information
        options={{
          defaultValues: {
            billingDetails: {
              name: 'John Doe',
              phone: '888-888-8888',
            },
          },
        }}
      />
      <button type="submit">Submit</button>
    </form>
  );
}
```

Les `ContactDetailsElement`, `PaymentElement` et `ShippingAddressElement` ne doivent pas nécessairement figurer sur la même page. Si votre processus prévoit que les coordonnées du client, les informations de livraison et les informations de paiement s’affichent au client à des étapes distinctes, vous pouvez afficher chaque composant Element à l’étape ou sur la page appropriée. Intégrez le `ContactDetailsElement` en tant que formulaire de saisie de l’adresse e-mail à l’étape de collecte des coordonnées pour vous assurer que le client tire pleinement parti des fonctionnalités de remplissage automatique de la livraison et du paiement offertes par Link.

Si vous collectez l’adresse e-mail de votre client à l’aide du composant Element Contact Details au début du tunnel de paiement, vous n’avez pas besoin de l’afficher de nouveau sur la page de livraison ou de paiement.

### Récupérer une adresse e-mail

Vous pouvez récupérer l’adresse e-mail à l’aide de la propriété `onChange` dans le composant `ContactDetailsElement`. Le gestionnaire `onChange` se déclenche dès que l’utilisateur met à jour le champ de l’adresse e-mail, ou lorsque l’adresse e-mail enregistrée d’un client est remplie automatiquement.

```jsx
<ContactDetailsElement onChange={(event) => {
  setEmail(event.value.email);
}} />
```

### Saisir automatiquement l’adresse e-mail d’un client

Le composant Element Contact Details accepte une adresse e-mail. Fournir l’adresse e-mail d’un client déclenche le flux d’authentification Link dès qu’il accède à la page de paiement à l’aide de l’option `defaultValues`.

```jsx
<ContactDetailsElement options={{defaultValues: {email: 'foo@bar.com'}}}/>
```

#### HTML + JS

### Configurer Stripe&nbsp;Elements

Incluez le script Stripe.js sur votre page de paiement en l’ajoutant au `head` de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour rester conforme à la norme 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 l’[objet Stripe](https://docs.stripe.com/js.md#stripe-function) en indiquant comme premier&nbsp;paramètre votre [clé API](https://docs.stripe.com/keys.md) publiable&nbsp;:

```javascript
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');
```

### Ajouter Link Elements à votre page de paiement

Dans votre page de paiement, créez des nœuds DOM vides avec des ID uniques pour y afficher les Elements&nbsp;:

```html
<form id="payment-form">
  <h3>Contact info</h3>
  <div id="contact-details-element"></div>

  <h3>Payment</h3>
  <div id="payment-element"></div>

  <button id="submit">Submit</button>
</form>
```

Lors du chargement du formulaire que vous venez de configurer, créez un nouveau groupe Elements et transmettez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Si vous avez déjà collecté l’adresse e-mail du client dans votre formulaire de paiement, remplacez le champ de saisie existant par `contactDetailsElement`.

Si vous ne collectez pas l’adresse e-mail, ajoutez `contactDetailsElement` à votre tunnel de paiement avant `shippingAddress` (facultatif si vous collectez les adresses de livraison). Ajoutez `PaymentElement` pour que Link remplisse automatiquement les informations enregistrées avec Link pour votre client dans les champs `shippingAddress` et `PaymentElement`. Vous pouvez également transmettre l’[objet apparence](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance), qui permet d’adapter les composants Element au design de votre site.

Si vous disposez de l’adresse e-mail du client, transmettez-la à l’option `defaultValues` de `contactDetailsElement` pour la saisir automatiquement et lancer le traitement d’authentification Link. Si vous disposez d’autres informations sur le client, transmettez-les à l’objet `defaultValues.billingDetails` de `PaymentElement`. En préremplissant autant d’informations que possible, vous simplifiez la création et la réutilisation du compte Link pour vos clients.

Enfin, créez une instance de chaque composant Element et montez-la sur le nœud DOM correspondant&nbsp;:

```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

// Create an elements group from the Stripe instance, passing the clientSecret (obtained in step 2), loader, and appearance (optional).
const elements = stripe.elements({clientSecret, appearance, loader});

// Create Element instances
const contactDetailsElement = elements.create("contactDetails");
// Passing in defaultValues is optional, but useful if you want to prefill consumer information to
// ease consumer experience.
const paymentElement = elements.create('payment', {
  defaultValues: {
    billingDetails: {
      name: 'John Doe',
      phone: '888-888-8888',
    },
  },
});

// Mount the Elements to their corresponding DOM node
contactDetailsElement.mount("#contact-details-element");
paymentElement.mount("#payment-element");
```

`contactDetailsElement` affiche un champ destiné à la saisie de l’adresse e-mail. Lorsque Link associe l’adresse e-mail d’un client à un compte Link existant, le client reçoit un code à usage unique sécurisé sur son téléphone pour s’identifier. Si l’identification du client aboutit, Stripe affiche automatiquement ses adresses et moyens de paiement préalablement enregistrés sur Link afin qu’il puisse les utiliser.

Le `PaymentElement` affiche un formulaire dynamique qui permet à votre client de choisir un type de moyen de paiement. Ce formulaire collecte automatiquement toutes les informations de paiement nécessaires pour le type de moyen de paiement sélectionné par le client. Le `PaymentElement` gère également l’affichage des moyens de paiement enregistrés avec Link pour les clients identifiés.

Les composants Element&nbsp;Contact Details, Payment et Shipping Address ne doivent pas nécessairement figurer sur la même page. Si vous présentez les informations de contact, de livraison et de paiement au client à des étapes distinctes du tunnel de paiement, vous pouvez afficher chaque composant à l’étape ou sur la page qui convient. Intégrez le composant Element&nbsp;Contact Details en tant que formulaire de saisie de l’adresse e-mail à l’étape de collecte des coordonnées afin que le client puisse tirer pleinement parti des fonctionnalités de remplissage automatique offertes par Link.

Si vous collectez l’adresse e-mail de votre client à l’aide du composant Element Contact Details au début du tunnel de paiement, vous n’avez pas besoin de l’afficher de nouveau sur la page de livraison ou de paiement.

### Récupérer l’adresse e-mail

Vous pouvez récupérer l’adresse e-mail à l’aide de la propriété `onChange` dans le composant `contactDetailsElement`. Le gestionnaire `onChange` se déclenche dès que l’utilisateur met à jour le champ de l’adresse e-mail, ou lorsque l’adresse e-mail enregistrée d’un client est remplie automatiquement.

```javascript
contactDetailsElement.on('change', (event) => {
  const email = event.value.email;
});
```

### Remplir automatiquement l’adresse e-mail d’un client

Le composant Element Contact Details accepte une adresse e-mail. Fournir l’adresse e-mail d’un client lance le flux d’authentification Link dès qu’il accède à la page de paiement à l’aide de l’option `defaultValues`.

```javascript
// Create contactDetails element with the defaultValues option
const contactDetailsElement = elements.create("contactDetails", {defaultValues: {email: "foo@bar.com"}});

// Mount the Element to its corresponding DOM node
contactDetailsElement.mount("#contact-details-element");
```

## Optional: Préremplir les données client supplémentaires [Côté client]

Le cas échéant, le remplissage automatique des informations client simplifie le processus de paiement et réduit la saisie manuelle des données.

#### Transmettre une adresse e-mail

Le composant Payment Element accepte un objet `defaultValues.billingDetails` qui vous permet de remplir automatiquement le nom et le numéro de téléphone d’un client ainsi que son adresse e-mail et son adresse de livraison. En préremplissant automatiquement autant d’informations que possible sur votre client, vous simplifiezLink la création et la réutilisation de ses comptes.
![Informations préremplies dans le formulaire d'inscription à Link.](https://b.stripecdn.com/docs-statics-srv/assets/link-prefill-pe-new-user.aad0d37d3e3698f1aab307d020b95f90.png)

Remplir automatiquement l’adresse e-mail, le numéro de téléphone et le nom de votre client pour simplifier le processus d’inscription à Link

Vous pouvez fournir les valeurs suivantes à l’objet `defaultValues.billingDetails`&nbsp;:

| Valeur    | Obligatoire | Format                                                                                   |
| --------- | ----------- | ---------------------------------------------------------------------------------------- |
| `email`   | Obligatoire | chaîne                                                                                   |
| `name`    | Facultatif  | chaîne                                                                                   |
| `phone`   | Facultatif  | chaîne                                                                                   |
| `address` | Facultatif  | Objet JSON avec les champs `postal_code` et `country`. Tous les champs sont des chaînes. |

La transmission du paramètre `defaultValues.billingDetails` au composant Payment Element varie selon que vous collectez les informations sur une page distincte avant le composant Payment Element ou sur la même page.

#### Avant le composant Element Payment

Si vous collectez les informations sur une page distincte avant le Payment Element, vous pouvez remplir automatiquement les valeurs en transmettant `defaultValues.billingDetails` lorsque vous créez le Payment Element&nbsp;:

#### React

```jsx
  <PaymentElement
    options={{
      defaultValues: {
        billingDetails: {
          email: 'johnd@domain.com',
          name: 'John Doe',
          phone: '888-888-8888',
          address: {
            postal_code: '10001',
            country: 'US',
          }
        },
      },
    }}
  />;
```

#### HTML + JS

```javascript
const paymentElement = elements.create('payment', {
  defaultValues: {
    billingDetails: {
      email: 'johnd@domain.com',
      name: 'John Doe',
      phone: '888-888-8888',
      address: {
        postal_code: '10001',
        country: 'US',
      },
    },
  },
});

// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
```

#### Même page que le composant Payment Element

Si vous collectez les informations sur la même page que le Payment Element, vous pouvez remplir automatiquement les valeurs en mettant à jour le Payment Element à l’aide de `defaultValues.billingDetails`.

```javascript
const paymentElement = elements.create('payment')
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");

function updateValues() {
  paymentElement.update({
    defaultValues: {
      billingDetails: {
        email: document.getElementById('email').value, // Or whichever ID used for your fields
        name: document.getElementById('name').value,
        phone: document.getElementById('phone').value,
        address: {
          postal_code: document.getElementById('postal_code').value,
          country: document.getElementById('country').value,
        },
      },
    },
  });
}

const yourCollectionFieldIds = [
  'name',
  'email',
  'phone',
  'country',
  'postal_code',
];
// We recommend updating defaultValues only onBlur
yourCollectionFields.forEach((key) => {
  document.getElementById(key).onblur = function() {updateValues()};
});
```

#### Utilisez le composant Element Contact Details

Si vous utilisez le composant Element Contact Details, ajoutez l’objet `defaultValues.billingDetails` au composant Element Payment pour préremplir le nom du client et son numéro de téléphone, ainsi que ses adresses de livraison. En préremplissant autant d’informations relatives à votre client que possible, vous simplifiez le processus de création et de réutilisation de son compte Link.
![Informations préremplies dans le formulaire d’inscription à {% $link.brand_name %}.](https://b.stripecdn.com/docs-statics-srv/assets/link-prefill-cde-new-user.aa6e5022c718b22857f543fcaad20705.png)

Remplir automatiquement l’adresse e-mail, le numéro de téléphone et le nom de votre client pour simplifier le processus d’inscription à Link

Vous pouvez fournir les valeurs suivantes à l’objet `defaultValues.billingDetails`&nbsp;:

| Valeur    | Obligatoire | Format                                                                                   |
| --------- | ----------- | ---------------------------------------------------------------------------------------- |
| `name`    | Facultatif  | chaîne                                                                                   |
| `phone`   | Facultatif  | chaîne                                                                                   |
| `address` | Facultatif  | Objet JSON avec les champs `postal_code` et `country`. Tous les champs sont des chaînes. |

Vous trouverez ci-après des exemples de Payment Element dont l’ensemble des valeurs ont été renseignées automatiquement&nbsp;:

#### React

```jsx
<PaymentElement
  options={{
    defaultValues: {
      billingDetails: {
        name: 'John Doe',
        phone: '888-888-8888',
        address: {
          postal_code: '10001',
          country: 'US',
        }
      },
    },
  }}
/>;
```

#### HTML + JS

```javascript
const paymentElement = elements.create('payment', {
  defaultValues: {
    billingDetails: {
      name: 'John Doe',
      phone: '888-888-8888',
      address: {
        postal_code: '10001',
        country: 'US',
      },
    },
  },
});

// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
```

## Optional: Collecter les adresses de livraison [Côté client]

#### Transmettre une adresse e-mail

Cette option d’intégration ne collecte pas l’adresse de livraison du client. Si vous devez collecter cette information, intégrez Link en utilisant les composants Element Contact Details, Address et Payment, comme indiqué dans les étapes [Utiliser le composant Element Contact Details](https://docs.stripe.com/payments/link/add-link-elements-integration.md#collect-shipping).

#### Utilisez le composant Element Contact Details

#### React

Pour collecter des adresses, créez un nœud DOM vide pour l’affichage du [composant Element Address](https://docs.stripe.com/elements/address-element.md). Ce dernier doit être affiché après le composant Element Contact Details afin que Link puisse remplir automatiquement l’adresse enregistrée d’un client&nbsp;:

```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
  Elements,
  ContactDetailsElement,AddressElement,
  PaymentElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

const CheckoutPage = ({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance, loader}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  return (
    <form>
      <h3>Contact info</h3>
      <ContactDetailsElement /><h3>Shipping</h3>
      <AddressElement options={{mode: 'shipping', allowedCountries: ['US']}} />
      <h3>Payment</h3>
      <PaymentElement />
      <button type="submit">Submit</button>
    </form>
  );
}
```

Affichez l’`AddressElement` avant le `PaymentElement`. En effet, celui-ci détecte de manière dynamique l’adresse collectée par l’`AddressElement`, en masquant les champs inutiles et en collectant des données d’adresse de facturation supplémentaires si nécessaire.

### Récupérer les adresses

L’`AddressElement` transmet automatiquement l’adresse de livraison lorsque le client effectue le paiement, mais vous pouvez également récupérer l’adresse sur le front-end à l’aide de la propriété `onChange`. Le gestionnaire `onChange` envoie un événement dès que l’utilisateur modifie l’un des champs de l’Address Element ou qu’il sélectionne une adresses enregistrée&nbsp;:

```jsx
<AddressElement onChange={(event) => {
  setAddressState(event.value);
}} />
```

### Pré-remplir une adresse de livraison

Utilisez [defaultValues](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-defaultValues) pour préremplir les informations d’adresse et permettre à vos clients de payer plus rapidement.

```jsx
<AddressElement options={{
  mode: 'shipping',
  defaultValues: {
    name: 'Jane Doe',
    address: {
      line1: '354 Oyster Point Blvd',
      line2: '',
      city: 'South San Francisco',
      state: 'CA',
      postal_code: '94080',
      country: 'US',
    }
  }
}}>
```

#### HTML + JS

Le [composant Element Address](https://docs.stripe.com/elements/address-element.md) vous permet de collecter des adresses de livraison ou de facturation. Créez un nœud DOM vide pour le composant Element Address. Affichez-le après le composant Element Contact Details&nbsp;:

```html
<form id="payment-form">
  <h3>Contact info</h3>
  <div id="contact-details-element"></div><h3>Shipping</h3>
  <div id="address-element"></div>

  <h3>Payment</h3>
  <div id="payment-element"></div>

  <button type="submit">Submit</button>
</form>
```

Créez ensuite une instance du composant Element Address et intégrez-la au nœud DOM&nbsp;:

```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance, loader});

// Create Element instances
const contactDetailsElement = elements.create("contactDetails");const addressElement = elements.create("address", {
  mode: 'shipping',
  allowedCountries: ['US']
});
const paymentElement = elements.create("payment");

// Mount the Elements to their corresponding DOM node
contactDetailsElement.mount("#contact-details-element");addressElement.mount("#address-element");
paymentElement.mount("#payment-element");
```

Affichez l’Address Element avant le Payment Element. En effet, celui-ci détecte de manière dynamique l’adresse collectée par l’Address Element, en masquant les champs inutiles et en collectant des données d’adresse de facturation supplémentaires si nécessaire.

### Récupérer les adresses

Le composant Element Address transmet automatiquement l’adresse de livraison lorsque le client effectue un paiement, mais vous pouvez également récupérer l’adresse sur le front-end à l’aide de l’événement `change`. L’événement `change` est envoyé quand l’utilisateur modifie l’un des champs du composant Element Address ou sélectionne des adresses enregistrées&nbsp;:

```javascript
addressElement.on('change', (event: AddressChangeEvent) => {
  const address = event.value;
})
```

### Pré-remplir une adresse de livraison

Utilisez [defaultValues](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-defaultValues) pour préremplir les informations d’adresse et permettre à vos clients de payer plus rapidement.

```javascript
// Create addressElement with the defaultValues option
const addressElement = elements.create("address", {
  mode: 'shipping',
  defaultValues: {
    name: 'Jane Doe',
    address: {
      line1: '354 Oyster Point Blvd',
      line2: '',
      city: 'South San Francisco',
      state: 'CA',
      postal_code: '94080',
      country: 'US',
    }
  }
});

// Mount the Element to its corresponding DOM node
addressElement.mount("#address-element");
```

## Optional: Personnaliser l'apparence [Côté client]

Après avoir ajouté ces Elements à votre page, vous pouvez personnaliser leur [apparence](https://docs.stripe.com/elements/appearance-api.md#theme) pour qu’ils s’intègrent harmonieusement au reste du design&nbsp;:
![Personnalisez l'apparence de vos Elements](https://b.stripecdn.com/docs-statics-srv/assets/appearance_example.e076cc750983bf552baf26c305e7fc90.png)

Personnalisez l’apparence de vos Elements

## Envoyer le SetupIntent [Côté client]

Utilisez [stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup) pour finaliser la configuration avec les informations que vous avez collectées. Fournissez une [return_url](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-return_url) à cette fonction afin que Stripe puisse rediriger les utilisateurs après la finalisation de la configuration. Lorsqu’un paiement est réussi, Stripe redirige immédiatement les paiements Link et par carte bancaire vers la `return_url`.

#### React

```jsx
import {loadStripe} from "@stripe/stripe-js";
import {useStripe,
  useElements,
  Elements,
  LinkAuthenticationElement,
  PaymentElement,
  // If collecting shipping
  AddressElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

const appearance = {/* ... */};

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

const CheckoutPage =({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance, loader}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {const stripe = useStripe();
  const elements = useElements();
const handleSubmit = async (event) => {
    event.preventDefault();

    const {error} = await stripe.confirmSetup({
      elements,
      confirmParams: {
        return_url: "https://example.com/order/123/complete",
      },
    });

    if (error) {
      // handle error
    }
  };

  return (<form onSubmit={handleSubmit}>
      <h3>Contact info</h3>
      <LinkAuthenticationElement />
      {/* If collecting shipping */}
      <h3>Shipping</h3>
      <AddressElement options={{mode: 'shipping', allowedCountries: ['US']}} />
      <h3>Payment</h3>
      <PaymentElement />

      <button type="submit">Submit</button>
    </form>
  );
}
```

#### HTML + JS

```javascript
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

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

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

  const {error} = await stripe.confirmSetup({
    elements,
    confirmParams: {
      return_url: "https://example.com/order/123/complete",
    }
  });

  if (error) {
    // Show error to your customer (for example, payment details incomplete)
    console.log(error.message);
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

## Débiter ultérieurement le moyen de paiement enregistré [Côté serveur]

#### Accounts v2

Lorsque vous êtes prêt à facturer votre client, utilisez les identifiants `Account` et `PaymentMethod` pour créer un `PaymentIntent`.

Commencez par répertorier les moyens de paiement associés à votre client, puis sélectionnez-en un à utiliser.

```curl
curl -G https://api.stripe.com/v1/payment_methods \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d type=link
```

#### Customers&nbsp;v1

Lorsque vous êtes prêt à facturer votre client, utilisez les identifiants `Customer` et `PaymentMethod` pour créer un `PaymentIntent`.

Commencez par répertorier les moyens de paiement associés à votre client, puis sélectionnez-en un à utiliser.

```curl
curl -G https://api.stripe.com/v1/payment_methods \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d type=link
```

Ensuite, créez un `PaymentIntent` avec les paramètres suivants&nbsp;:

- Définissez [amount](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount) et [currency](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency) en fonction du paiement.
- Définissez [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) sur true, ce qui déclenche la confirmation immédiatement lors de la création du `PaymentIntent`.
- Définissez [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) sur l’identifiant du `PaymentMethod`.
- Définissez [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) sur l’identifiant du `Account`, ou définissez [customer](https://docs.stripe.com/api.md#create_payment_intent-customer) sur l’identifiant du `Customer`.
- Définissez [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) sur true. Cela entraîne l’envoi d’une erreur par le `PaymentIntent` si une authentification est requise alors que votre client n’utilise pas activement votre site ou votre application.

#### Accounts&nbsp;v2

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]=true" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  --data-urlencode "return_url=https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true
```

#### Customers&nbsp;v1

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]=true" \
  -d "customer={{CUSTOMER_ID}}" \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  --data-urlencode "return_url=https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true
```

## Tester l'intégration

> 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é |

Pour tester des moyens de paiement spécifiques, consultez les [exemples de tests du composant Payment&nbsp;Element](https://docs.stripe.com/payments/accept-a-payment.md?platform=web#additional-testing-resources).

### Sources de financement multiples

Dans la mesure où Stripe prend en charge des sources de financement supplémentaires, vous n’avez pas besoin de mettre à jour votre intégration. Stripe les prend en charge automatiquement avec les mêmes délais de virement de fonds et les mêmes garanties que pour les paiements par carte ou par compte bancaire.

### Authentification de carte bancaire et 3D Secure

Link prend en charge l’authentification *3D Secure&nbsp;2 (3DS2)* (3D Secure 2 (3DS2) removes friction from the authentication process and improves the purchase experience compared to 3D Secure 1. It's the main card authentication method used to meet Strong Customer Authentication (SCA) requirements in Europe and is a key mechanism for businesses to request exemptions to SCA) pour les paiements par carte bancaire. 3DS2 impose aux clients une étape de vérification supplémentaire auprès de l’émetteur de la carte au moment du paiement. Les paiements ayant été authentifiés avec 3D Secure sont couverts par un *transfert de responsabilité* (With some 3D Secure transactions, the liability for fraudulent chargebacks (stolen or counterfeit cards) shifts from you to the card issuer).

Pour déclencher les flux de demande d’authentification complexes 3DS2 dan sun environnement de test avec Link, utilisez la carte de test suivante avec n’importe quel CVC, code postal et date d’expiration ultérieure&nbsp;: 4000000000003220.

Dans un environnement de test, une page d’authentification factice s’affiche pour le processus d’authentification. Sur cette page, vous pouvez autoriser ou annuler le paiement. L’autorisation du paiement simule une authentification réussie et vous redirige vers l’URL de retour spécifiée. Un clic sur le bouton **Échec** simule une tentative d’authentification infructueuse.

Pour obtenir plus d’informations, veuillez consulter la [page dédiée à l’authentification 3D&nbsp;Secure](https://docs.stripe.com/payments/3d-secure.md).

> Lorsque vous testez les flux 3DS, seules les cartes de test pour 3DS2 déclencheront une authentification sur Link.

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

- [Link dans le composant Payment Element](https://docs.stripe.com/payments/link/payment-element-link.md)
- [Explorez le composant Element Contact Details](https://docs.stripe.com/payments/link/contact-details-element.md)
- [Link dans différentes intégrations de paiement](https://docs.stripe.com/payments/link/link-payment-integrations.md)