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 Inputs are easy to integrate premade UI components that allow you to be fully compliant just by meeting SAQ A requirements.

Evervault Inputs is available in our client-side SDKs. Card details encrypted with Inputs can be processed or shared with third parties using Functions, Cages or Outbound Relay.

Getting Started

Adding Inputs to a React application can be done in fewer than 10 lines of code. To get started with Inputs, 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:

npx create-react-app inputs \
&& cd inputs \
&& npm install @evervault/react

To start your app run the following command:

npm run start

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:

1
import React from 'react'
2
import ReactDOM from 'react-dom/client'
3
import './index.css'
4
import App from './App'
5
import { EvervaultProvider } from '@evervault/react'
6
7
const root = ReactDOM.createRoot(document.getElementById('root'))
8
root.render(
9
  <React.StrictMode>
10
    <EvervaultProvider teamId="<YOUR TEAM ID>" appId="<YOUR APP ID>">
11
      <App />
12
    </EvervaultProvider>
13
  </React.StrictMode>
14
)

Using Evervault Inputs

Inputs is a JSX component that accepts an onChange prop and an optional config 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, Cages or Outbound Relay to validate and/or share the cardholder data.

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

1
import logo from './logo.svg'
2
import './App.css'
3
import { EvervaultInput } from '@evervault/react'
4
5
function App() {
6
  const onUpdateCard = (cardDetails) => {
7
    console.log(cardDetails)
8
  }
9
10
  return (
11
    <div className="App">
12
      <header className="App-header">
13
        <EvervaultInput onChange={onUpdateCard} />
14
      </header>
15
    </div>
16
  )
17
}
18
19
export default App

Changing the style of your Inputs widget

Inputs also features full support for custom styling through the optional config parameter. To see a full list of the available style options, view the React SDK reference here. Below is an example of custom style configuration on the <EvervaultInput> component:

1
<EvervaultInput
2
  onChange={onUpdateCard}
3
  config={{
4
    theme: 'material',
5
    inputBackgroundColor: 'blue',
6
    fontSize: '16px',
7
    inputHeight: '40px',
8
  }}
9
/>

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 a Cage 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.