Table of Contents

    In-app purchases! A way, among others, to profit from your portable application. You may sell your product single time or offer subscription depending on your products. For mobile application, In-App purchase becomes a vital part if you are selling digital content or functionalities.

    Generally iOS and Google each support In-App purchase, you’ll simply implement along with your native code. However, if you’re using a hybrid framework for your mobile app development then its become arduous for you to take care of each platform iOS and Android during a single code.

    In this blog, I actually have used react-native-iap library with React Native app development, that provides nice support for each iOS and Android In-App purchase for a single product and subscription each.

    Before beginning implementation, I assume that you are already responsive to In-App set up on your App Store and Play Store. Let’s create a few one-time purchase item and few auto-renewable subscription items.

    Installation Guide


    Let’s create new React Native app, once you have got created it with success, add below package in your project using this command.

    npm i react-native-iap --save

    Set up for Android You need to add permission inside the Android Manifest file.

    Import
    Let’s import library in your React Native code using below code.

    port * as RNIap from “react-native-iap”

    Usage
    Open your App.js file and insert your purchase items and subscription items for iOS and Android as written in below code.

    // Purchase items
    const itemSkus = Platform.select({
    ios: [
    "INSERT YOUR PURCHASE ID IOS"
    ],
    android: [
    "INSERT YOUR PURCHASE ID ANDROID"
    ]
    });

    // Subscription items
    const itemSubs = Platform.select({
    ios: [
    "INSERT YOUR SUBSCRIPTION ID IOS"
    ],
    android: [
    "INSERT YOUR SUBSCRIPTION ID ANDROID"
    ]
    });

    Fetch In-App Products for iOS & Android


    By revoke getProducts() you will get the list of valid products created on App Store and Play Store. You will get JSON response to all your products.
    try {
    const products = await RNIap.getProducts(itemSkus);
    this.setState({ products });
    } catch(err) {
    console.warn(err); // standardized err.code and err.message available
    }

    In-App purchase
    You can call buyProduct() once you have got a valid product list. buyProduct() is commonly used for consumable as well as for subscription items. You’ll cancel the subscription from your iOS or Android setting.

    try
    // Will return a purchase object with a receipt which can be used to validate on your server.
    const purchase = await RNIap.buyProduct('YOUR PRODUCT ID');
    this.setState({
    receipt: purchase.transactionReceipt, // save the receipt if you need it, whether locally, or to your server.
    });
    } catch(err) {
    // standardized err.code and err.message available
    console.warn(err.code, err.message);
    }
    Note: For iOS, you have two options to validate receipt either on mobile or on the server side. But for Android, you need to validate only on the server.

    Restoring In-App Purchases


    If you have already done purchase before and want to restore your previous purchases within your app then you need to call getAvailablePurchases(). It will list out all your previously purchased products and subscriptions.

    getPurchases = async() => {
    try {
    const purchases = await RNIap.getAvailablePurchases();
    } catch(err) {
    console.warn(err); // standardized err.code and err.message available
    }
    }

    Upon successful subscription purchase, you will get subscription receipt and other detail in response. The receipt will be used later on to validate your purchase while you open your app next time. So if any user canceled the subscription then it will revert users subscription to normal mode.

    Receipt validation will be completed using validateReceiptIos() as written in below code snippets.

    const receiptBody = {
    'receipt-data': purchase.transactionReceipt,
    'password': '******'
    };
    const result = await RNIap.validateReceiptIos(receiptBody, false);
    console.log(result);

    Actually above validation code is for iOS only. So later when you open your app after subscription you will use this receipt and validate it with App Store using your app secret for this app.

    About Author

    Manektech Team

    Nikhil Solanki

    Mobile Lead

    Nikhil Solanki has 10+ years of experience in Mobile App Development and currently works as the Mobile Lead at ManekTechworked. He is an experienced Mobile lead with a demonstrated history of working in Mobile's information technology and services industry. 

    Subscribe to Our Newsletter!

    Join us to stay updated with our latest blog updates, marketing tips, service tips, trends, news and announcements!

    Areas we serve

    USA

    4100 NW Loop 410, Suite 200, San Antonio, Texas, USA 78229

    UK

    7 Artisan Place Harrow, HA3 5DS

    India

    4th Floor, Timber Point, Prahaladnagar Road, Ahmedabad, Gujarat - 380015

    Germany

    Franz-Joseph-Strasse, 11,Munich, 80801, Germany

    PREV
    NEXT