# @bemony/payment-form-react 中文文档 规范地址：https://npmcn.com/package/%40bemony/payment-form-react/ 版本：0\.2\.0 npm 元数据更新时间：2026-11-11T00:25:50.421Z 中文译文更新时间：2026-11-11T00:32:31.362Z 软件包许可：未声明 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40bemony/payment-form-react 原文对照：https://npmcn.com/package/%40bemony/payment-form-react/?lang=original 项目主页：https://github.com/AgenusPayments/orchestration-embed#readme 源码仓库：https://github.com/AgenusPayments/orchestration-embed ## 关键信息（来自 npm 元数据） - 包体积（解压后）：65.6 kB，9 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：1 个 - peer 依赖：react \>=19\.0\.0 \<20\.0\.0，react-dom \>=19\.0\.0 \<20\.0\.0 - 首次发布：2026-10-07T21:32:00.044Z - 最新版本发布：2026-11-11T00:25:50.264Z - 近 30 天下载量：3503（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：25（近 12 个月 25 个） ## 中文简介 主机贝莫尼支付表的官方反应适配器. ## 安装 ```sh npm install @bemony/payment-form-react ``` 也可以使用：`pnpm add @bemony/payment-form-react`、`yarn add @bemony/payment-form-react`、`bun add @bemony/payment-form-react` ## README # `@bemony/payment-form-react` 适应者 官方行为 `@bemony/payment-form`。 。 。 . O pacote monta a mesma instância segura do SDK Web e e rece duas formas de integração : 互联网档案馆的存檔,存档日期2013-12-21 - `ref`(一) 检查; - `BemonyPaymentFormProvider` + 键 `useBemonyPaymentForm`页:1 `pay()` 请求 组件. 普罗维多·纳多拉(O ificador não realos regres de pagamento) 要求财政拨款 (原始内容存档于2018-10-21) (英语). não duplica o estado canônico do SDK Web. ## 请求 - 反应 `>=19 <20`· ; - 反应 DOM `>=19 <20`· ; - 检查会话没有后端; - origem 检查出cadastrada na Bemony; - CSP compatível com os frame e collectors usilizados. 中国植物物种信息数据库. ## 英斯特拉桑 ```bash pnpm add @bemony/payment-form-react ``` `@bemony/payment-form` (原始内容存档于2018-10-12) (英语). Instalado como dependência do rependor. 诺克萨里奥省 帕克特斯分裂. ## 没有后端 开个退房会 没有侍从 我们和秘密钥匙 (原始内容存档于2013-10-12). O navegador deve Receber somente o `sessionClientSecret` e/ 说明 `riskCollectors`。 。 。 . ```ts const response = await fetch( `${process.env.BEMONY_ORCHESTRATOR_API_BASE_URL}/v1/checkout-sessions`, { method: 'POST', headers: { authorization: `Bearer ${process.env.BEMONY_SECRET_KEY}`, 'content-type': 'application/json', 'idempotency-key': crypto.randomUUID(), 'x-bemony-api-version': '2026-11-02' }, body: JSON.stringify({ mode: 'CREATE', domainId: 'cdom_...', checkout: { checkoutConfigId: 'ccfg_...' } }) } ); if (!response.ok) throw new Error('Não foi possível criar a CheckoutSession.'); const session = await response.json(); ``` Nunca 讨论会 `BEMONY_SECRET_KEY` 反动 捆绑 做组件. ## 综合通讯 `ref` 使用 estaforma quando o botão que chama 游戏 `pay()` (原始内容存档于2018-10-21) (英语). pentence ao mesmo macade. ```tsx 'use client'; import { BemonyPaymentForm, PAYMENT_FORM_API_VERSION, type BemonyPaymentFormRef, type PayInput, type PaymentFormError, type RiskCollector } from '@bemony/payment-form-react'; import { useRef, useState } from 'react'; type CheckoutProps = Readonly<{ sessionClientSecret: string; riskCollectors?: readonly RiskCollector[]; }>; export function Checkout({ sessionClientSecret, riskCollectors }: CheckoutProps) { const formRef = useRef(null); const [ready, setReady] = useState(false); const [submitting, setSubmitting] = useState(false); const [error, setError] = useState(null); const input: PayInput = { merchantOrderId: 'order_123', merchantReference: 'merchant-reference-123', currency: 'BRL', operation: 'PURCHASE', customer: { firstName: 'Ana', lastName: 'Silva', email: 'ana@example.com' }, items: [ { id: 'item_123', sku: 'SKU-123', description: 'Produto', unitAmount: 10990, quantity: 1, type: 'ONE_TIME' } ], amount: 10990, context: { funnelId: 'checkout', funnelStep: 'payment', channel: 'WEB' } }; async function submit() { setSubmitting(true); setError(null); try { const payment = await formRef.current!.pay(input); console.log(payment.paymentId, payment.status); } catch (cause) { setError(cause as PaymentFormError); } finally { setSubmitting(false); } } return (
setReady(true)} onStatusChange={(status) => setSubmitting( ['TOKENIZING', 'SUBMITTING', 'AUTHENTICATING_3DS', 'PROCESSING'].includes(status) ) } onError={setError} /> {error &&

{error.message}

}
); } ``` ## 提供电子钩 使用estaforma quando o botão, resumo ou tratamento de estado está em outro 组件. O 提供者 个人自定义 `clientSecret`, (中文(简体) ), `environment` 尔 `version` 无组件e 费略. ```tsx 'use client'; import { BemonyPaymentForm, BemonyPaymentFormProvider, PAYMENT_FORM_API_VERSION, useBemonyPaymentForm, type PayInput, type RiskCollector } from '@bemony/payment-form-react'; function PayButton({ input }: Readonly<{ input: PayInput }>) { const { ready, state, error, pay } = useBemonyPaymentForm(); return ( <> {error &&

{error.message}

} ); } type CheckoutWithProviderProps = Readonly<{ session: Readonly<{ sessionClientSecret: string; riskCollectors?: readonly RiskCollector[]; }>; input: PayInput; }>; export function CheckoutWithProvider({ session, input }: CheckoutWithProviderProps) { return ( ); } ``` `useBemonyPaymentForm()` 龙卷风 : | 坎波语Name | 提波 | 乌苏 | | --- | --- | --- | | `ready` | `boolean` | 2006年12月31日,日内瓦 `pay()` | | `state` | `PaymentFormState` | estado, envio, resecado e routo atuais (法语) | | `error` | `PaymentFormError | null` | 乌尔蒂莫错误的público | | `pay` | `(input: PayInput) => Promise` | 歌剧动画 | 钩子 só pode ser usado dentro de 钩子 钩子 `BemonyPaymentFormProvider`。 。 。 . ## 道具 | Prop | 提波 | 帕德罗 | 国家 | | --- | --- | --- | --- | | `clientSecret` | `string` | 俄克里奥 | 离职会议 | | `environment` | `'sandbox' | 'production' | 'production_aws'` | `sandbox` | 奥斯佩达 | | `version` | `'2026-09-25' | '2026-10-20' | '2026-10-30'` | `2026-10-30` | 霍斯佩达多协议 | | `riskCollectors` | `readonly RiskCollector[]` | 宽容 | 苏维埃社会主义共和国 | | `appearance` | `PaymentFormAppearance` | 锡斯德马 | 塔马-瓦利亚韦斯-维瓦伊斯 | | `threeDS` | `{ presentation?: 'modal' | 'inline' }` | `modal` | 挑战 | | `className` | `string` | 宽容 | 容器等级 | | `onReady` | `() => void` | 宽容 | iframe e Card 框架正版 | | `onCardStateChange` | `(state: CardState) => void` | 宽容 | 完成 e 认证 dos campos | | `onStatusChange` | `(status) => void` | 宽容 | 法语区 | | `onSuccess` | `(payment) => void` | 宽容 | 帕加门托 `AUTHORIZED` 尔 `CAPTURED` | | `onError` | `(error) => void` | 宽容 | mesmo 错误 público rejeitado por `pay()` | | `onEvent` | `(event) => void` | 宽容 | 蒙塔吉姆/帕加门托 | 没有供应商, `children` (原始内容存档于2012-10-12). Também é obrigatório. 没有独立的组件, `clientSecret` 国家 obrigatório; Dentro do Productor,一种相通的相通语境. ## 班代拉斯·德·卡朗 Não passe uma lista de bandeiras por prop. 中国植物物种信息数据库. 自动售出卡框架 a 配置。 在瓦利达 `VISA` 电子 `MASTERCARD` (a) 恢复性健康. Quando 一支探险队, `onCardStateChange` 通报a `valid: false` 电子音标 (原始内容存档于2013-10-12). e criado; desabilite o botão enquanto o estado for inválido. ```tsx setCanPay(state.valid)} /> ``` 卡苏 `pay()` seja 查马多, 抓取 `PaymentFormError.code === 'CARD_BRAND_NOT_SUPPORTED'`欧马 当地法尔哈, `retryable: true`{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我们一起来 `VALIDATION` 计划 `CARD_TOKENIZATION`; 欧乌阿里奥 (原始内容存档于2018-07-21) (英语). cope corrigiir o cartão sem gerar uma tentativa francira. ## 韦尔索斯-达API ```tsx import { DEFAULT_PAYMENT_FORM_API_VERSION, PAYMENT_FORM_API_VERSION, type PaymentFormApiVersion } from '@bemony/payment-form-react'; ``` | 维尔桑 | 常数 | 乌苏 | | --- | --- | --- | | `2026-09-25` | `PAYMENT_FORM_API_VERSION.LEGACY` | 反法多语 | | `2026-10-20` | `PAYMENT_FORM_API_VERSION.ENRICHMENT` | (法语) | | `2026-10-30` | `PAYMENT_FORM_API_VERSION.TOKEN_INTENT` | 肯特特/简历 | 霍斯佩达多议定书 `DEFAULT_PAYMENT_FORM_API_VERSION`页:1 `2026-10-30`。 O fechado e valor é viciado novamente pelo SDK e pelo hosted BFF. 中国植物物种信息数据库. 万圣节 aPI definida pelo通过 `BEMONY_API_VERSION`。 。 。 . 一个道具 `version` (原始内容存档于2018-09-26) (英语). control a somente o handers to Entroductor, o SDK e o formulário Hospedado. Ela não substitui o header HTTP usado pelo 后端 页面存档备份,存于互联网档案馆 HTTP usado pelo 后端 页面存档备份,存于互联网档案馆. ## 环境 - `sandbox`\- 铁路; - `production`\- 总统府; - `production_aws`(原始内容存档于2018-03-29) (英语). produção franceata hospedada na AWS. (原始内容存档于2018-03-21) (英语). O parte nineca recebe endpoint ou origem arbitraria. 虚拟主机 部署贝莫尼. ## 三. 联系 `pay()` SDK Web的相接器再出口: ```ts import type { Address, CardStorageConsent, CheckoutClient, CommerceContext, Customer, CustomerHistory, PayInput, PayOutcome, PaymentAmounts, PaymentItem, ShippingAddress } from '@bemony/payment-form-react'; ``` `PayInput` 顾客、内衣、同意书、印地安人/德孔多人,共计 integridade,上下文喜剧,URL,元数据e上下文O do客户端. Sessão, sorth, PAN, CVC, IP, 互联网档案馆的存檔,存档日期2013-10-02, 用户 - Agent observado e evidência 3DS não pertencem ao introduction público. 中国植物物种信息数据库. ### 倒计时 `client` 野马 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我是说 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}是的 `client`(原始内容存档于2013-10-12). apenas sesse campo substitui o valor observado. Os demais continuam sendo preenchidos pelo SDK quando disponíveis. 中国植物物种信息数据库. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}一个迷宫重回原地 `client.utm` 电子 `client.browserInfo`{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}嗯... ### `amount` 喀麦隆 `amount` {\\fn华文楷体\\fs20\\bord1\\shad1\\1cHE0E0E0\\2cH000000}能跑得快活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活 Ele não定义了o valor cobrado. 中国植物物种信息数据库. 乌玛 龙卷风 `422 AMOUNT_MISMATCH`。 。 。 . `publicCheckoutUrl` 奔跑时刻的时光 (原始内容存档于2012-10-12). environmente de detino publicar suporte ao campo. ## 错误 ```text MOUNTING → READY → TOKENIZING → SUBMITTING → PROCESSING ├→ AUTHENTICATING_3DS → PROCESSING ├→ AUTHORIZED/CAPTURED ├→ DECLINED/FAILED/EXPIRED └→ UNKNOWN ``` 执行 `pay()` 迷幻花样 `onError` 请求配置 : ```tsx try { const result = await formRef.current!.pay(input); // Não faça fulfillment apenas com o resultado do browser. console.log(result.paymentId); } catch (cause) { const error = cause as PaymentFormError; console.error(error.code, error.requestId, error.details); } ``` - `requestId` a. 运行时间; - `commandId` 当地地名; - `retryable: true` a. 允许自拍或自拍; - `PAYMENT_STATUS_UNKNOWN` exige conferencea/webhook antes de qualquer nova cobrança; 互联网档案馆的存檔,存档日期2013-12-22; - `payment.transaction.attempts` diagnóstico público, não字体实现. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}哦 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}哦 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}哦 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}哦 普罗杜多·克苏米多尔·斯科尔 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}哦普罗杜多·克多克多克罗克多克多克多克多克多克多克多克多克多克多克 O Enbed Preserva o wrongo público 互联网档案馆的存檔,存档日期2013-10-02 da API e não reinterpreta o dominio franciro. 中国植物物种信息数据库. ## Remontagem e React 严格模式 (原始内容存档于2018-03-26) (英语). Resact Trust (原始内容存档于2013-10-12). Mode sem deixar dois iframes ativos. {\\fn华文楷体\\fs16\\1cHE0E0E0}真的 `clientSecret`, (中文(简体) ), `environment`, (中文(简体) ), `version`,介绍3DS, `appearance` 尔 `riskCollectors` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}雷蒙塔 or iframe. `appearance` 电子 `riskCollectors` (原始内容存档于2018-10-21). são comparados por valor, então objetos 等同的 reriados durante commerizações comuns não provocam remontagem. 中国植物物种信息数据库. 回叫são lidos pela referência mais recente e não exigem desmontar a instância quando apenas 一个有趣的泥巴. ## 下一轮.js e SSR 使用 uma fronteira 组件 : ```tsx 'use client'; import { BemonyPaymentForm } from '@bemony/payment-form-react'; ``` Crie a Checkout Session em Route Handler, Server Action protegida ou后端 prióprio. 通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通訊通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通 Envie 客户端 构成部分 `sessionClientSecret` (原始内容存档于2018-10-21). dados públicos da sessão. Nunca 使用 uma variável 语言 `NEXT_PUBLIC_*` {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}秘密密钥 {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}. ## 阿帕伦西亚 ```tsx ``` ## 风险收集器e 传球 `riskCollectors` (原始内容存档于2018-09-21) (英语). stratamente da Counter Caption ao partiese ou Productor. 收集器出自, blopeado ou indeponível não blopeia o pagamento e não deve ser 坚持不懈地检查. Durante a transição atual, 使用 uma politica consoluda que 保存为字体 exigidas pelo seu 地点 e 许可 os 主机 贝莫尼 os 收集器 机能: ```text default-src 'self'; frame-src https://form.bemony.com https://bemony-payment-form.vercel.app https://bemony-payment-form-sandbox.vercel.app https://embed-payment-orchestration.bemony.com; script-src 'self' https://js.stripe.com https://tst.kaptcha.com https://ssl.kaptcha.com; connect-src 'self' https://form.bemony.com https://bemony-payment-form.vercel.app https://bemony-payment-form-sandbox.vercel.app https://embed-payment-orchestration.bemony.com https://api.stripe.com https://r.stripe.com https://m.stripe.com https://tst.kaptcha.com https://ssl.kaptcha.com; ``` ## 启动 1. 共和党第一任主席 `apiVersion`· ; 2. vice o host usando a versão antiga do pacote; 互联网档案馆的存檔,存档日期2013-12-21; 3. 共和国 Web e React com 标签 `latest`· ; 4. 使 um consumidor de teste expression para 使 um consumidor de teste underente para 具备资格, 使 um consumidor de teste expressione unpression para 使 具有资格的 具有资格的 具有资格的 具有资格的 具有资格的 具有资格的 具有资格的 具有资格的 `0.2.0`· ; 5. (原始内容存档于2013-10-12). existe legado, enriquecimento, Token Intent, 3DS e recondiação. 奥米蒂尔 `version` 我们a `2026-10-30` 没有握手。 禁食剂 抗去甲状腺素 Nem (a) 执行《消除对妇女一切形式歧视公约》,特别是《消除对妇女一切形式歧视公约》. ## 塞古兰萨教区 - não envie Secret Key, sident interno, PAN, CVC ou evidência 3DS por道具; 互联网档案馆的存檔,存档日期2013-12-21; - 注册处 `clientSecret`\* 收藏家的纪念品; - (一) 浏览器终端; - 自由之声 `onSuccess`(c) 确认por webhook ou 咨询a autenticada; - não experte sordização, 3DS ou retrieved financiro fora do SDK. 互联网档案馆的存檔,存档日期2013-12-21. ## 常见问题 ### @bemony/payment-form-react 是什么？ 主机贝莫尼支付表的官方反应适配器\. ### 如何安装 @bemony/payment-form-react？ 在项目目录运行 npm install @bemony/payment-form-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=19\.0\.0 \<20\.0\.0）、react-dom（\>=19\.0\.0 \<20\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @bemony/payment-form-react 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @bemony/payment-form-react 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @bemony/payment-form-react 可以商用吗？ @bemony/payment-form-react 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。 ### @bemony/payment-form-react 的下载量有多少？ 根据 npm 官方下载统计，@bemony/payment-form-react 在 2026/10/08 – 2026/11/06 这 30 天内被下载 3,503 次，日均约 117 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @bemony/payment-form-react 还在维护吗？ 最新版本 0\.2\.0 发布于 2026/11/11（今天）；至今共发布 25 个版本，其中过去 12 个月发布了 25 个；首次发布于 2026/10/08。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。