# ShopeePay

ShopeePay component
## Example

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

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

const checkoutShopeePay = paykkaCheckout.create(ShopeePay, {
  onSubmit: formValidateError => {
    console.log('ShopeePay payment submitted:', formValidateError)
  },
  onSuccess: data => {
    console.log('ShopeePay payment successful:', data)
  },
  onError: error => {
    console.log('ShopeePay payment failed:', error)
  }
})

checkoutShopeePay.mount('#checkoutShopeePayField')
```

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

```javascript javascript
const { ShopeePay } = PayKKaCardCheckoutUI

const checkoutShopeePay = paykkaCheckout.create(ShopeePay, {
  onSubmit: formValidateError => {
    console.log('ShopeePay payment submitted:', formValidateError)
  },
  onSuccess: data => {
    console.log('ShopeePay payment successful:', data)
  },
  onError: error => {
    console.log('ShopeePay payment failed:', error)
  }
})

checkoutShopeePay.mount('#checkoutShopeePayField')
```

## Attributes

### ShopeePayProps

Passed when calling the `create` method to create ShopeePay.

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


### ShopeePayRef

Methods and properties exposed by ShopeePay, can be called by the ShopeePay instance created via the `create` method, e.g.: `checkoutShopeePay.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
}
```