澳大利亚支付方法表

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

安装

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

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

<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 在此重播中,用于完整页面示例.

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" data-vuetify />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" data-mdi />

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

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

网络组成部分活动

为:

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

支持( 概览)

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

paymentMethodDisplay

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

阴道

: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 被忽略( 请检查控制台) .

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) (中文(简体) ).

在每行拾取器内 (单位:千美元)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+.

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团队.