Skip to main content

VORA Mirror — embedded payment fields

Drop VORA Mirror into your checkout and your buyer's card information flows directly to the gateway — never touching your server, never landing in your DOM. The iframe sits inside your form, styled to match, but the card data reflects straight through to the processor on the other side. You keep full branding control of the page; we keep you out of PCI scope.

This is the embedded path. The alternative is hosted checkout — buyer redirects to checkout.vonpay.com. VORA Mirror gives you full branding control; hosted is faster to integrate.

Pages in this section​

  • Quickstart — end-to-end card-only integration in ~10 minutes
  • Interactive playground — pick a theme, edit the style JSON, copy the generated snippet, optionally mount a live sandbox field
  • Preview & customization — three reference themes (default / light / dark), what's stylable, what isn't, clone-and-run sample app
  • Elements reference — Card, Address, Email, Cardholder, Save-for-future-use, plus coming-soon Express Checkout (Apple Pay / Google Pay) and Saved methods
  • Using React — <VORAProvider>, <CardField>, useVORA() patterns + the imperative API for multi-element checkouts
  • Error handling — FrameError codes and recovery
  • 3D Secure — modal harmonization, disable3dsModal opt-out, confirmPaymentIntent + handleAction flows, test cards

Working sample​

samples/frame-react in the SDK repo is the canonical end-to-end reference — Express server stub for /api/create-session plus a React app using @vonpay/vora-react. Clone, fill in .env, pnpm dev.

Server-side reference​

The server-side payment lifecycle (/v1/payment_intents, capture, refund, void, MIT, webhooks) is shared with the hosted-checkout flow: