# Explorez le composant Element Contact Details

Créez un champ de saisie d'adresse e-mail unique pour la collecte des e-mails et l'authentification Link.

Si vous disposez déjà des adresses e-mail de vos clients, [transmettez-les directement au Payment Element](https://docs.stripe.com/payments/link/payment-element-link.md?elements=pass-email).

Créez un champ de saisie d’adresse e-mail unique pour la collecte des e-mails et l’authentification par Link en ajoutant le [composant Element Contact Details](https://docs.stripe.com/payments/elements/contact-details-element.md) (auparavant connu sous le nom de composant Element Link Authentication) à votre intégration Elements. Si votre client ne possède pas de compte Link et qu’il sélectionne l’un des moyens de paiement pris en charge (carte de crédit, carte de débit ou banque aux États-Unis), il a la possibilité de s’inscrire.

Si votre client possède déjà un compte Link, il peut s’identifier à l’aide d’un mot de passe à usage unique. Ses informations de paiement sont alors automatiquement saisies dans le Payment Element.
![Utilisez le composant Element Contact Details sur votre page de paiement](https://b.stripecdn.com/docs-statics-srv/assets/contact-details-element.8c4f44b62b56336cc7ae2bcccc31ab6f.png)

Utilisez le composant Element Contact Details sur votre page de paiement

## Ajoutez le composant Element Contact Details

Placez le composant Element Contact Details au début de la page de paiement, suivi du [ composant Element Address](https://docs.stripe.com/elements/address-element.md) (facultatif), puis du composant Element Payment. Le code suivant [crée](https://docs.stripe.com/js/elements_object/create_contact_details_element) une instance du composant Element Contact Details et la [monte](https://docs.stripe.com/js/element/mount) dans le DOM :

#### HTML + JS

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

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

// Create an instance of the Contact Details Element optionally prefilling a customer's email address.
const contactDetailsElement = elements.create("contactDetails", {defaultValues: {email: "foo@bar.com"}});

// Passing in defaultValues is optional, but useful if you want to prefill customer information to simplify the customer 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 par SMS un code ponctuel sécurisé afin de s’identifier. En cas d’authentification réussie du client, Stripe affiche automatiquement ses adresses et moyens de paiement préalablement enregistrés sur Link afin qu’il puisse les utiliser. Vous devez également [enregistrer votre domaine](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).

#### React

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

Remplacez les champs de saisie de l’adresse e-mail existants par `ContactDetailsElement`. Lorsque l’adresse e-mail d’un client correspond à un compte Link existant, Link envoie un code sécurisé à usage unique sur le téléphone de ce client afin qu’il s’authentifie. S’il y parvient, Stripe remplit automatiquement les champs d’adresses et de moyens de paiement avec les informations enregistrées sur son compte Link.

Utilisez les [valeurs par défaut](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) pour transmettre autant d’informations sur le client que possible afin d’accélérer le processus de paiement pour vos clients.

```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 composants Element Contact Details, Payment et Address ne doivent pas nécessairement figurer sur la même page. Vous êtes libre d’afficher chaque composant à l’endroit le plus approprié de votre tunnel de paiement.

> Si vous utilisez le composant Element Contact Details pour collecter les adresses e-mail au tout début de votre tunnel de paiement, vous n’avez pas besoin de l’ajouter à vos pages de livraison ou de paiement. Affichez-le une fois seulement.

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

Pour récupérer une adresse e-mail, utilisez la propriété `onChange` dans `ContactDetailsElement`. Le gestionnaire `onChange` se déclenche quand un utilisateur met à jour le champ de l’adresse e-mail ou que Link remplit automatiquement l’adresse e-mail préalablement enregistrée par un client.

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

## See also

- [Stripe Web Elements](https://docs.stripe.com/payments/elements.md)
- [Composant Element Payment](https://docs.stripe.com/payments/payment-element.md)
- [Composant Element Address](https://docs.stripe.com/elements/address-element.md)