Customizations
Customize the look and feel of the PaySimpleJS Payment Form
When initializing PaySimpleJS (via window.paysimpleJs()) you can pass in an optional styles or text properties to customize the look and feel or verbiage of the form
Styles Property
styles: {
// Styles the body of the iframe's page body: {
/* Any valid CSS property */
}
, // Provides styles that will apply to all containers (can be overridden/extended for a specific field name - see below) // The container wraps each field & label // (i.e. each field has a label associated with it - the container wraps both of these) container: {
/* Any valid CSS property */
// Styles the focus state focus: {
/* Any valid CSS property */
}
, // Styles the focus state hover: {
/* Any valid CSS property */
}
}
, // Styles a container for a specific field name // Will inherit all styles that were set in the base 'container' property above // If the a CSS property is defined in both the base 'container' property as well // as for a specific field name, the specific field name's style will be used // If focus/hover styles are defined in both the base 'container' property as well // as for a specific field name, the CSS properties will be merged together with the specific field name's // style winning if the same style is defined in both 'container.cardNumber': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'container.expiration': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'container.cvv': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'container.postalCode': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'container.routingNumber': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'container.accountNumber': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'container.accountType': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'container.bankName': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, // Provides styles that will apply to all labels (can be overridden/extended for a specific field name - see below) label: {
/* Any valid CSS property */
// Styles the focus state focus: {
/* Any valid CSS property */
}
, // Styles the focus state hover: {
/* Any valid CSS property */
}
}
, // Styles a label for a specific field name // Will inherit all styles that were set in the base 'label' property above // If the a CSS property is defined in both the base 'label' property as well // as for a specific field name, the specific field name's style will be used // If focus/hover styles are defined in both the base 'container' property as well // as for a specific field name, the CSS properties will be merged together with the specific field name's // style winning if the same style is defined in both 'label.cardNumber': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'label.expiration': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'label.cvv': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'label.postalCode': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'label.routingNumber': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'label.accountNumber': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'label.accountType': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'label.bankName': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, // Provides styles that will apply to all inputs (can be overridden/extended for a specific field name - see below) field: {
/* Any valid CSS property */
// Styles the focus state focus: {
/* Any valid CSS property */
}
, // Styles the focus state hover: {
/* Any valid CSS property */
}
, // Styles the placeholder placeholder: {
/* Any valid CSS property */
}
}
, // Styles an input for a specific field name // Will inherit all styles that were set in the base 'field' property above // If the a CSS property is defined in both the base 'field' property as well // as for a specific field name, the specific field name's style will be used // If focus/hover/placeholder styles are defined in both the base 'container' property as well // as for a specific field name, the CSS properties will be merged together with the specific field name's // style winning if the same style is defined in both 'field.cardNumber': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
, placeholder: {
/* Any valid CSS property */
}
}
, 'field.expiration': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
, placeholder: {
/* Any valid CSS property */
}
}
, 'field.cvv': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
, placeholder: {
/* Any valid CSS property */
}
}
, 'field.postalCode': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
, placeholder: {
/* Any valid CSS property */
}
}
, 'field.routingNumber': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
, placeholder: {
/* Any valid CSS property */
}
}
, 'field.accountNumber': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
, placeholder: {
/* Any valid CSS property */
}
}
, 'field.accountType': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
, placeholder: {
/* Any valid CSS property */
}
}
, 'field.bankName': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
, placeholder: {
/* Any valid CSS property */
}
}
, // Provides styles that will apply to all validation messages (can be overridden/extended for a specific field name - see below) validation: {
/* Any valid CSS property */
// Styles the focus state focus: {
/* Any valid CSS property */
}
, // Styles the focus state hover: {
/* Any valid CSS property */
}
}
, // Styles an validation message for a specific field name // Will inherit all styles that were set in the base 'validation' property above // If the a CSS property is defined in both the base 'validation' property as well // as for a specific field name, the specific field name's style will be used // If focus/hover styles are defined in both the base 'container' property as well // as for a specific field name, the CSS properties will be merged together with the specific field name's // style winning if the same style is defined in both 'validation.cardNumber': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'validation.expiration': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'validation.cvv': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'validation.postalCode': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'validation.routingNumber': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'validation.accountNumber': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'validation.accountType': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
, 'validation.bankName': {
/* Any valid CSS property */
focus: {
/* Any valid CSS property */
}
, hover: {
/* Any valid CSS property */
}
}
,
}
,
Format Styles
{
// Style names can be kebab-case or camelCase // kebab-case (note the quotes around the name): 'background-color': '#fff', // camelCase (no quotes needed): backgroundColor: '#fff', // Style values need to be wrapped in quotes: border: '1px solid #ccc', color: '#000', background: '#fff', padding: '5px', borderRadius: '0', margin: '0', // focus can accept any valid CSS property focus: {
backgroundColor: '#f00'
}
, // hover can accept any valid CSS property hover: {
backgroundColor: '#0f0'
}
, // placeholder can accept any valid CSS property placeholder: {
color: '#000'
}
}
Customize the verbiage of the form
Text Property
Note: If verbiage isn't provided for a particular property, the default value will be used.
text: {
labels: {
cardNumber: 'Credit Card Number', expiration: 'Expiration (mm/yy)', cvv: 'CVV', postalCode: 'Zip/Postal Code', routingNumber: 'Routing Number', accountNumber: 'Account Number', accountType: 'Account Type', bankName: 'Bank Name'
}
, validation: {
required: {
default: 'Field is required', cardNumber: 'Card Number is required', expiration: 'Please enter expiration', cvv: 'CVV is required', postalCode: 'Please enter Zip/Postal Code', routingNumber: '',
/* Default verbiage for routing number will be used */
accountNumber: '',
/* Default verbiage for account number will be used */
accountType: '',
/* Default verbiage for account type will be used */
bankName: ''
/* Default verbiage for bank name will be used */
}
, invalidCardNumber: 'Invalid Card Number', invalidCardType: 'Invalid Card Type', invalidExpiration: 'Invalid Expiration', invalidCvv: 'Invalid CVV', invalidPostalCode: 'Invalid Postal Code', invalidRoutingNumber: 'Invalid Routing Number', invalidAccountNumber: 'Invalid Account Number',
}
, placeholder: {
cardNumber: 'Credit Card Number', expiration: 'Expiration (mm/yy)', cvv: 'CVV', postalCode: 'Zip Code', routingNumber: 'Routing Number', accountNumber: 'Account Number', accountType: 'Account Type', bankName: 'Bank Name'
}
,
}
Updated over 5 years ago