You can style any input by adding your own classes or css rules, or by extending
the payload classes.
It's also possible to override the default class names using the Payload.Form
styles
parameter.
Style inputs using Bootstrap 4 classes
<input class="form-control" pl-input="amount" value="10.00">
<div class="form-control" pl-input="card_number"></div>
To style a secure input you can apply any custom style directly to the <div>
or <input>
element as shown in the corresponding Bootstrap example.
.pl-input {
color: #495057;
background-color: #fff;
border: 1px solid #ced4da;
padding: .375rem .75rem;
outline: none;
}
Another approach to styling inputs is to add a CSS rule for the CSS classes below.
Payload's default CSS classes:
Using the Bootstrap 4 invalid class
<script>
new Payload.Form({
form: document.getElementById('checkout-form'),
styles: { invalid: 'is-invalid' } /* override default style class */
})
</script>
Instead of extending the default Payload classes, you can change the
default class for state changes like invalid
to use a custom class.
Setting custom classes via events
<script>
new Payload.Form({
form: document.getElementById('checkout-form'),
}).on('focus', function(evt) {
/* handle focus event */
$(evt.target).addClass('my-focus')
}).on('blur', function(evt) {
/* handle blur event */
$(evt.target).removeClass('my-focus')
}).on('invalid', function(evt) {
/* handle invalid event */
$(evt.target).addClass('my-invalid')
}).on('valid', function(evt) {
/* handle valid event */
$(evt.target).removeClass('my-invalid')
})
</script>
For more advanced control over styling and UX of the secure input, Payload.js provides event triggers for state changes of the inputs.
You can listen for events like blur
and invalid
, and handle
the style and UX changes required for that event.