In app purchases, to revenue from your portable application among others. You may put up for the sale of your products. For mobile application, In app purchase becomes a vital part if you are selling digital functionalities and content.
Generally IOS and Google both support In-App purchase, You'll merely employ along with your Native code. However, If you're using a hybrid framework for your mobile app development then it's become difficult for you to pay attention of each and every platform when IOS and Android during a single code.
Today here I am going o explain you how I actually have used react native IAP library with React Native App Development, Which supports for both ANDROID and IOS In-App purchase for subscription and for a single product.
Let us start with assuming that you have already responsive to an In-App set up on your Play Store and App store. Before beginning let's create a few one-time purchase with auto-renewable subscription & purchase item.
Installation Guide
Firstly create new React Native app, once you have got formed it with success, add below package in your project by using this command.
npm i react-native-iap --save
Set up for Android
You need to add permission inside the Android Manifest file.
How To Import
Add 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 listing 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 delicate 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.
If you are using react-native-iap version below 3.0.0, please follow the below code.
Manual installation
IOS
- In XCode, in the project navigator, right-click Libraries ➜ Add Files to [your project's name]
- Go to node modules ➜ react-native-iap and add RNIap.xcodeproj
- In XCode, in the project navigator, select your project. Add libRNIap.a to your project's Build Phases ➜ Link Binary With Libraries
- Run your project (Cmd+R)
-
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);
I hope you would love to code with this blog which may help you to code easily with proper instruction. Actually above I have stated validation code is for iOS only. So later on 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.
There are no comments