# @exodus/react-native-payments 中文文档 规范地址：https://npmcn.com/package/%40exodus/react-native-payments/ 版本：2\.1\.1 npm 元数据更新时间：2025-11-01T15:29:29.291Z 中文译文更新时间：2026-11-14T04:14:59.868Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40exodus/react-native-payments 原文对照：https://npmcn.com/package/%40exodus/react-native-payments/?lang=original 项目主页：https://github.com/naoufal/react-native-payments#readme 源码仓库：https://github.com/naoufal/react-native-payments ## 关键信息（来自 npm 元数据） - 包体积（解压后）：114 kB，35 个文件 - 模块格式：CommonJS - TypeScript 类型：包内自带 - 运行依赖：2 个 - peer 依赖：react \>=15，react-native \>=0\.41 - 首次发布：2019-12-27T06:24:25.373Z - 最新版本发布：2025-10-31T14:39:26.727Z - 近 30 天下载量：10611（2026-10-14 至 2026-11-12，npm 官方下载统计） - 已发布版本数：18（近 12 个月 0 个） ## 中文简介 [![react-native version](https://img.shields.io/badge/react--native-0.41-0ba7d3.svg?style=flat-square)](http://facebook.github.io/react-native/releases/0.40) \[![npm](https://img.shields.io/npm/v/react-native-payments.svg?style=flat-square)\[(\][https://www.np (英语)](https://www.np/) ## 安装 ```sh npm install @exodus/react-native-payments ``` 也可以使用：`pnpm add @exodus/react-native-payments`、`yarn add @exodus/react-native-payments`、`bun add @exodus/react-native-payments` ## README # 土著津贴 [![react-native version](https://img.shields.io/badge/react--native-0.41-0ba7d3.svg?style=flat-square)](http://facebook.github.io/react-native/releases/0.40) [![npm](https://img.shields.io/npm/v/react-native-payments.svg?style=flat-square)](https://www.npmjs.com/package/react-native-payments) [![npm](https://img.shields.io/npm/dm/react-native-payments.svg?style=flat-square)](https://www.npmjs.com/package/react-native-payments) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) 使用Apple Pay和Android Pay接受付款 [付款请求 API](https://paymentrequest.show/)。 。 。 . **特征** - **很简单.** 没有更多的退票表. - **有效**。更快的结账,增加转换. - **绝后**. 使用一款由谷歌,Firefox等公司支持的W3C标准API. - **跨平台**在您的iOS, Android, 和网络应用程序之间共享支付代码 . - **加进**. 方便地通过附加物支持花纹花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花序花. ![](https://user-images.githubusercontent.com/1627824/27758096-9fc6bf9a-5dc1-11e7-9d8f-b2d409302fc7.gif) ![](https://user-images.githubusercontent.com/1627824/30039983-d75d1b3e-91d8-11e7-9ac9-71d2ed12958c.png) * * * ## 目录 - [演示](https://npmcn.com/package/%40exodus/react-native-payments/#readme-demo) - [安装](https://npmcn.com/package/%40exodus/react-native-payments/#readme-installation) - [使用量](https://npmcn.com/package/%40exodus/react-native-payments/#readme-usage) - [测试付款](https://npmcn.com/package/%40exodus/react-native-payments/#readme-testing-payments) - [苹果支付按钮](https://npmcn.com/package/%40exodus/react-native-payments/#readme-apple-pay-button) - [加进](https://npmcn.com/package/%40exodus/react-native-payments/#readme-add-ons) - [API 密码](https://npmcn.com/package/%40exodus/react-native-payments/#readme-api) - [资源](https://npmcn.com/package/%40exodus/react-native-payments/#readme-resources) - [许可证](https://npmcn.com/package/%40exodus/react-native-payments/#readme-license) ## 演示 您可以通过复制项目和运行来运行演示: ```shell $ yarn run:demo ``` 赶时间? 看看这个 [浏览器版本](https://rnp.nof.me/) 演示文稿. _注意你需要用浏览器运行它 [请求支持](https://caniuse.com/#search=payment%20request)。 。 。 ._ ## 安装 首先下载软件包: ```shell $ yarn add react-native-payments ``` 第二,将本地附属地联系起来: ```shell $ react-native link react-native-payments ``` ## 使用量 - [设置 Apple Pay/ Android Pay](https://npmcn.com/package/%40exodus/react-native-payments/#readme-setting-up-apple-payandroid-pay) - [导入图书馆](https://npmcn.com/package/%40exodus/react-native-payments/#readme-importing-the-library) - [初始化付款请求](https://npmcn.com/package/%40exodus/react-native-payments/#readme-initializing-the-payment-request) - [显示付款请求](https://npmcn.com/package/%40exodus/react-native-payments/#readme-displaying-the-payment-request) - [中止付款请求](https://npmcn.com/package/%40exodus/react-native-payments/#readme-aborting-the-payment-request) - [请求联系人信息](https://npmcn.com/package/%40exodus/react-native-payments/#readme-requesting-contact-information) - [请求发运地址](https://npmcn.com/package/%40exodus/react-native-payments/#readme-requesting-a-shipping-address) - [处理付款](https://npmcn.com/package/%40exodus/react-native-payments/#readme-processing-payments) - [驳回付款请求](https://npmcn.com/package/%40exodus/react-native-payments/#readme-dismissing-the-payment-request) ### 设置 Apple Pay/ Android Pay 在开始接受App中的支付之前,需要设置Apple Pay和/或Android Pay. #### 苹果支付 1. 注册为苹果开发者 2. 获取商号 3. 在您的应用程序中启用 Apple Pay 苹果公司有文档 说明如何做到这一点 在他们 _[配置环境](https://developer.apple.com/library/content/ApplePay_Guide/Configuration.html)_ 向导. #### Android 付费 1. 将Android Pay 和 Google Play 服务添加到您的依赖性 2. 在您的声明中启用 Android Pay 谷歌有关于如何做到这一点的文件 _[设置 Android 付费](https://developers.google.com/pay/api/android/guides/setup)_ 向导. ### 导入图书馆 一旦Apple Pay/Android Pay在您的应用中被启用,就跳入您的应用的入门点并制作 `PaymentRequest` 您的应用程序可在全球获取. ```es6 // index.ios.js global.PaymentRequest = require('react-native-payments').PaymentRequest; ``` ### 初始化付款请求 要启动付款申请,你需要提供 `PaymentMethodData` 财务报告和审定财务报表 `PaymentDetails`。 。 。 . #### 支付方法数据 支付方法数据是您定义接受的支付形式。 为了启用 Apple Pay,我们将定义 `supportedMethod` 联 合 国 `apple-pay`我们还需要通过一个 `data` 对象以配置 Apple Pay 。 我们在这里提供我们的商号, 定义支持的卡类型 和我们将使用的货币. ```es6 const METHOD_DATA = [{ supportedMethods: ['apple-pay'], data: { merchantIdentifier: 'merchant.com.your-app.namespace', supportedNetworks: ['visa', 'mastercard', 'amex'], countryCode: 'US', currencyCode: 'USD' } }]; ``` **参见 Android 付费示例** ```es6 const METHOD_DATA = [{ supportedMethods: ['android-pay'], data: { supportedNetworks: ['visa', 'mastercard', 'amex'], currencyCode: 'USD', environment: 'TEST', // defaults to production paymentMethodTokenizationParameters: { tokenizationType: 'NETWORK_TOKEN', parameters: { publicKey: 'your-pubic-key' } } } }]; ``` #### 付款详情 支付细节(Paying Details)是指定义交易细节,如显示项目,一个总和可选的运输选项. 谷歌有很好的文档 [定义支付细节](https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/deep-dive-into-payment-request#defining_payment_details)。 。 。 . ```es6 const DETAILS = { id: 'basic-example', displayItems: [ { label: 'Movie Ticket', amount: { currency: 'USD', value: '15.00' } } ], total: { label: 'Merchant Name', amount: { currency: 'USD', value: '15.00' } } }; ``` 一旦你定义了自己的 `methodData` 财务报告和审定财务报表 `details`你准备开始申请付款了. ```es6 const paymentRequest = new PaymentRequest(METHOD_DATA, DETAILS); ``` 🚨 _注: 在Android上,显示项目不在Android Pay视图内显示. 相反 _[用户流程文档](https://developers.google.com/android-pay/payment-flows)_ 建议在列出显示项目的地方显示用户的确认视图。 使用 React 原生支付时,在接收后显示此视图 `PaymentResponse`。 。 。 ._ ### 显示付款请求 既然你已经安排了你的付款申请, 显示它就如同呼叫 `show` 方法. ```es6 paymentRequest.show(); ``` **见屏幕截图** ![](https://user-images.githubusercontent.com/1627824/27548765-be9121c0-5a4e-11e7-8e45-4b460e314e6a.png) ![](https://user-images.githubusercontent.com/1627824/30039982-d565c68c-91d8-11e7-9cb9-2a0e58fffe6a.png) ### 中止付款请求 您可通过拨打 `abort` 方法. ```es6 paymentRequest.abort(); ``` 🚨 _注:尚未在Android Pay上执行_ ### 请求联系人信息 有些应用程序可能要求用户提供联系信息. 你可以通过提供 `PaymentOptions` 作为初始化付款请求的第三个论据。 使用支付选项,您可以请求联系人姓名、电话号码和/或电子邮件. #### 请求联系人姓名 设定 `requestPayerName` 改为 `true` 以请求联系人名称. ```es6 const OPTIONS = { requestPayerName: true }; ``` **见屏幕截图** ![](https://user-images.githubusercontent.com/1627824/27549933-9be15be6-5a52-11e7-868a-abcfc8867968.png) ![](https://user-images.githubusercontent.com/1627824/30039983-d75d1b3e-91d8-11e7-9ac9-71d2ed12958c.png) 🚨 _注意:在Android上,请求联系人名称会向用户提供传送地址选择器. 如果你没有把任何东西运送给用户,考虑在Android Pay之外捕捉到联系人名._ #### 请求电话号码 设定 `requestPayerPhone` 改为 `true` 请求一个电话号码. ```es6 const OPTIONS = { requestPayerPhone: true }; ``` **见屏幕截图** ![](https://user-images.githubusercontent.com/1627824/27549958-b6732160-5a52-11e7-8813-3beeeed03b9c.png) ![](https://user-images.githubusercontent.com/1627824/30039983-d75d1b3e-91d8-11e7-9ac9-71d2ed12958c.png) 🚨 _注:在Android上,请求一个电话号码会向用户提供一个传送地址选择器. 如果你没有把任何东西运送给用户,考虑在Android Pay之外捕获电话号码._ #### 请求电子邮件地址 设定 `requestPayerEmail` 改为 `true` 请求电子邮件地址. ```es6 const OPTIONS = { requestPayerEmail: true }; ``` **见屏幕截图** ![](https://user-images.githubusercontent.com/1627824/27549968-c172ac34-5a52-11e7-973d-8d06a3beb5ce.png) ![](https://user-images.githubusercontent.com/1627824/30039982-d565c68c-91d8-11e7-9cb9-2a0e58fffe6a.png) 您也可以通过设置所有三个来请求 `true`。 。 。 . ```es6 const OPTIONS = { requestPayerName: true, requestPayerPhone: true, requestPayerEmail: true }; ``` ### 请求发运地址 请求发送地址分三步进行. 首先,你需要设置 `requestShipping` 改为 `true` 在内部 `PaymentOptions`。 。 。 . ```es6 const OPTIONS = { requestShipping: true }; ``` 第二,你需要包含 `shippingOptions` 在您的支付细节. ```diff const DETAILS = { id: 'basic-example', displayItems: [ { label: 'Movie Ticket', amount: { currency: 'USD', value: '15.00' } } ], + shippingOptions: [{ + id: 'economy', + label: 'Economy Shipping', + amount: { currency: 'USD', value: '0.00' }, + detail: 'Arrives in 3-5 days' // `detail` is specific to React Native Payments + }], total: { label: 'Merchant Name', amount: { currency: 'USD', value: '15.00' } } }; ``` 最后,当用户选择一个 `shippingAddress` 和(或)a `shippingOption`。在每次召回中,你都需要提供新的 `PaymentDetails` 这将更新您的支付请求. ```es6 paymentRequest.addEventListener('shippingaddresschange', e => { const updatedDetails = getUpdatedDetailsForShippingAddress(paymentRequest.shippingAddress; e.updateWith(updatedDetails); }); paymentRequest.addEventListener('shippingoptionchange', e => { const updatedDetails = getUpdatedDetailsForShippingOption(paymentRequest.shippingOption); e.updateWith(updatedDetails); }); ``` 为了更深入地处理支付请求中的运输, 检查谷歌 _[付款货运请求](https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/deep-dive-into-payment-request#shipping_in_payment_request_api)_。 。 。 . 🚨 _注:Android上没有 `shippingaddresschange` 财务报告和审定财务报表 `shippingoptionchange` 事件。 要让用户更新他们的货运地址,你需要启动一个新的 `PaymentRequest`。更新运输选项通常发生在接收货物之后 `PaymentResponse` 在呼吁之前 `getPaymentToken` 方法._ ### 处理付款 现在我们知道如何初始化,展示, 并驳回付款请求, 让我们来看看如何处理付款. 当一个用户接受支付, `PaymentRequest.show` 将决心做出付款反应. ```es6 paymentRequest.show() .then(paymentResponse => { // Your payment processing code goes here return processPayment(paymentResponse); }); ``` 处理Apple Pay/Android Pay付款有两种方法——在您的服务器或使用支付处理器. #### 在您的服务器上处理付款 如果你有能力在服务器上处理Apple Pay/Android Pay支付,你只需要将支付响应数据发送到您的服务器. > ⚠️ **说明:** 当运行 Apple Pay 在模拟器上, `paymentData` 等于 `null`。 。 。 . ```es6 import { NativeModules } from 'react-native'; paymentRequest.show() .then(paymentResponse => { const { transactionIdentifier, paymentData } = paymentResponse.details; return fetch('...', { method: 'POST', body: { transactionIdentifier, paymentData } }) .then(res => res.json()) .then(successHandler) .catch(errorHandler) }); ``` **参见 Android 付费示例** ```es6 paymentRequest.show() .then(paymentResponse => { const { getPaymentToken } = paymentResponse.details; return getPaymentToken() .then(paymentToken => { const { ephemeralPublicKey, encryptedMessage, tag } = paymentResponse.details; return fetch('...', { method: 'POST', body: { ephemeralPublicKey, encryptedMessage, tag } }) .then(res => res.json()) .then(successHandler) .catch(errorHandler) }); }); ``` 您可以在 Apple 上更多地了解服务器端的解密 [支付托肯格式引用](https://developer.apple.com/library/content/documentation/PassKit/Reference/PaymentTokenJSON/PaymentTokenJSON.html) 文档. #### 使用付款处理器处理付款 当使用支付处理器时,你会收到 `paymentToken` 区域 `details` 会 议 日 程 和 议 程 `PaymentResponse`。使用此令牌向客户收取您的支付处理器. ```es6 paymentRequest.show() .then(paymentResponse => { const { paymentToken } = paymentResponse.details; // On Android, you need to invoke the `getPaymentToken` method to receive the `paymentToken`. return fetch('...', { method: 'POST', body: { paymentToken } }) .then(res => res.json()) .then(successHandler) .catch(errorHandler); }); ``` **参见 Android 付费示例** ```es6 paymentRequest.show() .then(paymentResponse => { const { getPaymentToken } = paymentResponse.details; return getPaymentToken() .then(paymentToken => fetch('...', { method: 'POST', body: { paymentToken } }) .then(res => res.json()) .then(successHandler) .catch(errorHandler); }); }); ``` 获得支持的付款处理者名单和如何使这些付款处理者能够使用,参见 [加进](https://npmcn.com/package/%40exodus/react-native-payments/#readme-add-ons) 节. ### 驳回付款请求 驳回付款请求与向 `complete` 方法打开 `PaymentResponse`。 。 。 . ```es6 paymentResponse.complete('success'); // Alternatively, you can call it with `fail` or `unknown` ``` 🚨 _注意:在Android上,不需要打电话 `paymentResponse.complete` - " 付款请求 " 本身即被驳回._ ## 测试付款 ### 苹果支付 沙盒环境是测试Apple Pay下线执行应用,网站,发售点系统的一个好方法. 苹果的报价 [详细指南](https://developer.apple.com/support/apple-pay-sandbox/) 用于设置沙盒环境. > ⚠️ **说明:** 在您的生产环境中测试Apple Pay也很重要. 生产环境中必须使用真牌. 测试卡不行. > > ⚠️ **说明:** 在模拟器和真设备上运行Apple Pay时有已知的差异. 在投入生产前确保您在真实设备上测试Apple Pay. ## 苹果支付按钮 提供按钮,用于通过Apple Pay触发支付,或促使用户设置卡. [详细文件和实例](https://npmcn.com/package/%40exodus/react-native-payments/packages/react-native-payments/docs/ApplePayButton.md) ## API 密码 ### [土著付款](https://github.com/naoufal/react-native-payments/blob/master/packages/react-native-payments/docs/NativePayments.md) ### [付款请求](https://github.com/naoufal/react-native-payments/blob/master/packages/react-native-payments/docs/PaymentRequest.md) ### [付款请求更新事件](https://github.com/naoufal/react-native-payments/blob/master/packages/react-native-payments/docs/PaymentRequestUpdateEvent.md) ### [付款答复](https://github.com/naoufal/react-native-payments/blob/master/packages/react-native-payments/docs/PaymentResponse.md) ## 资源 ### 付款请求 - [引入支付请求 API](https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request) - [深入支付请求 API](https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/deep-dive-into-payment-request) - [W3C API 工作草案](https://www.w3.org/TR/payment-request/) - [网络付款](https://www.youtube.com/watch?v=U0LkQijSeko) - [网络付款的未来](https://www.youtube.com/watch?v=hU89pPBmhds) ### 苹果支付 - [从苹果支付开始](https://developer.apple.com/apple-pay/get-started) - [配置环境](https://developer.apple.com/library/content/ApplePay_Guide/Configuration.html) - [处理付款](https://developer.apple.com/library/content/ApplePay_Guide/ProcessPayment.html#//apple_ref/doc/uid/TP40014764-CH5-SW4) - [支付托肯格式引用](https://developer.apple.com/library/content/documentation/PassKit/Reference/PaymentTokenJSON/PaymentTokenJSON.html#//apple_ref/doc/uid/TP40014929) ### Android 付费 - [设置 Android 付费](https://developers.google.com/pay/api/android/guides/setup) - [教学](https://developers.google.com/pay/api/android/guides/tutorial) - [品牌准则](https://developers.google.com/pay/api/android/guides/brand-guidelines) - [网关切入方式](https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/android-pay#gateway_token_approach) - [网络托肯方法](https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/android-pay#network_token_approach) # 许可证 依据麻省理工学院许可,版权2017年, [纳乌法尔·卡德洪姆](https://twitter.com/naoufal)。 。 。 . 见 [自由主义](https://github.com/naoufal/react-native-payments/blob/master/LICENSE) 更多信息. ## 常见问题 ### @exodus/react-native-payments 是什么？ \[\[\(\]https://www\.np \(英语\) ### 如何安装 @exodus/react-native-payments？ 在项目目录运行 npm install @exodus/react-native-payments，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=15）、react-native（\>=0\.41）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @exodus/react-native-payments 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @exodus/react-native-payments 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @exodus/react-native-payments 可以商用吗？ @exodus/react-native-payments 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @exodus/react-native-payments 的下载量有多少？ 根据 npm 官方下载统计，@exodus/react-native-payments 在 2026/10/14 – 2026/11/12 这 30 天内被下载 10,611 次，日均约 354 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @exodus/react-native-payments 还在维护吗？ 最新版本 2\.1\.1 发布于 2025/10/31（1 年前）；至今共发布 18 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/12/27。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。