Documentation
API v1OnboardingChangelogAPI Status
Start typing to search…

Toggling Classes

Customizing the appearance of your payment form has never been easier. With several pre-defined CSS classes, there’s no need to write any JavaScript code. These classes allow you to change the look of your form and error messages based on the iframe’s state: “valid”, “invalid”, “focused”, and “not empty”.

This is a simplified DOM of an individual field after mounted:

<div id="card-number">
 <iframe src="https://lemonway_origin">
 #document
 <input id="text" />
 </iframe>
</div>

The SDK will toggle the CSS classes on 2 elements:

  • the container element outside the iframe (#card-number in our example)
  • the input #text element inside the iframe

Toggling classes for containers (#card-number)

  • lw-hosted-fields-valid: toggled when the field becomes valid.
  • lw-hosted-fields-invalid: toggled when the field becomes invalid.
  • lw-hosted-fields-not-empty: toggled when the user typed something to the field.
  • lw-hosted-fields-focused: toggled when the user focuses on the field.

Configure the toggling classes for containers

These default toggling classes are not compatible with the CSS framework (Bootstrap, Foundation, Bulma…) that you are using. So, let’s change them via the cssClass configuration:

const config = {
 ...
 cssClass: {
 valid: 'is-valid', //instead of 'lw-hosted-fields-valid'
 invalid: 'is-invalid', //instead of 'lw-hosted-fields-invalid'
 focused: 'is-focused', //instead of 'lw-hosted-fields-focused'
 notEmpty: '' //instead of 'lw-hosted-fields-not-empty'
 }
}
const hostedFields = new LwHostedFields(config);

Note: you can disable the toggling effect on a class by explicitly setting it to nullor empty string.

Toggling classes for iframe content (#text)

  • valid: toggled when the field becomes valid.
  • invalid: toggled when the field becomes invalid.
  • not-empty: toggled when the user typed something into the field.

Examples

When the user finished typing the card number, the value is valid. The SDK will toggle the lw-hosted-fields-valid and valid CSS class:

<div id="card-number"
 class="w-hosted-fields-not-empty lw-hosted-fields-valid">
 <iframe src="https://lemonway_origin">
 #document
 <input id="text" class="not-empty valid" />
 </iframe>
</div>

When the content is not empty and the value is not valid:

<div id="card-number"
 class="lw-hosted-fields-not-empty lw-hosted-fields-invalid">
 <iframe src="https://lemonway_origin">
 #document
 <input id="text" class="not-empty invalid" />
 </iframe>
</div>

Styling the toggling classes example

This demo illustrates how to style the hosted fields and error messages using only CSS toggling classes, without any involvement of JavaScript or event hooks.

You might not notice:

  • The border turns black when the hosted field is not empty.
  • Submit the form with an empty value will display “Missing value” instead of “Invalid value”
  • The label turns blue when the hosted field is focused. This won’t work on Firefox (because of the CSS "has" selector), you will have to rely on the event hooks or synthetic events to produce a similar effect on Firefox.

Updated about 1 month ago