# Apple Pay

frame
img
## Example

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

## Environment Detection

When creating the Apple Pay component, we first import the official Apple Pay SDK. You can use the `onload` method to determine if the SDK loaded successfully:


```js
const props = {
  onload: status => {
    console.log(status ? 'Load successful' : 'Load failed')
  }
}
```

If you find that the SDK loaded successfully but the Apple Pay button is not visible on the page, it may be due to device environment issues or other reasons preventing payment. We provide the `onCanUse` callback method to inform you. For specific reasons why it might not be visible, please refer to: [Apple Pay Official Documentation](https://developer.apple.com/documentation/storekit/appstore/canmakepayments).


```js
const props = {
  onCanUse: canUse => {
    console.log(canUse ? 'Available' : 'Unavailable')
  }
}
```

## Attributes

### ApplePayProps

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

| **Name**  | **Description**  | **Type** | **Default**  |
|  --- | --- | --- | --- |
| onSubmit | Triggered after Apple Pay payment authorization is successful. | `() => void` | `undefined` |
| onSuccess | Callback after successful payment.- `PaymentSuccessData` contains the information returned after successful payment, please [refer to](#paymentsuccessdata).

 | `(data: PaymentSuccessData) => void` | `undefined` |
| onTimeout | Callback when payment times out, can resubmit the form for payment. | `() => void` | `undefined` |
| onExpired | Callback when the checkout counter has expired during payment, cannot pay again. | `() => void` | `undefined` |
| onError | Callback after payment failure, can resubmit the form 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](/payments/docs/developer-resources/transanction-error-code).

 | `(error: PayKKaError) => void` | `undefined` |
| onLoad | Apple Pay SDK load callback.- `status` indicates whether the load was successful.

 | `(status: boolean) => void` | `undefined` |
| onCanUse | Whether Apple Pay payment is available.- `canUse` indicates whether it is available.

 | `(canUse: boolean) => void` | `undefined` |
| onCancel | Callback when Apple Pay payment is cancelled. | `() => void` | `undefined` |


Below is an explanation of some data types:

### PaymentSuccessData

Information returned after successful payment.


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