Web SDK API Reference
Mount Card Input
Syntax
window.NI.mountCardInput('mount-point', {
style,
apiKey,
outletRef,
onSuccess,
onFail,
onChangeValidStatus
});
Arguments
Argument | Optional | Description |
---|---|---|
mount-point | No | A valid DOM id where in the card input needs to get mounted. |
style | Yes | A object with different parameters to configure the look and feel of the card input through CSS. |
apiKey | No | This is the |
outletRef | No | This is the unique outlet reference thats been assigned which can be determined by they N-Genius portal. |
onSuccess | Yes | Callback function which will get triggered when card input has been successfully mounted. |
onFail | Yes | Callback function which will get triggered when card input has failed to load with some error. |
onChangeValidStatus | Yes | Callback function which will be triggered when the overall validity of user populated fields changes. You may also use this callback as the trigger to display any inline input errors on a per-field or overall basis. |
Style Options
const style = {
main: {} /* the style for the main wrapper div around the card input*/,
base: {} /* this is the default styles that comes with it */,
input: {} /* custom style options for the input fields */,
invalid: {} /* custom input invalid styles */
};
Common Style Options
Styles options below are applicable for, base
, input
, invalid
:
Style Name | Description |
---|---|
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| Example: |
| Example: |
| This takes in a |
| This takes in a |
| This takes in a |
The following css
options applicable for main
property:
css
options applicable for main
property:Style Name | Description |
---|---|
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
| This takes in a |
Updated over 2 years ago