Patterns · Pages
Send money
CheckoutPageAmountStep + ReviewStep + ResultScreen
Amount, review and result in one page: live quote, fee and rate, balance check, and focus moved to each step.
Web
Live, at a real viewport width. Switch to Phone to see the responsive layout.
Usage
import { CheckoutPage } from '@nexub/patterns';
<CheckoutPage from="SGD" to="MYR" balance={balance} quote={getQuote} confirmLabel="Send money" onConfirm={send} onDone={done} />On iOS & Android: AmountStep + ReviewStep + ResultScreen
@nexub/react-native/patternsAlpha
import { AmountStep, ReviewStep, ResultScreen } from '@nexub/react-native/patterns';Web vs mobile
Same tokens and prop names. Where the platforms differ:
| Web | iOS & Android | |
|---|---|---|
| Steps | One page; steps swap in place. | One screen per step on the navigation stack. |
| Amount entry | MoneyInput with the keyboard. | ExpressiveMoneyInput with the NumericKeypad. |
Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.
On device
iPhone (iOS simulator)
Pixel (Android emulator)
Screenshots from the latest CI run of the showcase app; the live frame renders the same code for the web.
AmountStep props
| Prop | Type | Default | Description |
|---|---|---|---|
| fromrequired | string | — | — |
| torequired | string | — | — |
| balancerequired | number | — | Available balance in from. |
| quoterequired | (amount: number) => Quote | — | Quote for an amount (fees and rate shown before anything else, like Wise). |
| onContinuerequired | (amount: number) => void | — | — |
| step | number | — | — |
| total | number | 3 | — |