Google Pay

示例

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

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

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

检测环境

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

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

如果您发现 SDK 加载成功，但页面上无法显示 Google Pay 按钮，则可能是设备环境问题或其他原因导致无法支付，我们提供 onCanUse 回调方法告知您，具体不可见的原因可参考：Google Pay 官方文档。

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

Attributes

GooglePayProps

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

名称	说明	类型	默认值
onSubmit	Google Pay 支付授权成功后触发。	`() => void`	`undefined`
onSuccess	支付成功后的回调。 `PaymentSuccessData` 为支付成功后返回的信息，请参考。	`(data: PaymentSuccessData) => void`	`undefined`
onTimeout	支付超时后的回调，可重新提交表单进行支付。	`() => void`	`undefined`
onExpired	支付时收银台已过期的回调，无法再次支付。	`() => void`	`undefined`
onError	支付失败后的回调，可重新提交表单进行支付 `error` 为 `PayKKaError` 实例，通常包含以下属性： `type`：错误类型。 `message`：错误信息。 `code`：错误码，在发生接口错误时，会返回具体的错误码。	`(error: PayKKaError) => void`	`undefined`
onLoad	Google Pay SDK 加载回调。 `status` 表示是否加载成功。	`(status: boolean) => void`	`undefined`
onCanUse	Google Pay 支付是否可用。 `canUse` 表示是否可用。	`(canUse: boolean) => void`	`undefined`

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

PaymentSuccessData

支付成功后返回的信息。

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