ApplePay 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
applepay	string	ApplePay Compoment

Options Explanation

Options	Required Or Not	Field Type	Default Value
clientKey	Y	String	-
sessionKey	Y	String	-
sandbox	N	Boolean	false
theme	N	String	light
payButtonStyle	N	String	-

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('#applepay-frame')
class	The value of the class element that needs to be mounted, such as PMdropin.mount('.applepay-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 ApplePay button is clicked	null

Example:

PMdropin.on('payButtonClick', function(event) {
  // achieve paymentToken and orderAndPay
  applePay.emit('setDisabled', true)
  applePay.emit('canMakePayment')
    .then(res => {
      const paymentToken = res?.data?.paymentToken 
      if(paymentToken){
        orderAndPay()
      }else{ 
        applePay.emit('setDisabled', false)
      }
    })
    .catch(err => {
      applePay.emit('payFail')
      applePay.emit('setDisabled', false) 
    })
    
});

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	string	Set the button style

1.4.1 emit.canMakePayment

Check whether the current component status meets the conditions for initiating payment, and return the card identification if the verification passes.

Options configuration:

Options	Required Or No	Field Type	Description	Default Value
totalAmount	N	String	The Apple Pay payment page displays the amount as a numeric string, with a maximum of two decimal places. Passing an invalid value will cause the canMakePayment response to throw an AMOUNT_INVALID exception. Note: This only applies when applyDropinSession does not specify an amount. If applyDropinSession includes an amount, 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
APPLEPAY_INTERNAL_ERROR	Apple Pay internal error

1.4.2 emit.switchTheme

• Set the button theme
• Type: Boolean
• Default: light

Theme Name	Theme type	Effect Preview
White	light 默认
Black	dark

1.4.3 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.4 emit.setPayButtonStyle

• Set the button style
• Type: Boolean
• Default: false

// Set the width, height, padding, and border radius of the ApplePay button
PMdropin.emit('payButtonStyle', `width:20rem;height:4rem;border-radius: 4rem;padding:1rem 4rem;`)