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 apiKey which needs to be provided to be able to mount the card-input. |
| 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. |
| language | Yes | Allows you to define the Language for the SDK. Values accepted: "ar" or "en". Default value: "en" |
| 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 |
|---|---|
color | This takes in a string value for color and supports all the valid values that CSS supports. |
height | This takes in a string value in pixels/em/rem and supports all the valid values that CSS supports. |
borderStyle | This takes in a string value and supports all the valid values that CSS property border-style supports. |
borderWidth | This takes in a string value in pixels/em/rem and supports all the valid values that CSS property border-width supports. |
borderColor | This takes in a string value and supports all the valid values that CSS property border-color supports. |
borderRadius | This takes in a string value in pixels/em/rem and supports all the valid values that CSS property border-radius supports. |
backgroundColor | This takes in a string value and supports all the valid values that CSS property background-color supports. |
fontUrl | Example: https://fonts.googleapis.com/css?family=Cinzel&display=swap |
fontFamily | Example: Cinzel |
fontSize | This takes in a string value and supports all the valid values that CSS property font-size supports. |
fontWeight | This takes in a string value and supports all the valid values that CSS property font-weight supports. |
padding | This takes in a string value and supports all the valid values that CSS property padding supports. |
The following css options applicable for main property:
css options applicable for main property:| Style Name | Description |
|---|---|
margin | This takes in a string value and supports all the valid values that CSS property margin supports. |
marginLeft | This takes in a string value and supports all the valid values that CSS property margin-left supports. |
marginRight | This takes in a string value and supports all the valid values that CSS property margin-right supports. |
top | This takes in a string value and supports all the valid values that CSS property top supports. |
bottom | This takes in a string value and supports all the valid values that CSS property bottom supports. |
left | This takes in a string value and supports all the valid values that CSS property left supports. |
right | This takes in a string value and supports all the valid values that CSS property right supports. |
padding | This takes in a string value and supports all the valid values that CSS property padding supports. |
position | This takes in a string value and supports all the valid values that CSS property position supports. |
overflow | This takes in a string value and supports all the valid values that CSS property overflow supports. |
height | This takes in a string value and supports all the valid values that CSS property height supports. |
width | This takes in a string value and supports all the valid values that CSS property width supports. |
maxHeight | This takes in a string value and supports all the valid values that CSS property max-height supports. |
maxWidth | This takes in a string value and supports all the valid values that CSS property max-width supports. |
minHeight | This takes in a string value and supports all the valid values that CSS property min-height supports. |
minWidth | This takes in a string value and supports all the valid values that CSS property min-width supports. |
color | This takes in a string value and supports all the valid values that CSS property color supports. |
background | This takes in a string value and supports all the valid values that CSS property background supports. |
backgroundImage | This takes in a string value and supports all the valid values that CSS property background-image supports. |
borderStyle | This takes in a string value and supports all the valid values that CSS property border-style supports. |
borderColor | This takes in a string value and supports all the valid values that CSS property border-color supports. |
borderRight | This takes in a string value and supports all the valid values that CSS property border-right supports. |
borderRadius | This takes in a string value and supports all the valid values that CSS property border-radius supports. |
boxSizing | This takes in a string value and supports all the valid values that CSS property box-sizing supports. |
boxShadow | This takes in a string value and supports all the valid values that CSS property box-shadow supports. |
zIndex | This takes in a string value and supports all the valid values that CSS property z-index supports. |
Updated about 1 year ago