Maya

示例

html

<div id="checkoutMayaField"></div>

javascript

import { Paymaya as Maya } from '@paykka/card-checkout-ui'

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

checkoutMaya.mount('#checkoutMayaField')

Attributes

MayaProps

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

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

MayaRef

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

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

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

PaymentSuccessData

支付成功后返回的信息。

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