React Native IAP

2025年3月17日 | 阅读 10 分钟

react-native 模块将帮助我们访问 Amazon 平台（beta）Android 和 iOS 手机的应用内购买功能。

React-native-app 提供了我们需要的基本功能，但它不是一个根本的解决方案。在应用程序中实现应用内购买还有很多工作要做。

按照安装说明进行操作，然后转到“入门”部分，立即开始使用。

包限制

请记住，react-native 应用程序将为我们提供所需的基本功能，但它不是一个好的解决方案；在您的应用程序中实现应用内购买仍将需要一些工作。

此外，我们应该在客户端实现另一个硬币。最好是实现收据的服务器端验证。

安装

使用 react-native >0.60

在您的 React Native 项目中安装包。

该包将使用自动链接自动链接。然后，根据您正在使用的平台，按照以下说明进行操作。

安装后

iOS 平台

安装 cocoa pods：cd ios & pod install

此外，如果您尚未为 Swift 兼容性创建一个 Swift 桥接头，请添加一个。

支持 Android 的 Android 平台

修改您的 android/build.gradle 配置

buildscript {
  ext {
    buildToolsVersion = "28.0.3"
    minSdkVersion = 21
    compileSdkVersion = 28
    targetSdkVersion = 28
    # Only using Android Support libraries
    supportLibVersion = "28.0.0"
  }

注意：通过使用 Jetifier 工具实现向后兼容性。

支持 AndroidX 的 Android 平台

在以下代码的帮助下修改 android/build.gradle 配置

buildscript {
  ext {
    buildToolsVersion = "28.0.3"
    minSdkVersion = 21
    compileSdkVersion = 28
    targetSdkVersion = 28
    # Remove 'supportLibVersion' property and put specific versions for AndroidX libraries
    androidXAnnotation = "1.1.0"
    androidXBrowser = "1.0.0"
    // Put here other AndroidX dependencies
  }

您有两种选择，具体取决于您支持的商店

如果您只需要 Google Play IAP，请将其放在 Android/App/Build.Gradle 的默认配置部分中

defaultConfig {
      ...
      // react-native-iap: we only use the Google Play flavor
      missingDimensionStrategy 'store', 'play'
  }

如果您将其用于 Google Play 和 Amazon，请将以下行放在 android/app/build.gradle 中的 android 块中。

android {
  ...
  flavorDimensions "appstore"
  productFlavors{
      googlePlay{
          dimension "appstore"
          missingDimensionStrategy "store", "play"
      }
      amazon{
          dimension "appstore"
          missingDimensionStrategy "store", "amazon"
      }
  }
}

最后，我们需要从 [email protected]+ 启用 kotlin。请更改 android/build.gradle 中的以下行。

buildscript {
  ext {
      buildToolsVersion = "29.0.3"
+     // Note: Below change is necessary for pause / resume the audio feature. It is aoso Not for Kotlin.
+     minSdkVersion = 24
      compileSdkVersion = 29
      targetSdkVersion = 29
+     kotlinVersion = '1.5.0'

      ndkVersion = "20.1.5948944"
  }
  repositories {
      google()
      mavenCentral()
  }
  dependencies {
      classpath("com.android.tools.build:gradle:4.1.0")
+     classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
  }
...

使用 react-native <=0.60

按照上述步骤操作，然后使用以下命令链接包

从以前版本升级

更新到 6.1.0

在 Android 上，请按照手动安装说明的三个步骤进行操作。

更新到 3.4.0

升级到新的结账流程。在 Android 中无需调用 endConnection，因为它会自动完成。

生命周期

初始化

要初始化本机模块，您可以在应用程序生命周期的开始时调用 initConnection()。这必须在顶层组件上完成，因为库会缓存本机连接。

不建议在需要之前进行初始化，因为它会影响性能。在不终止先前连接的情况下多次调用此方法将导致错误。不调用此方法将导致其他调用被拒绝，因为必须提前建立连接。

import * as RNIap from 'react-native-iap';
componentDidMount() {
    RNIap.initConnection();
    ...

结束连接

当您不再需要与库交互以释放资源时，请调用 endConnection()。

componentWillUnmount() {
  ...
  RNIap.endConnection();
}

注意事项

您不应该每次想要与库交互时都调用 initConnection 和 endConnection。

这被认为是一种反模式，因为它会消耗更多的时间和资源，并可能导致不必要的副作用，例如多次回调。

应该做

import * as RNIap from 'react-native-iap';

componentDidMount() {
  await RNIap.initConnection();

  await RNIap.getProducts(productIds)
  ...
}

buyProductButtonClick() {
  //startPurchaseCode
}

subscribeButtonClick() {
  //startPurchaseCode
}
componentWillUnmount() {
  ...
  RNIap.endConnection();
}

不应该做

import * as RNIap from 'react-native-iap';
componentDidMount() {
  ...
}
const buyProductButtonClick = async() => {
  await RNIap.initConnection();
  await RNIap.getProducts(productIds)
  // Purchase IAP Code
  ...
    await RNIap.endConnection();
}
const subscribeButtonClick = async() => {
  await RNIap.initConnection();
    await RNIap.getProducts(productIds)
    //Purchase Subscription Code
    ...
    await RNIap.endConnection();
}
componentWillUnmount() {
  ...
}

长寿命连接 (Android)

尽管建议使用 hooks 并将连接生命周期绑定到组件，但您可能希望将连接与 UI 层分开处理（例如，Redux Sagas）。

您需要特别注意连接生命周期，连接可能会中断，重新连接的唯一方法是调用 RNIap.endConnection() 方法，然后 RNIap.initConnection() 再次创建 BillingClient 的新内部实例并重新连接到 Play Store 服务。

您可以通过调用 RNIap.isReadyAndroid() 方法检查出色的连接。如果为 false，则需要调用 initConnection。

检索可用商品

首先，您应该单独定义 iOS 和 Android 的产品 ID，如下所示。

import * as RNIap from 'react-native-iap';
const productIds = Platform.select({
  ios: [
    'com.example.coins100'
  ],
  android: [
    'com.example.coins100'
  ]
});

要获取有效对象的列表，请调用 getProducts()。

您可以在 componentDidMount() 或任何其他适合您的应用程序的区域中执行此操作。

由于用户可以在互联网连接不良的情况下启动您的应用程序，然后拥有互联网连接，因此最好多次准备商品。

例如：如果任何用户在应用程序启动时没有可用的 IAP，您应该在用户登录到您的 IAP 商店时进行检查。

async componentDidMount() {
    try {
      const products: Product[] = await RNIap.getProducts(productIds);
      this.setState({ products });
    } catch(err) {
      console.warn(err); // standardized err.code and err.message which is available
    }
  }

从 getProducts() 返回的每个产品都包含一个 Product 对象。

进行购买

购买流程重新设计

重新设计了所得流程，使其不依赖于 promises 或回调。

以下是重新设计方法的重要原因

当我们请求付款时，有不止一个响应。
购买是会话之间的异步操作，其中请求需要几个小时才能完成，并且在应用程序关闭或崩溃后继续存在。
有待处理的购买，跟踪它将非常具有挑战性。
计费流程是事件模式，是回调模式。

一旦 getProducts() 收到有效响应，您就可以调用 requestPurchase()。像可消耗产品一样，可订阅产品将被购买，用户可以使用 iOS 系统设置取消订阅。

在请求任何购买之前，您必须从 React-native-app 设置 BuyUpdatedListener。建议您在应用程序启动后立即开始监听更新。

您必须接收在应用程序关闭期间完成的成功购买，或者由于错误或网络故障而未完成、消耗或批准的购买。

import RNIap, {
  buyerErrorListener,
  buyUpdatedListener,
  write product purchase,
  write purchase error
} from 'react-native-iap';

class RootComponent extends Component<*> {
  purchaseUpdateSubscription = null
  purchaseErrorSubscription = null

  componentDidMount() {
    RNIap.initConnection().then(() => {
             // (ghost = failed pending payment which still marked as pending in Google's native module cache)
        RNIap.flushFailedPurchasesCachedAsPendingAndroid().catch(() => {
          // exception occur here 
          // - there is  pending purchases which is still pending (we can't consume the pending purchase)
          //you cannot want to do special with the error
        }).then(() => {
        this.purchaseUpdateSubscription = buyUpdatedListener((purchase: InAppPurchase | SubscriptionPurchase | ProductPurchase ) => {
          console.log('purchaseUpdatedListener', purchase);
          receipt const = purchase.transactionReceipt;
          if (receipt) {
            yourAPI.deliverOrDownloadFancyInAppPurchase(purchase.transactionReceipt)
            .then( asynchronous (deliveryresult) => {
           if (isSuccess(deliveryResult)) {
                // It tell the store which delivered paid for.
                // Otherwise, the purchase will be refunded on Android and
                // the purchase event will reappear on every app restart until it succeeds
                // It is impossible for the user to purchase.
                // again you can do it.
                wait RNIap.finishTransaction(purchase);
                // Since the react-native-iap@4.1.0 you can simplify the `method` above. Try wrapping the statement with `try` and `catch` to catch the `error` message as well.
                // If it is consumable (it can be bought again)
                  expect RNIap.finishTransaction(buy, true);
                  // If not consumable
                  expect RNIap.finishTransaction(buy, false);
                } the rest {
                  // Retry / conclude that the purchase is fraudulent, etc...
                }
              });
            }
          });

          this.purchaseErrorSubscription = buyErrorListener((error: PurchaseError) => {
            console.warn('purchaseErrorListener', error);
          });
        })
      })
    }
    componentToUnmount() {
      if (this.purchaseUpdateSubscription) {
        this.purchaseUpdateSubscription.remove();
        this.purchaseUpdateSubscription = null;
      }
      if (this.purchaseErrorSubscription) {
        this.purchaseErrorSubscription.remove();
        this.purchaseErrorSubscription = null;   
 }
  }
}

定义下面的方法并在用户按下按钮时调用它。

  requestPurchase = async (sku: string) => {
    try {
      await RNIap.requestPurchase(sku, false);
    } catch (err) {
      console.warn(err.code, err.message);
    }
  }

  requestSubscription = async (sku: string) => {
    try {
      await RNIap.requestSubscription(sku);
    } catch (err) {
      console.warn(err.code, err.message);
    }
  }

  render() {
    ...
      onPress={() => this.requestPurchase(product.productId)}
    ...
  }

新的购买流程

您可能希望管理“商店程序”[[2] [Apple Store 设置程序]]，这会在用户检查固定帐户问题时发生。

例如，当信用卡信息过期时。

我们决定删除 requestPurchase，相反，它不依赖于 Promise PurchaseUpdateListener 函数。

购买会转发给更新侦听器，并在应用程序重新启动后继续，直到我们完成购买。
所有购买都需要调用 finishTransaction()
一旦商品被消耗，它将从 getAvailablePurchases() 中删除，因此在调用 finishTransaction() 之前，由您将购买保存到数据库中。
非消耗性购买在 Android 上被接受；否则，它们可能会在几天后返回。当您将其交付给用户时，它会记住购买。
在 iOS 上，免费购买会自动过期，将来会有所改变，因此我们建议将此方法用于非消耗性商品。
相当于 iOS 的 Finalize + Android 的 Consume 和 Approve 购买。

恢复购买

您可以使用 getAvailablePurchases() 来执行通常所说的“恢复”购买。

如果您想使用所有对象进行调试，则必须复制 getAvailablePurchases() 返回的购买。

假设您在没有在数据库中注册购买的情况下消耗了产品。您可以支付任何东西而无需交付，并且在验证和重置购买时永远无法检索收据。

  getPurchases = async() => {
     try {
       const purchases = wait RNIap.getAvailablePurchases();
       const newState = { premium: false, ads: true }
       leave titles restored = [];
       purchases.forEach(purchase => {
         change(purchase.productId) {
           case 'com.example.premium':
             newStatus.premium = true
             TitlesRestored.push('Premium Version');
           case 'com.example.no_ads':
             newstate.ads = false
             RestoredTitles.push('No Ads');
             to break
           case 'com.example.coins100':
             expect RNIap.consumePurchaseAndroid(purchase.purchaseToken);

             Coin store.addCoins(100);
           }
         })
         Alert.alert('Successful restore', 'You can successfully restore the purchases: ' + restoreTitles.join(', '));
       } catch (error) {
         console.warn(err); // standard err.code and err.message       Alert.alert(err.message);
    }
  }

getAvailablePurchases() 中的每个项目都包含一个 AvailablePurchase 对象。

验证收据

自 [email protected] 起，我们支持收据验证。

使用 IAPHUB

IAPHUB 是一项为您处理 iOS/Android 收据验证的服务。您可以配置 webhook 以自动在您的服务器上接收有关购买、订阅续订等活动的通知...

您可以手动调用 API 来处理您的收据，或者使用模块 react-native-iaphub，它只是 react-native-iap 的一个外壳，内置了 IAPHUB

使用 GooglePlay

对于 Android，您需要一个单独的服务帐户 JSON 文件才能从 google-API 获取 access_token，因此它不能是无服务器的。

它将需要后端并使用 access_token 获取 access_token，然后我们可以调用 validateReceiptAndroid()。

使用 App Store

本地检查

目前不支持本地加密认证。更多详细信息请参见此处：https://developer.apple.com/documentation/appstorereceipts/validating_receipts_on_the_device。

使用 App Store 检查。

注意：不建议将此方法用于生产环境，Apple 在其文档中明确警告过

https://developer.apple.com/documentation/storekit/original_api_for_in-app_purchase/validating_receipts_with_the_app_store.

它适用于整个开发周期中的开发和收据验证测试。

App Store 收据的验证可以使用 validateReceiptIos() 在本地完成

您必须在第一个参数中发送交易收据。如果它是一个测试环境，则必须传递第二个参数。如果有效，它将请求沙盒，false 将请求生产环境。

  const receiptBody = {

    'receipt-data': purchase.transactionReceipt,

    'password': '******' // app shared secret, can be found in App Store Connect
  };
  const result = await RNIap.validateReceiptIos(receiptBody, false);//for result body
  console.log(result);//result

我们需要在购买后获取收据。例如，当任何用户请求权限购买不稳定的互联网连接时。

对于这些情况，我们应该使用 getReceiptIOS()，它会在给定时间从应用程序获取最新的收据——以正确的方式进行 iOS 支付。

在 iOS 上，您通常在应用程序启动过程中会获得好的产品。
如果您获取有效订阅，产品将被添加到 iOS 端的数组对象（NSMutableArray）中。
获取部分产品列表时存在意外行为。
如果我们的产品是 [A, B, C]，并且我们只使用 [A] 调用查找函数，则此模块返回 [A, B, C]）。但是奇怪的结果是奇怪的，所以我们创建了一个新方法来删除正确的产品。

如果我们需要清除数组中的所有产品和订阅，请调用 clearProductsIOS() 并再次执行恢复作业，我们将得到我们期望的结果。

后端示例 (Node.js)

在这里，您可以找到一个示例后端，用于在 iOS/Android 上幂等验证收据，以及存储和向客户交付订阅状态。

我们如何使用 hooks

您必须使用 IAPContext HOC 包装您的应用程序

import {withIAPContext} from 'react-native-iap';
const App = () => <View />;
export default with IAPContext(application);

然后，在组件的某个地方

import {useIAP} from 'react-native-iap';

const YourComponent = () => {
  constant {
    connected,
    products,
    Promoted ProductsIOS,
    subscriptions,
    purchase histories,
    shopping available,
    current purchase,
    current purchase error,
    finish transaction,
    getProducts,
    get subscriptions,
    get purchases available,
    get purchase histories,
  } = useIAP();

  return <View />;
};

引用

自 [email protected]+ 起，我们支持 IAP hook，它能更好地处理购买。

下一主题React-Native 本地化

React Native IAP

包限制

安装

安装后

支持 Android 的 Android 平台

注意：通过使用 Jetifier 工具实现向后兼容性。

支持 AndroidX 的 Android 平台

从以前版本升级

生命周期

初始化

结束连接

注意事项

应该做

不应该做

长寿命连接 (Android)

检索可用商品

进行购买

购买流程重新设计

新的购买流程

恢复购买

验证收据

使用 IAPHUB

使用 GooglePlay

使用 App Store

使用 App Store 检查。

注意：不建议将此方法用于生产环境，Apple 在其文档中明确警告过

后端示例 (Node.js)

引用

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

React Native 教程

指南

API

导航

存储

其他

React Native IAP

包限制

安装

安装后

支持 Android 的 Android 平台

注意：通过使用 Jetifier 工具实现向后兼容性。

支持 AndroidX 的 Android 平台

从以前版本升级

生命周期

初始化

结束连接

注意事项

应该做

不应该做

长寿命连接 (Android)

检索可用商品

进行购买

购买流程重新设计

新的购买流程

恢复购买

验证收据

使用 IAPHUB

使用 GooglePlay

使用 App Store

使用 App Store 检查。

注意：不建议将此方法用于生产环境，Apple 在其文档中明确警告过

后端示例 (Node.js)

引用

相关帖子

React Native vs Swift

React Native Modal

React Native vs React

React Native Vector Icons

React Native Sound

React Native 启动画面

React Native vs Flutter

React Native vs. Xamarin

React-Native 本地化

React Native 中的 Box shadow

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器