Home / Blog / How to create a Subscription plans screen

How to create a Subscription plans screen

21 Aug 2024 · 6 min read

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 Subscription Plans Screen is a critical interface in apps offering services or content on a subscription basis. By presenting options in an easy-to-compare format, highlighting key features, benefits, and pricing, it empowers users to make informed choices. Additionally, an effective Subscription Plans Screen can drive revenue by encouraging upgrades and fostering long-term customer relationships.

This article offers a comprehensive guide, equipping designers and developers to seamlessly integrate a user-centric Subscription Plans 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 subscription-screen blank --type=react

3. Get inside the project directory

cd subscription-screen

4. Create page Subscription.tsx inside src/pages and add code

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

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

export default Subscription;

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 heading

For convenience, we will be using the layout structure recommended by Ionic for all our screens. This allows us to add header code and content inside the <IonPage></IonPage>.

<IonPage>
  <IonHeader>
    <IonToolbar>
    ...
    </IonToolbar>
  </IonHeader>
  <IonContent>
  ...
  </IonContent>
</IonPage>

6. Place the 'Logotype' title inside the toolbar

Inside the IonToolbar component, place the IonTitle with the text 'Logotype' to add a title for this page.

<IonHeader>
  <IonToolbar>
    <IonTitle>Logotype</IonTitle>
  </IonToolbar>
</IonHeader>

7. Add the Content component under the toolbar

Following the IonHeader component, add the IonContent component and apply the ion-padding-horizontal and ion-text-center classes to style the content within.

<IonHeader>
 ...
</IonHeader>
<IonContent className='ion-padding-horizontal ion-text-center'>
</IonContent>

8. Add the 'Pricing plans' title within the Content component

Inside the IonContent component add the IonText component with the h1 tag to set the title and place the text 'Pricing plans' inside.

<IonContent className='ion-padding-horizontal ion-text-center'>
  <IonText>
    <h1>Pricing plans</h1>
  </IonText>
</IonContent>

9. Add the subtitle inside another Text component

Add another IonText component with the property color='medium' to style the text color inside. Within the IonText add the p tag with the class ion-margin and the text 'Simple, transparent pricing that grows with you. Try any plan free for 30 days.' inside.

<IonContent className='ion-padding-horizontal ion-text-center'>
  <IonText>
    <h1>Pricing plans</h1>
  </IonText>
  <IonText color='medium'>
    <p className='ion-margin'>
      Simple, transparent pricing that grows with you. Try any plan free for 30 days.
    </p>
  </IonText>
</IonContent>

10. Add the <br /> tag to create a break line

11. Place the Segment component to divide the plans

Add the IonSegment component to display a group of related buttons. Set the value property as monthly on the segment to match the value of a button to select that button.

<IonContent className='ion-padding-horizontal ion-text-center'>
  <IonText>
    <h1>Pricing plans</h1>
  </IonText>
  <IonText color='medium'>
    <p>
      Simple, transparent pricing that grows with you. Try any plan free for 30 days.
      </p>
  </IonText>
  <br />
  <IonSegment value='monthly'>
  </IonSegment>
</IonContent>

12. Add the monthly value to the button

Inside the IonSegment add the IonSegmentButton component and set the property value='monthly'.

<IonSegment value='monthly'>
  <IonSegmentButton value='monthly'>
  </IonSegmentButton>
</IonSegment>

13. Label the button as 'Monthly billing'

Inside the IonSegmentButton place the IonLabel component with the text 'Monthly billing'.

<IonSegment value='monthly'>
  <IonSegmentButton value='monthly'>
    <IonLabel>Monthly billing</IonLabel>
  </IonSegmentButton>
</IonSegment>

14. Repeat steps 12 and 13

Add another IonSegmentButton. Set the property value='annual' and add the text 'Annual billing' inside the IonLabel.

<IonSegment value='monthly'>
  <IonSegmentButton value='monthly'>
    <IonLabel>Monthly billing</IonLabel>
  </IonSegmentButton>
  <IonSegmentButton value='annual'>
    <IonLabel>Annual billing</IonLabel>
  </IonSegmentButton>
</IonSegment>

15. Add the <br /> tag to create a break line

16. Place the Chip component with the text 'Basic plan'

Place the IonChip component with the text 'Basic plan' and the class ion-margin-top. Set the color property to medium to style the component.

<IonContent className='ion-padding-top ion-text-center'>
  ...
  <br />
  <IonChip color='primary' className='ion-margin-top'>
    Basic plan
  </IonChip>
</IonContent>

17. Add the price within the Text component

Add the IonText component with the h2 tag and place the text '$10/mth' inside.

<IonContent className='ion-padding-top ion-text-center'>
  ...
  <IonText>
    <h2>$10/mth</h2>
  </IonText>
</IonContent>

18. Add the promotional text

Add another IonText component with the property color='medium' to style the text color inside. Set the text 'Our most popular plan.' inside.

<IonContent className='ion-padding-top ion-text-center'>
  ...
  <IonText color='medium'>
    Our most popular plan.
  </IonText>
</IonContent>

19. Organize the buttons inside with the List component

Add the IonList component with the class ion-margin-top to style the component. This component helps organize the buttons inside.

<IonContent className='ion-padding-top ion-text-center'>
  ...
  <IonList className='ion-margin-top'>
  </IonList>
</IonContent>

20. Add the 'Get started' button

Inside the IonList component, add the IonButton component with the property expand='block' and set the text 'Get started' inside.

<IonList className='ion-margin-top'>
  <IonButton expand='block'>
    Get started
  </IonButton>
</IonList>

21. Add the 'Chat to sales' button

Add another IonButton with the properties fill='outline', expand='block' and the text 'Chat to sales'.

<IonList className='ion-margin-top'>
  <IonButton expand='block'>
    Get started
  </IonButton>
  <IonButton fill='outline' expand='block'>
    Chat to sales
  </IonButton>
</IonList>

22. Add the <br /> tag to create a break line

23. Add another List component

Add another IonList component with the class ion-margin-top to style the component. Set the property lines as none to style the content inside. This component helps organize the items inside.

<IonContent className='ion-padding-top ion-text-center'>
  ...
  <br />
  <IonList lines='none' className='ion-margin-top'>
  </IonList>
</IonContent>

24. Place an item inside the list

Inside the IonList place the IonItem component with the class ion-no-padding to style the component.

<IonList className='ion-margin-top'>
  <IonItem className='ion-no-padding'>
  </IonItem>
</IonList>

25. Add an icon to the item

Inside the IonItem add the IonIcon component with the properties icon={checkmarkCircleOutline}, slot='start', color='success', and size='small' to style the component, using the icon from Ionic icons.

<IonItem className='ion-no-padding'>
  <IonIcon
    icon={checkmarkCircleOutline}
    slot='start'
    color='success'
    size='small'>
  </IonIcon>
</IonItem>

26. Add the additional label

After the IonIcon add the IonLabel component with the text 'Access to all basic features'.

<IonItem className='ion-no-padding'>
  <IonIcon
    icon={checkmarkCircleOutline}
    slot='start'
    color='success'
    size='small'>
  </IonIcon>
  <IonLabel>
    Access to all basic features
  </IonLabel>
</IonItem>

27. Repeat steps 24 to 26

Add another IonItem. Set text 'Basic reporting and analytics' inside the IonLabel component.

28. Repeat steps 24 to 26

Add another IonItem. Set text 'Up to 10 individual users' inside the IonLabel component.

29. Repeat steps 24 to 26

Add another IonItem. Set text '20GB individual data each user' inside the IonLabel component.

30. Repeat steps 24 to 26

Add another IonItem. Set text 'Basic chat and email support' inside the IonLabel component.

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!

Looking for Ionic kit for you platform?
Ionic Sketch
Ionic Figma
Ionic XD
Made by  Karma  team with ❤️