Card

布局

Split Card

Combine Card

Card 有两种布局：

Split：Card Number、Expiry Date、CVV 分开显示。
Combine：Card Number、Expiry Date、CVV 合并显示。

示例

// 引入 Card
import { Card } from '@paykka/card-checkout-ui'

// 组件通过 create 方法传入参数进行初始化生成组件实例
const checkoutCard = paykkaCheckout.create(Card, {
  cardInfoLayout: 'split',
  onSubmit: formValidateError => {
    if (!formValidateError) {
      console.log('表单校验通过，进行支付')
    }
  },
  onSuccess: returnUrl => {
    console.log('支付成功，跳转至：', returnUrl)
  },
  onError: error => {
    console.log('支付失败，错误信息：', error)
  }
})

const container = document.createElement('div')
checkoutCard.mount(container)

const checkoutCardField = document.querySelector('#checkoutCardField')

// 将container插入到页面中
checkoutCardField && checkoutCardField.appendChild(container)

Attributes

CardProps

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

名称	说明	类型	默认值
cardInfoLayout	定义卡敏感信息表单布局展示。	`split \| combine`	`split`
showCardBrands	是否展示支持的发卡行 icon。	`boolean`	`true`
styles	自定义样式。目前可定义 iframe 中 input 的样式。其他样式可直接通过编写 CSS 进行样式覆盖。	`ElementStylesConfig`	`undefined`
showEmail	是否展示邮箱。配置 `true` 但创建收银台时已传，则展示禁用状态。配置 `false` 但创建收银台时未传，则正常展示。	`boolean`	`false`
showAddress	是否展示地址。配置 `true` 但创建收银台时已传，则正常展示。配置 `false` 但创建收银台时未传，则正常展示。	`boolean`	`false`
onSubmit	表单提交回调，点击支付按钮后触发。 `formValidateError` 为表单校验不通过的错误信息。	`(formValidateError?: Record<string, FormValidateError[]>) => void`	`undefined`
onSuccess	支付成功后的回调。 `PaymentSuccessData` 为支付成功后返回的信息，请参考。风控滞留时也会触发该回调。	`(data: PaymentSuccessData) => void`	`undefined`
onError	支付失败后的回调，可重新提交表单进行支付。 `error` 为 `PayKKaError` 实例，通常包含以下属性： `type`：错误类型。 `message`：错误信息。 `code`：错误码，在发生接口错误时，会返回具体的错误码。	`(error: PayKKaError) => void`	`undefined`
onTimeout	支付超时后的回调，可重新提交表单进行支付。	`() => void`	`undefined`
onExpired	支付时收银台已过期的回调，无法再次支付。	`() => void`	`undefined`

CardRef

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

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

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

PaymentSuccessData

支付成功后返回的信息。

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

ElementStylesConfig

自定义表单元素样式，目前可以定义 iframe 中 input 元素的样式，iframe 外部的表单样式可通过编写 CSS 直接覆盖。

interface ElementStylesConfig {
  /** iframe input 元素的样式 */
  input?: {
    /** 默认样式 */
    base?: Partial<CSSStyleDeclaration>
    /** 校验通过时样式 */
    valid?: Partial<CSSStyleDeclaration>
    /** 校验不通过时样式 */
    invalid?: Partial<CSSStyleDeclaration>
    /** 聚焦元素时样式 */
    focus?: Partial<CSSStyleDeclaration>
    /** placeholder样式 */
    placeholder?: {
      /** 默认样式 */
      base?: Partial<CSSStyleDeclaration>
      /** 聚焦元素时样式 */
      focus?: Partial<CSSStyleDeclaration>
    }
    /** 将鼠标悬停在元素上的样式 */
    hover?: Partial<CSSStyleDeclaration>
  }
}

示例：

const cardProps = {
  // ...
  styles: {
    input: {
      base: {
        color: 'black'
      },
      valid: {
        color: 'green'
      },
      invalid: {
        color: 'red'
      },
      focus: {
        color: 'blue'
      },
      placeholder: {
        base: {
          color: 'gray'
        },
        focus: {
          color: 'black'
        }
      },
      hover: {
        color: 'pink'
      }
    }
  }
}