# Apple Pay

frame
img
## 示例

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

```js
import { ApplePay } from '@paykka/card-checkout-ui'

const checkoutApplePay = paykkaCheckout.create(ApplePay, {
  // ApplePay props
})
checkoutApplePay.mount('#checkoutApplePayField')
```

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

```js
const { ApplePay } = PaykkaCardCheckoutUI

const checkoutApplePay = paykkaCheckout.create(ApplePay, {
  // ApplePay props
})
checkoutApplePay.mount('#checkoutApplePayField')
```

## 检测环境

我们在创建 Apple Pay 组件时会先引入 Apple Pay 官方提供的 SDK，您可以通过 `onload` 方法判断 SDK 是否加载成功：

```js
const props = {
  onload: status => {
    console.log(status ? '加载成功' : '加载失败')
  }
}
```

如果您发现 SDK 加载成功，但页面上无法显示 Apple Pay 按钮，则可能是设备环境问题或其他原因导致无法支付，我们提供 `onCanUse` 回调方法告知您，具体不可见的原因可参考：[Apple Pay 官方文档](https://developer.apple.com/documentation/storekit/appstore/canmakepayments)。

```js
const props = {
  onCanUse: canUse => {
    console.log(canUse ? '可用' : '不可用')
  }
}
```

## Attributes

### ApplePayProps

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

| **名称**  | **说明**  | **类型** | **默认值**  |
|  --- | --- | --- | --- |
| onSubmit | Apple Pay 支付授权成功后触发。 | `() => void` | `undefined` |
| onSuccess | 支付成功后的回调。- `PaymentSuccessData` 为支付成功后返回的信息，请[参考](#paymentsuccessdata)。

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

 | `(error: PayKKaError) => void` | `undefined` |
| onLoad | Apple Pay SDK 加载回调。- `status` 表示是否加载成功。

 | `(status: boolean) => void` | `undefined` |
| onCanUse | Apple Pay 支付是否可用。- `canUse` 表示是否可用。

 | `(canUse: boolean) => void` | `undefined` |
| onCancel | Apple Pay 支付取消的回调。 | `() => void` | `undefined` |


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

### PaymentSuccessData

支付成功后返回的信息。

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