# WeChat Pay

WeChat Pay component
## 示例

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

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

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

checkoutWechatPay.mount('#checkoutWechatPayField')
```

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

```javascript javascript
const { WechatPay } = PayKKaCardCheckoutUI

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

checkoutWechatPay.mount('#checkoutWechatPayField')
```

## 在 WeChat 内支付

当用户在 WeChat 内支付时，WeChat Pay 需要通过 WeChat OpenID 识别付款用户。收银台组件不会自动获取 OpenID，你需要自行实现 OpenID 获取流程，并通过 `onGetOpenId` 返回 OpenID。

推荐流程：

1. 引导用户在 WeChat 内打开收银台页面。
2. 根据 WeChat 网页授权文档 获取授权 code。
3. 将授权 code 发送到你的服务端。
4. 服务端调用 WeChat 接口，用 code 换取用户的 OpenID。
5. 在 `onGetOpenId` 回调中返回 OpenID。


```javascript
const checkoutWechatPay = paykkaCheckout.create(WechatPay, {
  onGetOpenId: async () => {
    const response = await fetch('/api/wechat/openid')
    const data = await response.json()
    return data.openId
  }
})
```

## Attributes

### WechatPayProps

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

| **名称**  | **说明**  | **类型** | **默认值**  |
|  --- | --- | --- | --- |
| 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` |


WechatPay 还支持以下属性：

| **名称**  | **说明**  | **类型** | **默认值**  |
|  --- | --- | --- | --- |
| onGetOpenId | 获取 WeChat OpenID 的回调。仅当用户在 WeChat 内支付时需要。收银台组件内不处理，需要自行实现。 | `() => string | Promise<string>` | `undefined` |


### WechatPayRef

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

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


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

### PaymentSuccessData

支付成功后返回的信息。

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