# WeChat Pay

WeChat Pay component
## Example

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 payment submitted:', formValidateError)
  },
  onSuccess: data => {
    console.log('WeChat Pay payment successful:', data)
  },
  onError: error => {
    console.log('WeChat Pay payment failed:', 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 payment submitted:', formValidateError)
  },
  onSuccess: data => {
    console.log('WeChat Pay payment successful:', data)
  },
  onError: error => {
    console.log('WeChat Pay payment failed:', error)
  }
})

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

## WeChat in-app payment

When the user pays inside WeChat, WeChat Pay requires a WeChat OpenID to identify the payer. The checkout component does not obtain the OpenID automatically. You need to implement the OpenID retrieval flow and return the OpenID through `onGetOpenId`.

Recommended flow:

1. Guide the user to open the checkout page in WeChat.
2. Obtain the WeChat authorization code according to the WeChat webpage authorization documentation.
3. Send the authorization code to your server.
4. Your server exchanges the code for the user's OpenID with WeChat.
5. Return the OpenID in the `onGetOpenId` callback.


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

Passed when calling the `create` method to create WeChat Pay.

| **Name**  | **Description**  | **Type** | **Default**  |
|  --- | --- | --- | --- |
| showEmail | Whether to display email.- If set to `true` and email is already passed when creating the checkout, it will be displayed as disabled.
- If set to `false` and email is not passed when creating the checkout, it will be displayed normally.

 | `boolean` | `false` |
| showAddress | Whether to display address.- If set to `true` and address is already passed when creating the checkout, it will be displayed normally.
- If set to `false` and address is not passed when creating the checkout, it will be displayed normally.

 | `boolean` | `false` |
| hidePaymentButton | Whether to hide the payment button. After hiding it, you can trigger payment manually through the component ref's `payment()` method. | `boolean` | `false` |
| onSubmit | Payment submission callback, triggered after clicking the payment button.- `formValidateError` is the error information when form validation fails.
- Return `false` to stop the payment submission.

 | `(formValidateError?: Record<string, FormValidateError[]>) => void | boolean | Promise<void | boolean>` | `undefined` |
| onSuccess | Callback after successful payment.- `PaymentSuccessData` contains the information returned after successful payment, please [refer to](#paymentsuccessdata).
- This callback is also triggered when risk control is pending.

 | `(data: PaymentSuccessData) => void` | `undefined` |
| onError | Callback after payment failure, can resubmit for payment.- `error` is a `PayKKaError` instance, typically containing the following properties:
  - `type`: Error type.
  - `message`: Error message.
  - `code`: Error code, when an API error occurs, it will return a specific error code.

 | `(error: PayKKaError) => void` | `undefined` |
| onTimeout | Callback when payment times out, can resubmit for payment. | `() => void` | `undefined` |
| onExpired | Callback when the checkout counter has expired during payment, cannot pay again. | `() => void` | `undefined` |


WechatPay also supports the following attribute:

| **Name**  | **Description**  | **Type** | **Default**  |
|  --- | --- | --- | --- |
| onGetOpenId | Callback to get the WeChat OpenID. Required only when the user pays inside WeChat. The checkout component does not handle this internally; you need to implement it yourself. | `() => string | Promise<string>` | `undefined` |


### WechatPayRef

Methods and properties exposed by WeChat Pay, can be called by the WeChat Pay instance created via the `create` method, e.g.: `checkoutWechatPay.ref.payment()`.

| **Name**  | **Description** | **Type** |
|  --- | --- | --- |
| payment | Make a payment, enabled when the payment button is **not visible**. | `() => void` |


Below is an explanation of some data types:

### PaymentSuccessData

Payment success information.

```typescript
interface PaymentSuccessData {
  /** URL that can be redirected to after successful payment */
  returnUrl?: string
}
```