# GooglePay Frontend API ## 1. API Use `PMdropin.API`. | **API** | **Description** | **Details** | |---------------------|---------------------|---------------------| | create | Instantiate a built-in component | Refer [create](https://docs.payermax.com/en/202606-version/receipt/front-end-component/configuration-googlepay.md#_1-1-create) | | mount | Mount instantiated component to `div` tag | Refer [mount](https://docs.payermax.com/en/202606-version/receipt/front-end-component/configuration-googlepay.md#_1-2-mount) | | on | Listen events | Refer [on](https://docs.payermax.com/en/202606-version/receipt/front-end-component/configuration-googlepay.md#_1-3-on) | | emit | Trigger events | Refer [emit](https://docs.payermax.com/en/202606-version/receipt/front-end-component/configuration-googlepay.md#_1-4-emit) | ### 1.1 create Used to initialize components, please use `PMdropin.create(ComponentName, Options)`. **ComponentName Explanation** | **ComponentName** | **Field Type** | **Description** | |---------------------|---------------------|---------------------| | googlepay | string | GooglePay Component | **Options Explanation** | **Options** | **Required Or Not** | **Field Type** | **Default Value** | |---------------------|---------------------|---------------------|---------------------| | 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 Used to mount initialization component instances, please use `PMdropin.mount(Tag)`. **Tag Explanation** | **Tag** | **Description** | |---------------------|---------------------| | id | The value of the id element that needs to be mounted, such as `PMdropin.mount('#googlepay-frame')`| | class | The value of the class element that needs to be mounted, such as `PMdropin.mount('.googlepay-frame')`| ### 1.3 on Used to listen to component built-in response events, please use `PMdropin.on(Event, CallbackFunction)`. **Event Explanation** | **Tag** | **Description** | **Returned Value** | |---------------------|---------------------|---------------------| | ready | Triggered when the component completes loading |`null` | | payButtonClick | Triggered when the GooglePay button is clicked| `null`| ### 1.4 emit Used to call component built-in methods, please use `PMdropin.emit(Event, Params)`. | **Event** | **Params** | **Description** | |---------------------|---------------------|---------------------| | canMakePayment | - | Get the payment token | | switchTheme | string | Switch theme | | setDisabled | Boolean | Set the component available state | | setpayButtonConfig | Object | Set the button style | #### 1.4.1 emit.canMakePayment Checks whether the current component status meets the conditions for initiating payment. If the verification passes, returns the card ID. Options configuration: | **Options** | **Required Or Not** | **Field Type** | **Description** | **Default Value** | |---------------------|---------------------|---------------------|---------------------|---------------------| | totalAmount | N | String | The Google Pay payment page displays the amount as a numeric string, with a maximum of two decimal places. Passing an invalid value will result in the `canMakePayment` response throwing an `AMOUNT_INVALID` exception. Note: This only applies when `applyDropinSession` does not specify an amount. If an amount is passed to `applyDropinSession`, do not use this feature. Ensure that the `totalAmount` passed to `canMakePayment` matches the final payment amount passed to `orderAndPay`. | - | canMakePayment Response： | **Code** | **Description** | |---------------------|---------------------| | APPLY_SUCCESS | Get `paymentToken` successfully | | UNKNOWN_ISSUE | Exception information | | AMOUNT_INVALID | The input amount format is incorrect | #### 1.4.2 emit.setDisabled + Set the component available state + Type: `Boolean` + Default: `false` ```js // Button disabled state PMdropin.emit('setDisabled', true) // Button enabled state PMdropin.emit('setDisabled', false) ``` #### 1.4.3 emit.setpayButtonConfig + Set the button style + Type: `Object` + Default: ```Go { buttonRadius: "12", // Set the border radius of the googlepay button String buttonColor: 'default', // Set button color "default"/"white"/"black" buttonType: 'plain', buttonLocale: 'en', width:"240px", height:"40px", } ``` ## 2. Internal Field Description | Field | Default Value | Type | Enumeration | Description | | ------------ | ------------- | ------ | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | width | "240px" | String | / | Set Google Pay button width | | height | "40px" | String | / | Set Google Pay button height | | buttonRadius | "12" | String | / | Set the border radius of the googlepay button String | | buttonColor | 'default' | String | 'default'/'white'/ 'black' | Set button color | | buttonType | 'plain' | String | "plain","buy","book","checkout","donate","order","pay","subscribe" | Set button type Same as GooglePay official. See [Preview demo](https://developers.google.com/pay/api/web/guides/resources/customize?hl=zh-cn) for customized button | | buttonLocale | 'en' | String | 'en'/'ja'/'zh'/... International language encoding | Set the multi-language text on the button, the same as GooglePay official, only supports the specified type, such as "checkout", "donate", etc. | ## 3. Color Display | Input | Effect Preview | | ------- | --------------------------------------------------------------------------------------------- | | 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 Display | Input | Effect Preview | | ----------- | --------------------------------------------------------------------------------------------- | | "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 Display | Input | Effect Preview | Description | | ----- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | "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 |