Hosted Card Payment Fields
Lemonway offers its partners the ability to integrate card payments directly into their platforms using Hosted Fields. This solution allows partners to build a seamless and customisable payment experience, keeping customers within their checkout environment rather than redirecting them to a separate payment page. Through Lemonway's JavaScript SDK, partners can embed individual card payment fields, such as card number, expiry date and CVV, directly into their payment forms. The fields are hosted securely within Lemonway-managed iframes, ensuring that sensitive card details are handled by Lemonway while partners retain control over the design and appearance of their checkout. Partners can also customise field styles, labels, placeholders and validation behaviour to match their platform's look and feel, providing customers with a consistent and user-friendly payment experience. This integration offers partners greater flexibility over their checkout journey while benefiting from Lemonway's hosted payment infrastructure.
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.
Updated 6 days ago