跳转到内容

VietQR

VietQR component

示例

html
<div id="checkoutVietQRField"></div>
javascript
import { Vietqr } from '@paykka/card-checkout-ui'

const checkoutVietQR = paykkaCheckout.create(Vietqr, {
  onSubmit: formValidateError => {
    console.log('VietQR 支付提交：', formValidateError)
  },
  onSuccess: data => {
    console.log('VietQR 支付成功：', data)
  },
  onError: error => {
    console.log('VietQR 支付失败：', error)
  }
})

checkoutVietQR.mount('#checkoutVietQRField')

Attributes

VietqrProps

调用 create 方法创建 VietQR 时传入。

名称 说明 类型默认值
showEmail是否展示邮箱。
  • 配置 true 但创建收银台时已传，则展示禁用状态。
  • 配置 false 但创建收银台时未传，则正常展示。
booleanfalse
showAddress是否展示地址。
  • 配置 true 但创建收银台时已传，则正常展示。
  • 配置 false 但创建收银台时未传，则正常展示。
booleanfalse
hidePaymentButton是否隐藏支付按钮。隐藏后可通过组件 ref 的 payment() 方法自定义触发支付。booleanfalse
onSubmit支付提交回调，点击支付按钮后触发。
  • formValidateError 为表单校验不通过的错误信息。
  • 返回 false 可阻止继续提交支付。
(formValidateError?: Record<string, FormValidateError[]>) => void | boolean | Promise<void | boolean>undefined
onSuccess支付成功后的回调。
  • PaymentSuccessData 为支付成功后返回的信息，请参考。
  • 风控滞留时也会触发该回调。
(data: PaymentSuccessData) => voidundefined
onError支付失败后的回调，可重新提交进行支付。
  • error 为 PayKKaError 实例，通常包含以下属性：
    • type：错误类型。
    • message：错误信息。
    • code：错误码，在发生接口错误时，会返回具体错误码。
(error: PayKKaError) => voidundefined
onTimeout支付超时后的回调，可重新提交进行支付。() => voidundefined
onExpired支付时收银台已过期的回调，无法再次支付。() => voidundefined

VietqrRef

VietQR 暴露的方法和属性，可通过 create 方法创建出的 VietQR 实例调用，如：checkoutVietQR.ref.payment()。

名称 说明类型
payment进行支付，在支付按钮配置为不可见时启用。() => void

下面对一些数据类型进行说明：

PaymentSuccessData

支付成功后返回的信息。

interface PaymentSuccessData {
  /** 支付成功后可跳转的 URL */
  returnUrl?: string
}

Trustly

WeChat Pay