In app purchase Integration in React native app
Today we will begin to add in app purchase in a react native app and let me tell you that this is going to be very exciting and very easy as this article will cover all the steps required to integrate the in app purchase in the react native app.
Let dig right into for what we are here:
1:Firstly we need to add the react native npm in the project as mentioned below:
npm i react-native-iap
Once the package is installed you need to only open the android project in android studio you only need to let the files sync once only and there are two more things that must be added one is the permission for billing in the manifest.xml file as mentioned below:
<uses-permission android:name=”com.android.vending.BILLING” />
Once you have added the persmission you need to add the lines mentioned below in the build.gradle file:
1:Add the below line in the defaultConfig:
missingDimensionStrategy ‘store’, ‘play’
2:Very important step do not forget to miss it add this in the dependencies section in the build.gradle file in the android studio:
implementation ‘com.android.billingclient:billing:4.0.0’
Well that’s all for android side configuration for the react native in app purchase.
Wait you need to be appreciated you have come this far that’s very good of you you are only a few steps away from the magic trick to happen that you have been trying to cast the spell for till now:
For IOS side in app purchase you need to just go to xc workspace file and open that in Xcode and go to the project settings and add the capability as shown in the below video for you:
And ka boom you have done configuration for both IOS and android side to integrate the react native in app purchase in your app.
Now comes the part for what all of this was being done so without loosing any more time fasten your seat belts as this will be a very fast ride from here:
1:At first import these modules from react-native-iap
import RNIap,{ requestPurchase, requestSubscription, useIAP, withIAPContext,finishTransaction } from ‘react-native-iap’;
2:Once you have imported them you need to initially the connection
By calling RNIap.initConnection() in useEffect
useEffect(() => {
try {
RNIap.initConnection();
checkAvailablePurchase()
if (Platform.OS === ‘android’) {
RNIap.flushFailedPurchasesCachedAsPendingAndroid();
} else {
// * WARNING This line should not be included in production code
// This call will call finishTransaction in all pending purchases on every launch,
// effectively consuming purchases that you might not have verified the receipt or given the consumer their product
// TL;DR you will no longer receive any updates from Apple on every launch for pending purchases
RNIap.clearTransactionIOS();
}
} catch (err) {
console.warn(err.code, err.message);
}
}, [])
const checkAvailablePurchase = async () => {
try {
const availablePurchases = await RNIap.getAvailablePurchases();
availablePurchases.forEach((purchase) => {
console.log(“availablePurchases”, purchase)
finishTransaction(purchase, true);
});
} catch (error) {
console.warn(
“Failed to connect to IAP and finish all available transactions”
);
}
}
DO not leave any step mentioned or else :
This might look a lot for now but you need this piece of code to initialise and you need to check if the products are available for purchase or not and if they are available then you can go to next step that we need to call our function to buy the in app product or subscribe to a subscription of a product in the code mentioned below:
const inappPurchase = (param) => {
RNIap.getProducts(‘products from App Store or play store’).then((products) => {
//handle success of fetch product list
console.log(“products”, products)
requestPurchase(product id from App Store or play store).then(purchase => {
// handle success of purchase product
console.log(“purchase”, purchase)
}).catch((error) => {
console.log(“error”, error.message);
})
}).catch((error) => {
console.log(error.message);
})
console.log(“param”, param)
}
Once this above bad boy has been called you will have your desired result by play store regarding the purchase like mentioned below the first is for the products returned by respective store and next one log shared with you is for the response of product purchased:
