Detailed configuration

This page introduc all configuration details of the card components.

1. API

Use PMdropin.API.

API	Description	Details
create	Instantiate a built-in component	refer to create
mount	Mount instantiated component to div tag	refer to mount
on	Listen events	refer to on
emit	Trigger events	refer to emit

1.1 create

Used to initialize components, please use PMdropin.create(ComponentName, Options).

ComponentName Explanation

ComponentName	Field Type	Description
Card	String	Card Compoment

Options Explanation

Options	Required Or Not	Field Type	Default Value
clientKey	Y	String	-
sessionKey	Y	String	-
sandbox	N	Boolean	false
language	N	String	en
theme	N	String	light
customLocalization	N	Object	-
customTheme	N	Object	-
grayscale	N	String	'0'
isRtl	N	Boolean	false
hideSaveCard	N	Boolean	false
hideCardBrands	N	Boolean	false
hideCardHolderName	N	Boolean	false

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('#card-frame')
class	The value of the class element that needs to be mounted, such as PMdropin.mount('.card-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
form-check	Monitor card component verification status real-time	refer to Event Response

Example：

PMdropin.on('form-check', function(event) {
  if (event.isFormValid) {
    // Form verification passed
  }
});

1.4 emit

Used to call component built-in methods, please use PMdropin.emit(Event, Params).

Event	Params	Description
canMakePayment	-	Get card identification
switchLanguage	string	Switch language
switchTheme	string	Switch theme
addLocalization	Object	Add customized language
addTheme	Object	Add customized theme
setDisabled	Boolean	Set component availability status
setRtl	Boolean	Set component layout from right to left
setGrayscale	string	Set component page grayscale

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.

// Example
PMdropin.emit('canMakePayment')
  .then(function(response) {
    // Verification successful
    if (response.code === 'APPLY_SUCCESS') {
      // Get paymentToken 
      var paymentToken = response.data.paymentToken
      // Go for subsequent payment operations
    }
  })
  .catch(function(error) {
    // Catching internal exception errors
    console.log(error);
  })

canMakePayment Response：

// Success API example
{
  code: 'APPLY_SUCCESS',
  data: {
    // Card identification
    paymentToken: 'xxx'
  },
  msg: ''
}

// Failed API example
{
  code: 'FORM_INVALID',
  msg: 'Invalid params: cvv'
}

CODE码	Description
APPLY_SUCCESS	Successfully obtain paymentToken
FORM_INVALID	Form validation failed
UNKNOWN_ISSUE	Exception information

1.4.2 emit.switchLanguage

• Refer to Customization

1.4.3 emit.switchTheme

• Refer to Customization

1.4.4 emit.addLocalization

• Refer to Customization

1.4.5 emit.addTheme

• Refer to Customization

1.4.6 emit.setDisabled

• Set component availability status
• Type: Boolean
• Default: false

// Uneditable state
PMdropin.emit('setDisabled', true)

// Editable state
PMdropin.emit('setDisabled', false)

1.4.7 emit.setRtl

• Set component layout from right to left
• Type: Boolean
• Default: false

// Right to left layout
PMdropin.emit('setRtl', true)

// Left to right layout
PMdropin.emit('setRtl', false)

1.4.8 emit.setGrayscale

• Set component page grayscale
• Type: String
• Default: 0

// Set 0-1 grayscale value
PMdropin.emit('setGrayscale', '1')