DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Frameworks
  4. 5 Plugins to Monetize Your NativeScript App

5 Plugins to Monetize Your NativeScript App

Looking for an easy way to monetize your NativeScript app? Of course you are! Read on for some suggestions!

Rob Lauer user avatar by
Rob Lauer
·
Apr. 19, 17 · Opinion
Like (1)
Save
Tweet
Share
7.99K Views

Join the DZone community and get the full member experience.

Join For Free

It's all fun and games to develop a mobile app, but at the end of the day, you gotta get paid. While many of us are developing apps on a fee basis for clients or as part of our company's strategic mobile initiative, there remains a large segment of developers who are staking out on their own and pursuing a dream of Flappy Bird 2.0.

Aside from charging per download from the app stores, let's take a look at some ways to easily monetize your NativeScript apps with a variety of NativeScript plugins:

Ads

I know, I know! Nobody likes ads! They threaten to help ruin the mobile web and are all too intrusive in some mobile apps. However, I'm here to suggest that there are ways to display embedded advertising without disrupting the user experience.

Take, for example, the Truecaller ad experience on iOS:

truecaller ads

The ad is highly visible, yet doesn't disrupt any part of your experience using the app. If you're interested in the ad, you'll tap on it.

The same can be done on NativeScript of course, by using the NativeScript AdMob plugin.

For example, to install the AdMob plugin, you simply issue the tns plugin add nativescript-admob command in your NativeScript project. Creating a banner ad is then as easy as this chunk of code:

var admob = require("nativescript-admob");

admob.createBanner({
    // if this 'view' property is not set, the banner is overlayed on the current view
    // view: ..,
    testing: true, // set to false to get real banners
    size: size, // anything in admob.AD_SIZE, like admob.AD_SIZE.SMART_BANNER
    iosBannerId: "ca-app-pub-XXXXXX/YYYYYY", // add your own
    androidBannerId: "ca-app-pub-AAAAAAAA/BBBBBBB", // add your own
    // Android adds the connected device as test device with testing:true, iOS does not
    iosTestDeviceIds: ["yourTestDeviceUDIDs", "canBeAddedHere"],
    margins: {
        // if both are set, top wins
        //top: 10
        bottom: 50
    }
}).then(
    function() {
      console.log("admob createBanner done");
    },
    function(error) {
      console.log("admob createBanner error: " + error);
    }
)


You can find additional code samples in this clonable GitHub repository.

We've written extensively about using AdMob before, and there are also guides from Nic Raboy on using AdMob with a vanilla JavaScript NativeScript app and with an Angular NativeScript app.

In-App Purchases

As we see consumers shying away from one-time initial app download fees, we see an increase in the usage of the native in-app purchase platforms. What better way to leverage both Apple's and Google's native platforms than with one cross-platform in-app purchase plugin?

in-app purchase and billing

Install the nativescript-purchase plugin with tns plugin add nativescript-purchase and in this code snippet you can see how easy it is to list the "products" you offer as part of your in-app purchase offerings:

import { Product } from "nativescript-purchase/product";

purchase.getProducts().then((products: Array<Product>) => {
    products.forEach((product: Product) => {
        console.log(product.productIdentifier);
        console.log(product.localizedTitle);
        console.log(product.priceFormatted);
    });
});


...and buy a product with:

if (purchase.canMakePayments()) {
    // NOTE: 'product' must be the same instance as the one returned from getProducts()
    purchase.buyProduct(product);
}


Be sure to consult the plugin documentation for examples on how to complete an in-app purchase.

Collect Payments

If you have a product or feature to sell, another option is to directly integrate with online payment providers like PayPal, MolPay, or Stripe:

paypal logo

The king of online payments since the late 90's, PayPal has made it easy to request and receive payments. By using the PayPal plugin for NativeScript, you can add the PayPal experience to your NativeScript app.

Creating a PayPal purchase couldn't be much easier:

function buyProduct(args) {
    // configure
    var payment = PayPal.newPayment()
        .setDescription('My product')
        .setAmount(59.79);

    // start checkout / payment
    payment.start(function(cbResult) {
        switch (cbResult.code) {
            case 0:
                // SUCCESS
                // pay key is stored in 'cbResult.key'
                break;
            case 1:
                // operation was CANCELLED
                break;
            case -1:
                // checkout FAILED
                break;
            case -2:
                // "unhandled exception"
                break;
        }
    });
}


Note that as of this writing, the PayPal plugin is Android-only, but the iOS implementation is being actively developed.

stripe logo

One the (relatively) new payment gateways out there, Stripe is a favorite of many due to its unparalleled user experience. And recently a brand new NativeScript plugin was released for Stripe!

This plugin allows you to integrate a credit card component into your NativeScript views with the <stripe:CreditCardView> element.

Alternatively, you can use Stripe's JavaScript API directly as it has no browser DOM dependencies.

molpay logo

NativeScript developers in Southeast Asia will probably be the most familiar with MOLPay, which is a fast-growing payment gateway that makes it easy to accept payments from multiple countries and multiple currencies.

The MOLPay plugin for NativeScript provides an easy way to interface with MOLPay along with very detailed documentation. The NativeScript plugin ecosystem is growing every day.

mobile app NativeScript

Published at DZone with permission of Rob Lauer, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Last Chance To Take the DZone 2023 DevOps Survey and Win $250! [Closes on 1/25 at 8 AM]
  • Exploring the Benefits of Cloud Computing: From IaaS, PaaS, SaaS to Google Cloud, AWS, and Microsoft
  • Project Hygiene
  • Using QuestDB to Collect Infrastructure Metrics

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: