Payment Page with Flutter: Drive Your Users to Purchase

Azmi Rutkay BIYIK
Mar 21 · 3 min read

Subscription and payment pages are important to drive people to purchase. There are different types of designs out there, also Apple has a guideline for us to implement a good Payment page.
https://developer.apple.com/design/human-interface-guidelines/subscriptions/overview/

I realized that I’ve been developing similar payment pages from scratch. Then, I decided to wrap the page in a package with a certain customization room.

Package: https://pub.dev/packages/purchase_paywall

Public Repo: https://github.com/arutkayb/purchase_paywall

Paywall Designs in Package

Paywall classes do not provide any functionality for purchase operations. You have to implement the purchase and pass the necessary callback functions to the desired PayWall class to make use of it.

PurchasePaywall is providing different types of PayWalls to satisfy different purchase types and design needs.

PayWall Factory
Import the main file for the factory class

You can customize the PayWall page by using ThemeData. Customizable parts are:

  • Font by textTheme.fontFamily
  • Background color by themeData.backgroundColor
  • Foreground color by themeData.accentColor

Customization details may be different for each PayWall class. Check the specific PayWall for further details.

SimpleWall
Design mockups:

Implementation:

Import necessary model classes

Create the SimpleWall by using the factory method. The necessary part is purchase item callbacks, do not pass the necessary functions to initiate payment operation.

Here is the example implementation that shows only a snackbar when a button tap.

Prepare the BasicWallModel with necessary customization:

Don’t forget to put your privacy policy and terms of use URLs

You can also remove the back arrow by using “bool showBackIcon” value and you can override back icon tapped behavior by using Function backIconTapped” value in BasicWallModel.

Lastly, you can use the SimpleWall Widget any way you want such as navigating to it as a new page or just using it as a widget in a page with more control.

If you have a problem with Navigation, check your context if it is the right one. Here in my example the tricky part is a need for a Builder:

Further Customization

  • themeData.backgroundColor for background color
  • themeData.accentColor for the rounded foreground color
  • themeData.accentColor for PageView dot indicator selectedDotColor
  • themeData.accentColor for PageView dot indicator borderColor
  • themeData.primaryColor for PageView dot indicator dotColor
  • themeData.textTheme.headline1.fontFamily for big title
  • themeData.textTheme.subtitle1.fontFamily for WallDescription.title
  • themeData.textTheme.bodyText1.fontFamily for WallDescription.description
  • themeData.textTheme.bodyText2.fontFamily for trial indicator text
  • themeData.textTheme.button.fontFamily for button text
  • themeData.textTheme.bodyText2.fontFamily for button sub-info disclaimer text
  • themeData.textTheme.bodyText2.fontFamily for bottom info

Future of PurchasePaywall

I started with a simple design. I will add more classes to be used via the factory method.

Please leave your comments and request designs to support the creation process.

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Azmi Rutkay BIYIK

Written by

Software Engineer, Growth & Gamification Enthusiast

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.