Payment Elements is EveryPay's pre-built payment UI component. Embed it in your checkout page and it handles everything your customers need to complete a payment — card entry, bank selection, and digital wallets — without you building or maintaining individual payment forms.
A single integration gives you access to all supported payment methods. The component renders directly on your page and manages input validation, redirect flows, and payment confirmation automatically.
Supported payment methods
Card
Open Banking
Apple Pay
Google Pay
PayPal
Why use Payment Elements
One integration, all methods Add every supported payment method through a single SDK — no separate integrations to maintain as your payment method coverage grows.
Built-in validation The component validates card numbers, expiry dates, and CVCs automatically before your code ever runs, reducing failed payments caused by input errors.
Faster time to live A pre-built UI means less front-end work. Mount the component, wire up your backend, and you're ready to accept payments.
Familiar checkout experience Customers see a consistent, well-tested UI for every payment method — reducing friction at the point of payment.
Tokenization support Request a payment token alongside a transaction to support recurring or unscheduled charges, configurable per session.
Tabs or accordion layout Choose between a tab-based or accordion layout to match how your checkout page is structured.
Built for secure, compliant checkouts Designed to meet PCI DSS SAQ A requirements — card data never touches your servers, keeping your compliance scope minimal. Read more about PCI DSS SAQ A.
Fits your brand
Payment Elements ships with a clean light theme that works out of the box. When you need to align the component with your brand, you can override the full set of CSS custom properties — background colors, button styles, input borders, focus rings, border radius, and fonts — by setting them as inline styles on the container element before mounting.
No external stylesheet changes are required. Overrides are scoped to the container element, so the component never interferes with the rest of your page styles.
How the integration works
Payment Elements follows a three-step flow:
Mount — the SDK renders the payment form into a container you provide on your checkout page.
Submit — when the customer clicks Pay, the SDK validates their input and returns control to your code.
Confirm — your backend creates a payment intent with EveryPay and passes the result back to the SDK to complete the transaction.
Card, Open Banking, and PayPal payments redirect the customer to a return URL you control before completing. Apple Pay and Google Pay complete inside a wallet sheet without leaving the page. In both cases, payment status should always be verified server-side before fulfilling an order.
Documentation & resources
The full developer reference — SDK setup, configuration options, error handling, tokenization, and a going-live checklist — is attached below.
The integration guide is provided as a Markdown (.md) file and is best viewed in a Markdown-compatible viewer or editor.
Examples
