iFrame Configuration

The Payment iFrame can be used either with an HTML iFrame tag or by using the PaymentiFrame javascript library that will create the iFrame HTML tag dynamically at runtime.

The parameters outlined in this section will apply to both methods of using the Payment iFrame. Depending on the method used the parameters will either be sent in the src url setting of the HTML iFrame element or as a value or the setting object used in the constructor of the PaymentiFrame object.

The names of these parameters may vary between the two methods of using the Payment iFrame. The javascript corresponding name will be indicated in parenthesis next to the URL parameter name.

📘

Note

The URL parameters are used to control the look and feel of the iFrame as well as to configure some functionality.

Startup Parameters

The following table outlines the parameters, the allowed values, and the default values from a high level.

Multi-word parameter names may differ depending on the contexts where they are used. In an HTTP request, those parameter names use an underscore_lowercase syntax whereas when used from javascript they mostly use their camelCase equivalent. Those parameters are marked in the table below with the camelCase name in parentheses below the parameter name.

If the underscore_lowercase variant of those parameters is used in the constructor of the PaymentiFrame() javascript object, these will still work as they will be converted to their camelCase equivalent, however, it is recommended that you use the camelCase variant when creating an instance of the PaymentiFrame().

Parameters marked * are overridden by parameters marked ** - when using any of the ** parameters, the * parameters will not affect the resultant iFrame.

Also, note that the parameters marked ** are meant to be used via the javascript settings. These can also be used via the URL after base64 encoding of their value, but this is not recommended.

HTML Examples

<div id="iframe_container"></div>

<script type="text/javascript">
new PaymentiFrame({
    create: true,
    iframeId: "payment_iframe",
    settings: {
        account     : "XXXXXXXXXXXX",
        parentId    : "iframe_container",
      //devServer   : "https://cert.payconex.net", // uncomment in dev
        cvv         : "optional",
        timeout     : 15,
        expy        : "double_dropdown",
        numberLabel : 2,
        expyLabel   : 2,
        cvvLabel    : 11,
        layout      : 'layout_3',
        inputWidth  : '20em',
        inputStyle  : 3,
        labelFontSize   : 'font_size_14',
        labelFontFamily : 'font_family_11',
        labelFontColor  : '#abcd12',
        inputFontSize   : 'font_size_10',
        inputFontFamily : 'font_family_12',
        inputFontColor  : '#cc6633',
    },
});
</script>

<iframe
    id="payment_iframe"
    src="https://cert.payconex.net/iframe?aid=XXXXXXXXXXXX&cvv=optional&timeout=15&expy=double_dropdown&number_label=2&expy_label=2&cvv_label=11&layout=layout_3&input_width=20em&input_style=3&label_font_size=font_size_14&label_font_family=font_family_11&label_font_color=%23abcd12&input_font_size=font_size_10&input_font_family=font_family_12&input_font_color=%23cc6633">
</iframe>

<script type="text/javascript">
    var paymentiFrame = new PaymentiFrame({
        create   : false,
        iframeId : "payment_iframe",
    });
</script>

Basic Customization Settings

Language Options lang

Card Number Label Override Options number_label

Expiry Input Options expy

Option	Description	Sample
single_input	Single input box to capture expiry date in format MMYY, e.g., 0419
double_input	Double input boxes to capture expiry dates. One for month and another for year.
single_dropdown	Single dropdown to capture expiry date. The format is MM - YYYY, e.g., 05 - 2019
double_dropdown	Double dropdowns to capture expiry dates. One for month and another for year.

CVV Options cvv

CVV2 Label Override Options cvv_label

Layout Options layout

Option	Shorthand	Description	Sample
layout_1	1	The text labels and input boxes are inline, with the text left aligned. Use the input_width and the label_width options to override the default layout.
layout_2	2	The text label and input box for the card number are full width. The expiry and CVV are split into two columns underneath the card number input.
layout_3	3	The text labels and input boxes are the full width of the iFrame and each is started on a new line.
layout_4	4	The text labels and input boxes are inline, with the text right aligned. Use the input_width and the label_width options to override the default layout.

Input box style Options input_style

Font Size Options label_font_size and input_font_size

Sets the text size for iFrame labels and input elements.

Family Options label_font_family and input_font_family