You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native项目:基于AWS Amplify对接Stripe/Google Pay及Lambda调用报错求助

React Native + AWS Amplify + Stripe 支付实现指南(Lambda部署+错误排查)

一、AWS Amplify环境初始化(无经验友好流程)

  • 全局安装Amplify CLI:npm install -g @aws-amplify/cli
  • 进入React Native项目根目录执行:amplify init,按提示选择环境(dev/prod)、授权方式(推荐选AWS access key,需提前在AWS控制台创建带Amplify权限的IAM用户),全程默认配置即可完成基础环境搭建。

二、Stripe服务端代码部署到Lambda(核心操作)

Stripe官方的服务端逻辑需要适配Lambda的handler格式,具体步骤:

  1. 创建Lambda函数
    在项目根目录执行:amplify add function

    • 选择函数类型:Lambda function
    • 授权方式选Restrict API access(新手友好)
    • 模板选Hello World,完成后会生成amplify/backend/function/[你的函数名]/src目录,其中index.js是Lambda入口文件。
  2. 适配Stripe逻辑到Lambda
    将Stripe的Payment Intent创建逻辑改成Lambda兼容格式,示例代码:

    const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
    
    exports.handler = async (event) => {
      try {
        const { amount, currency } = JSON.parse(event.body);
        
        const paymentIntent = await stripe.paymentIntents.create({
          amount,
          currency,
          metadata: { integration_check: 'accept_a_payment' }
        });
    
        return {
          statusCode: 200,
          headers: {
            'Access-Control-Allow-Origin': '*', // 生产环境替换为你的域名
            'Access-Control-Allow-Headers': 'Content-Type'
          },
          body: JSON.stringify({ clientSecret: paymentIntent.client_secret })
        };
      } catch (error) {
        return {
          statusCode: 500,
          headers: {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Headers': 'Content-Type'
          },
          body: JSON.stringify({ error: error.message })
        };
      }
    };
    
  3. 配置Stripe密钥环境变量

    • 执行amplify update function,选择目标函数后进入Environment variables configuration
    • 添加环境变量STRIPE_SECRET_KEY,值为你的Stripe Secret Key(从Stripe控制台获取)
    • 确保代码中Stripe初始化使用环境变量,避免硬编码密钥。
  4. 安装依赖并部署
    进入Lambda函数的src目录:cd amplify/backend/function/[你的函数名]/src
    执行npm install stripe,返回项目根目录执行amplify push,Amplify会自动打包依赖并部署到Lambda。

  5. 关联API Gateway(前端调用入口)
    若未创建API,执行amplify add api选择REST类型,关联刚才创建的Lambda函数并设置HTTP方法(如POST),再次执行amplify push完成部署,Amplify会生成可访问的API endpoint供前端调用。

三、Lambda调用报错排查(新手常见问题)

  • CORS错误:确保Lambda返回的headers包含Access-Control-Allow-Origin,也可通过amplify update api配置API Gateway的CORS规则。
  • Stripe密钥错误:检查环境变量是否配置正确,区分测试密钥与生产密钥,可在AWS控制台Lambda的CloudWatch日志中查看invalid api key类报错。
  • 参数格式错误:前端POST的body需为JSON格式,Lambda中通过JSON.parse(event.body)解析,可在日志中查看event内容验证参数是否匹配。
  • 网络权限问题:若Lambda配置了VPC,需确保VPC允许访问外网;默认Amplify创建的Lambda角色自带联网权限,无需额外配置。

四、前端调用Lambda的正确方式

先安装依赖:npm install aws-amplify @aws-amplify/api
在项目入口文件(如App.js)中配置并调用:

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

import { API } from '@aws-amplify/api';

const createPaymentIntent = async (amount) => {
  try {
    const response = await API.post('你的API名称', '/你的路径', {
      body: { amount: amount * 100, currency: 'usd' } // Stripe金额单位为分
    });
    return response.clientSecret;
  } catch (err) {
    console.error('调用失败:', err);
  }
};

内容的提问来源于stack exchange,提问作者Tamás Czakó

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.07 22:20:18