Developer Guide Menu

Module: FLEX 0.4.4

For detailed setup instructions, see  Getting Started .
The following example displays a basic setup:
             

Methods

(static) microform(options, callback) > {void}
This method is the main setup function used to initialize Flex Microform. Upon successful setup, the callback receives a MicroformInstance (see  Class: MicroformInstance 0.4.4 ), which is used to interact with the service and build your integration.
(static) version() > {string}
The version of Flex Microform in use. For example, 0.4.4.
Returns
Type: string

Type Definitions

Styling Options
Styling options are provided asan object that resembles CSS but is limited to a subset of CSS propertiesthat relate only to the text within the iframe.
The following CSS selectors are supported:
  • input
  • ::placeholder
  • :hover
  • :focus
  • :disabled
  • valid
  • invalid
The following CSS properties are supported:
  • color
  • cursor
  • font
  • font-family
  • font-kerning
  • font-size
  • font-size-adjust
  • font-stretch
  • font-style
  • font-variant
  • font-variant-caps
  • font-varian-east-asian
  • font-variant-ligatures
  • font-variant-numeric
  • font-weight
  • line-height
  • opacity
  • text-shadow
  • text-rendering
  • transition
  • -moz-osx-font-smoothing
  • -moz-tap-highlight-color
  • -moz-transition
  • -o-transition
  • -webkit-font-smoothing
  • -webkit-tap-highlight-color
  • -webkit-transition

    NOTE

    Unsupported properties are not applied and raise a 
    console.warn()
    .
Type
Object
Properties
Name
Type
Attributes
Description
input
Object
Main styling applied to the 
input
 field.
::placeholder
Object


Styles for the::placeholder pseudo element


within the main input field. This element adds

vendor prefixes for supported browsers.
:hover
Object


Styles to apply when the input field is hovered

over.
:focus
Object
Styles to apply when the input field has focus.
:disabled
Object


Styles applied when the input field has been


disabled using MicroformInstance#disable. See

"disable()."
valid
Object


Styles applied when Flex Microform detects that


the input card number is valid. Relies on card


detection being enabled using


module:FLEX.microform. See

{void}."" title="" data-scope="local" data-format="dita" data-type="" target="_self" >"(static) microform(options, callback) > {void}."
invalid
Object


Styles applied when Flex Microform detects that


the input card number is invalid. Relies on card


detection being enabled using


module:FLEX.microform. See

{void}."" title="" data-scope="local" data-format="dita" data-type="" target="_self" >"(static) microform(options, callback) > {void}."
Example
               
const styles = { 'input': { 'color': '#464646', 'font-size': '16px', 'font-family': 'monospace' }, ':hover': { 'font-style': 'italic' 'invalid': { 'color': 'red' } };
Top