GooglePay Frontend API

1. API

Use PMdropin.API.

API	Description	Details
create	Instantiate a built-in component	Refer create
mount	Mount instantiated component to `div` tag	Refer mount
on	Listen events	Refer on
emit	Trigger events	Refer 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`
payButtonStyle	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
setPayButtonStyle	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

// Button disabled state
PMdropin.emit('setDisabled', true)

// Button enabled state
PMdropin.emit('setDisabled', false)

1.4.3 emit.setPayButtonStyle

Set the button style
Type: Object
Default:

{
  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 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.