# GooglePay前端接口 ## 1. API 使用方法 `PMdropin.API`。 | **API** | **描述** | **详情** | |---------------------|---------------------|---------------------| | create | 实例化一个内置组件 | 参阅[create](https://docs.payermax.com/202606-version/receipt/front-end-component/configuration-googlepay.md#_1-1-create) | | mount | 将实例化组件挂载到`div`标签 | 参阅[mount](https://docs.payermax.com/202606-version/receipt/front-end-component/configuration-googlepay.md#_1-2-mount) | | on | 监听事件 | 参阅[on](https://docs.payermax.com/202606-version/receipt/front-end-component/configuration-googlepay.md#_1-3-on) | | emit | 触发事件 | 参阅[emit](https://docs.payermax.com/202606-version/receipt/front-end-component/configuration-googlepay.md#_1-4-emit) | ### 1.1 create 用于初始化组件，使用方法 `PMdropin.create(ComponentName, Options)`。 **ComponentName详解** | **ComponentName** | **字段类型** | **描述** | |---------------------|---------------------|---------------------| | googlepay | string | GooglePay组件 | **Options详解** | **Options** | **是否必填** | **字段类型** | **描述** | **默认值** | |---------------------|---------------------|---------------------|---------------------|---------------------| | clientKey | Y | String | 客户端公钥 | - | | sessionKey | Y | String | 安全访问令牌 | - | | sandbox | N | Boolean | 沙盒环境 | `false` | | payButtonConfig | N | Object | 按钮样式 | '{buttonRadius: "12",buttonColor: "default",buttonType: "plain",buttonLocale: "en",width: "240px",height: "40px"}' | ### 1.2 mount 用于挂载初始化组件实例，使用方法`PMdropin.mount(Tag)`。 **Tag详解** | **Tag** | **描述** | |---------------------|---------------------| | id | 需要挂载的id元素值，如 `PMdropin.mount('#googlepay-frame')`| | class | 需要挂载的class元素值，如 `PMdropin.mount('.googlepay-frame')`| ### 1.3 on 用于监听组件内置响应事件，使用方法`PMdropin.on(Event, CallbackFunction)`。 **Event详解** | **Tag** | **描述** | **返回值** | |---------------------|---------------------|---------------------| | ready | 组件加载完成时触发 |`null` | | payButtonClick | GooglePay按钮被点击时触发| `null`| ### 1.4 emit 用于调用组件内置方法，使用方法`PMdropin.emit(Event, Params)`。 | **Event** | **Params** | **描述** | |---------------------|---------------------|---------------------| | canMakePayment | - | 获取本次支付token | | switchTheme | string | 切换主题 | | setDisabled | Boolean | 设置组件可用状态 | | setpayButtonConfig | Object | 设置按钮样式 | #### 1.4.1 emit.canMakePayment 检查当前组件状态是否具备发起支付条件，如果校验通过则返回卡标识。 Options配置： | **Options** | **是否必填** | **字段类型** | **描述** | **默认值** | |---------------------|---------------------|---------------------|---------------------|---------------------| | totalAmount | N | String | GooglePay支付页面展示金额 数字字符串，最多传入两位小数，如果传入非法值`canMakePayment`响应会抛出异常`AMOUNT_INVALID` 注：该场景仅仅适用于`applyDropinSession`不传金额的场景，如果`applyDropinSession`传入了金额，不要使用该能力，务必确保`canMakePayment`传入的 `totalAmount`和最终支付`orderAndPay`传入的金额保持一致 | - | canMakePayment Response： | **Code码** | **描述** | |---------------------|---------------------| | APPLY_SUCCESS | 成功获取 `paymentToken` | | UNKNOWN_ISSUE | 异常信息 | | AMOUNT_INVALID | 传入金额格式有误 | #### 1.4.2 emit.setDisabled + 设置组件可用状态 + 类型 `Boolean` + 默认：`false` ```js // 按钮不可用状态 PMdropin.emit('setDisabled', true) // 按钮可用状态 PMdropin.emit('setDisabled', false) ``` #### 1.4.3 emit.setpayButtonConfig + 设置按钮样式 + 类型： `Object` + 默认： ```Go { buttonRadius: "12", // 设置googlepay按钮边框弧度 String buttonColor: 'default', // 设置按钮颜色 "default"/"white"/ "black" buttonType: 'plain', buttonLocale: 'en', width:"240px", height:"40px", } ``` ## 2. 内部字段说明 | 字段 | 默认值 | 类型 | 枚举值 | 功能说明 | | ------------ | --------- | ------ | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- | | width | "240px" | String | / | 设置googlepay按钮宽 | | height | "40px" | String | / | 设置googlepay按钮高 | | buttonRadius | "12" | String | / | 设置googlepay按钮边框弧度 String | | buttonColor | 'default' | String | 'default'/'white'/ 'black' | 设置按钮颜色 | | buttonType | 'plain' | String | "plain","buy","book","checkout","donate","order","pay","subscribe" | 设置按钮类型 同GooglePay官方。自定义按钮[预览demo](https://developers.google.com/pay/api/web/guides/resources/customize?hl=zh-cn) | | buttonLocale | 'en' | String | 'en'/'ja'/'zh'/... 国际语种编码 | 设置按钮上文案的多语言，同GooglePay官方，需指定类型才支持，如"checkout"、"donate"等 | ## 3. 颜色展示 | 入参 | 效果预览 | | ------- | --------------------------------------------------------------------------------------------- | | default | ![](https://img-cdn-sg.payermax.com/public/20250305-73376124-4e97-46de-88d1-898893b40e57.png) | | white | ![](https://img-cdn-sg.payermax.com/public/20250305-e3b076cd-8074-4d84-b24f-2845f80956de.png) | | black | ![](https://img-cdn-sg.payermax.com/public/20250305-8be017d4-807d-48a3-9659-705e2e6de1cb.png) | ## 4. buttonType展示 | 入参 | 效果预览 | | ----------- | --------------------------------------------------------------------------------------------- | | "plain" | ![](https://img-cdn-sg.payermax.com/public/20250306-df875c3c-83e8-40e8-9858-843a88025f45.png) | | "buy" | ![](https://img-cdn-sg.payermax.com/public/20250306-cf849d09-3d49-46ea-8b50-e5b82804708e.png) | | "book" | ![](https://img-cdn-sg.payermax.com/public/20250306-a4a2794c-1913-4a46-9f1c-bbee6b9f9cc5.png) | | "checkout" | ![](https://img-cdn-sg.payermax.com/public/20250306-e3579e48-c4e4-46ac-adce-bc6f5d9761b4.png) | | "donate" | ![](https://img-cdn-sg.payermax.com/public/20250306-0cca324d-be97-4e20-97ed-77caa0ea7930.png) | | "order" | ![](https://img-cdn-sg.payermax.com/public/20250306-abe3aa72-c82b-45c9-8631-f76d86137049.png) | | "pay" | ![](https://img-cdn-sg.payermax.com/public/20250306-802acd43-41b4-4025-ae8c-2be392ea16e7.png) | | "subscribe" | ![](https://img-cdn-sg.payermax.com/public/20250306-bf0b5d4e-c94c-4aec-82ae-54103ee3c313.png) | ## 5. buttonLocale展示 | 入参 | 效果预览 | 说明 | | ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | | "ja" | ![](https://img-cdn-sg.payermax.com/public/20250306-b8ec4b61-0414-441c-87ac-a558a4d6792b.png) ![](https://img-cdn-sg.payermax.com/public/20250306-6ea1767d-e71d-4e9a-902b-a7a572cd4f04.png) | Japanese | | "bg" | ![](https://img-cdn-sg.payermax.com/public/20250306-200a1309-839d-4d0c-88fa-be9e13532ee3.png) ![](https://img-cdn-sg.payermax.com/public/20250306-0d463fe2-9765-43b0-a55b-7366b27fa3c1.png) | Bulgarian |