@ flopay/vue (帮助)

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

安装

npm install @flopay/vue

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

使用量

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

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 使装载状态.

实例

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

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),
  });

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

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

const render = () =>
  h(FloPayAutomaticPaymentButton, {
    clientId: 'client_123',
    account: { userId: 'user_123', email: '[email protected]' },
    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事件,其有效载荷相同.

反应 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) (中文(简体) ). 按钮会为下次点击而保持被渲染,如果不听则不会改变.

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

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

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