<div id="checkoutGooglePayField"></div>import { GooglePay } from '@paykka/card-checkout-ui'
const checkoutGooglePay = paykkaCheckout.create(GooglePay, {
// GooglePay props
})
checkoutGooglePay.mount('#checkoutGooglePayField')When creating the Google Pay component, we first import the official Google 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 Google 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: Google Pay Official Documentation.
const props = {
onCanUse: canUse => {
console.log(canUse ? 'Available' : 'Unavailable')
}
}Passed when calling the create method to create GooglePay.
| Name | Description | Type | Default |
|---|---|---|---|
| onSubmit | Triggered after Google 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 | Google Pay SDK load callback.
| (status: boolean) => void | undefined |
| onCanUse | Whether Google Pay payment is available.
| (canUse: boolean) => 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
}