# Section informations client
Source: https://docs.lomi.africa/build/lomi-ui/customer-information-section

Formulaire d'informations personnelles du checkout hébergé avec nom, e-mail, téléphone et WhatsApp optionnel.

***

title: Section informations client
description: Formulaire d'informations personnelles du checkout hébergé avec nom, e-mail, téléphone et WhatsApp optionnel.
--------------------------------------------------------------------------------------------------------------------------

import { CustomerInformationSectionDemo } from '@/components/lomi-ui/demo';

# Section informations client

Reprend `customer-information-section.tsx` du checkout hébergé : nom complet, e-mail, téléphone et numéro WhatsApp optionnel.

## Aperçu

<CustomerInformationSectionDemo />

## Installation

<Installation name="customer-information-section" />

## Utilisation

```tsx
import { CustomerInformationSection } from '@/components/lomi-ui/customer-information-section';

<CustomerInformationSection
  fullName={fullName}
  email={email}
  phoneNumber={phoneNumber}
  whatsappNumber={whatsappNumber}
  isDifferentWhatsApp={isDifferentWhatsApp}
  onFullNameChange={setFullName}
  onEmailChange={setEmail}
  onPhoneNumberChange={setPhoneNumber}
  onWhatsAppNumberChange={setWhatsAppNumber}
  onDifferentWhatsAppChange={setIsDifferentWhatsApp}
/>;
```

Nécessite `react-phone-number-input` dans votre application.

## Props

| Prop                  | Type                       | Description                                               |
| --------------------- | -------------------------- | --------------------------------------------------------- |
| `fullName`            | `string`                   | Nom complet (contrôlé).                                   |
| `email`               | `string`                   | E-mail (contrôlé).                                        |
| `phoneNumber`         | `string`                   | Téléphone au format E.164 (contrôlé).                     |
| `whatsappNumber`      | `string`                   | Numéro WhatsApp quand le champ est affiché.               |
| `isDifferentWhatsApp` | `boolean`                  | Affiche le champ WhatsApp au lieu de la ligne de bascule. |
| `defaultCountry`      | `Country`                  | Pays par défaut du téléphone. Par défaut `CI`.            |
| `onFullNameChange`    | `(value: string) => void`  | Handler changement nom.                                   |
| `onEmailChange`       | `(value: string) => void`  | Handler changement e-mail.                                |
| `onPhoneNumberChange` | `(value?: string) => void` | Handler changement téléphone.                             |