# @authvia/payment-method-create 中文文档

规范地址：https://npmcn.com/package/%40authvia/payment-method-create/

版本：2\.2\.2
npm 元数据更新时间：2026-11-05T17:24:18.795Z
中文译文更新时间：2026-11-08T03:19:09.683Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40authvia/payment-method-create
原文对照：https://npmcn.com/package/%40authvia/payment-method-create/?lang=original

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

- 包体积（解压后）：931 kB，153 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.0\.0
- 运行依赖：10 个
- peer 依赖：vue ^3\.4\.0，vuetify ^3\.5\.0，@mdi/font ^7\.4\.47，@sentry/vue \>=8\.42\.0 \<11
- 首次发布：2026-03-23T15:33:14.154Z
- 最新版本发布：2026-11-05T17:24:18.593Z
- 近 30 天下载量：1917（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：51（近 12 个月 51 个）

## 中文简介

Authvia 支付法表格 Web 组件 - 使用 Vue 3 和 Vuetify 3 构建的支付法表格

## 安装

```sh
npm install @authvia/payment-method-create
```

也可以使用：`pnpm add @authvia/payment-method-create`、`yarn add @authvia/payment-method-create`、`bun add @authvia/payment-method-create`

## README

# 澳大利亚支付方法表

Vue 3 + Vuetify 3 组件和独立的网络组件用于 **添加保存的支付方法** (卡、ACH、PayPal、Venmo、Paze和相关选项)。 您选择要曝光的方法; 只有启用的方法才会出现 。 成功时,主机收到 **支付方法 id**。 。 。 .

完整道具和行为笔记 **故事书** (单位:千美元)`AuthviaPaymentMethodForm` story docs)和导出类型脚本.

## 所需资源

-   **阴道** `>= 3.4.0`
-   **检查** `3.x` (您的应用程序创建 Vuetify 实例; 此软件包不)
-   **计量吸入器** 主机页面上的字体 CSS( Matrial Design 图标)

如果在嵌入的网页组件中缺少 Vue、 Vuetify 或样式, 元素可能会发出 `authvia:dependency-missing`。 。 。 .

## 安装

```bash
npm install @authvia/payment-method-create
```

输出 :

-   **Vue 插件/ 模块 :** `@authvia/payment-method-create` (默认构建)
-   **独立的网络组件 :** `@authvia/payment-method-create/web-component`

## 特征(摘要)

-   **键 :** 内部形式需要有效的JWT。 符号必须包括 `https://authvia.com/uuid` 财务报告和审定财务报表 `payment_methods:create` 内 `scope`。丢失、空出、无效或已过期的令牌保留窗体;包装器发出 `error` 作为 `{ phase: 'init', error }` 并记录一个警告 **没有** 发射 `ready`。 。 。 . **`ready` 只在符号通过验证后才释放.**
-   **启用的方法 :** 诸如 `card`, (中文(简体) ), `ach`, (中文(简体) ), `paypal`, (中文(简体) ), `venmo`,以及 `paze` 控制一切出现。 您不配置退出列表的方法 .
-   **运行时间出错 :** 保存时失败 `error` 载荷通常包括: `message` 字符串( 形状为 **没有** `{ phase: 'init', … }`) (中文(简体) ). 不完整 **帕泽** 或者说 **PayPal/ Venmo 系统** (用于非`payouts` 意图) 配置在列表中隐藏这些方法,而不是在打开时出错. 嵌入物通常会被挂起以便用户可以重试.
-   **哨兵:** 支持独立部件所有权( N)`VITE_WIDGET_SENTRY_DSN`)和东道主所有权(`VITE_SENTRY_EMBED_MODE=lock` 或者说 `window.__AUTHVIA_EMBED__.sentry='host'`)而无取出相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.
-   **成功 :** `success` 带有支付方法细节(见事件)。 由主机决定导航或隐藏嵌入.
-   **风格:** 色调、边框半径和字段 `variant` 可配置; CSS 变量使用 `--avwc-*` 前缀在窗体根上.

## Vue: 注册插件

您的申请必须打电话 `createVuetify()` (并在注册此插件之前加载 Vuetify 样式 + MDI).

```typescript
import { createApp } from 'vue';
import { createVuetify } from 'vuetify';
import AuthviaPaymentMethodFormPlugin from '@authvia/payment-method-create';
import App from './App.vue';

const app = createApp(App);
const vuetify = createVuetify();

app.use(vuetify);
app.use(AuthviaPaymentMethodFormPlugin);
app.mount('#app');
```

命名导出 `AuthviaPaymentMethodFormPlugin` 也可用于明确的进口.

## Vue: 使用组件

```vue
<template>
  <AuthviaPaymentMethodForm
    :token="token"
    merchant-id="demo-merchant"
    customer-ref="demo-customer"
    intent="payments"
    :card="{ demoMode: false }"
    :ach="{ demoMode: false, online: true }"
    @ready="onReady"
    @success="onSuccess"
    @error="onError"
  />
</template>

<script setup lang="ts">
import { AuthviaPaymentMethodForm } from '@authvia/payment-method-create';

function onReady(): void {
  /* JWT passed validation; inner form can render */
}

function onSuccess(detail: unknown): void {
  /* includes paymentMethodId — see types */
}

function onError(detail: unknown): void {
  /* init: { phase: 'init', error }; runtime: often { message } */
}
</script>
```

## 网络组件

装入 **第3组**, (中文(简体) ), **认证中央支助系统**,以及 **计量吸入器** 在捆绑之前 使用 `data-` 属性的前缀; 对象道具是元素上的JSON字符串.

见 `demo.html` 在此重播中,用于完整页面示例.

```html
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.5.0/dist/vuetify.min.css" data-vuetify />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css" data-mdi />
```

```html
<authvia-create-payment-method-form
  data-token="YOUR_JWT"
  data-merchant-id="demo-merchant"
  data-customer-ref="demo-customer"
  data-intent="payments"
  data-card='{"demoMode":false,"submitBtnText":"Add card"}'
  data-color="#4CAF50"
  data-border-radius="1rem"
></authvia-create-payment-method-form>
```

在 Vue 后装入已建脚本( 例如输出 `npm run build:wc`:

```html
<script type="module" src="https://cdn.authvia.com/web-components/authvia-payment-method-create/authvia-payment-method-create.js"></script>
```

### 网络组成部分活动

为:

| 活动 | `detail` |
| --- | --- |
| `ready` | 只有在JWT通过验证(非空的,可解析的,不过期的,所需范围)时才予以批准. 未因丢失、 无效、 过期或范围不足而出错; 使用 `error` 与 `{ phase: 'init', error }` 换句话说. |
| `submit` | 从一些内部流出(例如ACH/PayPal)并带有与形式有关的有效载荷. |
| `success` | 保存的支付方法; 包括 `paymentMethodId` 在正常有效载荷. |
| `error` | 启动失败 : `{ phase: 'init', error }`。运行时间:经常 `{ message: string }` 或类似. |
| `authvia:dependency-missing` | 主机缺少Vue,Vuetify,或需要的样式. |

```html
<script>
  const component = document.querySelector('authvia-create-payment-method-form');
  component?.addEventListener('ready', () => { /* … */ });
  component?.addEventListener('success', (e) => { console.log(e.detail); });
  component?.addEventListener('error', (e) => { console.log(e.detail); });
</script>
```

## 哨兵行为

软件包采用单一客户所有权模式:

-   **独立部件模式 :** 设定 `VITE_WIDGET_SENTRY_DSN`; 部件调用 `Sentry.init` 一次并标记事件 `component=payment-method-create` 财务报告和审定财务报表 `integration=standalone-web-component`。 。 。 .
-   **嵌入式主机模式( 锁定或另一个主机) :** 设定 `VITE_SENTRY_EMBED_MODE=lock` 在构建时间,或设定 `window.__AUTHVIA_EMBED__.sentry = 'host'` 部件挂载前; 部件跳过 `Sentry.init` 并将处理器附加到活动主机客户端.
-   **没有活动的哨兵客户端 :** 抓获帮助者是安全的无操作者.

支持的 Sentry env vars :

| 变量 | 目的 | 默认 |
| --- | --- | --- |
| `VITE_WIDGET_SENTRY_DSN` | DSN 用于独立部件所有权 | 未设定 |
| `VITE_SENTRY_EMBED_MODE` | 设定为 `lock` 强制主机模式 | 未设定 |
| `VITE_SENTRY_RELEASE` | 发给哨兵的可选发布版本 | 未设定 |
| `VITE_SENTRY_REPLAY_SESSION_SAMPLE_RATE` | 会话重放样本率( E)`0..1`(中文(简体) ) | `0` |
| `VITE_SENTRY_REPLAY_ON_ERROR_SAMPLE_RATE` | 重放过量样本率(`0..1`(中文(简体) ) | `1` |

## 支持( 概览)

细节和实例匹配 **故事书** (单位:千美元)`src/components/AuthviaPaymentMethodForm.stories.ts`) (中文(简体) ).

| 区域 | 道具 |
| --- | --- |
| 认证/ 上下文 | `token`, (中文(简体) ), `merchantId`, (中文(简体) ), `customerRef`, (中文(简体) ), `intent` |
| 方法 | `card`, (中文(简体) ), `ach`, (中文(简体) ), `paypal`, (中文(简体) ), `venmo`, (中文(简体) ), `paze` |
| 列表 UI | `paymentMethodDisplay` (标题、字幕、顺序;可选根) `gap`(中文(简体) ) |
| 法律/页脚 | `terms` (空缺+术语链接) |
| 行为 | `forgetHidden`, (中文(简体) ), `forgetDefault` |
| 样式 | `color` (默认) `#4CAF50`从 `DEFAULT_AVWC_PRIMARY_COLOR`, (中文(简体) ), `borderRadius` (默认) `1rem`从 `DEFAULT_AVWC_BORDER_RADIUS`, (中文(简体) ), `variant` (默认) `outlined`从 `DEFAULT_AVWC_FIELD_VARIANT`, (中文(简体) ), `vuetifyOverrides` (web组件:Shadow DOM的平版 CSS字符串) |

### `paymentMethodDisplay`

控制 **支付方法拾取列表** (标签和顺序). 它不打开或关闭方法;使用 `card`, (中文(简体) ), `ach`, (中文(简体) ), `paypal`,等等,为此.

| 外地 | 说明 |
| --- | --- |
| **`gap`** (根,可选) | 选项行之间的垂直间距。 任意 CSS 长度`1rem`, (中文(简体) ), `12px`(中文(简体) ). **如果省略**,此道具不添加间隔;布局与先前的行为相匹配(没有列表级别) `gap` 从此对象). |
| **`card`**, (中文(简体) ), **`ach`**, (中文(简体) ), **`paypal`**, (中文(简体) ), **`venmo`**, (中文(简体) ), **`paze`** | 可选 `title`, (中文(简体) ), `subtitle`,以及 `order`下调 `order` 数值在列表中较高. |

**阴道**

```vue
:payment-method-display="{
  gap: '1rem',
  card: { title: 'Credit / debit card', subtitle: '…', order: 1 },
  ach: { title: 'Bank account', subtitle: '…', order: 2 }
}"
```

**网络组件** (单位:千美元)`data-payment-method-display`: 通过一个 **单个 JSON 对象** 绳子。 在属性之间使用逗号 。 无效的 JSON 被忽略( 请检查控制台) .

```html
data-payment-method-display='{"gap":"1rem","card":{"title":"Card","order":1},"ach":{"title":"Bank","order":2}}'
```

### 帕兹`paze`(中文(简体) )

要求数 `amount`, (中文(简体) ), `clientId`, (中文(简体) ), `profileId`,以及 `name` 在你们所经过的物体上; **都一定不是空的** (经修行后. 如果有任何缺失或空白, **未显示帕泽** 在捡取器。 内流分两步: **启动和平** (SDK负载) **处理和平付款** (退出) —— 完整 —— 创建). 失败 `error` 并返回用户到支付方法列表中,该步骤上没有内含错误横幅;细节会被记录给开发者.

### 付费页/ Venmo

-   **`intent="payouts"`数字 :** `paypal` 财务报告和审定财务报表 `venmo` 可以是布尔斯; PayPal 和 Venmo **保留列表** 即使当 `merchantId` 不完整(与以前一样).
-   **`intent="payments"`** (和除下列行为以外的任何意图) `payouts`: PayPal和Venmo仅在采取器中出现 **`merchantId`** 在解析的钱包设置上是非空的 **财务报告和审定财务报表** 构建定义 **`VITE_APP_PAYPAL_CLIENT_ID`**否则,这些行是 **隐藏** (与前一次点击时间相同的规则) `error`,而不显示一个死选项).
-   过 **`merchantId`** 和可选 **`redirectUrl`** 编辑 `paypal` 编号 : `venmo` 对象,当您希望付款流成功时.

## 稳定型钩子课(覆盖)

用这些钩子 `data-vuetify-overrides` (web组件)或主机CSS. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}有条绳子住进去了 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我从不 `src/constants/avwcStylingHooks.ts` (单位:千美元)`avwcPaymentMethodFormHooks`) (中文(简体) ).

| 类 | 何处 |
| --- | --- |
| `avwc-payment-method-form__root` | 主要形式包装器( E)`AuthviaPaymentMethodForm`(中文(简体) ) |
| `avwc-payment-method-form__options-root` | 选项容器( E)`AuthviaPaymentMethodOptions` `v-container`(中文(简体) ) |
| `avwc-payment-method-form__options-card` | 选择支付方法 `v-card` |
| `avwc-payment-method-form__options-list` | 列表区域包装拾取行 |
| `avwc-payment-method-form__method-dialog` | 每一种付款方法 `v-dialog` 内容 `v-card` |
| `avwc-payment-method-form__method-row` | 每个拾取行( E)`AuthviaPaymentMethodCard`(中文(简体) ) |
| `avwc-payment-method-form__credit-card-section` | 信用卡卡/ PayPal 对话框 |
| `avwc-payment-method-form__ach-root` | ACH 添加-银行流根(`AuthviaPaymentMethodAddAch`(中文(简体) ) |

**在每行拾取器内** (单位:千美元)`data-vuetify-overrides`:与行钩结合,例如. `.avwc-payment-method-form__method-row .payment-method-card__title { color: #1565c0 !important; }` 标题文本, `.payment-method-card__logo-slot` 对于图标锡特, `.payment-method-card__subtitle` 说明行.

## CSS 变量

窗体根设置主题变量,包括:

-   `--avwc-color` (美分; 镜像) `color` 道具, 默认 `#4CAF50` 从 `DEFAULT_AVWC_PRIMARY_COLOR`(中文(简体) )
-   `--avwc-border-radius` (缩写) `borderRadius`默认值 `1rem` 从 `DEFAULT_AVWC_BORDER_RADIUS`(中文(简体) )

附加符号( 例如 `--avwc-text-color-light`页:1 `variables.css` 和故事书.

## 发展

先决条件:节点.js 18+,npm 9+.

```bash
npm install
npm run dev              # app dev server
npm run build            # Vue module
npm run build:wc         # web component
npm run type-check
npm run lint
npm test
```

## 捆绑和资产

-   这个 **Vue 模块** 期望 Vue 和 Vuetify 作为对等依赖; 您的应用程序提供 Vuetify 和 MDI .
-   这个 **独立的网络组件** 捆绑 **Java 脚本** 但期望从主机中查找 CSS + MDI (和 `demo.html`) (中文(简体) ).
-   组件样式与JS同船;在应用层面添加Vuetify + MDI.

## 浏览器支持

Chrome 88+, Firefox 85+, Safari 14+, Edge 88+.

## 更改日志

### 1.0.3 版本 内容提要

添加故事本故事并扩展单元测试; 固定重复的招标类型过滤 `useWalletMerchantService`详细情况见Git历史.

### 第1.0.2号版本

ACH和卡片的统一成功有效载荷(`{ type, paymentMethodId, use }`, (中文(简体) ), `--avwc-*` CSS 变量带有后相兼容倒置,并命名为插件导出.

### 文件(当前)

读取与 `AuthviaPaymentMethodForm.stories.ts` (包括 `paymentMethodDisplay.gap`, (中文(简体) ), `demo.html`,以及一揽子出口(`@authvia/payment-method-create`) (中文(简体) ).

## 许可证

麻省理工学院许可证——参见LICENSE文件.

## 支助

如需支援及提问,请联系奥特维亚UI团队.

## 常见问题

### @authvia/payment-method-create 是什么？

Authvia 支付法表格 Web 组件 - 使用 Vue 3 和 Vuetify 3 构建的支付法表格

### 如何安装 @authvia/payment-method-create？

在项目目录运行 npm install @authvia/payment-method-create，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.4\.0）、vuetify（^3\.5\.0）、@mdi/font（^7\.4\.47）、@sentry/vue（\>=8\.42\.0 \<11）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @authvia/payment-method-create 支持 TypeScript 吗？

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

### @authvia/payment-method-create 支持 ESM 还是 CommonJS？

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

### @authvia/payment-method-create 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @authvia/payment-method-create 可以商用吗？

@authvia/payment-method-create 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @authvia/payment-method-create 的下载量有多少？

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

### @authvia/payment-method-create 还在维护吗？

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