UI Components

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.

User's cardCollect or DisplayServer

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";
4export function Component() {
5  const handleChange = payload => {
6    console.log(payload);
7  };
9  return (
10    <Card theme={theme} onChange={handleChange} />;
11  )

Get started with UI Components

Start integrating a fully compliant payments workflow with only a few lines of code.

Step 1


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"
3const theme = themes.clean()
5export function Checkout() {
6  const handleChange = payload => {
7    console.log(payload)
8  }
10  return (
11    <Card theme={theme} onChange={handleChange} />
12  )
Step 2


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.

Step 3

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.

User's cardYour applicationCard UI Component

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

Meet compliance requirements. Build customer trust.

Use Evervault’s flexible building blocks to keep your customers’ data secure and compliant at all times.