Samples
Examples and references that can help you to build your web application on top of VGS Collect.js.
Frameworks Integration
Use Cases
Supportive modules
Customization code snippets
Add custom card brands
Add new card brand:
form.field('<selector>', {
type: 'card-number',
name: 'cc-number',
placeholder: 'Card number',
validations: ['required', 'validCardNumber'],
showCardIcon: true,
addCardBrands: [{
type: 'mycard',
pattern: /^221/,
format: /(\\d{1,4})/g,
length: [16, 19],
cvcLength: [3, 4],
luhn: false,
},],
});Change existing card brand config:
form.field('<selector>', {
type: 'card-number',
name: 'cc-number',
placeholder: 'Card number',
validations: ['required', 'validCardNumber'],
showCardIcon: true,
addCardBrands: [{
type: 'visa',
pattern: /^411/, // now visa card will be valid only if starts from 411
},],
});Allow only specific card brands support
form.field('<selector>', {
type: 'card-number',
name: 'cc-number',
placeholder: 'Card number',
validations: ['required', 'validCardNumber'],
showCardIcon: true,
validCardBrands: [ { type: 'visa' }, { type: 'mastercard' }]
});
Separate month and year for the card expiration date field
form.field('<selector>', {
type: 'card-expiration-date',
name: 'expirationDate',
placeholder: 'MM / YYYY',
serializers: [form.SERIALIZERS.separate(
{ monthName: '<month_custom_name>', yearName: '<year_custom_name>' }
)],
validations: ['required', 'validCardExpirationDate'],
});
form.submit('/post', {
data: (values) => {
return {
card: {
expiry: {
month: values.expirationDate['<month_custom_name>'],
year: values.expirationDate['<year_custom_name>'],
}
}
}
}
};Control expiration date year length
form.field('<selector>', { yearLength: 2 });
form.field('<selector>', { yearLength: 4 });Override default card/cvv icons
const cvvIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24px' viewBox='0 0 24 24' width='24px' fill='%233BBF45'%3E%3Cg%3E%3Cpath d='M0,0h24v24H0V0z' fill='none'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V6C22,4.9,21.1,4,20,4z M7.64,15H6.49v-4.5l-0.9,0.66 l-0.58-0.89L6.77,9h0.87V15z M13.5,15H9.61v-1.02c1.07-1.07,1.77-1.77,2.13-2.15c0.4-0.42,0.54-0.69,0.54-1.06 c0-0.4-0.31-0.72-0.81-0.72c-0.52,0-0.8,0.39-0.9,0.72l-1.01-0.42c0.01-0.02,0.18-0.76,1-1.15c0.69-0.33,1.48-0.2,1.95,0.03 c0.86,0.44,0.91,1.24,0.91,1.48c0,0.64-0.31,1.26-0.92,1.86c-0.25,0.25-0.72,0.71-1.4,1.39l0.03,0.05h2.37V15z M18.75,14.15 C18.67,14.28,18.19,15,16.99,15c-0.04,0-1.6,0.08-2.05-1.51l1.03-0.41c0.03,0.1,0.19,0.86,1.02,0.86c0.41,0,0.89-0.28,0.89-0.77 c0-0.55-0.48-0.79-1.04-0.79h-0.5v-1h0.46c0.33,0,0.88-0.14,0.88-0.72c0-0.39-0.31-0.65-0.75-0.65c-0.5,0-0.74,0.32-0.85,0.64 l-0.99-0.41C15.2,9.9,15.68,9,16.94,9c1.09,0,1.54,0.64,1.62,0.75c0.33,0.5,0.28,1.16,0.02,1.57c-0.15,0.22-0.32,0.38-0.52,0.48 v0.07c0.28,0.11,0.51,0.28,0.68,0.52C19.11,12.91,19.07,13.66,18.75,14.15z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E";
const cardIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%233BBF45'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E";
const css = {
fontSize: 22,
fontFamily:
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',
};
form.field('<selector>', {
type: 'card-number',
name: 'cc-number',
placeholder: '4111 1111 1111 1111',
showCardIcon: true,
icons: {
cardPlaceholder: cardIcon,
},
css,
});
form.field('<selector>', {
type: 'card-security-code',
name: 'cc-cvv',
placeholder: '111',
showCardIcon: true,
icons: {
cvvFront: cvvIcon,
cvvBack: cvvIcon,
},
css,
});
Change expiration date separator
form.field('<selector>', {
type: 'card-expiration-date',
name: 'card-expiry',
validations: ['required', 'validCardExpirationDate'],
serializers: [form.SERIALIZERS.separate({
monthName: 'ExpirationMonth',
yearName: 'ExpirationYear'
})],
placeholder: 'MM / YYYY',
});Configuration of the input type file
form.field('<selector>', {
type: "file", // required
name: "images", // required
validations: ["required"],
/**
* Optional. A Boolean which, if present, indicates that the user
* may choose more than one file. By default - false.
*/
multiple: true,
/**
* Optional. Serializer intended to convert each file from the FileList
* into base64 form and return an array of values.
*/
serializers: [{ name: "toBase64" }],
/**
* Optional. Array of one or more unique file type specifiers describing file types to allow.
* By default set to "image/*, .pdf".
* Corresponding validation error: "invalid file name"
*/
accept: ["image/*"],
/**
* Optional. A string indicated what source to use for capturing image data.
* Available options: "user", "environment"
*/
capture: "user",
/**
* Optional. A number defines maximum file size in Bytes.
* Corresponding validation error: "uploaded file is too large"
*/
maxFileSize: 100000,
/**
* Optional. A number indicates maximum allowed files number.
* Corresponding validation error: "maximum 2 files can be uploaded"
*/
maxFiles: 2,
css
});Date of Birth validation
const timestamp = Date.parse("01.01.1940");
const dateObject = new Date(timestamp);
const cardNumber = form.field('<selector>', {
type: "date",
name: "dob",
min: "1940-01-01",
validations: [
"required",
{
type: "compareDate",
params: {
field: dateObject,
function: "more"
}
}
],
});Compare values equality
const cvc = form.field('<selector>', {
type: 'text',
name: 'cardCvc',
validations: ['required'],
autoComplete: 'cc-csc',
});
const cvcConfirm = form.field('<selector>', {
type: 'text',
name: 'cardCvcConfirm',
validations: ['required', {
type: 'compareValue',
params: {
field: 'cardCvc',
function: 'match',
},
}],
autoComplete: 'cc-csc',
});Last updated