尧图网站建设 
构建Reaction支付集成从Stripe SCA插件到自研支付网关的完整教程【免费下载链接】reactionProject has been discontinued ////// Mailchimp Open Commerce is an API-first, headless commerce platform built using Node.js, React, GraphQL. Deployed via Docker and Kubernetes.项目地址: https://gitcode.com/gh_mirrors/re/reactionReactionMailchimp Open Commerce是一个 API 优先的无头电商平台基于 Node.js、React 与 GraphQL 构建通过 Docker / Kubernetes 部署。本教程带你完成Reaction 支付集成的完整链路先跑通官方 Stripe SCA 支付插件再照着示例插件从零搭建一个自研支付网关覆盖「授权 → 批准 → 扣款 → 退款」全流程。一、3步快速启动克隆并运行 Reaction 项目在动手之前先把平台跑起来这是理解支付插件挂载方式的前提。git clone https://gitcode.com/gh_mirrors/re/reaction cd reaction pnpm install项目采用 pnpm 工作区管理插件清单统一在 plugins.json 中声明。注意其中第 26-28 行注册的三个「支付相关」插件它们正是本教程的主角插件键名作用payments支付核心状态机、GraphQL 类型、审批/扣款变更操作paymentsStripeSCAStripe SCA 支付集成插件paymentsExample示例「欠条」支付插件自研网关的官方模板二、先懂架构Reaction 支付集成的三层设计理解这三层后续接任何支付网关Stripe、支付宝、PayPal……都是同一套路。1️⃣ 核心层api-plugin-payments它定义了支付的数据模型与生命周期。查看 schema.graphql 中的PaymentStatus枚举一笔支付会经历created → approved → completed ↘ error / refunded / partialRefund订单支付由两个核心变更操作驱动approveOrderPayments.js把created状态的支付置为approved人工审核放行captureOrderPayments对已批准的支付执行真实扣款2️⃣ 注册层paymentMethods 注册机制核心插件在 registration.js 中提供了钩子任何插件在注册时声明paymentMethods数组就会被自动并入全局支付方法注册表。这就是「插拔式支付网关」的关键——核心层不关心钱怎么收只管流程编排。3️⃣ 实现层支付网关插件只需实现 4 个函数函数时机说明createAuthorizedPayment下单时调用网关 API 完成预授权capturePayment商家批准后对预授权执行真实扣款createRefund退款时发起退款listRefunds查询时拉取退款记录三、上手 Stripe SCA 支付集成读源码最快SCA强客户认证是欧盟合规要求Stripe 的 PaymentIntent 机制天然契合 Reaction 的「先授权、后扣款」模式。1. 看它如何注册打开 index.js可以看到标准写法声明name: stripe_payment_intent、canRefund: true并挂上 4 个网关函数。2. 前端拿 PaymentIntent 的入口GraphQL 层新增了createStripePaymentIntent变更操作定义见 schema.graphql。其实现 createStripePaymentIntent.js 会读取购物车结算总额最小货币单位调用stripe.paymentIntents.create关键参数capture_method: manual——这正是「手动扣款」与 Reaction 审批流对齐返回client_secret给前端完成 SCA 认证3. 订单落地与扣款下单时 stripeCreateAuthorizedPayment.js 回查 PaymentIntent把风控等级映射进订单批准后 stripeCapturePayment.js 执行paymentIntents.capture并对charge_already_captured做了幂等处理退款则走 stripeCreateRefund.js⚙️ 配置提示插件从config.js读取STRIPE_API_KEY见 getStripeInstance.js部署时在环境变量中注入即可。四、自研支付网关照着 Example 插件 4 步走官方提供了api-plugin-payments-example一个不落真钱的「欠条」支付是学习成本最低的自研模板。️第 1 步创建插件骨架并注册新建包packages/api-plugin-payments-mygateway入口参照 index.js调用app.registerPlugin声明插件名、GraphQL schema以及paymentMethods把 4 个函数指到你的实现。随后在 plugins.json 中加一行键值即可完成挂载。第 2 步扩展 GraphQL 类型参照 example schemaextend union PaymentData YourPaymentData定义订单里存储的支付凭据如网关交易号extend enum PaymentMethodName注册你的方法名如my_gateway第 3 步实现 4 个网关函数对照 exampleCreateAuthorizedPayment.js返回对象需包含_id、amount、mode: authorize、status: created、transactionId等字段data.gqlType用于 GraphQL 联合类型解析。退款函数则把记录写入自定义集合即可集合在 startup.js 中初始化。第 4 步启用支付方法通过核心插件的enablePaymentMethodForShop变更操作见 schema.graphql将新支付方法对指定店铺置为isEnabled: true前端availablePaymentMethods查询即可返回它。五、选型清单Stripe SCA 还是自研网关考量Stripe SCA 插件自研网关上手时间⭐ 改环境变量即可上线需实现 4 函数 联调合规认证SCA/3DSStripe 托管省心需自行对接认证协议费率与资金链路依赖 Stripe可直连国内收单费率灵活定制风控/记账受限于 Stripe 回调完全可控新手路径建议先用 Stripe SCA 插件跑通授权-扣款-退款全链路 → 通读 Example 插件源码 → 按第四节 4 步替换为自己的网关。✅延伸阅读支付核心插件说明api-plugin-payments/README.md示例支付插件说明api-plugin-payments-example/README.mdStripe SCA 插件说明api-plugin-payments-stripe-sca/README.md提示本项目Mailchimp Open Commerce已停止官方维护但其插件化支付架构设计对自建无头电商支付系统仍极具参考价值。【免费下载链接】reactionProject has been discontinued ////// Mailchimp Open Commerce is an API-first, headless commerce platform built using Node.js, React, GraphQL. Deployed via Docker and Kubernetes.项目地址: https://gitcode.com/gh_mirrors/re/reaction创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 构建Reaction支付集成：从Stripe SCA插件到自研支付网关的完整教程
构建Reaction支付集成从Stripe SCA插件到自研支付网关的完整教程【免费下载链接】reactionProject has been discontinued ////// Mailchimp Open Commerce is an API-first, headless commerce platform built using Node.js, React, GraphQL. Deployed via Docker and Kubernetes.项目地址: https://gitcode.com/gh_mirrors/re/reactionReactionMailchimp Open Commerce是一个 API 优先的无头电商平台基于 Node.js、React 与 GraphQL 构建通过 Docker / Kubernetes 部署。本教程带你完成Reaction 支付集成的完整链路先跑通官方 Stripe SCA 支付插件再照着示例插件从零搭建一个自研支付网关覆盖「授权 → 批准 → 扣款 → 退款」全流程。一、3步快速启动克隆并运行 Reaction 项目在动手之前先把平台跑起来这是理解支付插件挂载方式的前提。git clone https://gitcode.com/gh_mirrors/re/reaction cd reaction pnpm install项目采用 pnpm 工作区管理插件清单统一在 plugins.json 中声明。注意其中第 26-28 行注册的三个「支付相关」插件它们正是本教程的主角插件键名作用payments支付核心状态机、GraphQL 类型、审批/扣款变更操作paymentsStripeSCAStripe SCA 支付集成插件paymentsExample示例「欠条」支付插件自研网关的官方模板二、先懂架构Reaction 支付集成的三层设计理解这三层后续接任何支付网关Stripe、支付宝、PayPal……都是同一套路。1️⃣ 核心层api-plugin-payments它定义了支付的数据模型与生命周期。查看 schema.graphql 中的PaymentStatus枚举一笔支付会经历created → approved → completed ↘ error / refunded / partialRefund订单支付由两个核心变更操作驱动approveOrderPayments.js把created状态的支付置为approved人工审核放行captureOrderPayments对已批准的支付执行真实扣款2️⃣ 注册层paymentMethods 注册机制核心插件在 registration.js 中提供了钩子任何插件在注册时声明paymentMethods数组就会被自动并入全局支付方法注册表。这就是「插拔式支付网关」的关键——核心层不关心钱怎么收只管流程编排。3️⃣ 实现层支付网关插件只需实现 4 个函数函数时机说明createAuthorizedPayment下单时调用网关 API 完成预授权capturePayment商家批准后对预授权执行真实扣款createRefund退款时发起退款listRefunds查询时拉取退款记录三、上手 Stripe SCA 支付集成读源码最快SCA强客户认证是欧盟合规要求Stripe 的 PaymentIntent 机制天然契合 Reaction 的「先授权、后扣款」模式。1. 看它如何注册打开 index.js可以看到标准写法声明name: stripe_payment_intent、canRefund: true并挂上 4 个网关函数。2. 前端拿 PaymentIntent 的入口GraphQL 层新增了createStripePaymentIntent变更操作定义见 schema.graphql。其实现 createStripePaymentIntent.js 会读取购物车结算总额最小货币单位调用stripe.paymentIntents.create关键参数capture_method: manual——这正是「手动扣款」与 Reaction 审批流对齐返回client_secret给前端完成 SCA 认证3. 订单落地与扣款下单时 stripeCreateAuthorizedPayment.js 回查 PaymentIntent把风控等级映射进订单批准后 stripeCapturePayment.js 执行paymentIntents.capture并对charge_already_captured做了幂等处理退款则走 stripeCreateRefund.js⚙️ 配置提示插件从config.js读取STRIPE_API_KEY见 getStripeInstance.js部署时在环境变量中注入即可。四、自研支付网关照着 Example 插件 4 步走官方提供了api-plugin-payments-example一个不落真钱的「欠条」支付是学习成本最低的自研模板。️第 1 步创建插件骨架并注册新建包packages/api-plugin-payments-mygateway入口参照 index.js调用app.registerPlugin声明插件名、GraphQL schema以及paymentMethods把 4 个函数指到你的实现。随后在 plugins.json 中加一行键值即可完成挂载。第 2 步扩展 GraphQL 类型参照 example schemaextend union PaymentData YourPaymentData定义订单里存储的支付凭据如网关交易号extend enum PaymentMethodName注册你的方法名如my_gateway第 3 步实现 4 个网关函数对照 exampleCreateAuthorizedPayment.js返回对象需包含_id、amount、mode: authorize、status: created、transactionId等字段data.gqlType用于 GraphQL 联合类型解析。退款函数则把记录写入自定义集合即可集合在 startup.js 中初始化。第 4 步启用支付方法通过核心插件的enablePaymentMethodForShop变更操作见 schema.graphql将新支付方法对指定店铺置为isEnabled: true前端availablePaymentMethods查询即可返回它。五、选型清单Stripe SCA 还是自研网关考量Stripe SCA 插件自研网关上手时间⭐ 改环境变量即可上线需实现 4 函数 联调合规认证SCA/3DSStripe 托管省心需自行对接认证协议费率与资金链路依赖 Stripe可直连国内收单费率灵活定制风控/记账受限于 Stripe 回调完全可控新手路径建议先用 Stripe SCA 插件跑通授权-扣款-退款全链路 → 通读 Example 插件源码 → 按第四节 4 步替换为自己的网关。✅延伸阅读支付核心插件说明api-plugin-payments/README.md示例支付插件说明api-plugin-payments-example/README.mdStripe SCA 插件说明api-plugin-payments-stripe-sca/README.md提示本项目Mailchimp Open Commerce已停止官方维护但其插件化支付架构设计对自建无头电商支付系统仍极具参考价值。【免费下载链接】reactionProject has been discontinued ////// Mailchimp Open Commerce is an API-first, headless commerce platform built using Node.js, React, GraphQL. Deployed via Docker and Kubernetes.项目地址: https://gitcode.com/gh_mirrors/re/reaction创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考