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.
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.
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.
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.
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:
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:
- 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.