# Google Pay

frame
img
## 示例

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

## 检测环境

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


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

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


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

## Attributes

### GooglePayProps

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

| **名称**  | **说明**  | **类型** | **默认值**  |
|  --- | --- | --- | --- |
| onSubmit | Google 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/transanction-error-code)。

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

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

 | `(canUse: boolean) => void` | `undefined` |


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

### PaymentSuccessData

支付成功后返回的信息。


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