Looking for Ionic kit for you platform?
Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.
The Send Money Screen is a core feature in digital banking, fintech, and payment apps, enabling users to transfer funds to friends, family, or contacts quickly and securely. A well-designed P2P transfer interface includes contact lists with avatars, search functionality, amount entry fields, payment method selection, and confirmation prompts to ensure smooth and error-free transactions. Features like quick actions and QR code scanning can further enhance the experience.
This guide will walk you through the steps to design and implement a Send Money Screen using the Ionic Design Kit. By leveraging its pre-built UI components and the Ionic Framework, you can create a fast, intuitive, and secure transfer interface that makes peer-to-peer payments effortless.
1. Install Ionic CLI with the command
Creating a project with the Ionic CLI
npm i -g @ionic/cli
2. Create a new project
To create a new project, run the following command.
ionic start send-money blank --type=react
3. Get inside the project directory
cd send-money
4. Create a Send money page
Create page SendMoney.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const SendMoney: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default SendMoney;
Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.
5. Select the layout structure
For convenience, we will be using the layout structure recommended by Ionic for all screens. This allows us to add header code and content inside the IonPage.
<IonPage>
<IonHeader>
<IonToolbar>
...
</IonToolbar>
</IonHeader>
<IonContent>
...
</IonContent>
</IonPage>
6. Build the page header with back and QR code buttons
This block uses IonPage to define a full-page view. Inside IonHeader, the IonToolbar holds navigation elements. IonButtons with slot="start" contains an IonBackButton that links back to the homepage defaultHref="/" and displays an arrowBack icon. The title is set with IonTitle. On the right slot="end", another IonButtons wraps a QR code icon button using IonIcon with icon={qrCodeOutline}.
<IonHeader>
<IonToolbar>
<IonButtons slot="start" className="ion-padding-start">
<IonBackButton defaultHref="/" text="" icon={arrowBack} />
</IonButtons>
<IonTitle>Transfer</IonTitle>
<IonButtons slot="end">
<IonButton>
<IonIcon icon={qrCodeOutline} />
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
7. Insert a search bar
A second IonToolbar under the header contains IonSearchbar, which provides a built-in input for users to search by name or phone number. The placeholder attribute sets a hint text visible before input begins.
<IonHeader>
...
<IonToolbar>
<IonSearchbar placeholder="Name, phone" />
</IonToolbar>
</IonHeader>
This concludes our work with IonHeader, and the following sections will cover working with IonContent.
8. Add filter chips
Inside IonContent, this section uses IonItem to contain IonChip components labeled 'Friends', 'Accounts', and 'Groups'. These chips are styled with margin ion-margin-top and serve as filter categories or tabs for user segmentation. The <br /> tag to add more space below.
...
<IonContent>
<IonItem lines="none" className="ion-margin-top">
<IonChip>Friends</IonChip>
<IonChip>Accounts</IonChip>
<IonChip>Groups</IonChip>
</IonItem>
<br />
</IonContent>
9. Display quick actions label and button
This block displays a row with a section label and a clear-style button. IonItem includes an IonLabel titled 'Quick actions', and an IonButton with fill="clear" and color="primary" that says 'Show all', allowing users to reveal more actions.
<IonContent>
...
<IonItem lines="none">
<IonLabel>Quick actions</IonLabel>
<IonButton fill="clear" color="primary">
Show all
</IonButton>
</IonItem>
</IonContent>
10. List quick action items
This section displays a list using IonList with lines="none" and margin styling. Each IonItem includes an icon in the slot="start" using IonIcon with different symbols (e.g., earth, cash, linkOutline) and a IonLabel with a title and a short description wrapped in <p>. These represent common user actions like international transfers or bill splitting.
<IonContent>
...
<IonList lines="none" className="ion-margin-bottom">
<IonItem>
<IonIcon icon={earth} slot="start" color="primary" />
<IonLabel>
Send international
<p>Bank transfers to 200+ countries</p>
</IonLabel>
</IonItem>
<IonItem>
<IonIcon icon={cash} slot="start" color="primary" />
<IonLabel>
Split bill
<p>Split a bill with a friend or group</p>
</IonLabel>
</IonItem>
<IonItem>
<IonIcon icon={linkOutline} slot="start" color="primary" />
<IonLabel>
Payment link
<p>Send or request money with a link</p>
</IonLabel>
</IonItem>
</IonList>
</IonContent>
11. Organize an alphabetized contact list
Each IonList contains a IonListHeader with a letter (e.g., 'A', 'E', 'M') to group contacts. IonItem represents a single contact, with an avatar in the start slot using IonAvatar and an <img> tag. The IonLabel includes the contact name and phone number. This creates an address book-like section.
<IonContent>
...
<IonList lines="none">
<IonListHeader>A</IonListHeader>
<IonItem>
<IonAvatar slot="start">
<img src="sm-a-1.png" alt="avatar" />
</IonAvatar>
<IonLabel>
Alice Bennett
<p>+1 (212) 555-0123</p>
</IonLabel>
</IonItem>
</IonList>
<IonList lines="none">
<IonListHeader>E</IonListHeader>
<IonItem>
<IonAvatar slot="start">
<img src="sm-a-2.png" alt="avatar" />
</IonAvatar>
<IonLabel>
Ella Brooks
<p>+1 (202) 555-0142</p>
</IonLabel>
</IonItem>
<IonItem>
<IonAvatar slot="start">
<img src="sm-a-3.png" alt="avatar" />
</IonAvatar>
<IonLabel>
Emily Foster
<p>+1 (415) 555-0198</p>
</IonLabel>
</IonItem>
<IonItem>
<IonAvatar slot="start">
<img src="sm-a-4.png" alt="avatar" />
</IonAvatar>
<IonLabel>
Ethan Wright
<p>+1 (646) 555-0175</p>
</IonLabel>
</IonItem>
</IonList>
<IonList lines="none">
<IonListHeader>M</IonListHeader>
<IonItem>
<IonAvatar slot="start">
<img src="sm-a-5.png" alt="avatar" />
</IonAvatar>
<IonLabel>
Michael Smith
<p>+1 (718) 555-0114</p>
</IonLabel>
</IonItem>
</IonList>
</IonContent>
Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.
Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!