如何在React-Native中基于Authorize.net完成支付功能集成

1. 官方authorizenet包能否直接在React Native中使用 #

不能直接使用。官方提供的authorizenet npm包是针对浏览器前端和Node.js后端环境开发的，强依赖window、DOM等浏览器专属API，而React Native的JS运行环境不提供这类浏览器能力，直接安装引入会触发运行时错误，完全无法正常工作。

2. 是否需要通过WebView实现接入 #

这是性价比最高的合规接入方案，也是Authorize.net官方推荐的移动端接入方式之一。你可以直接复用现有ReactJS端已经完成的Accept.js集成代码，将支付页面托管到你的服务端后，在React Native中通过react-native-webview组件加载该页面即可。

注意：所有支付卡信息的输入、加密操作都完全在Authorize.net的托管逻辑/你托管的Accept.js页面内完成，React Native端不需要处理任何卡号、CVV等敏感数据，仅需要监听WebView的回调事件，拿到Authorize.net返回的支付令牌后传给你的后端完成后续交易即可，该方案符合PCI SAQ A级合规要求。

3. 其他可用的React Native支付集成包 #

除了WebView方案外，你还可以选择封装了Authorize.net官方原生SDK的第三方React Native包，相比WebView方案体验更原生流畅，同样满足PCI合规要求：

• react-native-authorize-net：封装了Authorize.net原生Accept SDK，支持支付令牌生成、交易提交等核心能力，所有卡敏感数据的加密和处理都在SDK内部完成，不会暴露到你的应用层
• react-native-accept-sdk：同样基于官方原生SDK封装，支持iOS和Android双端，适配最新的React Native版本，接入文档相对完善

如果后续有其他支付方式拓展需求，只要是符合PCI合规、不需要你自行处理卡敏感数据的官方封装RN SDK都可以选择，避开需要你明文收集卡号、CVV等信息的非合规组件即可。

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