If you’ve ever worked with payment card information, you’ll know that the greatest challenge is meeting the strict compliance requirements that apply to its collection, storage and use.

Evervault UI Components are easy to integrate premade components that allow you to be fully compliant just by meeting SAQ A requirements.

The Evervault Card UI Component is available in our client-side SDKs. Encrypted card details can be processed or shared with third parties using Functions, Enclaves or Outbound Relay.

Getting Started

Adding UI Components to a React application can be done in fewer than 10 lines of code. To get started, you will need:

• An Evervault account (You can signup here)
• An Evervault app API key. (You can create one in your app settings page)
• The latest version of node.js

Creating a Demo App with React

For this guide, you will install Evervault Inputs in a React application.

To create a React app and install the Evervault SDK, run the following commands:

To start your app run the following command:

You should now be able to view the demo app by navigating to http://localhost:3000 in your web browser.

Setting up Evervault React SDK

First, you need to initialize the <EvervaultProvider> JSX component with your Evervault App and Team ID. This setup allows child components to use any of the Evervault React SDK functionality.

In the demo app, you'll add the <EvervaultProvider> to src/index.js

Your src/index.js should look something like the following:

Using the Card UI Component

The Card Component is a JSX component that accepts an onChange prop and an optional theme prop for styling. In this example, you will log the encrypted card number to the browser’s console. In a real-world application, you would likely store the encrypted data and then use it with either Functions, Enclaves or Outbound Relay to validate and/or share the cardholder data.

To use it in the demo app, add the <Card> component to src/App.js by copying and pasting the code below.

Custom Styling

UI Comopnents also support custom styling through the optional theme parameter. To learn more about styling, check out the styling documentation for UI Components.

What’s Next?

Now that you have encrypted card data, what’s next?

Using Evervault, you can process or share the encrypted data. You could use a Function or an Enclave to return the last 4 digits of the card number, or you could use Outbound Relay to send the encrypted data to a payments processor, and have it decrypted in-flight so that they receive the card details in plaintext.