Hosted Card Payment Fields

Why Choose Hosted Fields Payment Integration?

Lemonway's Hosted Fields integration allows you to design and customize a secure payment form that seamlessly matches your website's theme and branding. Our payment integration solution enables high-level customization while also offering pixel-perfect control, allowing you to match your website's design and aesthetics perfectly.

Key Benefits of Hosted Payment Fields

Beyond design customization, our payment solution is compatible with any CSS framework or JavaScript library, including React, Vue.js, Angular, Bootstrap, and Tailwind CSS. This compatibility enables your developers to focus on design and customization while using your organization's preferred tools to build a secure payment form.

Synthetic Events are also supported, allowing payment components to interact seamlessly and providing smooth, efficient communication between different elements on your website. This results in a more responsive and interactive user experience for your customers during checkout.

Lemonway's Hosted Fields solution is a comprehensive payment integration tool that enables you to create secure, PCI-compliant, customizable, and user-friendly payment forms on your website without handling sensitive card data directly.

Getting Started: Prerequisites for Payment Integration

Before you begin building your custom payment form, ensure you have the following technical prerequisites:

1. Frontend Development Skills

HTML and JavaScript Knowledge: You'll need to understand how to create and manipulate HTML elements and use JavaScript to interact with these elements. Experience with modern JavaScript (ES6+) is recommended for optimal integration.

2. Lemonway Payment SDK

Lemonway SDK Integration: This JavaScript SDK is essential for building secure payment forms. You can import the payment SDK into your application using:

A script tag in your HTML file for simple integration
Lazy loading the SDK when the end-user reaches the payment page for better performance
Module bundlers like Webpack, Rollup, or Vite for advanced setups

3. Payment SDK Features and Event Handling

Understanding of Lemonway SDK Features: Familiarize yourself with how Event hooks and CSS class toggling work:

Event hooks allow you to listen for specific payment events that occur within the secure Lemonway iframe, such as:
- When users enter or leave a payment field
- When the payment form or individual field content becomes valid or invalid
- When card validation occurs
- When payment submission begins or completes
CSS class toggling enables you to dynamically modify the appearance of payment fields based on the iframe's state, providing real-time visual feedback to users during form completion.

4. Styling and Design Skills

CSS and Design Knowledge: You'll need CSS skills to style the payment form fields, as the Lemonway SDK allows extensive customization of field appearance, including:

Custom fonts and colors
Border styles and animations
Focus states and validation styling
Responsive design for mobile devices
Integration with your existing design system

Payment Form Customization Options

Our hosted fields solution supports comprehensive styling options to match your brand:

Custom CSS styling for all payment fields
Responsive design support for mobile and desktop
Real-time validation with custom error messaging
Multi-language support for international customers
Accessibility compliance (WCAG guidelines)
Dark mode and theme switching capabilities

Security and Compliance

The hosted fields integration ensures:

PCI DSS compliance without additional certification requirements
Secure tokenization of sensitive payment data
End-to-end encryption for all payment information
Fraud prevention tools and monitoring
3D Secure authentication support