Style

String Direct CSS Styling

The stringPay.setStyle(style) method takes a style object which has a property called "PCIInnerElements" which optionally contains style rules for the states defined below. These states are objects that can contain most CSS rules as properties. The CSS rules must be written in camelCase instead of kebab-case as you may be used to (i.e. "fontSize:" not "font-size:").

StateDescription
baseThe base, default rules. Applies to all states if not overridden.
hoverRules applied when a field is hovered over.
focusRules applied when a field is focused on.
validRules applied when a field is valid.
invalidRules applied when a field is invalid.
placeholderTakes an object with the "base" or "focus" states as properties.
autofillRules applied when a field is autofilled (i.e. by their browser or password manager).

Example

const style = {
  PCIInnerElements: {
    base: {
      color: "#0C1116",
      fontSize: "16px",
    },
    invalid: {
      color: "#E25950",
    },
    autofill: {
      backgroundColor: "#FFFFFF",
    },
    placeholder: {
      base: {
        color: "#8A98A9",
      }
    }
  }
}

stringPay.setStyle(style);