# Boost

Boost component
## 示例

npm
```html html
<div id="checkoutBoostField"></div>
```

```javascript javascript
import { Boost } from '@paykka/card-checkout-ui'

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

checkoutBoost.mount('#checkoutBoostField')
```

CDN
```html html
<div id="checkoutBoostField"></div>
```

```javascript javascript
const { Boost } = PayKKaCardCheckoutUI

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

checkoutBoost.mount('#checkoutBoostField')
```

## Attributes

### BoostProps

调用 `create` 方法创建 Boost 时传入。

| **名称**  | **说明**  | **类型** | **默认值**  |
|  --- | --- | --- | --- |
| 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` 为支付成功后返回的信息，请[参考](#paymentsuccessdata)。
- 风控滞留时也会触发该回调。

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

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


### BoostRef

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

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


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

### PaymentSuccessData

支付成功后返回的信息。

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