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

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

The form

"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:

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 and Phone input (HTML tab). They need theme.css and a few lines of script for the formatting, shown in the design spec.