Create a Modern Payment Form with NMI Collect.js Integration

Job ID: 38988562

Budget: $250 – $750 USD

I need a professional developer/designer to create a modern, animated payment form with the following features:

Features:
1. Form Fields:
• Card Information (Card Number, Expiration Date, CVV) using NMI Collect.js for secure field handling.
• Country Picker (dropdown or searchable list).
• Address, Postcode, Email, and Phone Number.
• Apple Pay integration. (Easy to Add from NMI Documents)
2. Form Behavior:
• Input validation:
• Card number max 16 digits with type detection (Visa/MasterCard/Discover, etc.).
• Expiration date validation.
• Email, phone, and postcode format checks.
• Smooth animations for field interactions.
• On tapping “Pay,” disable the form, show a loader, and wait for the server response.
• Display a receipt or error message after processing.
3. Responsive Design:
• Optimized for both desktop and mobile.

Requirements:
• Use NMI Collect.js for sensitive fields (Card Number, CVV, Expiration Date).
• Clean, commented HTML, CSS, and JavaScript.

Deliverables:
• Fully functional payment form with animations.
• Clear setup instructions.

Timeline: 1 Week
Budget: 250-500 USD Depends on the quality of the work

Please share examples of previous work or mockups if available.
Related categories: JavaScript CSS HTML5 HTML Webflow