@bemony/payment-form-react

中文文档
0.2.0发布于 2026/11/11TypeScriptES Module近 30 天下载 3503

主机贝莫尼支付表的官方反应适配器.

中文使用文档
文档目录19 节
  1. 请求
  2. 英斯特拉桑
  3. 没有后端
  4. 综合通讯 ref
  5. 提供电子钩
  6. 道具
  7. 班代拉斯·德·卡朗
  8. 韦尔索斯-达API
  9. 环境
  10. 三. 联系 pay()
  11. 倒计时 client 野马
  12. amount 喀麦隆
  13. 错误
  14. Remontagem e React 严格模式
  15. 下一轮.js e SSR
  16. 阿帕伦西亚
  17. 风险收集器e
  18. 启动
  19. 塞古兰萨教区

@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. 中国植物物种信息数据库.

英斯特拉桑

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。 。 。 .

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.

'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<BemonyPaymentFormRef>(null);
  const [ready, setReady] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<PaymentFormError | null>(null);

  const input: PayInput = {
    merchantOrderId: 'order_123',
    merchantReference: 'merchant-reference-123',
    currency: 'BRL',
    operation: 'PURCHASE',
    customer: {
      firstName: 'Ana',
      lastName: 'Silva',
      email: '[email protected]'
    },
    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 (
    <section>
      <BemonyPaymentForm
        ref={formRef}
        clientSecret={sessionClientSecret}
        environment="sandbox"
        version={PAYMENT_FORM_API_VERSION.TOKEN_INTENT}
        riskCollectors={riskCollectors}
        threeDS={{ presentation: 'modal' }}
        appearance={{ theme: 'system' }}
        onReady={() => setReady(true)}
        onStatusChange={(status) =>
          setSubmitting(
            ['TOKENIZING', 'SUBMITTING', 'AUTHENTICATING_3DS', 'PROCESSING'].includes(status)
          )
        }
        onError={setError}
      />

      {error && <p role="alert">{error.message}</p>}
      <button type="button" disabled={!ready || submitting} onClick={() => void submit()}>
        {submitting ? 'Processando…' : 'Pagar'}
      </button>
    </section>
  );
}

提供电子钩

使用estaforma quando o botão, resumo ou tratamento de estado está em outro 组件. O 提供者 个人自定义 clientSecret, (中文(简体) ), environment 尔 version 无组件e 费略.

'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 && <p role="alert">{error.message}</p>}
      <button type="button" disabled={!ready || state.isSubmitting} onClick={() => void pay(input)}>
        {state.isSubmitting ? 'Processando…' : 'Pagar'}
      </button>
    </>
  );
}

type CheckoutWithProviderProps = Readonly<{
  session: Readonly<{
    sessionClientSecret: string;
    riskCollectors?: readonly RiskCollector[];
  }>;
  input: PayInput;
}>;

export function CheckoutWithProvider({ session, input }: CheckoutWithProviderProps) {
  return (
    <BemonyPaymentFormProvider
      clientSecret={session.sessionClientSecret}
      environment="sandbox"
      version={PAYMENT_FORM_API_VERSION.TOKEN_INTENT}
      riskCollectors={session.riskCollectors}
      threeDS={{ presentation: 'modal' }}
    >
      <BemonyPaymentForm className="payment-form" />
      <PayButton input={input} />
    </BemonyPaymentFormProvider>
  );
}

useBemonyPaymentForm() 龙卷风 :

坎波语Name提波乌苏
readyboolean2006年12月31日,日内瓦 pay()
statePaymentFormStateestado, envio, resecado e routo atuais (法语)
errorPaymentFormError | null乌尔蒂莫错误的público
pay(input: PayInput) => Promise<PayOutcome>歌剧动画

钩子 só pode ser usado dentro de 钩子 钩子 BemonyPaymentFormProvider。 。 。 .

道具

Prop提波帕德罗国家
clientSecretstring俄克里奥离职会议
environment'sandbox' | 'production' | 'production_aws'sandbox奥斯佩达
version'2026-09-25' | '2026-10-20' | '2026-10-30'2026-10-30霍斯佩达多协议
riskCollectorsreadonly RiskCollector[]宽容苏维埃社会主义共和国
appearancePaymentFormAppearance锡斯德马塔马-瓦利亚韦斯-维瓦伊斯
threeDS{ presentation?: 'modal' | 'inline' }modal挑战
classNamestring宽容容器等级
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.

<BemonyPaymentForm
  clientSecret={sessionClientSecret}
  onCardStateChange={(state) => 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

import {
  DEFAULT_PAYMENT_FORM_API_VERSION,
  PAYMENT_FORM_API_VERSION,
  type PaymentFormApiVersion
} from '@bemony/payment-form-react';
维尔桑常数乌苏
2026-09-25PAYMENT_FORM_API_VERSION.LEGACY反法多语
2026-10-20PAYMENT_FORM_API_VERSION.ENRICHMENT(法语)
2026-10-30PAYMENT_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的相接器再出口:

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.

错误

MOUNTING → READY → TOKENIZING → SUBMITTING → PROCESSING
                                      ├→ AUTHENTICATING_3DS → PROCESSING
                                      ├→ AUTHORIZED/CAPTURED
                                      ├→ DECLINED/FAILED/EXPIRED
                                      └→ UNKNOWN

执行 pay() 迷幻花样 onError 请求配置 :

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 组件 :

'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}.

阿帕伦西亚

<BemonyPaymentForm
  clientSecret={clientSecret}
  appearance={{
    theme: 'dark',
    variables: {
      colorPrimary: '#00e68a',
      colorBackground: '#101513',
      colorText: '#ffffff',
      colorDanger: '#ff5b6e',
      colorBorder: '#33413a',
      borderRadius: '12px',
      fontFamily: 'Inter, sans-serif'
    },
    threeDS: { modalBackdrop: 'rgba(0, 0, 0, 0.72)' }
  }}
/>

风险收集器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 收集器 机能:

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 共发布 25 个版本,首次发布于 2026/10/08;过去 12 个月发布了 25 个版本。

版本发布日期距今
0.2.0latest2026/11/11今天
0.2.0-next.4next2026/11/10今天
0.2.0-next.32026/10/3111 天前
0.2.0-next.22026/10/3111 天前
0.2.0-next.12026/10/2022 天前
0.2.0-next.02026/10/1625 天前

关于 @bemony/payment-form-react 的常见问题

@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 和提交记录判断。