Design custom card payment form layouts with live preview and generated code. Choose a layout preset, toggle components on/off, configure form options, and copy the generated HTML, CSS, and JavaScript code.
How to Use
- Choose a layout preset: Select from vertical, grouped, compact, single-line, or with-billing layouts
- Toggle components: Enable or disable optional components like cardholder name, billing address, and error container
- Configure form options: Set hide-labels and disabled state
- Customize submit button: Choose between different submit methods and button variants
- Copy the code: Switch between HTML, CSS, and JavaScript tabs and copy the generated code
Layout Presets
| Preset | Description | Best For |
|---|
| Vertical | All fields stacked in a single column | Simple forms, mobile-first designs |
| Grouped | Expiry and CVV side by side | Standard desktop layouts |
| Compact | Minimal height with 2-column grid | Space-constrained UIs |
| Single-line | Core card fields in one row | Inline checkout experiences |
| With Billing | Full form with billing address | Complete checkout flows |
The card form supports multiple ways to trigger submission:
| Method | Use Case |
|---|
primer-card-form-submit | Built-in localized button |
button type="submit" | Standard HTML button styling |
primer-button type="submit" | Primer-styled button |
button data-submit | Custom element trigger |
| External (JS event) | Button outside the checkout component |
When using external submit, set submitButton.useBuiltInButton: false in your SDK options and dispatch the primer:card-submit event with bubbles: true and composed: true.
See also
