# Building a Nigerian checkout form (Naira + +234 phone input)

A checkout form in Nigeria usually needs two things that generic inputs get wrong: an amount in naira and a Nigerian phone number. Cruise UI has a component for each, and both send clean values to your server.

## What you get

- **Naira input:** a ₦ block joined to the field. It formats `12,500` as you type, keeps the cursor in place, handles pastes like `₦12,500.00` and sends the plain number `12500`.
- **Phone input:** a +234 block joined to the field. It accepts `0801…`, `801…` or `+234…` with spaces or dashes, shows `0801 234 5678`, checks it's a Nigerian mobile number and sends `+2348012345678` (E.164).

Both open the right keyboard on phones, show their label and errors through the Form field, and explain mistakes in words.

## Install

With the `@cruiseui` registry in your `components.json` (see [Installation](https://cruiseui.dev/docs/installation#react)):

```bash
npx shadcn@latest add @cruiseui/input @cruiseui/naira-input @cruiseui/phone-input @cruiseui/button
```

## The form

```tsx
"use client";

import { CruiseButton } from "@/components/cruise/button";
import { CruiseInput } from "@/components/cruise/input";
import { CruiseNairaInput } from "@/components/cruise/naira-input";
import { CruisePhoneInput } from "@/components/cruise/phone-input";

export function CheckoutForm() {
  return (
    <form action="/api/checkout" method="post" className="flex max-w-md flex-col gap-6">
      <CruiseInput label="Full name" name="name" autoComplete="name" required />
      <CruisePhoneInput
        label="Phone number"
        name="phone"
        required
        hint="We'll text your delivery updates here."
      />
      <CruiseNairaInput
        label="Amount"
        name="amount"
        required
        min={1000}
        hint="₦1,000 or more."
      />
      <CruiseButton type="submit">Pay now</CruiseButton>
    </form>
  );
}
```

With a `name`, each input adds a hidden field with the clean value, so the form posts:

```text
name=Ada Okafor
phone=+2348012345678
amount=12500
```

## Good to know

- **Check on the server too.** The inputs help people type valid values; your API should still check the amount and the number.
- **Prices:** show amounts with ₦ and thousands separators (₦12,500), never `$`, unless your app uses another currency.
- **Errors:** the min/max and "not a valid number" messages show after the field is left, and your own `error` prop adds to them.
- **Other countries:** the phone input is for Nigerian mobile numbers. For international numbers, use an Input with `type="tel"`.

## Without React

The HTML and CSS for both fields are on their pages: [Naira input](https://cruiseui.dev/docs/components/naira-input) and [Phone input](https://cruiseui.dev/docs/components/phone-input) (HTML tab). They need `theme.css` and a few lines of script for the formatting, shown in the design spec.