lomi. UI
Customer information section
Hosted checkout personal information form with name, email, phone, and optional WhatsApp.
Customer information section
Matches customer-information-section.tsx in hosted checkout: full name, email, phone, and optional WhatsApp number.
Preview
*
*
My WhatsApp number is different
Installation
Install to your codebase
Copy the component source with shadcn.
npx shadcn@latest add https://docs.lomi.africa/r/customer-information-section.jsonUsage
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}
/>;Requires react-phone-number-input in your app.
Props
| Prop | Type | Description |
|---|---|---|
fullName | string | Controlled full name value. |
email | string | Controlled email value. |
phoneNumber | string | Controlled E.164 phone value. |
whatsappNumber | string | Controlled WhatsApp number when expanded. |
isDifferentWhatsApp | boolean | Shows the WhatsApp field instead of the toggle row. |
defaultCountry | Country | Default phone country. Defaults to CI. |
onFullNameChange | (value: string) => void | Full name change handler. |
onEmailChange | (value: string) => void | Email change handler. |
onPhoneNumberChange | (value?: string) => void | Phone change handler. |