Compliantly collect or display card data
Browser components to securely collect or display your customers’ card data while minimizing your PCI compliance scope. Fully customizable and easy to integrate.
Customizable components for any payments workflow
UI Components is served within an iframe retrieved directly from Evervault’s PCI-compliant infrastructure.
The Card component allows you to securely collect and encrypt cards without handling sensitive PCI data in plaintext.
1import { Card } from "@evervault/react";
2import { theme } from "./theme";
3
4export function Component() {
5 const handleChange = payload => {
6 console.log(payload);
7 };
8
9 return (
10 <Card theme={theme} onChange={handleChange} />;
11 )
12};Get started with UI Components
Start integrating a fully compliant payments workflow with only a few lines of code.
Integrate
UI Components can be used with either the Evervault React or JavaScript SDK. Once installed, you can use the Card, Pin and Reveal components in your client-side application.
1import { Card, themes } from "@evervault/react"
2
3const theme = themes.clean()
4
5export function Checkout() {
6 const handleChange = payload => {
7 console.log(payload)
8 }
9
10 return (
11 <Card theme={theme} onChange={handleChange} />
12 )
13}Customize
Each UI Component can be fully customized to match your brand. The SDK exposes three built-in themes, which can also be extended using a CSS-in-JS format to style your components even more.
Collect or Display
Once your UI Component has been integrated and styled, you can start collecting or displaying card data. In this Card example, data is encrypted within the Evervault-hosted iframe before being returned to the browser.
Secure, compliant and fully customizable
UI Components was designed to simplify the process of building compliant payments workflows. They're flexible, secure and fully compliant under PCI DSS.
Fully Compliant
Evervault is fully compliant with standards like PCI DSS, HIPAA and GDPR.
Infinitely Customizable
UI Components has full CSS-in-JS support, as well as three base themes to get you started.
React or JavaScript
UI Components is supported in the Evervault React.js and JavaScript SDKs.
Multiple Components
Whether you're collecting or display cards or PINs, there's a UI Component for it.
Fundamentally Configurable
Configure errors, breakpoints and loading states using a simple API.
Translation Support
Support multiple languages by passing a translations object to any UI Component.
Adapt UI Components for any workflow
UI Components can be configured to support any payments workflow — without ever handling plaintext card data.
Compatible with each Evervault Primitive
Primitives are building blocks for developers. They're fundamental, interoperable products for constructing any data security or compliance workflow.
Read the docs