# Google Pay

frame
img
## Example

npm

```html
<div id="checkoutGooglePayField"></div>
```


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

const checkoutGooglePay = paykkaCheckout.create(GooglePay, {
  // GooglePay props
})
checkoutGooglePay.mount('#checkoutGooglePayField')
```

CDN

```html
<div id="checkoutGooglePayField"></div>
```


```js
const { GooglePay } = PaykkaCardCheckoutUI

const checkoutGooglePay = paykkaCheckout.create(GooglePay, {
  // GooglePay props
})
checkoutGooglePay.mount('#checkoutGooglePayField')
```

## Environment Detection

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:


```js
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](https://developers.google.com/pay/api/web/reference/client#isReadyToPay).


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

## Attributes

### GooglePayProps

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.- `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 | Google Pay SDK load callback.- `status` indicates whether the load was successful.

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

 | `(canUse: boolean) => 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
}
```