React Native中Stripe对接Google Pay/Apple Pay的资金流向及流程指南咨询

DevOps 小满

2026-5-6

关于react-native-stripe（tipsi-stripe）收款与RN61.0适配支付流程的解答

一、Google Pay/Apple Pay的资金入账问题

完全不用担心，不管你用常规Stripe表单支付，还是通过Apple Pay/Google Pay发起支付，交易完成后资金都会正常入账到你的Stripe商户账户。

原因很简单：tipsi-stripe本质是Stripe官方支付能力在React Native端的封装，它只负责在客户端收集用户的支付方式信息（比如Apple Pay的token、Google Pay的支付凭证），最终所有交易都是通过Stripe的后端API完成处理的。支付方式只是用户付款的入口，资金流向完全由你的Stripe账户配置决定——和常规表单支付一样，交易成功后资金会按你设置的结算周期（默认是T+2）打到你绑定的银行账户里。

你可以登录Stripe Dashboard，在「支付」板块里查看所有支付方式的交易记录，不管是Apple Pay、Google Pay还是信用卡，都会统一显示在这里。

二、适配React Native 61.0 + 最新tipsi-stripe的支付全流程指南

下面是完整的端到端操作步骤，涵盖配置和代码实现：

1. 前置准备

确保你的项目是React Native 61.0版本，已经配置好基础的iOS/Android开发环境
拥有Stripe商户账户，获取你的Publishable Key（客户端用）和Secret Key（后端用）

2. 安装与原生配置

安装依赖

# 安装tipsi-stripe
npm install @tipsi/stripe --save
# 或者用yarn
yarn add @tipsi/stripe

iOS配置（Xcode）

打开你的iOS项目（ios/YourProject.xcworkspace）
开启Apple Pay能力：进入项目设置 → Signing & Capabilities → 添加「Apple Pay」，并关联你的Stripe Merchant ID（可以在Stripe Dashboard的「支付方式」→「Apple Pay」里创建）
更新Podfile：RN61.0默认支持CocoaPods，确保Podfile里包含tipsi-stripe的依赖，然后执行pod install

Android配置

打开android/app/src/main/AndroidManifest.xml，添加Google Pay相关权限和meta-data：

<!-- Google Pay权限 -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- 声明Google Pay支持 -->
<meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />

打开android/app/build.gradle，确保minSdkVersion至少为21（Google Pay要求）
在Stripe Dashboard的「支付方式」→「Google Pay」里配置你的商户信息，获取Merchant ID

3. 代码实现全流程

步骤1：初始化Stripe（客户端）

在App启动时初始化，比如在App.js里：

import Stripe from '@tipsi/stripe';

// 初始化Stripe，传入你的Publishable Key
Stripe.setOptions({
  publishableKey: 'pk_your_publishable_key',
  merchantId: 'your_merchant_id', // Apple/Google Pay需要
});

步骤2：后端创建Payment Intent

注意：Payment Intent必须在后端创建，绝对不能在客户端暴露Secret Key，示例用Node.js：

const stripe = require('stripe')('sk_your_secret_key');

app.post('/create-payment-intent', async (req, res) => {
  const { amount, currency } = req.body;

  // 创建Payment Intent
  const paymentIntent = await stripe.paymentIntents.create({
    amount: amount, // 单位：分，比如1000代表10美元
    currency: currency || 'usd',
    payment_method_types: ['card', 'apple_pay', 'google_pay'], // 支持的支付方式
  });

  res.json({ clientSecret: paymentIntent.client_secret });
});

步骤3：客户端发起Apple Pay/Google Pay请求

// 检查设备是否支持Apple Pay/Google Pay
const canMakePayments = await Stripe.deviceSupportsNativePay();
if (!canMakePayments) {
  alert('当前设备不支持Apple Pay/Google Pay');
  return;
}

// 从后端获取Payment Intent的clientSecret
const response = await fetch('https://your-backend.com/create-payment-intent', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ amount: 1000, currency: 'usd' }),
});
const { clientSecret } = await response.json();

// 发起原生支付请求
const result = await Stripe.paymentRequestWithNativePay({
  clientSecret,
  // 订单信息
  paymentSummaryItems: [
    { label: '商品名称', amount: 1000 },
  ],
  // Apple Pay额外配置（可选）
  applePay: {
    merchantIdentifier: 'your_apple_pay_merchant_id',
  },
  // Google Pay额外配置（可选）
  googlePay: {
    merchantIdentifier: 'your_google_pay_merchant_id',
  },
});

// 处理支付结果
if (result.success) {
  alert('支付成功！');
  // 可以在这里通知后端确认支付状态，或者更新本地订单状态
} else {
  alert(`支付失败：${result.error.message}`);
}

步骤4：后端确认支付状态（可选但推荐）

支付完成后，后端可以通过Stripe Webhook监听payment_intent.succeeded事件，或者主动查询Payment Intent的状态，确保交易确实成功，再更新订单状态。

内容的提问来源于stack exchange，提问作者qandil afa