Skip to main content
Design custom card payment form layouts with live preview and platform-specific code generation. Select your platform, choose a layout preset, toggle fields, configure platform-specific options, and copy the generated code.

​
How to Use

  1. Select a platform: Web, iOS, or Android
  2. Choose a layout preset: Vertical, grouped, compact, or single-line
  3. Toggle fields: Enable or disable optional fields like cardholder name and submit button
  4. Configure options: Platform-specific controls for styling, theming, and form behavior
  5. Copy the code: Switch between code tabs and use the copy button

​
Layout Presets

PresetDescriptionBest For
VerticalAll fields stacked in a single columnSimple forms, mobile-first designs
GroupedExpiry and CVV side by sideStandard desktop layouts
CompactMinimal height with 2-column gridSpace-constrained UIs
Single-lineCore card fields in one rowInline checkout experiences

​
See also

Layout customization

Learn about slot-based layout customization

Styling customization

CSS variables and styling options

Design tokens explorer

Interactive token visualization

Card Form Scope (iOS)

iOS card form scope API reference