PayConexDecryptxShieldConexTECS Platform
Guides
Request SandboxContact Us

Computing Style

Setting font characteristics in the Payment iFrame.

Suggest Edits

The JavaScript API's constructor has a feature that computes the values of the Payment iFrame's fontSize, fontFamily and fontColor for both the text labels and the input/select elements based on an HTML element on the parent page.

To enable the feature, use the matchLabelStyle and matchInputStyle properties of the settings object.

🚧

Important

  • This feature only works in create mode.
  • The only area that JQuery is used in the API is in the matchLabelStyle & matchInputStyle feature. So using this feature introduces a dependency on jQuery. And as this feature is optional, not using it eliminates the need for JQuery.

The value for the matchLabelStyle and matchInputStyle properties can either be

  • the ID of the HTML element, or
  • a JQuery selector for the HTML element.

Internally, the API matches the computed style of the HTML element to the matching settings for the fontSize, fontFamily and fontColor. It does not matter if the style for the element is inherited from a parent element; the computed value will account for that style also.

📘

Note

It is possible to use the matchLabelStyle and matchInputStyle features and to override the inferred values by specifying the labelFontSize, labelFontFamily, inputFontColor, inputFontSize, inputFontFamily, or inputFontColor options in the settings object.

<body style="color:red; fontSize : 14px ">
    <div id="elm_to_copy" style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;">Lorem ipsum</div>
    <input id="input_elm_to_copy" style="color:#0000FF; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;"  value="My Text"/>
    <div id="pay_if_parent_div" ></div>
</body>

Add an ID to the HTML element whose style you want to copy; in this case elm_to_copy and input_elm_to_copy

new PaymentiFrame( {
        create    : true,
        iframeId  : "pay_if",
        settings  : {
            account         : 000000000001,
            parentId        : "pay_if_parent_div",
            lang            : "en",
            cvv             : "required",
            expy            : "single_input",
            layout          : "3",
            inputStyle      : "1",
            labelFontColor  : "#0000FF",
            style           : "background-color:red; border-radius: 25px; padding: 25px;",
            showFrame       : false,
            matchLabelStyle : "elm_to_copy",
            matchInputStyle : "input_elm_to_copy"
        }
    });

Set the ID in the matchLabelStyle and matchInputStyle settings.

Updated over 2 years ago