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
1.4.3 emit.switchTheme
1.4.4 emit.addLocalization
1.4.5 emit.addTheme
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')