Credit Card Fields: Style

It is possible to style: 1. the text color that appears in the fields, 2. the placeholder text color, 3. the font family and 4. the font size, by adding a style block in your Flex Fields setup JavaScript. You can add it to an individual field:
var flexFields = Splitit.FlexFields.setup({
                ...
                container: '#splitit-card-data',
                fields: {
                    number: {
                        selector: "#splitit-card-number",
						style: {
							placeholderTextColor: "{color}",
						    fontFamily: "{family}",
						    fontSize: "{size}",
						    textColor: "{color}"
						}
                    },
                    cvv: {
                        selector: "#cvv"
                    },
                ...
Or you can have it affect all of the fields:
var flexFields = Splitit.FlexFields.setup({
                ...
                container: '#splitit-card-data',
                fields: {
                    cardholderName: {
                        selector: "#splitit-cardholder-name"
                    },
                    number: {
                        selector: "#splitit-card-number",
                    },
                    cvv: {
                        selector: "#splitit-cvv"
                    },
                    expirationDate: {
                        selector: "#splitit-expiration-date"
                    },
                    style: {
						placeholderTextColor: "{color}",
						fontFamily: "{family}",
						fontSize: "{size}",
						textColor: "{color}"
					}
                },
Last modified 7mo ago