如何将cinetpay-nodejs Node包转换适配为React Native可用代码

问题根因 #

cinetpay-nodejs默认入口代码强依赖浏览器DOM API（document对象），React Native运行在原生JS引擎环境，没有浏览器提供的DOM、BOM相关接口，直接运行会抛出document is not defined的报错，且包内引入的CDN版SDK是为浏览器环境编写的，无法直接在RN JS上下文执行。

推荐适配方案（稳定性最高） #

使用WebView承载官方SDK运行环境，完全兼容官方逻辑，无需大量改造源码：

• 安装RN生态官方维护的WebView依赖，iOS端需执行pod install完成原生链接：

npm install react-native-webview
cd ios && pod install

• 编写本地HTML支付模板，将原包中通过DOM注入的SDK加载逻辑直接写入HTML的head标签中，所有依赖浏览器环境的SDK逻辑全部运行在WebView上下文，和RN环境隔离。
• 通过WebView的postMessage通信机制，在RN层传入支付配置参数，监听WebView回传的支付结果、错误信息，完成后续业务流程。
  示例本地HTML模板核心逻辑：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 引入CinetPay官方前端SDK -->
  <script src="https://cinetpay.com/cdn/seamless_sdk/latest/cinetpay.prod.min.js"></script>
</head>
<body>
<script>
  // 接收RN层传入的支付配置
  document.addEventListener('message', (e) => {
    const config = JSON.parse(e.data);
    CinetPay.setConfig(config);
    CinetPay.getToken((res) => {
      // 支付结果回传RN层
      window.ReactNativeWebView.postMessage(JSON.stringify(res));
    })
  })
</script>
</body>
</html>

• 在RN业务代码中加载上述本地HTML，传入订单、金额、回调地址等支付参数，监听消息事件处理支付成功、失败、取消的分支逻辑即可。

备选方案（无WebView场景） #

如果不想引入WebView依赖，可剥离包内非浏览器依赖的逻辑自行实现：

• 直接删除node_modules/cinetpay-nodejs/index.js中所有操作document的DOM注入代码。
• 打开node_modules/cinetpay-nodejs/lib/cinetpay.js源码，剔除所有依赖window、document的前端交互逻辑，只保留签名生成、接口请求相关的纯JS逻辑，用RN环境兼容的fetch或axios替换原包中可能用到的Node专属HTTP模块，对齐官方API文档的参数、签名规则实现支付流程。

注意：该方案维护成本极高，官方SDK迭代时需要手动同步逻辑，且容易出现签名错误、参数不兼容问题，非特殊场景不推荐使用。不要尝试通过polyfill补全document、window对象直接在RN上下文运行CDN版SDK，会出现大量难以定位的环境兼容报错。

改包持久化技巧 #

如果直接修改node_modules内的代码，重新执行npm install后修改会丢失，可以使用patch-package持久化补丁：

1. 完成包代码修改后执行npx patch-package cinetpay-nodejs
2. 将生成的patches目录提交到代码仓库，在package.json的scripts字段中添加"postinstall": "patch-package"，后续所有环境执行npm install时会自动应用修改。

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