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.
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
font
Updated about 1 year ago