Payment Page with Flutter: Drive Your Users to Purchase

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 Package

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.

Software Engineer, Growth & Gamification Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store