How to create a Bill payments screen

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 Bill Payments Screen is a crucial feature in fintech, banking, and utility management apps, enabling users to pay for services such as electricity, internet, phone, and other utilities quickly and securely. A well-designed bill payments interface includes service provider lists, amount input fields, due date indicators, saved payment methods, and transaction confirmation screens. Additional features like auto-pay setup and payment history can further improve convenience and user satisfaction.

This guide will walk you through the steps to design and implement a Bill Payments Screen using the Ionic Design Kit. By leveraging its intuitive UI components and the Ionic Framework, you can create a streamlined, secure, and user-friendly payment experience that keeps users in control of their essential expenses.

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 bill-payments blank --type=react

3. Get inside the project directory

cd bill-payments

4. Create a BillPayments page

Create page BillPayments.tsx inside src/pages and add code.

import { IonPage } from '@ionic/react';

const BillPayments: React.FC = () => {
  return (
    <IonPage></IonPage>
  );
};

export default BillPayments;

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>

We use IonPage as the root container of the view. Inside, IonHeader defines the top navigation section. IonToolbar wraps interactive elements in the header. IonButtons slot="start" positions the back button on the left side. IonBackButton is a default Ionic component that navigates to the previous page or specified route defaultHref="/". The icon and text props customize its look. IonTitle sets the screen title.

<IonHeader>
    <IonToolbar>
        <IonButtons slot="start" className="ion-padding-start">
            <IonBackButton defaultHref="/" text="" icon={arrowBack} />
        </IonButtons>
        <IonTitle>Payment of utilities</IonTitle>
    </IonToolbar>
</IonHeader>

This concludes our work with IonHeader, and the following sections will cover working with IonContent.

7. Enter card information

The IonContent contains scrollable content. We start with an <h2> heading for the section. Each field is placed inside an IonItem, a basic container with consistent spacing and styling. IonLabel position="stacked" places the label above the input. IonInput with value="..." displays filled information in the input field. IonGrid provides a responsive layout. IonRow splits content horizontally. IonCol splits the row into columns for the expiration date and CVC.

...
<IonContent>
    <h2 className="ion-padding-start">Card information</h2>
    <IonItem>
        <IonLabel position="stacked">Name on card</IonLabel>
        <IonInput value="John Smith" />
    </IonItem>
    <IonItem>
        <IonLabel position="stacked">Credit card number</IonLabel>
        <IonInput value="**** **** **** 5943" />
    </IonItem>
    <IonGrid className="ion-padding-end">
        <IonRow>
            <IonCol>
                <IonItem>
                    <IonLabel position="stacked">Expiration date</IonLabel>
                    <IonInput value="06/29" />
                </IonItem>
            </IonCol>
            <IonCol>
                <IonItem>
                    <IonLabel position="stacked">CVC</IonLabel>
                    <IonInput value="***" />
                </IonItem>
            </IonCol>
        </IonRow>
    </IonGrid>
</IonContent>

8. Provide billing information

Another <h2> introduces the billing info. IonItem and IonLabel work the same as before for street address, city, region, etc. The IonGrid is reused to split input fields across two columns in two separate rows. This layout makes the form readable and organized.

<IonContent>
    ...
    <h2 className="ion-padding-start">Billing information</h2>
    <IonItem>
        <IonLabel position="stacked">Street address</IonLabel>
        <IonInput value="1234 Maple Avenue" />
    </IonItem>
    <IonGrid className="ion-padding-end">
        <IonRow>
            <IonCol>
                <IonItem>
                    <IonLabel position="stacked">City</IonLabel>
                    <IonInput value="Springfield" />
                </IonItem>
            </IonCol>
            <IonCol>
                <IonItem>
                    <IonLabel position="stacked">Region</IonLabel>
                    <IonInput value="Illinois" />
                </IonItem>
            </IonCol>
        </IonRow>
        <IonRow>
            <IonCol>
                <IonItem>
                    <IonLabel position="stacked">Postal code</IonLabel>
                    <IonInput value="12056" />
                </IonItem>
            </IonCol>
            <IonCol>
                <IonItem>
                    <IonLabel position="stacked">Country</IonLabel>
                    <IonInput value="United States" />
                </IonItem>
            </IonCol>
        </IonRow>
    </IonGrid>
</IonContent>

9. Fill in contact information

This section starts with an <h2> label. The email is shown using the same structure: IonItem containing IonLabel and a IonInput. This ensures consistency in layout and spacing with the rest of the form.

<IonContent>
    ...
    <h2 className="ion-padding-start">Contact information</h2>
    <IonItem>
        <IonLabel position="stacked">Email</IonLabel>
        <IonInput value="[email protected]" />
    </IonItem>
</IonContent>

10. Place the submit button

The submit button is created using IonButton. The expand="block" makes the button full-width. The color="primary" applies the theme’s primary color. The className adds horizontal margins to keep it aligned with the form content. The button text is simply 'Pay'.

<IonContent>
    ...
    <IonButton
        expand="block"
        color="primary"
        className="ion-margin-start ion-margin-end"
    >
        Pay
    </IonButton>
</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!