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.
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
As with all Evervault encrypted data, the card details you encrypt with Inputs will only be usable by other Evervault Primitives within the same App — so make sure that you use the right API Key by checking the App name under the App overview.
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.
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
src/index.js should look something like the following:
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.
UI Comopnents also support custom styling through the optional
theme parameter. To learn more about styling, check out the styling documentation for UI Components.
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.