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 Checkout screen is the final step in a user's journey within e-commerce and retail applications, playing a pivotal role in ensuring a smooth and secure transaction process. It's essential for streamlining the purchasing experience, allowing users to review their cart, apply discounts, choose shipping options, and securely enter payment information. This screen's design and functionality directly impact conversion rates, as a clear, efficient checkout process reduces cart abandonment and enhances customer satisfaction.
This article offers a comprehensive guide, equipping designers and developers to seamlessly integrate a user-centric Checkout screen into their applications. This effortless integration is made possible by leveraging design components from the Ionic Kit, built on the robust foundation of the extensive library within the Ionic framework.
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 checkout-screen blank --type=react
3. Get inside the project directory
cd checkout-screen
4. Create page Checkout.tsx inside src/pages and add code
import { IonPage } from '@ionic/react';
const Checkout: React.FC = () => {
return <IonPage></IonPage>;
};
export default Checkout;
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. Add the header code
For convenience, we will be using the layout structure recommended by Ionic for our screen. This allows us to add header code and content inside the <IonPage></IonPage>.
<IonPage>
<IonHeader>
<IonToolbar>...</IonToolbar>
</IonHeader>
<IonContent>...</IonContent>
</IonPage>
6. Place the button at the beginning of the toolbar
Inside the IonToolbar component, add the IonButtons component and set the slot to start. This positions the button at the beginning of the toolbar.
<IonHeader>
<IonToolbar>
<IonButtons slot='start'></IonButtons>
</IonToolbar>
</IonHeader>
7. Add the Back button
Within the IonButtons component, include the IonBackButton component, setting the properties defaultHref='#' and text='', to create a back button that navigates back in the app's history upon being clicked.
<IonHeader>
<IonToolbar>
<IonButtons slot='start'>
<IonBackButton defaultHref='#' text=''></IonBackButton>
</IonButtons>
</IonToolbar>
</IonHeader>
8. Name the title
After the IonButtons component, place the IonTitle with the text 'Checkout' to add a title for this page.
<IonHeader>
<IonToolbar>
<IonButtons slot='start'>
<IonBackButton defaultHref='#' text=''></IonBackButton>
</IonButtons>
<IonTitle>Checkout</IonTitle>
</IonToolbar>
</IonHeader>
9. Add the button at the end of the toolbar
After the IonTitle component, include another IonButtons component and set the slot to end. This positions the buttons at the end of the toolbar.
<IonHeader>
<IonToolbar>
<IonButtons slot='start'>
<IonBackButton defaultHref='#' text=''></IonBackButton>
</IonButtons>
<IonTitle>Statistics</IonTitle>
<IonButtons slot='end'></IonButtons>
</IonToolbar>
</IonHeader>
10. Within the IonButtons add the IonButton component
11. Place an icon within the button
Inside the IonButton component, place the IonIcon component with the properties slot='icon-only' and icon={heartOutline} to define that this component should be used as an icon in an option that has no text, using the icon from Ionic icons.
<IonHeader>
<IonToolbar>
<IonButtons slot='start'>
<IonBackButton defaultHref='#' text=''></IonBackButton>
</IonButtons>
<IonTitle>Statistics</IonTitle>
<IonButtons slot='end'>
<IonButton>
<IonIcon slot='icon-only' icon={heartOutline}></IonIcon>
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
12. Add the content block
Following the IonHeader component, add the IonContent component and apply the ion-padding-top class to style the content within.
<IonHeader>
...
</IonHeader>
<IonContent className='ion-padding-top'>
</IonContent>
13. Place text into the content block
Inside the IonContent component, add the <br /> tag to create a line break, and place the IonText component and include an h5 tag with the text 'Payment'. Add the ion-padding-start class for the h5 tag to style the component.
<IonContent className='ion-padding-top'>
<br />
<IonText>
<h5 className='ion-padding-start'>Payment</h5>
</IonText>
</IonContent>
14. Add the list
Then place the IonList component with the property lines='none' to organize items.
<IonContent className='ion-padding-top'>
...
<IonList lines='none'></IonList>
</IonContent>
15. Inside the IonList add the IonItem component
<IonContent className='ion-padding-top'>
...
<IonList lines='none'>
<IonItem></IonItem>
</IonList>
</IonContent>
16. Place the checkboxes inside the item components
Within the IonItem add the IonCheckbox component with the property justify='space-between' to control how the text and control are packed on a line. Set the text 'Credit/Debit card' inside the IonCheckbox.
<IonItem>
<IonCheckbox justify='space-between'>Credit/Debit card</IonCheckbox>
</IonItem>
17. Repeat steps 15 and 16
Add another IonItem. Set the text 'PayPal' inside the IonCheckbox component.
18. Repeat steps 15 and 16
Add another IonItem. Set the text 'Apple Pay' inside the IonCheckbox component.
19. Repeat steps 15 and 16
Add another IonItem. Set the text 'Other methods' inside the IonCheckbox component.
20. Add text after the list component
After the IonList, add the <br /> tag to create a line break, and place the IonText component and include an h5 tag with the text 'Confirmation'. Add the ion-padding-start class for the h5 tag to style the component.
<IonContent className='ion-padding-top'>
...
<br />
<IonText>
<h5 className='ion-padding-start'>Confirmation</h5>
</IonText>
</IonContent>
21. Place another item and style it
Add the IonItem component with the properties lines='none', className='ion-margin-bottom' to style the item. Inside the item palace the p tag with the text 'Oscar Smith, 145, Bishop Avenue, Rooksf...'.
<IonContent className='ion-padding-top'>
...
<IonItem lines='none' className='ion-margin-bottom'>
<p>Oscar Smith, 145, Bishop Avenue, Rooksf...</p>
</IonItem>
</IonContent>
22. Place one more item
Add another IonItem component with the property lines='none'.
<IonContent className='ion-padding-top'>
...
<IonItem lines='none'></IonItem>
</IonContent>
23. Add the Total label inside the item
Inside the IonItem add the IonLabel component with the text 'Total'.
<IonContent className='ion-padding-top'>
...
<IonItem lines='none'>
<IonLabel>Total</IonLabel>
</IonItem>
</IonContent>
24. Add the price note
After the IonLabel, add the IonNote component with the text '$150'.
<IonContent className='ion-padding-top'>
...
<IonItem lines='none'>
<IonLabel>Total</IonLabel>
<IonNote>$150</IonNote>
</IonItem>
</IonContent>
25. Add the Pay now button
After the IonItem, add the <br /> tag to create a line break, and place the IonButton component with the properties expand='block', shape='round', className='ion-margin'. Place the text 'Pay now' inside.
<IonContent className='ion-padding-top'>
...
<IonButton expand='block' shape='round' className='ion-margin'>
Pay now
</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!