Note: To ensure proper load sequence, all set UI functions should be placed within the ready event handler.

UI

setFieldType

Set the input type of the iFrame fields. This is useful to when you want different keyboards to display on mobile devices.

By default, the iFrame fields are set totype=number, which displays the numerical keyboard in most browsers on most mobile devices. However, behavior does vary by browser. If you’d like to manually control the input field type you can do so with setFieldType.

Spreedly.on('ready', function() {
  Spreedly.setFieldType("number", "tel");
});

Signature

setFieldType(field, type)

Arguments

setLabel

Style iFrame fields’ label. Although the label for each iFrame field is not displayed, it is still used by screen readers and other accessibility devices.

Spreedly.on('ready', function() {
  Spreedly.setLabel("number", "Card Number");
  Spreedly.setLabel("cvv", "CVV");
});

Signature

setLabel(field, label)

Arguments

setTitle

Set custom iFrame fields’ title attribute. Although the title for each iFrame field is not displayed, it can still be used by screen readers and other accessibility devices. By default, the title attribute is set to “credit card number” for the number field, and “cvv number” for the cvv field. If you would like to customize these titles you can do so with a call of this function.

Spreedly.on('ready', function() {
  Spreedly.setTitle("number", "credit card title");
  Spreedly.setTitle("cvv", "cvv title");
});

Signature

setTitle(field, title)

Arguments

setNumberFormat

Set the card number format. If set to prettyFormat, the card number value will include spaces in the credit card number as they appear on a physical card. The number field must be set to type text or tel for pretty formatting to take effect.

If set to maskedFormat, the card number and CVV values will be masked with * as the user enters text. Both the CVV and number fields must be set to type text for the masked formatting to take effect. Once maskedFormat has been set, the toggleMask function can be called to show the card number and CVV in plain text if they are masked, or mask them if they are shown.

// Pretty format
Spreedly.on('ready', function() {
  Spreedly.setFieldType("number", "text");
  Spreedly.setNumberFormat("prettyFormat");
});

// Masked format
Spreedly.on('ready', function() {
  Spreedly.setFieldType("cvv", "text");
  Spreedly.setFieldType("number", "text");
  Spreedly.setNumberFormat("maskedFormat");
});

Signature

setNumberFormat(format)

Arguments

The following is an example of how formatting affects what is displayed in the number field:

setPlaceholder

Style iFrame fields’ placeholder text.

Spreedly.on('ready', function() {
  Spreedly.setPlaceholder("number", "Card");
  Spreedly.setPlaceholder("cvv", "CVV");
});

Signature

setParameter(field, placeholder)

Arguments

setStyle

Style iFrame fields using CSS.

Spreedly.on("ready", function() {
  Spreedly.setStyle("number", "width:225px;  height:35px;");
  Spreedly.setStyle("number", "font-size: 20px; text-align: center");
  Spreedly.setStyle("cvv", "width:60px;  height:35px;");
  Spreedly.setStyle("placeholder", "font-weight: bold; color: blue;");
});

Signature

setStyle(field, css)

Arguments

More than one invocation of setStyle can be used per field to organize and better structure styling directives.

Note: Based on iFrame CORS settings, we do not currently allow importing any external fonts or images.

iFrame supports most browser web standard font-families such as: Arial, Courier New, and Tahoma, and others like Lato.

setStyle (placeholder styling)

Style iFrame placeholders using CSS.

Signature

setStyle('placeholder', css)

Arguments

transferFocus

Set the cursor focus to one of the iFrame fields. This is useful if you want to load your form with the card number field already in focus, or if you want to auto-focus one of the iFrame fields if they contain an input error.

Spreedly.transferFocus("number");

Signature

transferFocus(field)

Arguments

toggleAutoComplete

Toggle autocomplete functionality for card number and cvv fields. By default, the autocomplete attribute is enabled, so the first call of this function will disable autocomplete.

Spreedly.toggleAutoComplete();

Signature

toggleAutoComplete()

setRequiredAttribute

Adds the required attribute to either of the iFrame fields. This indicates to the browser and other assistive technologies that the field is considered required.

Spreedly.on('ready', function() {
Spreedly.setRequiredAttribute("number");
Spreedly.setRequiredAttribute("cvv");
});

Signature

setRequiredAttribute(field)

Arguments