Hosted Card Payment Fields

Build a card payment form with Lemonway Hosted Fields while card data remains in Lemonway-hosted iframes.

Hosted Fields lets you configure individual payment fields and mount them in your checkout. Use the SDK’s event hooks and CSS class toggling to respond to field state and style the outer containers.

Before you start

Build your checkout with HTML and JavaScript.
Add the Lemonway Hosted Fields SDK to your application. See SDK bundle integration and SSR.
Create the containers where you want to mount the hosted payment fields.
Review Getting started with a basic payment form before implementing your form.

Building a payment form

Configure the fields that your checkout requires, such as card number, expiration date, CVV, and cardholder name.
Mount the configured fields into the containers on your payment page.
Submit the form through the SDK. See Submit a form.
Redirect the payer according to the submission result when your payment flow requires it.

Handling field state

Use event hooks to respond to changes inside the hosted iframes, including form readiness, focus, and validation state. See Event hooks.

Use CSS class toggling to apply styles to field containers as their state changes. See Toggling classes.

Customizing fields

You can configure the following aspects of a Hosted Fields integration:

Field labels and placeholders
Styles for the iframe content, subject to CSS sanitization
The appearance of outer field containers
Language-specific placeholders and right-to-left text styling
Card scheme detection for supported co-branded cards

See Styling with SDK, Internationalization, and Card scheme detection.

Optional: Using synthetic events

Synthetic events let the container of a hosted field emit events that mirror events inside the iframe. Use them when your front-end implementation needs to react to field input, focus, blur, validity, or empty-state changes.

See Synthetic events.