Styling and customization

You can customize the language and text direction by options object on the init() method:

{
    language: MacropayFrames.LANGUAGES.SPANISH
    textDirection: MacropayFrames.TEXT_DIRECTION.LEFT_TO_RIGHT
}

Styling is divided in two levels: the container and the input.

Styling Field Container

This container is under your control and you can apply any style you wish to it using our classNames. We use the BEM naming standard to make it easier to override styles depending on the container state.

.macropay {
    &-card-holder,
    &-card-number,
    &-exp-date,
    &-cvc {
        border: 0;
        border-bottom: 1px solid #5e74ed;
        border-radius: 4px;
        width: calc(100% - 18px);
        height: 19px;
        text-align: center;
        background-color: #f2f5fb;
        padding: 8px;

        &:hover {
            border-color: #5ed0ed;
        }

        &--focused {
            border-color: green;
            background-color: #d9d9d9;
        }

        &--error {
            border-color: red;
            border-width: 2px;
            background-color: #ff1b1450;
            color: red;
        }
    }
}

As you can see in the CSS example above, styles are applied to the fields containers using the CSS available class names:

macropay-card-holder,
macropay-card-number,
macropay-exp-date,
macropay-cvc,
macropay-zip-code,
macropay-card-holder--focused,
macropay-card-number--focused,
macropay-exp-date--focused,
macropay-cvc--focused,
macropay-zip-code--focused,
macropay-card-holder--error,
macropay-card-number--error,
macropay-exp-date--error,
macropay-cvc--error

<div className="input-container">
    <label htmlFor="card-number" className="input-label">
        Card number:
    </label>
    <div
        className="macropay-card-number"
        id="card-number"
        data-qa="card-number" />
    <span className="input-error">
      {cc_FieldState.cardNumber.error}
   </span>
</div>

---

Styling Field Input

To style the input, you must provide a styles object in the .create() or .updateConfig() methods. The base, focus, hover, and placeholder styling of this styles object can be overridden.

const style = {
    base: {
        color: '#5e74ed'
    },
    focus: {
        color: '#2746f1',
        fontWeight: '500'
    },
    hover: {
        color: '#2746f1',
        fontWeight: '500'
    },
    placeholder: {
        base: {
            color: '#47a4a9'
        },
        focus: {
            color: '#47a4a9',
            fontWeight: '700'
        }
    }
};

---

Available CSS Rules

ELEMENT	CSS PROPERTY	TYPE	DEFAULT	RANGE	DESCRIPTION
base	fontFamily	String	"Roboto", "Helvetica", "Arial", sans-serif	Roboto and System fonts	Only Roboto and System fonts are available.
	color	String	#000	Any CSS available color	The font color of the value inside the input.
	fontSize	String	12px	Any CSS available value
	fontWeight	String	400	400 / 500 / 700
focus	color	String	#000	Any CSS available color	The font color of the value inside the input when the user focuses on it.
	fontSize	String	12px	Any CSS available value
	fontWeight	String	400	400 / 500 / 700
hover	color	String	#000	Any CSS available color	The font color of the value inside the input when the user hovers on it.
	fontSize	String	12px	Any CSS available value
	fontWeight	String	400	400 / 500 / 700
placeholder / base	color	String	#000	Any CSS available color	The font color of the placeholder inside the input. Showed when no value has been introduced yet.
	fontSize	String	12px	Any CSS available value
	fontWeight	String	400	400 / 500 / 700
placeholder / focus	color	String	#000	Any CSS available color	The font color of the placeholder inside the input when the user focuses on it. Showed when no value has been introduced yet.
	fontSize	String	12px	Any CSS available value
	fontWeight	String	400	400 / 500 / 700