# @flopay/vue 中文文档

规范地址：https://npmcn.com/package/%40flopay/vue/

版本：1\.14\.11
npm 元数据更新时间：2026-11-14T08:12:52.021Z
中文译文更新时间：2026-11-15T00:55:21.234Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40flopay/vue
原文对照：https://npmcn.com/package/%40flopay/vue/?lang=original
项目主页：https://github.com/TeamFloPay/sdk#readme
源码仓库：https://github.com/TeamFloPay/sdk

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：632 kB，34 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：vue \>=3\.3\.0
- 首次发布：2026-10-20T15:02:53.616Z
- 最新版本发布：2026-11-14T08:12:51.805Z
- 近 30 天下载量：2640（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：18（近 12 个月 18 个）

## 中文简介

Vue 3 组件和可堆叠件,用于 FloPay 检查、卡片设置和单击支付: Vue 对应的 `@flopay/react`,具有相同的道具,事件和行为.

## 安装

```sh
npm install @flopay/vue
```

也可以使用：`pnpm add @flopay/vue`、`yarn add @flopay/vue`、`bun add @flopay/vue`

## README

# @ flopay/vue (帮助)

Vue 3 组件和可堆叠件,用于 FloPay 检查、卡片设置和单击支付: Vue 对应的 `@flopay/react`,具有相同的道具,事件和行为.

## 安装

```bash
npm install @flopay/vue
```

`vue` (单位:千美元)`>=3.3.0`)是同级依赖关系. `@flopay/js` 财务报告和审定财务报表 `@flopay/shared` 与软件包一起安装.

## 使用量

渲染器 `FloPayCheckout` 带有商家服务器创建的会话,或内含 `createSession` 草案。 通知回调是 Vue 事件: react's `onComplete` 实值 `@complete` 模板中 `onComplete` 内 `h()`。 。 。 .

```ts
import { FloPayCheckout } from '@flopay/vue';
import { h } from 'vue';

export default {
  setup() {
    return () =>
      h(FloPayCheckout, {
        sessionId: 'sess_123',
        nonce: 'nonce_123',
        onComplete: (result) => console.log(result.status),
        onDecline: (decline) => console.log(decline.message),
      });
  },
};
```

浏览器工作( 会话读取、 SDK 加载、 主机卡部件) 开始于 `onMounted`,所以服务器渲染从不触及 `window` 使装载状态.

## 实例

从无花纹子路径设置的卡片 :

```ts
import { FloPayCardSetup } from '@flopay/vue/card-setup';
import { h } from 'vue';

const render = () =>
  h(FloPayCardSetup, {
    sessionId: 'sess_setup_123',
    nonce: 'nonce_setup_123',
    onComplete: (event) => console.log(event.sessionId),
  });
```

使用购买者节省的支付方法一击支付:

```ts
import { FloPayAutomaticPaymentButton } from '@flopay/vue';
import { h } from 'vue';

const render = () =>
  h(FloPayAutomaticPaymentButton, {
    clientId: 'client_123',
    account: { userId: 'user_123', email: 'buyer@example.com' },
    products: [{ code: 'pro-monthly', quantity: 1 }],
    successUrl: 'https://example.com/success',
    cancelUrl: 'https://example.com/cancel',
    onSuccess: (event) => console.log(event.autoCompleted),
  });
```

## 公共 API

每个 `@flopay/react` 组件和钩头有一个同名的 Vue 导出。 React的通知回调是Vue事件,其有效载荷相同.

| 导出 | 反应( E)`@flopay/react`(中文(简体) ) | Vue( 时速`@flopay/vue`(中文(简体) ) |
| --- | --- | --- |
| `FloPayProvider` | `<FloPayProvider>` | `FloPayProvider`提供给后代; `@instrument` |
| `FloPayCheckout` | `<FloPayCheckout>` | `FloPayCheckout`数字 : `@complete`, (中文(简体) ), `@decline`, (中文(简体) ), `@cancel`, (中文(简体) ), `@error`, (中文(简体) ), `@button-click` |
| `SplitCardForm` | `<SplitCardForm>` | `SplitCardForm`数字 : `@complete`, (中文(简体) ), `@decline`, (中文(简体) ), `@cancel`, (中文(简体) ), `@error` |
| `VaultCardFields` | `<VaultCardFields>` | `VaultCardFields`数字 : `@ready`, (中文(简体) ), `@error`, (中文(简体) ), `@validation` |
| `DirectPayPalButton` | `<DirectPayPalButton>` | `DirectPayPalButton`数字 : `@complete`, (中文(简体) ), `@decline`, (中文(简体) ), `@cancel`, (中文(简体) ), `@error` |
| `FloPayAutomaticPaymentButton` | `<FloPayAutomaticPaymentButton>` | `FloPayAutomaticPaymentButton`数字 : `@success`, (中文(简体) ), `@error`, (中文(简体) ), `@decline` |
| `FloPayCardSetup` | `<FloPayCardSetup>` | `FloPayCardSetup`数字 : `@ready`, (中文(简体) ), `@complete`, (中文(简体) ), `@decline`, (中文(简体) ), `@cancel`, (中文(简体) ), `@error` |
| `FloPayPaymentMethodSetup` | `<FloPayPaymentMethodSetup>` | `FloPayPaymentMethodSetup` |
| `useFloPay` | `useFloPay()` | `useFloPay()`裁判, `null` 直至 `loadFloPay()` 决定 |
| `usePayPalFloPay` | `usePayPalFloPay()` | `usePayPalFloPay()`: 参考文献 |
| `useCheckout` | `useCheckout()` | `useCheckout()`: 反应式取出状态 |
| `FloPayCardSetupError` | `FloPayCardSetupError` | `FloPayCardSetupError` |
| `dropThirdPartyOnlyError` | `dropThirdPartyOnlyError` | `dropThirdPartyOnlyError` |

反应 `children` 和自定义布局为槽. `FloPayCheckout`是因为 `layout` 插槽替换内置窗体,并 a `SplitCardForm` 内部接收会话、非会话和 `submitLabel` 除非它自己设置.

入口点 : `@flopay/vue`, (中文(简体) ), `@flopay/vue/card-setup` 财务报告和审定财务报表 `@flopay/vue/payment-method-setup`。 。 。 .

### PayPal 购买者取消

`FloPayCheckout`, (中文(简体) ), `SplitCardForm` 财务报告和审定财务报表 `DirectPayPalButton` 发射 `cancel` (单位:千美元)`@cancel`反应 `onCancel`)每点击一次,当购买者关闭了PayPal弹出,或从PayPal的应用开关返回时,未经批准. 有效载荷是 `FloPayPaymentCancelEvent`数字 : `{ status: 'cancelled', sessionId, provider: 'paypal', paymentMethodType }`。 。 。 . `sessionId` 是尝试的会话(点击时的补丁,否则就是取出),并且 `paymentMethodType` 实值 `paypal_vaulted` 当会场广告 `order` 或者说 `setup_token`,否则 `paypal`。 。 。 .

这绝不是用来报应的 `@decline`),被屏蔽的弹出,负载,渲染或资格失败,或者单击您 `runBeforeButtonClick` 闸机已停止, 同一点击的重复取消会被忽略 。 它只涵盖直接的 PayPal 按钮(会话带有 `gateways.paypal`) (中文(简体) ). 按钮会为下次点击而保持被渲染,如果不听则不会改变.

"不起作用吗? 支付另一种方式"将购买者移动到卡表的提示:

```ts
import { FloPayCheckout, type FloPayPaymentCancelEvent } from '@flopay/vue';
import { defineComponent, h, ref } from 'vue';

export default defineComponent({
  setup() {
    const cancelled = ref<FloPayPaymentCancelEvent | null>(null);
    const cardForm = ref<HTMLElement | null>(null);
    return () => [
      cancelled.value
        ? h('div', { role: 'status' }, [
            "Didn't work? Pay another way. ",
            h(
              'button',
              { type: 'button', onClick: () => cardForm.value?.focus() },
              'Pay by card or Google Pay',
            ),
          ])
        : null,
      h('div', { ref: cardForm, tabindex: -1 }, [
        h(FloPayCheckout, {
          sessionId: 'sess_123',
          nonce: 'nonce_123',
          onCancel: (event: FloPayPaymentCancelEvent) => {
            cancelled.value = event;
          },
        }),
      ]),
    ];
  },
});
```

## 错误

错误是 `FloPayError` 来自 `@flopay/shared`,通过 `@error`。 。 。 .

| 代码 | 含义 |
| --- | --- |
| `UnsupportedBackendVaultCapability` | 会话没有主机金库卡表,也没有其他可用的方法. |
| `stored_payment_method_unsupported` | 买家所保存的方法不能收费;要求另一种方法. |
| `MissingCheckoutSessionToken` | 一个会话 id 是没有它的 `nonce`。 。 。 . |
| `network_request_failed` | 类型 `network_error`。 。 。 . `FloPayCheckout` 无法开始, 因为创建或读取会话在 SDK 重试后从未得到回复 . `cause` 持有原始错误; `sessionId` 当会话已经存在时设置. |
| `CheckoutInitializationFailed` | 类型 `api_error`。 。 。 . `FloPayCheckout` 无法启动, 原因不是网络失败, 原因是 `sessionId` 当会话存在时设置. |

设置表面弹出 `FloPayCardSetupError`,其 `retryable` 说再次尝试是否有帮助.

## 常见问题

### @flopay/vue 是什么？

Vue 3 组件和可堆叠件,用于 FloPay 检查、卡片设置和单击支付: Vue 对应的 @flopay/react,具有相同的道具,事件和行为\.

### 如何安装 @flopay/vue？

在项目目录运行 npm install @flopay/vue，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（\>=3\.3\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @flopay/vue 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @flopay/vue 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @flopay/vue 可以商用吗？

@flopay/vue 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @flopay/vue 的下载量有多少？

根据 npm 官方下载统计，@flopay/vue 在 2026/10/15 – 2026/11/13 这 30 天内被下载 2,640 次，日均约 88 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @flopay/vue 还在维护吗？

最新版本 1\.14\.11 发布于 2026/11/14（1 天前）；至今共发布 18 个版本，其中过去 12 个月发布了 18 个；首次发布于 2026/10/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。