InApp Purchase

Three steps for InApp Purchase configuration

1. Configure InApp Products on App Store.
2. Configure InApp Products on Google Play Console.
3. Integrate rn-in-app library.

Step 1:- Configuration on App Store

Goto ‘Agreement, Tax and Banking’ Section of iTunes -> Select paid Application Contract type.

Go To Your App Dashboard -> Select Feature Section -> In App Purchase -> Add your products (There will be + button).

Now In-App Purchase created, you need to add the Product ID to your app’s control panel. In your app control panel -> go to the “Commerce” section from the menu on the left -> Copy productID and paste here -> click on Add button to save.

Step 2:- Configure your app on Google Play Console

Note:- For settings in play console you have to upload apk on play console.

Go To Play Console -> Settings -> Activate your Merchant Account.

After Activate Merchant Account -> Go To Application Dashboard -> from side menu select Development Tools -> select Services and APIs -> Copy the license key.

Link for add merchant account on play console:- https://learn.buildfire.com/en/articles/499662-how-to-set-up-your-account-for-in-app-purchases-in-your-google-developer-account-for-android

Upload your license/billing key to the 'Commerce' section of your app’s control panel.

Go To Play Console -> Application Dashboard -> From Side Menu Select 'Store Presence' -> Expand Store Prsence and Select 'In App Purchase' -> Click on Manage Products (Add your products here) and mark them in active state.

Step 3:- Integrate rn-in-app library into your project

Go To your Project Directory:- yarn add react-native-iap Go To ios folder -> pod install

In XCode settings, open Xcode and select project and goto Capabilities section and enable InApp Purchase button.

In Android Manifest add following permission:-

1
2import RNIap, {
3  Product,
4  ProductPurchase,
5  PurchaseError,
6  acknowledgePurchaseAndroid,
7  purchaseErrorListener,
8  purchaseUpdatedListener,
9} from 'react-native-iap';
10
11const productSkus = Platform.select({
12  ios: ['com.demo.productId'],
13  android: ['com.demo.productId'],
14});
15
16let purchaseUpdateSubscription;
17let purchaseErrorSubscription;
18
19const [receipt, setReceipt] = useState('');
20const [products, setProductList] = useState([]);
21
22UseEffect(async () => {
23 try {
24      const result = await RNIap.initConnection();
25      console.log('init connection ----', result);
26      await RNIap.consumeAllItemsAndroid();
27    } catch (err) {
28      console.log('err in init connection--- ', err);
29    }
30    purchaseUpdateSubscription = purchaseUpdatedListener(
31      async (purchase) => {
32        console.log('purchase update', purchase);
33        if (
34          purchase.purchaseStateAndroid === 1 &&
35          !purchase.isAcknowledgedAndroid
36        ) {
37          try {
38            const ackResult = await acknowledgePurchaseAndroid(
39              purchase.purchaseToken,
40            );
41            console.log('acknowledge response', ackResult);
42          } catch (ackErr) {
43            console.warn('acknowledge error', ackErr);
44          }
45        }
46        _purchaseConfirmed();
47        setReceipt(purchase.transactionReceipt);
48        purchaseErrorSubscription = purchaseErrorListener(
49          (error) => {
50            console.log('purchaseErrorListener', error);
51            // alert('purchase error', JSON.stringify(error));
52          },
53        );
54      },
55    );
56      return () => {
57        if (purchaseUpdateSubscription) {
58          purchaseUpdateSubscription.remove();
59          purchaseUpdateSubscription = null;
60        }
61        if (purchaseErrorSubscription) {
62          purchaseErrorSubscription.remove();
63          purchaseErrorSubscription = null;
64        }
65      }
66}, [])
67
68const _purchaseConfirmed = () => {
69   // Server api to send status of purchase.
70};
71
72const _getProductList = async () => {
73  try {
74    console.log('productSkus[0]====', productSkus[0]);
75    const products = await RNIap.getProducts(productSkus);
76    console.log('Products=======', products[0]);
77    setProductList(products)
78    _requestPurchase(productSkus[0]);
79  } catch (err) {
80    console.log('_getProductList purchase error ==== ', err);
81  }
82};
83
84const _requestPurchase = async (sku) => {
85  try {
86    RNIap.requestPurchase(sku);
87  } catch (err) {
88    console.log('requestPurchase error => ', err);
89  }
90};
91
92return (
93  <View>
94    <TouchableOpacity onPress={() => _getProductList();}>
95      <Text>Check RNIAP</Text>
96    </TouchableOpacity>
97  </View>
98)
99
100
101
102
103
104
Copy