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

​
See also

Layout customization

Learn about slot-based layout customization

Styling customization

CSS variables and styling options

Design tokens explorer

Interactive token visualization

PrimerCardForm (iOS)

iOS card form view and slot API reference