Auto-Renewing Subscription on Android

In this guide, we will build a small application with a subscription that works on Android with Google Play.
We will proceed in steps: setup, initialization, presentation and purchase.
First some setup.
1.
Install NodeJS and Cordova
2.
Setup your Cordova project
3.
Prepare an Application on Google Play
4.
Install the In-App Purchases plugin
5.
Build a Release APK
6.
Create a Product on Google Play
7.
Upload a Release APK to Google Play
8.
Prepare Test Accounts
Of couse you can skip the first few steps if you already have a working application you want to integrate the code into.
Once we have a Cordova application with IAP support enabled and everything is in place on Google Play, we will get into some coding.
1.
Initialize the in-app purchase plugin
2.
Handle the purchase events
3.
Deliver our product
4.
Secure the transactions
Setup
1. Install Dependencies
Needless to say, make sure you have the tools installed on your machine. Developing from a mac is generally recommended for doing iOS development, it's way easier. If you only plan on doing Android, then everything will work.
During the writing of this guide, I've been using the following environment:
NodeJS v10.12.0
Cordova v8.1.2
macOS 10.14.1
I'm not saying it won't work with different version. If you start fresh, it might be a good idea to use an up-to-date environment.
2. Create Cordova Project
Making sure we have a Cordova project that we can build for Android and/or iOS.
Create the project
If it isn't already created:
1
$ cordova create CordovaProject cc.fovea.purchase.demo PurchaseNC
2
Creating a new cordova project.
Copied!
For details about what those parameters are:
1
$ cordova help create
Copied!
Note, feel free to pick a different project ID and name. Remember whatever values you put in here.
Let's head into our cordova project's directory (should match whatever we used in the previous step.
1
$ cd CordovaProject
Copied!
Add Android platform
1
$ cordova platform add android
Copied!
Will output:
1
    Using cordova-fetch for [email protected]~7.1.1
2
    Adding android project...
3
    [...]
4
    Saving [email protected]~7.1.1 into config.xml file ...
Copied!
Let's check if that builds.
1
$ cordova build android
Copied!
Which outputs:
1
    Android Studio project detected
2
    Starting a Gradle Daemon (subsequent builds will be faster)
3
    [...]
4
    BUILD SUCCESSFUL in 1m 49s
5
    Built the following apk(s):
6
    __EDITED__/platforms/android/app/build/outputs/apk/debug/app-debug.apk
Copied!
Alright, seems like we have no problems with our Android build chain. If you do have problems, fixing it is out of scope from this guide but it's required!
3. Create Google Play Application
Make sure we have a Google Play application created and configured.
Create the App
Open the Google Play Console.
Click "Create Application", fill in the required fields.
Need more help? I recommend you check Google's own documentation. It's well detailed, easy to follow and probably the most up-to-date resource you can find.
Retrieve the Billing Key
We need to inform the plugin of our app's BILLING_KEY. That piece of information can be found on the Google Play Publisher Console.
So head again to your Google Play Console.
In the "All Applications" menu, go to the application you want to setup. In my case "Cordova Purchase Demo".
From there, find the "Developments tools" ⇒ "Services & APIs" section (on the left-side panel).
That is where you'll find this long Base64 string they call "Your license key for this application". Keep it around for later reference. That's your Billing Key.
The Billing Key will be required to install the plugin on Android and setup receipt validation.
4. Install Cordova Purchase Plugin
To install the plugin, we will use the usual cordova plugin add command. There is little subtleties on Android.
When you need Android support, you need to setup your BILLING_KEY.
1
cordova plugin add cordova-plugin-purchase --variable BILLING_KEY="<BILLING_KEY>"
Copied!
You can find that piece of information on the Google Play Publisher Console, as explained here.
Now let's try to build.
1
cordova build android
Copied!
Successful build?
1
[...]
2
BUILD SUCCESSFUL in 2s
Copied!
All good! Seems like we can build an app with support for the Billing API.
Let's now prepare a release APK.
5. Android Release APK
To generate a release build, I generally use the following script: android-release.sh​
The script calls cordova build android --release with the correct command line arguments. It requires you have generated a keystore file for your application already.
If you haven't generated a keystore file for your application yet, you can use the following command line:
1
keytool -genkey -v -keystore android-release.keystore -alias release \
2
-keyalg RSA -keysize 2048 -validity 10000
Copied!
I'll ask you a few questions. The only tricky one is "Do you wan't to use the same password for the alias?", the answer is yes. Please note that the above command defines the keystore's alias as release, you can use any value, but just remember the value you chose.
Keep the android-release.keystore file in a safe place, backup it everywhere you can! Don't loose it, don't loose the password. You won't EVER be able to update your app on Google Play without it!
Then build.
1
$ export KEYSTORE_ALIAS=release
2
$ export KEYSTORE_PASSWORD=my_password
3
$ ./android-release.sh
Copied!
Replace $KEYSTORE_ALIAS and $KEYSTORE_PASSWORD with whatever match your those from your keystore file...
The output should end with a line like this:
1
Build is ready:
2
​
3
<SOME_PATH>/android-release-20181015-1145.apk
Copied!
There you go, this is your first release APK.
6. Upload to Google Play
Once you have built your release APK, you need to upload it to Google Play in order to be able to test In-App Purchases. In-App Purchase is not enabled in "debug build". In order to test in-app purchase, your APK needs to be signed with your release signing key. In order for Google to know your release signing key for this application, you need to upload a release APK:
Signed with this key.
Have the BILLING permission enabled
it is done when you add the plugin to your project, so make sure you didn't skip this step.
Google already provides detailed resource on how to upload a release build. What we want here is to:
1.
create an internal testing release
2.
upload it
3.
publish it (privately probably).
Once you went over those steps, you can test your app with in-app purchase enabled without uploading to Google Play each time, but you need to sign the APK with the same "release" signing key.
Note that it might up to 24 hours for your IAP to work after you uploaded the first release APK.
6. Create In-App Products
There is still a bit more preparatory work: we need to setup our in-app product.
Back in the "Google Play Console", open the "Store presence" ⇒ "In-app products" section.
If you haven't yet uploaded an APK, it'll warn you that you need to upload a release APK.
Once this is done, you can create a product. Google offers 2 kinds of products:
Managed Products
Subscriptions
The latest is for auto-renewing subscriptions, in all other cases, you should a "Managed Product".
Click the CREATE button.
Fill in all the required information (title, description, prices).
Make sure the Status is ACTIVE.
SAVE
And we're done!
There's might be some delay between creating a product on the Google Play Console and seeing it in your app. If your product doesn't show up after 24h, then you should start to worry.
8. Prepare Test Accounts
To test your Google Play Billing implementation with actual in-app purchases, you must use a test account. By default, the only test account registered is the one that's associated with your developer account. You can register additional test accounts by using the Google Play Console.
1.
Navigate to Settings > Account details.
2.
In the License Testing section, add your tester's email addresses to Gmail accounts with testing access field.
3.
Save your changes.
Testers can begin making purchases of your in-app products within 15 minutes.
Coding
Initialization
Assuming you're starting from a blank project, we'll add the minimal amount of HTML for the purpose of this tutorial. Let's replace the <body> from the www/index.html file with the below.
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://reeceipt-validator.fovea.cc 'unsafe-eval' 'unsafe-inline' gap:; style-src 'self' 'unsafe-inline'; media-src *">
5
</head>
6
<body style="margin-top: 50px">
7
  <script type="text/javascript" src="cordova.js"></script>
8
  <script type="text/javascript" src="js/index.js"></script>
9
</body>
10
</html>
Copied!
Make sure to comment out Cordova template project's CSS.
We enabled the 'unsafe-inline' Content-Security-Policy by adding it to the default-src section.
Since we'll be using Fovea.Billing, you also need to add your validation server to default-src, find your in the cordova setup documentation. On my case it's https://reeceipt-validation.fovea.cc.
Let's now or edit the JavaScript file js/index.js. Replace the content with the code below, which will setup a minimal application framework and render some HTML into the page based on the app state.
1
document.addEventListener('deviceready', onDeviceReady);
2
​
3
function onDeviceReady() {
4
​
5
    const state = {};
6
    function setState(attr) {
7
        Object.assign(state, attr);
8
        render(state);
9
    }
10
​
11
    setState({
12
        error: '',
13
        status: 'Loading...',
14
        product1: {},
15
        product2: {},
16
    });
17
​
18
    // We will initialize the in-app purchase plugin here.
19
​
20
    function render() {
21
​
22
        const body = document.getElementsByTagName('body')[0];
23
        body.innerHTML = `
24
<pre> 
25
${state.error}
26
​
27
subscription: ${state.status}
28
</pre>
29
        `;
30
    }
31
}
Copied!
Now let's initialize the in-app purchase plugin, where indicated in the onDeviceReady function.
1
    // We should first register all our products or we cannot use them in the app.
2
    store.register([{
3
        id:    'my_subscription1',
4
        type:   store.PAID_SUBSCRIPTION,
5
    }, {
6
        id:    'my_subscription2',
7
        type:   store.PAID_SUBSCRIPTION,
8
    }]);
9
​
10
    // Setup the receipt validator service.
11
    store.validator = '<<< YOUR_RECEIPT_VALIDATION_URL >>>';
12
​
13
    // Show errors for 10 seconds.
14
    store.error(function(error) {
15
        setState({ error: `ERROR ${error.code}: ${error.message}` });
16
        setTimeout(function() {
17
            setState({ error: `` });
18
        }, 10000);
19
    });
20
​
21
    // Later, we will add our events handlers here
22
​
23
    // Load informations about products and purchases
24
    store.refresh();
25
}
Copied!
Here's a little explanation:
We start by registering the product with ID my_subscription1 and my_subscription2.
We declare the products as renewable subscriptions (store.PAID_SUBSCRIPTION). ⇒ API Documentation.
We setup the link to the receipt validation server. If you're using Fovea.Billing, you'll find it here.
We setup an error handler. It will display the last error message for 10 seconds on top of the screen.
Finally, we perform the initial refresh() of all product states. ⇒ API Documentation.
Whatever your setup is, you should make sure the initialization code is executed as soon as the javascript application starts. You have to be ready to handle IAP events as soon as possible.
Presentation
Let's now display the subscription status, as it is provided by the native platform. Before the call to store.refresh() we will add an handler for the update event:
This hander is called whenever there's a change in our products' state.
1
// Called when any subscription product is updated
2
store.when('subscription').updated(function() {
3
    const product1 = store.get('my_subscription1') || {};
4
    const product2 = store.get('my_subscription2') || {};
5
​
6
    let status = 'Please subscribe below';
7
    if (product1.owned || product2.owned)
8
        status = 'Subscribed';
9
    else if (product1.state === 'approved' || product2.state === 'approved')
10
        status = 'Processing...';
11
​
12
    setState({ product1, product2, status });
13
});
Copied!
Now we can display some information about our products from the render() function:
1
function render() {
2
​
3
    const purchaseProduct1 = '';
4
    const purchaseProduct2 = '';
5
​
6
    const body = document.getElementsByTagName('body')[0];
7
    body.innerHTML = `
8
<pre> 
9
${state.error}
10
​
11
subscription: ${state.status}
12
​
13
id:     ${state.product1.id          || ''}
14
title:  ${state.product1.title       || ''}
15
state:  ${state.product1.state       || ''}
16
descr:  ${state.product1.description || ''}
17
price:  ${state.product1.price       || ''}
18
expiry: ${state.product1.expiryDate  || ''}
19
</pre>
20
${purchaseProduct1}
21
<pre>
22
​
23
id:     ${state.product2.id          || ''}
24
title:  ${state.product2.title       || ''}
25
descr:  ${state.product2.description || ''}
26
price:  ${state.product2.price       || ''}
27
state:  ${state.product2.state       || ''}
28
expiry: ${state.product2.expiryDate  || ''}
29
</pre>
30
${purchaseProduct2}
31
    `;
32
}
Copied!
Whenever anything happens to our product, the interface will now be updated to reflect the current state.
Displaying your product information this way, i.e. exactly as loaded from the Store, is required by Apple and Google. Do otherwise and they might simply reject your application.
You can also disconnect the event handler with store.off() so your subscription view is only updated when it's visible.
If you want a bit more background information about all of this, please check the introduction's displaying products section and the ⇒ API Documentation for full details about the fields found for a product.
Purchase
So far so good, but what if we could actually initiate a purchase? To do so, we'll add a purchase button for both products. We already added placeholders for the purchase buttons, let's create them. Before displaying a purchase button, we need to make sure the user can actually purchase the item. It could be impossible for a few reasons: there's already a purchase in progress, the product is already owned, the feature is disabled for the user (Child Mode).
In our render() function, we update the code that initialized purchaseProduct1 and purchaseProduct2.
1
// button for product 1
2
const purchaseProduct1 = state.product1.canPurchase
3
    ? `<button onclick="store.order('my_subscription1')">Subscribe</button>` : '';
4
​
5
// same for product 2
6
const purchaseProduct2 = state.product2.canPurchase
7
    ? `<button onclick="store.order('my_subscription2')">Subscribe</button>` : '';
Copied!
1
The buy button should only be displayed when `product.canPurchase` is true. Otherwise, calling `store.order()` will generate an error.
Copied!
We could make this a little nicer by changing the button labels to "Upgrade" or "Downgrade" when the other product is owned, I will let this as an exercise to the reader.
Now, let's build and test!