# Composant Element Contact Details

Utilisez le composant Element Contact Details pour intégrer Link.

[Link](https://stripe.com/payments/link) enregistre et renseigne automatiquement les informations de paiement et de livraison des clients. Les clients peuvent utiliser différentes sources de financement pour payer avec Link, notamment des cartes bancaires de crédit, des cartes bancaires de débit et des comptes bancaires américains. En savoir plus sur [link.com](https://www.link.com).

Utilisez le [composant Element Contact Details](https://docs.stripe.com/js/element/contact_details_element) (précédemment connu sous le nom de composant Element Link Authentication) pour créer un champ unique de saisie d’e-mail permettant à la fois la collecte de l’e-mail et l’authentification Link.

| Option                    | Description                                                                                                                                                                                             |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Emplacement du client** | Localisez la langue de l’interface utilisateur et affichez des moyens de paiement pertinents au niveau local.                                                                                           |
| **Taille**                | Définissez la largeur maximale en pixels de l’élément parent auquel le composant Element Contact Details est rattaché. Vous pouvez la définir sur 750 px (**Bureau**) ou 320 px (**Mobile**). |
| **Thème**                 | Sélectionnez l’apparence générale du composant Element.                                                                                                                                                 |
| **Disposition**           | Utilisez la liste déroulante pour aligner la liste des sources de financement horizontalement (**Onglets**) ou verticalement (**Accordéon**).                                                           |

## Des exemples pour commencer

Pour voir le composant Element Contact Details en action, commencez par l’un de ces exemples :

[Démarrage rapide](https://docs.stripe.com/payments/link/add-link-elements-integration.md): Code et instructions pour accepter un paiement et utiliser le composant Element Contact Details pour intégrer Link.

[Cloner une application test sur GitHub](https://github.com/stripe-samples/accept-a-payment)

## Before you begin

Avant de commencer, vous devez [enregistrer votre domaine](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).

## Créez le composant Element Contact Details

Le code suivant [crée](https://docs.stripe.com/js/elements_object/create_contact_details_element) une instance du composant Element Contact Details et l’[insère](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.
const contactDetailsElement = elements.create("contactDetails");

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

#### React

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

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

// 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>Payment</h3>
      <PaymentElement/>
      <button type="submit">Submit</button>
    </form>
  );
}
```

## Récupération de 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;
});
```

## Renseigner automatiquement les données 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](https://docs.stripe.com/js/elements_object/create_contact_details_element#contact_details_element_create-options-defaultValues)&nbsp;:

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

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

Si vous souhaitez préremplir des données client supplémentaires, ajoutez l’objet [defaultValues.billingDetails](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues-billingDetails) au [composant Element Payment](https://docs.stripe.com/payments/payment-element.md) 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.

Le code ci-après montre un exemple 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");
```

## Combiner des composants Element

Le composant Element Contact Details interagit uniquement avec le composant Element Payment en pré-remplissant les informations de paiement pour les utilisateurs récurrents de Link. Il peut toutefois être affiché avec d’autres éléments, comme dans cet exemple qui montre l’utilisation du composant Element Contact Details avec les composants Element Contact Details, Address et Payment&nbsp;:
![Une page de paiement incluant les composants Element Contact Details , Address et Payment.](https://b.stripecdn.com/docs-statics-srv/assets/cde-with-ae-pe.30a772ba14b5b6b62ea625aea56d6d0c.png)

Utiliser le composant Element Contact Details avec d’autres composants Element pour composer votre page de paiement

## Apparence

Vous pouvez utiliser l’API [Appearance](https://docs.stripe.com/elements/appearance-api.md) pour contrôler le style de tous les composants Elements. Choisissez un thème ou modifiez des éléments spécifiques.
![Exemples de modes clair et sombre pour le formulaire de paiement du composant Element Payment.](https://b.stripecdn.com/docs-statics-srv/assets/appearance_example.e076cc750983bf552baf26c305e7fc90.png)

Utilisez l’API Appearance pour changer l’apparence et le style de vos Elements

Dans l’exemple suivant, le thème «&nbsp;flat&nbsp;» écrase la couleur du texte appliquée par défaut aux Elements&nbsp;:

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

const appearance = {
  theme: 'flat'
  variables: { colorPrimaryText: '#262626' }
};
const options = { /* options */ };
const elements = stripe.elements({ clientSecret, appearance }); // Dans une intégration fonctionnelle, il s’agit d’une valeur transmise par votre back-end avec des informations telles que le montant d’un paiement. Consultez l’exemple complet pour plus de détails.
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');
```