Styling Secured Fields

Customize the look and feel of the payment form by passing CSS elements in a JSON object. 


All card payment method input fields on the Secured Fields form are represented as iframe elements, which securely capture payment data from your shoppers. Use JavaScript to style the fields:

  1. Create a styleObject and set the CSS values. 

    You can provide styling for the following:

    • base: Base styling applied to the iframe. All styling extends from this style.
    • error: Styling applied when a field fails validation.
    • placeholder: Styling applied to the field's placeholder values.
    • validated: Styling applied once a field passes validation.

    Here is an example style object:

    // Define style object
    var styleObject = {
      base: {
        color: 'black',
        fontSize: '16px',
        fontSmoothing: 'antialiased',
        fontFamily: 'Helvetica'
      },
      error: {
        color: 'red'
      },
      placeholder: {
        color: '#d8d8d8'
      },
      validated: {
        color: 'green'
      }
    };
  2. Style the elements with the following properties. These properties map to CSS properties and accept allowed CSS values:

    Javascript CSS
    background
    background

    color

    color

    display display

    font

    font

    fontFamily

    font-family

    fontSize

    font-size

    fontSizeAdjust

    font-size-adjust

    fontSmoothing

    font-smoothing

    fontStretch

    font-stretch

    fontStyle

    font-style

    fontVariant

    font-variant

    fontVariantAlternates

    font-variant-alternates

    fontVariantCaps

    font-variant-caps

    fontVariantEastAsian

    font-variant-east-asian

    fontVariantLigatures

    font-variant-ligatures

    fontVariantNumeric

    font-variant-numeric

    fontWeight

    font-weight

    letterSpacing

    letter-spacing

    lineHeight

    line-height

    mozOsxFontSmoothing

    moz-osx-font-smoothing

    mozTransition

    moz-transition

    outline

    outline

    opacity

    opacity

    textShadow

    text-shadow

    transition

    transition

    webkitFontSmoothing

    webkit-font-smoothing

    webkitTransition

    webkit-transition

  3. Create a variable (securedFieldsto load the card details into the Secured Fields:

    You can optionally provide placeholder values for card details.

    // Load the Secured Fields
    
    var securedFields = csf({
      configObject : {
        originKey : "[RETRIEVE FROM CUSTOMER AREA]"
      },
      rootNode: '.cards-div',
      paymentMethods : {
        card : {
          sfStyles : styleObject,
          placeholders: {
            encryptedCardNumber : '4111 1111 1111 1111',
            encryptedExpiryDate : '08/18',
            encryptedSecurityCode : '737'
          }
        }
      }
    });