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.

canMakePayment Response：

Code	Description
APPLY_SUCCESS	Get paymentToken successfully
UNKNOWN_ISSUE	Exception information

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.

3. Color Display

Input	Effect Preview
default
white
black

4. buttonType Display

Input	Effect Preview
"plain"
"buy"
"book"
"checkout"
"donate"
"order"
"pay"
"subscribe"

5. buttonLocale Display

Input	Effect Preview	Description
"ja"		Japanese
"bg"		Bulgarian