Advanced Customization

Using custom CSS, Font, and Text options

For more control over the appearance of the iFrame and to help integrate it into an existing form to handle a payment via Bluefin, the following options should be considered to enhance the look and feel of the iFrame. Note that using the following options will override some of the previous ones. For example, specifying a Font Family would be overridden by specifying a custom font and including it in the Custom CSS options.

The same would be true for specifying Card Number Label Override Options and then Custom Text Options - the Custom Text Options would take precedence.

The resulting iFrame will have a structure as outlined in the image below. Merchants can configure the CSS for any of the HTML elements via the ids (in black) or the classes (in red). Note: the actual HTML will change based on other configuration options (CVV can be omitted and expiry can be dropdown) but the id and class names will be inline with this example.

975975

CSS Options

It is possible to style the iFrame to match the form it is being embedded into. A subset of the entire range of CSS properties is available to apply to the iFrame controls to achieve this. Outlined below are the selectors of the iFrame's controls that are available for styling and following this, are the available CSS properties.

Control Selector Description
@font-face Custom font definition (see url and files rules)
class_row Class affecting the styles of the DIVs containing payment controls (card number, expiry, cvv)
class_label Class affecting the styles of labels on the iFrame
class_input_box Class affecting the styles of the input textboxes on the iFrame
id_body The body of the embedded iFrame
id_form The form element of the embedded iFrame
id_number_row DIV containing the card number controls
id_number_label Accompanying label for the input textbox for the credit card number value
id_number_input Input textbox for the credit card number value for credit card transactions
id_expy_row DIV containing the expiry controls
id_expy_label Accompanying label for the expiry input controls
id_expy_input Input textbox for the expiry value (year & month) for credit card transactions
id_expy_input_year Input textbox for the expiry value (year only) for credit card transactions
id_expy_input_month Input textbox for the expiry value (month only) for credit card transactions
id_expy_dd Select control for the card expiry value (month and year combined)
id_expy_dd_year Select control for the card expiry value (month only)
id_expy_dd_month Select control for the card expiry value (year only)
id_cvv_row DIV containing the cvv controls
id_cvv_label Accompanying label for the input textbox for cvv value for credit card transactions
id_cvv_input Input textbox for the cvv value for credit card transactions
id_account_row DIV containing the ach account number controls
id_account_input Input textbox for the bank account number value for check transactions
id_account_label Accompanying label for the input textbox for the Bank Account number value
id_routing_row DIV containing the ach routing number controls
id_routing_input Input textbox for the routing number value for check transactions
id_routing_label Accompanying label for the input textbox for the routing number value
id_timeout_div DIV containing the timeout page text
id_timeout_header Header for iFrame timeout page
id_timeout_text Text for iFrame timeout page
id_timeout_link Link to reload the iFrame that has timed out
:hover Used to select elements when you mouse over them
:focus Link to reload the iFrame that has timed out
::placeholder HTML input placeholder Attribute
::selection Matches the portion of an element that is selected by a user
:-webkit-autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browser

Permitted CSS Properties

CSS Property
-moz-box-sizing
-webkit-box-sizing
box-sizing
box-shadow
-moz-box-shadow
-webkit-box-shadow
background-color
background-image
background
background-attachment
background-clip
background-origin
background-position
background-repeat
background-size
border-bottom
border-left
border-right
border-top
border
border-style
border-width
border-color
border-radius
-webkit-border-radius
-moz-border-radius
clear
color
display
float
font
font-family
font-size
font-style
font-variant
font-weight
height
min-height
max-height
margin
margin-bottom
margin-top
margin-left
margin-right
outline
padding-left
padding-right
padding-top
padding-bottom
padding
position
left
top
right
bottom
align-content
align-items
vertical-align
text-align
vtext-align
line-height
text-decoration
text-shadow
letter-spacing
text-transform
text-overflow
overflow
width
min-width
max-width
z-index

📘

CSS Colors, Measure Units, & Negative Values

it is possible to define colors as hex, rgb, rgba, hsl, hsla and css color names

Allowed measurement units are em, px and rem

it is possible to set negative paddings and margins.

URLs in CSS Properties

URL CSS parameters for background images and font face source is enabled ONLY with internal paths, external URLs will not be validated due to PCI rules.

Merchants' assets can be validated and uploaded to the server by Bluefin Support after a merchant's request. Uploaded assets can be reached by the URL CSS property through the merchants assets folder path eg: url(/merchantpath/images/background.png). URL validation accepts single and double quotes; double quote enclosure must be escaped in the JSON parameter and in the builder, eg: url("/merchantpath/images/background.png")

Allowed image types: jpg, jpeg, gif, png, bmp
Allowed font types: otf, woff2, woff, ttf

Example With Custom CSS

<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
    expy      : 'double_dropdown',
    css       : {
      @font-face : {
            font-family: "Custom Sans";
            src: url('/merchantpath/fonts/CustomSans-Regular-webfont.woff2') format("woff2"),
        url('/merchantpath/fonts/CustomSans-Regular-webfont.woff') format("woff");
                }
      class_row  :   "margin:1em auto;width:250px;border:1px solid #999;padding:2px;",
      class_label: "width:60px;display:inline-block;text-align:right;padding-right:5px;",
      id_body    : "background:wheat;padding:5px;",
      id_form    : "background:rgba(200,100,150,0.2);border-radius:1em;padding:1px 0;",
      id_number_label   : "font-family:Macondo;",
      id_expy_row       : "font-family:Verdana, Geneva, sans-serif;",
      id_expy_dd_year   : "font-style:italic;",
      id_expy_dd_month  : "margin:0 5px 0 -4px;",
      id_cvv_label      : "font-family:Impact, Charcoal, sans-serif;",
      id_timeout_div    : "background:silver;text-align:center;padding:1em;",
      id_timeout_header : "text-decoration:underline;color:darkred",
      id_timeout_text   : "font-family:sans-serif;text-style:italic;",
      id_timeout_link   : "color:red;",
      'class_row:hover'       : "font-weight:bold;border-color:#bb5;",
      'id_number_row:hover'   : "border-color:#5b5;",
      'id_cvv_row:hover'      : "border-color:#55b;",
      'id_number_input:focus' : "background:#efefaa",
      'id_cvv_input:focus'    : "background:#efefaa",
      'class_input_box::placeholder' : "color:Tomato;font-style:italic",
    },
  },
});
</script>

Font Options font


Did this page help you?