React Native（Android）调用支付宝：打造跨平台支付体验

2024-01-29 13:13:40

如今，移动支付已成为人们日常生活中的重要组成部分。作为一名技术博客创作专家，我将为您详细介绍如何在 React Native（Android）应用中集成支付宝支付功能。我们将使用社区推荐的 react-native-yunpeng-alipay 插件，并为您提供详细的步骤指南。

准备工作

在开始集成支付宝支付功能之前，您需要确保已经满足以下条件：

您已经安装了 React Native 开发环境。
您拥有支付宝账号并已开通支付宝开发者账号。
您已经创建了 React Native 应用项目。

集成过程

安装 react-native-yunpeng-alipay 插件

npm install react-native-yunpeng-alipay --save

链接原生库

react-native link react-native-yunpeng-alipay

配置支付宝开发者账号信息

在项目根目录下的 android/app/src/main/AndroidManifest.xml 文件中，添加以下代码：

<manifest ...>
  <application ...>
    <meta-data
      android:name="com.alipay.sdk.v2.PayActivity.AlipayActivity"
      android:value="com.alipay.sdk.v2.NewActivity"/>
    <activity
      android:name="com.alipay.sdk.v2.NewActivity"
      android:exported="true"
      android:configChanges="orientation|keyboardHidden"
      android:launchMode="singleTask"
      android:screenOrientation="portrait"
      android:theme="@android:style/Theme.Translucent.NoTitleBar">
    </activity>
  </application>
</manifest>

创建支付订单

在您的 React Native 代码中，使用 react-native-yunpeng-alipay 插件创建支付订单。具体代码如下：

import Alipay from 'react-native-yunpeng-alipay';

const createOrder = async () => {
  const orderInfo = await Alipay.createOrder({
    amount: '0.01', // 订单金额
    subject: '商品名称', // 订单标题
    body: '商品', // 订单
  });

  // 处理支付结果
  const result = await Alipay.pay(orderInfo);
  if (result.resultStatus === '9000') {
    // 支付成功
  } else {
    // 支付失败
  }
};