<div id="checkoutApplePayField"></div>import { ApplePay } from '@paykka/card-checkout-ui'
const checkoutApplePay = paykkaCheckout.create(ApplePay, {
// ApplePay props
})
checkoutApplePay.mount('#checkoutApplePayField')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:
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.
const props = {
onCanUse: canUse => {
console.log(canUse ? 'Available' : 'Unavailable')
}
}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.
| (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: PayKKaError) => void | undefined |
| onLoad | Apple Pay SDK load callback.
| (status: boolean) => void | undefined |
| onCanUse | Whether Apple Pay payment is available.
| (canUse: boolean) => void | undefined |
| onCancel | Callback when Apple Pay payment is cancelled. | () => void | undefined |
Below is an explanation of some data types:
Information returned after successful payment.
interface PaymentSuccessData {
/** URL that can be redirected to after successful payment */
returnUrl?: string
}