Feedback

Menu
On This Page

Module: FLEX v0.4.4

For detailed setup instructions, see "Getting Started."
The following example displays a basic setup:
<script src="https://flex.cybersource.com/cybersource/assets/microform/0.4/flex-microform.min.js"></script>
<script>
    window.FLEX.microform(...);
</script>

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 v0.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
<optional>
Main styling applied to the
input
 field.
::placeholder
Object
<optional>


Styles for the::placeholder pseudo element


within the main input field. This element adds

vendor prefixes for supported browsers.
:hover
Object
<optional>


Styles to apply when the input field is hovered

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


Styles applied when the input field has been


disabled using MicroformInstance#disable. See

"disable()."
valid
Object
<optional>


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
<optional>


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'
    }
};
Back to top