# Card

split
## 布局

Split Card
split
Combine Card
combine
Card 有两种布局：

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


## 示例

npm

```javascript
// 引入 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)
```

CDN

```javascript
// 引入 Card
const { Card } = PayKKaCardCheckoutUI

// 组件通过 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 的[样式](#elementstylesconfig)。
- 其他样式可直接通过编写 CSS 进行样式覆盖。

 | `ElementStylesConfig` | `undefined` |
| showEmail | 是否展示邮箱。- 配置 `true` 但创建收银台时已传，则展示禁用状态。
- 配置 `false` 但创建收银台时未传，则正常展示。

 | `boolean` | `false` |
| showAddress | 是否展示地址。- 配置 `true` 但创建收银台时已传，则正常展示。
- 配置 `false` 但创建收银台时未传，则正常展示。

 | `boolean` | `false` |
| onSubmit | 表单提交回调，点击支付按钮后触发。- `formValidateError` 为表单校验不通过的错误信息。

 | `(formValidateError?: Record<string, FormValidateError[]>) => void` | `undefined` |
| onSuccess | 支付成功后的回调。- `PaymentSuccessData` 为支付成功后返回的信息，请[参考](#paymentsuccessdata)。
- 风控滞留时也会触发该回调。

 | `(data: PaymentSuccessData) => void` | `undefined` |
| onError | 支付失败后的回调，可重新提交表单进行支付。- `error` 为 `PayKKaError` 实例，通常包含以下属性：
  - `type`：错误类型。
  - `message`：错误信息。
  - `code`：错误码，在发生接口错误时，会返回具体的[错误码](/zh-hans/payments/docs/developer-resources/transanction-error-code)。

 | `(error: PayKKaError) => void` | `undefined` |
| onTimeout | 支付超时后的回调，可重新提交表单进行支付。 | `() => void` | `undefined` |
| onExpired | 支付时收银台已过期的回调，无法再次支付。 | `() => void` | `undefined` |


### CardRef

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

| **名称**  | **说明** | **类型** |
|  --- | --- | --- |
| payment | 进行支付，在支付按钮配置为**不可见**时启用，用法[参考](/zh-hans/payments/docs/developer-resources/checkout-ui-component#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%94%AF%E4%BB%98%E6%8C%89%E9%92%AE)。 | `() => void` |


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

### PaymentSuccessData

支付成功后返回的信息。


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

### ElementStylesConfig

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


```typescript
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>
  }
}
```

示例：


```typescript
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'
      }
    }
  }
}
```