Make it Rain! Monetize Your Mobile App with Cordova Plugins

One of the toughest challenges in building mobile apps is how to monetize them – in other words, how to make money from all your hard work. Some apps have a built-in monetization strategy, in that they are bundled with a larger web product and exist to enhance the desktop experience. Releasing your app as a paid app also negates the need to worry about in-app monetization entirely. Most free apps, however, need to integrate some way to bring in revenue. Luckily, Telerik’s Platform offers a marketplace full of useful, curated plugins that allow you to incorporate third-party products, including the gold standard of mobile checkouts, Stripe, and the most common advertisement platform, AdMob. Let’s take a look at how and when you can leverage these plugins to make money with your mobile app.

Before you start

Adding an ad or mobile checkout to your app brings with it some consideration of audience. If your app is targeted primarily at children under age 13, and you intend to release it within one of the age categories on iOS, you should avoid using ads. New and ever more stringent COPPA (Children’s Online Privacy Protection Act) requirements place the burden of children’s privacy on the developer – potentially making you liable for any personal information tracking that a third party might collect via an ad placed in a mobile app. Play it safe – I recommend releasing a kid’s app without ads – maybe as a paid app. For other types of apps, however, AdMob offers a straightforward integration that makes adding advertisements to your app a breeze.

There are other kinds of restrictions enforced by Apple for integrating a shopping cart. Apple requires that you to sell digital services, digital content, and virtual goods like coins or tokens using in-app purchasing (from which they take a percentage of revenue). If, however, you are selling physical goods or “real world goods and services”, you can use a mobile checkout process in standard shopping cart format. These divisions are described here. Google has a similar policy. So if you need to sell real-world items in your app, the Stripe plugin will most likely suit your needs.

Add an ad

To implement the AdMob plugin, you need to create an account on AdMob. You need to add your personal banking information so that revenue generated by the ad will find its way to your account. After this is done, click “monetize” in the AdMob header and click “Monetize new app”.

3

Add your app’s information (even if it’s not yet live…all you need is an app id). Select either “interstitial” or “banner” ad and click save – AdMob will generate an ad unit id. Make a note of that string.

4

Additional Options

You can edit your ad to block unwanted types of ads. AdMob gives you fine-grained control of the type of ad you want to show your users.

5

In addition, you can “mediate” your ad by pulling in different ad networks. You can create accounts on inMobi and Millennial Media, for example, add your app to those networks, and then tell AdMob to serve up ads from those sources by inputting the app id from the mediated network into AdMob. This is a good way to diversify your ads for your users and get better click rates.

6

Adding the Plugin

You can do your plugin development from the command-line using the AppBuilder CLI or from the in-browser toolset. If you are creating your app on platform.telerik.com, it’s easy to install a plugin.

In your project, double-click the ‘wrench’ icon in the right panel icon to open up the properties pane.

1

Click on ‘plugins’ in the left panel. Scroll down to find the ‘other plugins’ button and click it.

2

AdMob is the second plugin on the popup window’s list. Highlight it and click ‘install’. AppBuilder installs the plugin into your project.

The Code

Now add the plugin code into your app. Add the following snippet to your app.js file:

var admob = window.plugins.AdMob;

// first create a placeholder for the ad

admob.createBannerView(
{
   'publisherId': 'add-your-ad-id-here',
   'adSize': admob.AD_SIZE.BANNER,
   //this places the ad at the bottom of the screen
   'bannerAtTop': false
},

// createBannerView success callback: we can now request an ad to show in the view
function() {
  admob.requestAd(
    {'isTesting':false},
    // requestAd success callback: we can now show he ad in the placeholder
    function() {
      admob.showAd(
        true,
        // showAd success callback: if this is called, the ad is being shown
        function() {console.log('show ok')},
        // showAd error callback
        function() { alert('failed to show ad')}
      );
    },
    // requestAd error callback
    function(){ alert('failed to request ad'); }
  );
},
// createBannerView error callback
function(){ alert('failed to create banner view'); }
);

Testing on Devices

When integrating plugins, we need to be able to deploy our code to device. In general, device testing can be done using the AppBuilder Companion App, available for all platforms. But for custom plugins like the AdMob or Stripe plugins, we have to go one step further and do an actual device build to make the app run as a mobile app on your device. Unlike the core Cordova plugins, which are available within the AppBuilder Companion App, custom plugins must run in a built app to access the native device APIs they need.

On each platform, preparing for a device build is a somewhat involved procedure—especially for iOS, for which you will need to install a certificate, provision your device, and build locally—after which AppBuilder will be able to deploy your app to your connected device.

Note, the app identifier that you use for your provisioning profile needs to match the identifier that is included in the codebase, so if you need to make a change to match those two, double click ‘properties’ in the Project Navigator and edit the Application Identifier field. It should look like ‘com.company.appname’

Please refer to the following documentation that walks you through the process on each OS. You’ll need to complete this setup for your device’s OS before continuing.

For iOS
For Android
For Windows Phone

Once you have completed your setup, you can click ‘build’ and the interface will walk you through installing the app to your connected device. A QR code is produced by AppBuilder; use a QR reader on your device to download the freshly-built app.

A banner ad will look like this:

9

Take a look at your AdMob dashboard and you will see the impressions caused by opening the app.

Checkout with Stripe

If you need to build a shopping cart for your app, look no further than the Stripe plugin.

For the purposes of this tutorial, we are going to assume that you have already built a shopping cart experience such that a user can put widgets into the cart within an app and generate a total dollar amount to checkout.

A note about security: You can rest assured that your credit card data will be passed over SSL, as all API calls to Stripe are done over https.

Setting Up

The first step is to sign up for a Stripe account. Stripe describes itself as a ‘suite of APIs that powers commerce for businesses of all sizes.’ Apps such as Lyft, TaskRabbit, Wufoo and Postmates have integrated Stripe to accept payments from their customers. It is known for its sleek shopping experience and inclusion of useful APIs for coupons, special deals, subscriptions, and recurring billing.

Once you sign up for an account, go to ‘Account Settings’ in the dashboard and locate your API Keys. Make a note of the ‘Test Secret Key’ for later.

dineissimo-3-1

Installing the Plugin

Installing this plugin in the in-browser client is a little different with Stripe than the way we did it for AdMob. You will need to add the API Key to plugin.xml, thus altering the plugin code, so you need to install it manually.

  1. First, Go to http://plugins.telerik.com/plugin/stripe and click ‘Download Plugin’.
  2. Upload it to the AppBuilder in-browser client by right-clicking on the ‘plugin’ gear icon in the Project Navigator panel and selecting the zip file.
    dineissimo-3-2
  3. Edit the Stripe plugin’s plugin.xml file, adding your Test Secret Key. Expand the Plugins folder from the gear icon in the Project Navigator Panel and find the Stripe folder. Edit plugin.xml by removing the line:
    <preference name="API_KEY" ></preference>

    Look for the two places that reference API_KEY and replace API_KEY with your Test Secret Key and save plugin.xml.

The Code

The checkout process we’re going to build is the simplest possible — just the minimal required information needed by Stripe to charge a credit card. To test the Stripe API, use the values listed here, which includes fake credit card numbers usable for testing.

Add a form on a screen in your app to see what it looks like; we will hard-code a total for now:

<div class="cart-form">       
    <form id="cartForm" data-role="validator" novalidate="novalidate">
        <ul data-role="listview" data-style="inset">
            <li>
                <label>Name
                    <input type="text" name="name" required="required" data-bind="value: name"/>
                </label>
            </li>
            <li>
                <label>Credit Card
                    <input type="text" name="cc" required="required" data-bind="value: cc"/>
                </label>
            </li>
            <li>
                <label>Expiration Month

                    <select data-bind="value: expmonth">
                      <option value="01">January</option>
                      <option value="02">February</option>
                      <option value="03">March</option>
                      <option value="04">April</option>
                      <option value="05">May</option>
                      <option value="06">June</option>
                      <option value="07">July</option>
                      <option value="08">August</option>
                      <option value="09">September</option>
                      <option value="10">October</option>
                      <option value="11">November</option>
                      <option value="12">December</option>
                    </select>
                </label>
            </li>

            <li>
                <label>Expiration Year                       
                    <select data-bind="value: expyear">
                      <option value="14">2014</option>
                      <option value="15">2015</option>
                      <option value="16">2016</option>
                    </select>
                </label>
            </li>
            <li>
                <label>CCV
                    <input type="number" name="cvc" required="required" data-bind="value: cvc"/>
                </label>
            </li>

            <li>
                <hr/>
            </li>

            <li>
                <label>Total: 5.00</label>
            </li>

            <li>
                <button type="button" data-role="button" class="cart-button" data-bind="click: pay">Pay</button>
            </li>

        </ul>


    </form>
</div>

The form looks like this in the end:

dineissimo-3-3

Finally, add a function in your app.js file to create the ‘pay’ routine:

pay: function (e) {
    if (!this.name) {
        navigator.notification.alert("Username is required.");
        return;
    }
    if (!this.cc) {
        navigator.notification.alert("Credit card number is required.");
        return;
    }
    if (!this.cvc) {
        navigator.notification.alert("CVC is required.");
        return;
    }
    if (!this.expmonth) {
        navigator.notification.alert("Expiration month is required.");
        return;
    }
    if (!this.expyear) {
        navigator.notification.alert("Expiration year is required.");
        return;
    }

    var validator = $("#cartForm").data("kendoValidator");
      if (validator.validate()) {
          kendo.mobile.application.showLoading();
           stripe.charges.create({
/*ensure the amount is a number, and multiply it by 100 as Stripe expects the sum to be in cents*/
              amount : 500,
    //the type of currency, US Dollars for now
              currency :  “usd”,
              card : {
                  number : this.cc,
                  exp_month : this.expmonth,
                  exp_year : this.expyear,
                  cvc : this.cvc,
                  name : this.name
                },
            description : "Testing Stripe"                     
      }, function(result){

          kendo.mobile.application.hideLoading();

          if(result.error){
              navigator.notification.alert(result.error.message);
          }
          else{
              navigator.notification.alert("Thank you for your order!");
          }

      });

    }
}

This function asks Stripe to create a charge with the amount in your shopping cart (multiplied by 100, as Stripe expects payments in cents). Any errors reported by Stripe appear in the notification, for example incorrect credit cards, amounts, or other problems. If your test charge goes through, however, on this sandbox account, you will see a ‘thank you’ alert and the charge will appear in your Stripe dashboard:

dineissimo-3-4

Now you’re really in business! You can accept credit cards and your cashflow will surely go through the roof. The Stripe plugin supports many more things than simple checkout, including creating customers and retrieving their saved data for recurring billing, coupons, money transfers, cancellations, updates and returns, and removal of recipients. It’s a great plugin that offers a lot of bang for the buck. I encourage you to try it out, along with all of Telerik’s curated plugin marketplace.

But Wait…There’s More!

While AdMob and Stripe are two of the most popular options for monetizing mobile apps, they are certainly not the only ones. If you are looking for additional tools, be sure to check out the Verified Plugin Marketplace which lists many other helpful plugins (such as Paypal) that you can use to build the mobile app that will soon have you rolling in cash!

AppBuilderBanner

Header image courtesy of Philip Taylor

Comments

  • Oguz Al

    I tried to add the AddMob to my telerik app. I used the code above to activate the plugin but it doesnt find the plugin . I installed the Admob plugin from properties in Telerik AppBuilder, then I disabled it and added the plugin manually . Still I am getting “Cannot read property ‘AdMob’ of undefined ” error from the very first line :
    var admob=window.plugins.Admob;

    What is wrong?
    and the admob screens are changed , compared to above screenshots

    • Jen Looper

      hi, sorry you’re having trouble. I guess my first question is whether you are testing on device and seeing the ad appear, and my second question is whether you added your own ad ID to the above code? If you’re not debugging on device, you won’t be able to see custom Cordova plugins like this one. Good luck!

      • Oguz Al

        Actually I am able to show the ads, but on ADMOB page, it shows 0 impressions, I have a few downloads for Windows and 40 downloads in Android , there must be more than 0 impressions.Any idea?
        Thanks

        • Jen Looper

          hm. That doesn’t sound right 🙁 I wonder if you added a mediation network you would get more impressions?

  • Pingback: The Ad Blocker's Dilemma -Telerik Developer Network()