In App Purchases with Ionic (3+ & InAppPurchase2)
Anyone who has ever built an application has probably thought to themselves, “How could I make money of this app”
EDIT: You can find a full sample application and the original blog post here
** but please remember that it will not work without individual configurations on the google play and apple stores.
As with anything online, you could make money off of advertising. But you have decided that you want to make your app freemium, or you want to sell coins in your game, or sell just about anything using In-App purchases. That’s a good idea, because people are buying.
But the Ionic ecosystem for In App Purchases is a bit confusing to put it nicely. You would think that this is a plugin that would be heavily supported (on the level of the camera plugin) because it would allow developers to make money, but it just isn’t. So when you go searching for your options you will run into two different plugins.
InAppPurchase & InAppPurchase2
It might be counter-intuitive to have two supported plugins for one function. However, I will address the differences in use between the two as well as work-arounds I have found while building 38Plank.
Promises or Events?
Let me introduce both because I have actually used them both successfully in my production app.
The first up is InAppPurchase which is a typescript wrapper around Alex Dislers Cordova-Plugin-InAppPurchase. The plugin bills itself as,
A lightweight Cordova plugin for in app purchases on iOS/Android. See demo app and blog post.
And it did work. It also is completly promise based, which is very familiar for any javascript developer who is used to ajax. Just type in
this.iap.purchase().then( () => // Make money );Not actually, but that is the basic idea.
On Github though, you can see immediately one of the main detractions for why I choose to go a different direction.
Looking for maintainers
If you would like to maintain this project, get in touch.
No fault to the developer, (I think he wrote the plugin originally in 2015), as has made a valiant effort to keep the plugin up to date, particularly with the changes that occurred in the iOS 10 update. But a plugin that is unsupported is bound to run into issues. I ran into one in particular, in an edge case where the user starts a purchase but then has to input their credit card details in a different screen. When they came back to the app, the purchase had not been cancelled by apple, but my promise had already returned an error.
It was a good start, but I needed to handle this use case in my app.
InAppPurchase2 — j3K0 and Contributing to Ionic Native
The second option you have is my personal recommendation, InAppPurchase2 which is a typescript wrapper for a plugin Cordova-Plugin-Purchase
I went this direction because of two reasons. First, it was actively supported with the latest code commit being 7 days ago (when this was written). This was huge for me, as we have been developing our app across multiple iOS releases, and pretty much every release has broken our code in some meaningful way (*cough iOS 11). Second, event based actions were better for handling the multiple use cases we need to handle, such as a user exiting out of the app while they get their credit card.
So now that we have decided this was a better way to go, how do we actually implement this solution?
Installation and Setup (Android & iOS)
First you need to get an android billing key if you want to set this up for Android devices. You can find this in the play store for you application.
ionic cordova plugin add cc.fovea.cordova.purchase --variable BILLING_KEY="<ANDROID_BILLING_KEY>"
$ npm install --save @ionic-native/in-app-purchase-2After installing, you need to configure in-app-purchasing in your app.module.ts
// app.module.ts
import { InAppPurchase2 } from '@ionic-native/in-app-purchase-2';...
providers: [ InAppPurchase2 ]
...
I would recommend you do not configure anything else in your app.component.ts. This would cause your user to get a notification right away asking for billing permission and for itunes account authentication which might scare your users away. Instead, I configure the plugin on the fly for my store listings when the press the “Purchase” button on my app.
Ok, so how do we configure this page so that someone could purchase our Working Girls Guide To Fit? Here is the code for this page. I implemented two methods, configurePurchase and complete purchase, which I do on someone buying the program
Ok, I just threw a bunch of code at you so I’ll break down the important pieces. When you register a product, you should listen for a few events that are going to happen.
// Fired when a purchase has been approved by the store
this.store.when(productId).approved()
// Fired when a purchase is registered with the store
this.store.when(productId).registered()
// Fired if a purchase is updated
this.store.when(productId).updated()
// If the user cancels a purchase
this.store.when(productId).cancelled()
// Error handling
this.store.error()Now you may need to do business specific things when each of these events fires, but I’ll leave that up to you.
Configuring Your Purchase with Apple or Google
I don’t want to dive into this too much, but this took me a second to figure out so I thought I should mention it. When you want to actually start implementing In App Purchases in iOS devices, you run into an issue. Apple won’t let you allow In-App Purchases without a valid item to buy, and screenshots of the item in your app. But you can’t test in-app purchases without a published version of the app… So what you do is you will need to release a version of your app with an in-app purchase that only you can access. After the first purchase is configured and allowed, things get much easier.
- side note, their is no api to listing purchases with itunes connect. Its all manual…
With google their is a similar issue, but you can test the purchase on an alpha release. Although the issue their is if you are the owner of the app, the purchase will never go through because they lead with an error that says “You are the owner and owners can’t purchase things”…
So in summary, testing is hard for your first purchase.
Summary
I hope that I gave you all a good run down of the pros and cons of each in app purchase plugin, and enough code to get you started. If you want to see this in action you can check out Katie Rings Working Girls Guide To Fit
