Design is the first thing a customer will notice when they visit your website. A beautiful design is not only attractive to the visitor, but it makes your business look more legitimate. As you build and improve your website, it is important that third-party UI elements work well with, and look similar to, your own user interface. To make the building and programming process easier, here at VGS we put in work to make our forms as flexible and user-friendly as possible for you.
With VGS Collect, you have access to a javascript library that allows you to safely collect and transmit sensitive customer data by utilizing secure iframes on your page.
Previously, customization was limited to the node in which the frame was stored and allowed adjustments to only basic style values, such as font-size, color, and background. We wanted to improve our offering to best fit your needs, so we have added new customization options with our latest release.
Now clients can utilize all available features of CSS-in-JS technology. Added tools include the ability to adjust any CSS properties, including transition animations, custom styles for pseudo-classes, and media queries.
To get the most out of the new features, combine a variety of styles within the container to fit you and your customer's needs.
Take a look at the example below:
This is just one sample of what can be done by combining CSS-in-JS and styles for iframe wrappers. We have a number of live examples available here, each of which can be adapted to fit your site's needs.
Cookbook:
So now that you’re set up, how can you implement the new features into your website's code? To demonstrate, we'll take a simple solution and gradually make it more complex.
Let's start with a basic credit card field:
const field = form.field('#cc-number-wr', {
type: 'card-number',
name: 'card_number',
placeholder: 'Card Number',
validations: ['required', 'validCardNumber'],
});
While this code will make the fields functional and compatible with default browsers, it doesn't provide much in terms of design and individuality.
Before, we would simply make adjustments to basic elements such as the font-size, color, and border (a complete list of available configurations can be found on our docs page). By utilizing the latest improvements to VGS Collect, we can adjust additional CSS properties to make the field more attractive and user-friendly.
const field = form.field('#cc-number-wr', {
type: 'card-number',
name: 'card_number',
placeholder: 'Card Number',
validations: ['required', 'validCardNumber'],
css: {
background: 'rgba(215, 224, 235, 0.18)',
border: 'none',
borderRadius: '4px',
boxSizing: 'border-box',
color: 'white',
fontSize: '12px',
height: '40px',
letterSpacing: '.7px',
lineHeight: 'normal',
padding: '0 10px',
}
});
Additionally, you can add styles through pseudo-classes, improving the user experience even further.
const field = form.field('#cc-number-wr', {
type: 'card-number',
name: 'card_number',
placeholder: 'Card Number',
validations: ['required', 'validCardNumber'],
css: {
background: 'rgba(215, 224, 235, 0.18)',
border: 'none',
borderRadius: '4px',
boxSizing: 'border-box',
color: 'white',
fontSize: '12px',
height: '40px',
letterSpacing: '.7px',
lineHeight: 'normal',
padding: '0 10px',
'&::placeholder': {
color: 'white',
fontSize: '12px',
opacity: '.4',
},
'&:hover': {
'&::placeholder': {
opacity: '.7'
}
},
'&:focus': {
'&::placeholder': {
opacity: '.7'
}
},
}
});
In this example, we used the nesting of classes within the iframe to reach the nested elements. With nesting, you can style option blocks in dropdowns, as well as wrap any properties or pseudo-classes into media queries, like so:
const field = form.field('#cc-number-wr', {
type: 'card-number',
name: 'card_number',
placeholder: 'Card Number',
validations: ['required', 'validCardNumber'],
css: {
background: 'rgba(215, 224, 235, 0.18)',
border: 'none',
borderRadius: '4px',
boxSizing: 'border-box',
color: 'white',
fontSize: '14px',
height: '40px',
letterSpasing: '.7px',
lineHeight: 'normal',
padding: '0 10px',
'@media (min-width:420px)': {
fontSize: '12px'
}
}
});
In addition to customizing the basic design and functionality of the field, you can now make enhancements by dynamically validating credit card information submitted, as well as automatically detect the type of card used.
This is achieved by combining styles for an invalid and valid credit card while also showing the icon for the major credit card companies, including Visa, Mastercard, PayPal, and American Express.
For example:
const field = form.field('#cc-number-wr', {
type: 'card-number',
name: 'card_number',
placeholder: 'Card Number',
validations: ['required', 'validCardNumber'],
errorColor: 'red',
successColor: 'green',
showCardBrandIcon: true,
css: {
color: 'white',
fontSize: '14px',
'@media (min-width:420px)': {
fontSize: '12px'
}
}
});
By utilizing the showCardBrandIcon property, you can display the credit card company's icon on the right corner by default. Additional adjustments can be made to move the icon location or adjust opacity, if desired.
An example of such changes can be seen below:
const field = form.field('#cc-number-wr', {
type: 'card-number',
name: 'card_number',
placeholder: 'Card Number',
validations: ['required', 'validCardNumber'],
errorColor: 'red',
successColor: 'green',
showCardBrandIcon: {
left: '5px',
opacity: '.7',
},
css: {
textAlign: 'right',
}
});
With the latest enhancements, you can take customizing your website to the next level. By making improvements in terms of both function and design, you can attract new customers and promote repeat visits by utilizing the many tools available in VGS Collect.
