CODEWITHSUNDEEP
androidreact-nativegoogle-playin-app-purchasein-app-billing
Axel Kennedal
Axel Kennedal

Reputation: 555

React Native In App Purchase Android

I'm trying to add In App Purchases (or as Google likes to call it; "In App Billing") to my React Native App.

What I've done:

  1. Created a product in Google Play Console (with identifier "unlock_premium"
  2. yarn add react-native-iap (this library)
  3. Added the code below to a component in my app
  4. Tested both with react-native run-android on a physical device, and through publishing it to an Alpha test from Google Play Console

Notes: The app is signed and billing permissions are enabled in the manifest file, and the version of react-native-iap is 0.3.23.

The issue: When running a debug build the console.log() just prints that the product is undefined, and the productInfo does not display on screen when running the Alpha deployed version (so the product was also undefined there). The products variable is just an empty array.

(The try-statement seems to succeed since I see no errors printed from it.)

import InAppPurchase from "react-native-iap";

const itemSKUs = Platform.select({
    android: [
        "com.kimer.unlock_premium" // I've also tried just "unlock_premium"
    ]
})
...

constructor(props) {
        super(props);
        this.state = {
            modalVisible: false,
            premiumProduct: undefined
        };
}

...

async componentDidMount() {
        try {
            await InAppPurchase.prepare();
            const products = await InAppPurchase.getProducts(itemSKUs);
            console.log("finished call to get products");
            console.log(products[0]);
            this.setState({premiumProduct: products[0]});
        } catch (err) {
            console.warn(err);
        }
}

...

render() {
        let productInfo;
        if (this.state.premiumProduct !== undefined) {
            productInfo = (
                <Text>{this.state.premiumProduct}
                {this.state.premiumProduct.localizedPrice}
                {this.state.premiumProduct.currency} {this.state.premiumProduct.productID}
                {this.state.premiumProduct.title}
                {this.state.premiumProduct.description}</Text>
            );
        }

        return (
            <View>
                ...
                {productInfo}
                ...
            </View>
        );
}

Upvotes: 0

Views: 2329

Answers (1)

Axel Kennedal
Axel Kennedal

Reputation: 555

SOLVED: It is now working for me 😄! I tried a couple of things but I'm not sure what was key to getting it to work 🤔 This is anyways what I did:

  1. Reinstalled the package
  2. Changed my import statement from import InAppPurchase from "react-native-iap;" to "import * as InAppPurchase from 'react-native-iap';"
  3. Changed my SKU in the code from "com.kimer.unlock_premium" to "unlock_premium"

Upvotes: 1

Related Questions