Styling card fields (4.10.3)

Styling card fields

Style configuration

Since card fields must be injected within iframes, any style properties within those iframes must be passed to recurly.configure. See the code example at right.

Styling the combined card field

Options unique to the combined card field are detailed in the following table. When passed into your recurly.configure call, each property must be nested within fields.card.

Combined card field properties

Styling the individual card fields

Options unique to the individual card fields are detailed in the following table. When passed into your recurly.configure call, each property must be nested within fields.all or a respective fields.number, fields.month, fields.year, or fields.cvv object.

Individual card field properties

Common field style properties

Example style configuration

recurly.configure({
  publicKey: 'my-public-key',
  fields: {
    // affects all fields
    all: {
      style: {
        fontFamily: 'Helvetica, sans-serif'
      }
    },

    // affects the combined card field
    card: {
      displayIcon: true,
      style: {
        fontSize: '1em',
        placeholder: {
          color: 'gray !important',
          fontWeight: 'bold',
          content: {
            number: 'Card number',
            cvv: 'CVC'
          }
        },
        invalid: {
          fontColor: 'red'
        }
      }
    },

    // affects individual card field types
    number: {
      // Custom target selector
      selector: '#recurly-number',
      // Format the card number
      format: true
    },
    month: {
      // Display a month select on mobile devices
      inputType: 'mobileSelect',
      style: {
        placeholder: {
          content: 'MM'
        }
      }
    },
    year: {
      style: {
        placeholder: {
          content: 'YYYY'
        }
      }
    },
    cvv: {}
  }
});

CSS classes

Since Recurly.js must inject card data fields into iframes, the default browser appearance for those fields will likely not match the appearance of the other fields in your payment form. We provide the following CSS classes to achieve a look and feel similar to your form. Using these classes, you may specify field size, colors, and a full range of appearance customization to make the injected card fields blend into your payment form.

Custom fonts

You may specify font and placeholder text for card fields through recurly.configure. The example call above demonstrates all available style attributes you may send to recurly.configure.

Custom fonts are sourced from Google Web Fonts. Simply use the name of the font as it appears on the Google Web Fonts site.

Responsive styles

All of the built in field classes will support and respond to media queries. You may call recurly.configure again to change style properties within each field -- thus you may change any property if the window size changes.