Card field properties for direct merchants

DocsCurrentAdvancedLast updated: April 25th 2023, @ 4:16:45 pm

Important: This is version 2 of the card field properties guide for direct merchants.

The following card field properties are used to capture a payment. Use the render() method to render these instances to the DOM.

Property	Type	Field created	Required
`CVVField`	Function	Card CVV or CID, a 3 or 4-digit code	Yes
`ExpiryField`	Function	Card expiration date	Yes
`NameField`	Function	Name for the card	No
`NumberField`	Function	Card number	Yes

Card field options

Customize event callbacks or the style of each field with the following options:

Property	Type	Description	Required
`inputEvents`	Object inputEvents	An object containing callbacks for when a specified input event occurs for a field.	No
`style`	Object style guide	Style a field with supported CSS properties.	No
`placeholder`	String	Each card field has a default placeholder text. Pass a placeholder object to customize this text.	No

Example

1const cardNameContainer = document.getElementById("card-name-field-container");
2const nameField = cardField.NameField({
3  placeholder: "Enter your full name as it appears on your card",
4inputEvents: {
5    onChange: (event)=> {
6        console.log("returns a stateObject", event);
7    }
8},
9style: {
10    ".invalid": {
11        "color": "purple",
12    }
13}
14});
15  });
16nameField.render(cardNameContainer);
17const cardNumberContainer = document.getElementById("card-number-field-container");
18const numberField = cardField.NumberField(/*options*/);
19numberField.render(cardNumberContainer);
20const cardExpiryContainer = document.getElementById("card-expiry-field-container");
21const expiryField = cardField.ExpiryField(/*options*/);
22expiryField.render(cardExpiryContainer);
23const cardCvvContainer = document.getElementById("card-cvv-field-container");
24const cvvField = cardField.CVVField(/*options*/);
25cvvField.render(cardCvvContainer);

Card field properties for direct merchants

Card field options

Example

See also