HomeMerchantsDevelopers

Web SDK API Reference

Suggest Edits

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.

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:

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 almost 3 years ago