Styling

The TokenFieldSDK includes an intelligent style detection system that automatically captures your existing form styles. This means you might not need to provide any additional styling configuration.

Parent-Level Styling - applied to all fields

Styles applied to the netvalve-tokenfields element will cascade to all three card input fields:

HTML Approach

<netvalve-tokenfields style="color: black; font-size: 16px;">
    <!-- form content -->
</netvalve-tokenfields>

JavaScript Approach

Netvalve.initTokenFields({
    inputStyles: {
        color: 'black',
        'font-size': '16px',
        padding: '8px',
        border: '1px solid #ccc',
        'border-radius': '4px'
    }
});

Individual Field Styling

You can override parent styles for specific fields:

HTML Approach

<netvalve-tokenfields style="color: black; font-size: 16px;">
    <netvalve-cardnumber style="color: blue;"></netvalve-cardnumber>
    <netvalve-cvv></netvalve-cvv>
    <netvalve-expiry></netvalve-expiry>
</netvalve-tokenfields>

Here, the rendered card number input will have a blue color with font-size 16px. The other inputs will have a black color with font size 16px.

JavaScript Approach

Invalid State Styling

The SDK includes built-in validation if fields are invalid. By default, invalid fields will display in red text, but this can be customized using the invalidation styles:

Invalid state styles can only be set at the parent level:

Netvalve Documentation

Styling

Parent-Level Styling - applied to all fields

HTML Approach

JavaScript Approach

Individual Field Styling

HTML Approach

JavaScript Approach

Invalid State Styling

HTML Approach

JavaScript Approach

See Also

Related pages