Making iOS In-App Purchases With IonicFramework

I recently did a post on how to accomplish in-app purchases in Android with IonicFramework, so this will compliment things from an iOS perspective.  Freemium is the new normal for mobile apps.  It allows people to download your app for free, but charge them for certain features.

The following should get you started with in-app purchases in your Ionic iOS application.

Assuming that you’ve already created an Ionic project and included iOS as one of the build platforms, run the following command to include j3k0’s Phonegap InAppPurchase iOS plugin:

Don’t let the plugin name fool you.  It does work for Apache Cordova, which makes it compatible with IonicFramework.

With the plugin installed, it must be initialized within your application.  I strongly recommend initializing in the $ionicPlatform.ready() method so that way it happens when your application loads.

The plugin has several callback functions to be set up during initialization.

As soon as storekit.init is called, the onReady callback is executed.  The other callbacks are executed when certain methods are called.

When the storekit.purchase(“productId1”); method is executed, the onPurchase callback will be made.  When the storekit.restore(); method is executed, the onRestore callback will be made.

Let’s look at a full example of in-app purchases in action:

The above example initializes the in-app purchase plugin and offers a way to make or restore a purchase via an example controller.  According to the official Apple documentation, it is inappropriate to restore purchases during initialization which is why I created a separate method for doing so.  Restoration, like purchasing, requires account sign in / password re-approval.

Some things to note about this plugin and plugins in general.  In-app purchases cannot be tested in the iOS simulator and this plugin cannot be tested in a web browser.  This plugin can only be used on a physical iOS device.

So how do you make test purchases?  First you need to sign into iTunes Connect and create a test account.  Do not try to use your real account to make test purchases.  On your test device make sure you have signed out of your real account.  When prompted in your application, sign in using the newly created test account.

A thing to note about test purchases for non-consumable items.  Once you purchase a non-consumable item, it cannot be canceled or reset.  The only way to test purchasing again is to create a new test account.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Hey Nic,

    I just tried it out and found that I need to run
    ‘cordova plugin add cc.fovea.cordova.purchase’
    to install the plugin for iOS (as he writes on his setup page)!

    With your provided line I get:
    Failed to install ‘cc.fovea.cordova.purchase’:Error: Variable(s) missing: BILLING_KEY

    • Thanks for bringing this to my attention. Looks like the plugin received breaking changes since writing this tutorial. This tutorial was modeled after release 3.4.1:

      https://github.com/j3k0/cordova-plugin-purchase/tree/v3.4.1

      If you want to install that version, this tutorial will still work. I will work on a revision post soon for the latest.

      Regards,

      • Paolo Maffei

        did this ever happened?

        thanks

        • I have not updated the post. I don’t know when I’ll have time. I recommend using the older version or referring to this post for ideas only.

          Regards,

          • Abhi Ram

            Thanks for the code. Actually I have a question.
            It is popping up sign in to iTunes every time I open the app only in iOS 9. Do you have a fix for that??

          • Weston Ganger

            Im having the same issue in development testing. Have you tested it in a Production or Beta app where your actually logged in to the store? I haven’t got that far yet.

  • SleekA1 Apps Co.

    No error is thrown. The console log prints out that all is loaded and ready to go. Though when I attempt to try the in app purchase, nothing occurs. No pop up or error.

    • Albert Vince Mendiola

      Hi, i also encountered this. how did you this solved it? Thanks

      Regards,

  • SleekA1 Apps Co.

    the only error that I am now receiving is that it could not load the product ID. no idea as to why.

    • Did you publish your In-App-Purchases in the app store? Usually it will fail with an error like that until you publish them. They cannot be draft or private.

  • Thanks for this tutorial

    • No problem!

      • Just a quick question: where in iTunes connect do you setup the products and how are they associated with the ID?

        • My Apps -> [APP_NAME] -> In-App Purchases

          You should be able to set up the ID information in there.

  • kk

    Hello, I have question about how to receive response when using storekit.purchase(“productId1”);. It seems that android version of it have error handling, but I couldn’t figure out a way to do error handling for IOS storkit.purchase. Is there a way to achieve this?

    • There is an error callback as mentioned in this tutorial’s write-up.

      Regards,

  • Duffy Cola

    thank you very much!

  • Prag

    Thanks for this, worked well on iOS! Do you happen to remember what source did you use as a code reference? Maybe it’s changed, but I don’t see the functions you used in the docs (but they still work). Also, just curious if there was a reason behind using two different plugins? It looks like this should work for android as well? Thanks again!

    • I’m assuming this has changed. Last year when I wrote this, the Android IAB was not included in this plugin. I think it is now.

      I may do a revisited post on this in the future.

      Best,

      • Prag

        Ah, got it. Thanks for the reply!

  • Jay

    After purchased Item, it’s aways require for login every time I lunch the app.
    Seem it aways try to restore purchased item.
    could you advice how can I fix it pls?

    • You need to store the state in local storage. This way you only try to restore purchases if you haven’t already flagged it as purchased within your app.

  • demur7799

    Hi Nic, thanks for your value posts on blog, can you help with iOS & Android In App Purchases for Ionic Framework for $40 by paypal. In standard TAB Ionic project in list view when user tap to more info show popup to purchase 1 non-consumable (with restore function) product, after pay user can open all lists on this tab.

    Please reply if you can help with this. Thanks. Email: [email protected]

    • As I mentioned on Twitter, I don’t do consulting, so I am not for hire.

      I’m not understanding the problem here. Have you attempted this and it is failing? Please give me more information on what you tried and what is not performing correctly.

      Regards,

  • Sudhir Raj

    Thanks Nic,

    I have few basic questions in ios app creations because i was developing app for android so has no mind about ios platform.
    Can you provide me a basic knowledge about ios developement.
    My questions are:

    Can we develop an ios app without macbook (i.e can we use windows system).
    If we can create how can we check it, I have apple devices. If we need macbook i need to get one.

    It will be very useful if you post a very basic user guide for ios development. Person who are migrating from android to ios will get use of this.

  • Flavio Passa

    If you need a functional working example of In App Purchase integration in Ionic, you may be interested to check out Quizionic App template in CodeCanyon here: http://codecanyon.net/user/studiomob/portfolio?ref=StudioMob

  • Guilherme Nascimento

    Hi Nic. Just a questions. Can I use https://github.com/j3k0/cordova-plugin-purchase to make android IAP ? I’m trying to use but it doesn’t work. Thanks.

  • Rajesh Kumar

    Thanks for the Tutorial Nic.

    Can you please help me here ,

    I have 4 products, So in ready function , i have to mention all product ID’s ?

    and in purchase and restore you have only used productId1. SO for all products, i need to user if else statements here ?

    • I believe the plugin has changed. This tutorial was written more than a year ago.

  • s3v3n

    please update this tutorial.

  • s3v3n

    i get an error….

    InAppPurchase[objc]: productsRequest: didReceiveResponse: sendPluginResult: (
    (
    ),
    (
    “test_500”,
    “test_4500”,
    “test_1000”,
    “test_7500”,
    “test_12000”,
    “test_2500”
    )
    )

    InAppPurchase[js]: load ok: { valid:[] invalid:[“test_500″,”test_4500″,”test_1000″,”test_7500″,”test_12000″,”test_2500”] }

    2016-01-17 19:49:21.353 MYAPPNAME[745:472382] In-app purchases are ready to go

    InAppPurchase[objc]: About to do IAP
    2016-01-17 20:00:03.642 MYAPPNAME[745:472382] *** WebKit discarded an uncaught exception in the webView:decidePolicyForNavigationAction:request:frame:decisionListener: delegate: Invalid product identifier: (null)

    iam on my real device with sandbox user…. i dont know whats wrong

  • Rahul Miglani

    Thanks for the tutorial. Please let me know how to cancel the recurring subscription in IONIC.

  • emmy

    Thank you for all the tutorials. This is the only one tutorial I find that works on in app purchase!

    • No problem, glad you found it useful 🙂

    • Brad

      Can anyone post a working example…..? unable to get this working…. I get :
      *** WebKit discarded an uncaught exception in the webView:decidePolicyForNavigationAction:request:frame:decisionListener: delegate: Invalid product identifier: (null)

  • McZlatan Bourne

    Nice tutorial. Could you make video tutorials for these? The Android and iOS.

    Thank You !!!

  • Shri Kant Kaushik

    Hi, I am using this plugin for iOS. I got an error on app start which is “Setup Failed” and on purchase error is “Trying to purchase a unknown product”. I implement the plugin as mentioned in this tutorial. Then whats the problem in this?

    • Shri Kant Kaushik

      I got a message on Xcode which is “Plugin is disabled.” How can I solve this?

      • Sandra

        make sure you’ve enabled ‘In-App Purchases’ in your Project’s cababilities in Xcode (this is set by default) and you’ll also need to configure iTunes Connect > Features > In-App Purchases (IAP).

        for anything but the free option to show up in iTunes Connect as a ‘Type’ for IAP, you’ll need to get a Team Agent or someone with the “Legal” role to agree to the ‘Paid Application’ contract

        hope that helps, Sandra.

  • Esteban G.

    This is great… I have a question… how do you get the current status of a subscription for a particular user?