VORA Mirror — Interactive playground
Three ways to make VORA Mirror look like yours: pick a theme, edit the style JSON by hand, or paste your site URL and we'll match it for you. Every element renders live as you change settings; copy the integration snippet when you're happy.
How it works
Four things happen in this page:
- Static preview (always on) — every VORA Mirror element renders as a pure-DOM stand-in that respects the current style + layout. No network call required.
- Theme & JSON tab — pick a preset (Default / Light / Dark) or hand-edit the style JSON. Changes apply live to every element in the preview.
- Match my site tab ⭐ — paste your site's public URL or your stylesheet, and we extract a
VORAFieldStyleconfig that matches your fonts, colors, radius, and spacing. Skip writing any style code at all. - Code generator — the snippet under the preview reflects whatever's in the JSON editor. Copy it; replace
vp_pk_test_...with your own publishable key; wire the session-mint step to your server.
Optionally click Try with live SDK to mount a real card iframe against our sandbox demo merchant. Test card 4242 4242 4242 4242 (any future expiry / any CVC) tokenizes end-to-end.
When backend features aren't enabled in this environment (either endpoint returns 503), the static preview + code generator still work — only the SDK mount / URL match is skipped.
What you can style
| Group | Keys |
|---|---|
font | family, size, weight, lineHeight |
color | primary, placeholder, error, icon |
spacing | padding |
border | color, width, radius |
background | color |
Anything outside the allowlist throws frame_style_invalid before the iframe mounts. See Preview & customization for the locked-down list and the rationale.
What's next
- Quickstart — end-to-end card-only happy path
- Elements — per-element options + collect shapes
- Preview & customization — reference themes + style rules
- React —
<VORAProvider>patterns - 3D Secure — modal harmonization +
confirmPaymentIntent