Search
⌘K
    to navigateEnterto select Escto close

    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 Dashborad -> 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 marke 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 Menifest add following permission:- <uses-permission android:name=”com.android.vending.BILLING” />

    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('acknoweledge response', ackResult);
    42          } catch (ackErr) {
    43            console.warn('acknoweledge 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
    
    Previous
    Next