ecommerce

Stripe Checkout Form

A minimalist secure payment form.

checkout form payment | GPT 5.3 Ultra

Prompt

# Role
You are a Senior Architect and Full-Stack Expert specializing in secure payment interfaces and conversion-optimized checkout flows.

# Objective
Build a minimalist, Stripe-inspired checkout form that collects payment details securely with a polished dark-mode UI, real-time validation, and clear visual feedback.

# Instructions
1. Create a checkout form with the following fields:
   - Email address (with email validation)
   - Cardholder name (text input)
   - Card number (formatted as groups of 4 digits with auto-spacing)
   - Expiration date (MM/YY format with dual input or masked single input)
   - CVC (3-digit input, masked)
   - ZIP / Postal code
2. Add an order summary section above or beside the form:
   - Line items with name and price
   - Subtotal, tax, and total amount displayed clearly
3. Include a prominent "Pay $XX.XX" submit button:
   - Disabled state until all fields are valid
   - Loading spinner state on submission
4. Style the entire form in dark mode using Tailwind CSS:
   - Subtle borders, rounded inputs, focus ring indicators
   - Card brand icon detection area (Visa, Mastercard placeholder)
5. Implement client-side validation:
   - Real-time error messages below each field
   - Success checkmarks on valid fields

# Constraints
- Use semantic HTML with proper ARIA labels and roles
- Tailwind CSS only for styling — no custom CSS unless absolutely necessary
- Do not include actual payment processing logic — this is a UI-only component
- Ensure full keyboard navigation support
- Mobile-responsive: single-column layout on small screens

# Output Format
- Single HTML file using Tailwind CSS CDN
- Well-structured, accessible markup with inline comments
- Form should be visually centered on the page with max-width of 480px

Notes

Prompt

Role

You are a Senior Architect and Full-Stack Expert specializing in secure payment interfaces and conversion-optimized checkout flows.

Objective

Build a minimalist, Stripe-inspired checkout form that collects payment details securely with a polished dark-mode UI, real-time validation, and clear visual feedback.

Instructions

Create a checkout form with the following fields:
- Email address (with email validation)
- Cardholder name (text input)
- Card number (formatted as groups of 4 digits with auto-spacing)
- Expiration date (MM/YY format with dual input or masked single input)
- CVC (3-digit input, masked)
- ZIP / Postal code
Add an order summary section above or beside the form:
- Line items with name and price
- Subtotal, tax, and total amount displayed clearly
Include a prominent “Pay $XX.XX” submit button:
- Disabled state until all fields are valid
- Loading spinner state on submission
Style the entire form in dark mode using Tailwind CSS:
- Subtle borders, rounded inputs, focus ring indicators
- Card brand icon detection area (Visa, Mastercard placeholder)
Implement client-side validation:
- Real-time error messages below each field
- Success checkmarks on valid fields

Constraints

Use semantic HTML with proper ARIA labels and roles
Tailwind CSS only for styling — no custom CSS unless absolutely necessary
Do not include actual payment processing logic — this is a UI-only component
Ensure full keyboard navigation support
Mobile-responsive: single-column layout on small screens

Output Format

Single HTML file using Tailwind CSS CDN
Well-structured, accessible markup with inline comments
Form should be visually centered on the page with max-width of 480px

Notes

Perfect for quick integration into any Astro, Next.js, or static project.
Use inputmode="numeric" on card fields for mobile number keyboards.
Consider adding subtle transition animations on focus and validation states.

Related Prompts

Multi-Step Form Wizard

Progressive form with step indicator and validation.

# Role You are a Senior Frontend Engineer specializing in UX, form design, and client-side validation patterns. # Objective Build a multi-step form wizard with a visual step indicator, field validation, a review step, and smooth slide transitions between each stage. # Instructions 1. Create a step indicator bar at the top: - 3 numbered circles connected by horizontal lines - Active step: filled accent color with white number - Completed step: green with checkmark icon - Upcoming step: muted/gray outline - Lines between steps fill with color as steps complete 2. Build 3 form steps: - **Step 1 — Personal Info**: Full name (required), email (required, validated), phone (optional) - **Step 2 — Preferences**: Preferred contact method (radio buttons), newsletter opt-in (checkbox), timezone (select dropdown) - **Step 3 — Review & Submit**: Display all entered data in a read-only summary, edit button per section to jump back 3. Add navigation controls: - "Previous" button (hidden on Step 1) - "Next" button (disabled until required fields are valid) - "Submit" button on the final review step 4. Implement validation: - Validate required fields before allowing progression to the next step - Show inline error messages below invalid fields - Highlight invalid fields with red border 5. Add slide transitions: - Use `transform: translateX()` with transition for horizontal sliding between steps - Current step slides out, next step slides in # Constraints - Vanilla HTML, CSS, and JavaScript only — no frameworks or libraries - Client-side validation only (HTML5 + JavaScript) - Disable the "Next" button until all required fields on the current step pass validation - Form must be keyboard-navigable: Tab through fields, Enter to advance - Dark mode compatible styling - Single-page form — no actual page navigation # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Use `translateX()` for slide transitions between steps - Include realistic placeholder content and sample data - Well-commented code with clear separation of each step

form wizard steps +1

GPT 5.3 Ultra

Newsletter Signup Form

Inline email capture with validation and success state.

# Role You are a Senior Email Developer and HTML Specialist with expertise in conversion-optimized signup forms and accessible interactive components. # Objective Design an inline newsletter signup form with real-time email validation, a polished success state, and a visually refined focus effect — optimized for embedding in landing pages and footers. # Instructions 1. Build a single-line form layout: - Email text input and submit button side by side on one row - Input takes majority width; button on the right - Rounded container with subtle border 2. Implement the email input: - Placeholder text: "Enter your email" - `type="email"` for native validation baseline - Gradient border effect on focus (animated or static) - Proper `<label>` element (visually hidden if needed, but present for screen readers) 3. Add client-side validation: - Validate email format on blur and on submit - Show error message below the input (red text, subtle fade-in) - Disable submit button while input is empty or invalid 4. Implement the success state: - On successful submission, replace the form with: - Animated checkmark icon (CSS or SVG) - Success message: "You're subscribed!" - Smooth transition between form and success state (300ms ease-out) 5. Style with dark mode aesthetics: - Dark input background, light placeholder text - Accent-colored submit button with hover brightness - Gradient border visible on focus state # Constraints - Semantic HTML with proper `<form>`, `<label>`, `<input>`, and ARIA attributes - Full keyboard navigation: Tab to input, Enter to submit - `aria-live="polite"` on the error/success message container for screen readers - No external dependencies — vanilla HTML, CSS, and JavaScript - Form should not actually submit — simulate with JavaScript state change - Max-width: 500px, centered # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include both error and success states in the implementation - Well-commented code with transitions clearly documented

newsletter form email +1

Claude 4.6 Opus