Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@evervault/react

Package Overview
Dependencies
Maintainers
5
Versions
50
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@evervault/react - npm Package Compare versions

Comparing version 1.2.0 to 2.0.1

dist/evervault-react.main.d.ts
dist/evervault-react.main.js
dist/evervault-react.main.umd.cjs
LICENSE

53

package.json
{
"private": false,
"name": "@evervault/react",
"version": "1.2.0",
"version": "2.0.1",
"description": "React package for the Evervault SDK",
"main": "./build/lib/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npx webpack --mode=production"
"license": "MIT",
"type": "module",
"files": [
"dist"
],
"repository": {
"type": "git",
"url": "https://github.com/evervault/evervault-js.git",
"directory": "packages/react"
},
"main": "dist/evervault-react.main.umd.cjs",
"module": "dist/evervault-react.main.js",
"types": "dist/evervault-react.main.d.ts",
"exports": {
".": {
"import": "./dist/evervault-react.main.js",
"require": "./dist/evervault-react.main.umd.cjs"
}
},
"peerDependencies": {
"react": ">=16.12.0"
"react": ">=18.0.0"
},
"author": "",
"license": "ISC",
"dependencies": {
"@babel/runtime": "^7.18.3",
"@evervault/sdk": "^0.6.0",
"prop-types": "^15.7.2"
"devDependencies": {
"@evervault/browser": "^2.11.0"
},
"devDependencies": {
"@babel/core": "^7.7.4",
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/plugin-transform-react-jsx": "^7.10.4",
"@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.7.4",
"@babel/preset-react": "^7.7.4",
"babel-loader": "^8.1.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.12"
"scripts": {
"format": "prettier --write .",
"format:check": "prettier --check .",
"typecheck": "tsc --noEmit",
"build": "vite build",
"dev": "vite"
}
}
}

177

README.md

@@ -15,3 +15,3 @@ [![Evervault](https://evervault.com/evervault.svg)](https://evervault.com/)

See the Evervault [React.js SDK documentation](https://docs.evervault.com/reference/react-sdk).
See the Evervault [React.js SDK documentation](https://docs.evervault.com/sdks/react-sdk).

@@ -34,3 +34,3 @@ ## Installation

Use the `<EvervaultProvider>` component as a provider for your app.
Use the `<EvervaultProvider>` component as a provider for your app.

@@ -42,3 +42,3 @@ ```jsx

return (
<EvervaultProvider teamId={"<TEAM_ID>"} appId={"<APP_ID>"}>
<EvervaultProvider teamId="<TEAM_ID>" appId="<APP_ID>">
<ChildComponent />

@@ -52,3 +52,3 @@ </EvervaultProvider>

Once you've added the `<EvervaultProvider>`, you can access the `useEvervault()` hook in its children. The `useEvervault()` hook returns an initialized instance of the [JavaScript SDK](https://docs.evervault.com/sdks/javascript-sdk), which includes the `encrypt()` function. The `encrypt()` function can can be used to encrypt plaintext data in your application.
Once you've added the `<EvervaultProvider>`, you can use the `useEvervault()` hook in its children. The `useEvervault()` hook returns an initialized instance of the [JavaScript SDK](https://docs.evervault.com/sdks/javascript-sdk), which includes the `encrypt()` function.

@@ -84,6 +84,8 @@ ```jsx

The `EvervaultProvider` component exposes the `useEvervault()` hook to any nested components.
The `EvervaultProvider` component exposes the `useEvervault()` hook to any nested components.
```jsx
<EvervaultProvider teamId={String} appId={String} />
<EvervaultProvider teamId="<TEAM_ID>" appId="<APP_ID>">
<App />
</EvervaultProvider>
```

@@ -95,3 +97,3 @@

| --------- | ------ | ----------------------------------------------------------------- |
| `teamId` | String | The unique identifier for your Team. It's found in Team Settings. |
| `teamId` | String | The unique identifier for your Team. It's found in Team Settings. |
| `appId` | String | The unique identifier for your App. It's found in App Settings. |

@@ -103,3 +105,3 @@

The `useEvervault` hook is accessible in children of the `EvervaultProvider`, and returns an initialized instance of the Evervault [JavaScript SDK](https://docs.evervault.com/sdks/javascript-sdk). One of the functions included in the returned object is `encrypt()`, which can be passed any plaintext data structure.
The `useEvervault` hook is accessible in children of the `EvervaultProvider`, and returns an initialized instance of the Evervault [JavaScript SDK](https://docs.evervault.com/sdks/javascript-sdk). One of the functions included in the returned object is `encrypt()`, which can be passed any plaintext data structure.

@@ -114,3 +116,3 @@ ```jsx

Encrypts data using [Evervault Encryption](/security/evervault-encryption). Evervault Strings can be used across all of our products. It is accessible on the returned value from the `useEvervault()` hook. To encrypt data using the React.js SDK, simply pass a `String` or an `Object` into the `evervault.encrypt()` function.
Encrypts data using [Evervault Encryption](https://docs.evervault.com/security/evervault-encryption). Evervault Strings can be used across all of our products. It is accessible on the returned value from the `useEvervault()` hook. To encrypt data using the React.js SDK, simply pass a `String` or an `Object` into the `evervault.encrypt()` function.

@@ -125,5 +127,5 @@ The encrypted data can be passed to your server and stored in your database as normal. It can also be used with any of Evervault’s other services.

| Parameter | Type | Description |
| --------- | ---------------- | -------------------- |
| `data` | String \| Object | The data to encrypt. |
| Parameter | Type | Description |
| --------- | ------------------------------------------------------- | --------------------- |
| data | `Object`, `Array`, `String`, `Number`, `File` or `Blob` | Data to be encrypted. |

@@ -134,10 +136,6 @@ ---

The `<EvervaultInput />` component makes it easy to use [Evervault Inputs](/products/inputs) in your React application. Inputs make it easy to collect encrypted cardholder data in a completely PCI-compliant environment.
Use [Evervault Inputs](https://docs.evervault.com/products/inputs) to securely collect encrypted cardholder data. Evervault Inputs are served within an iFrame retrieved directly from Evervault’s PCI-compliant infrastructure, which can reduce your PCI DSS compliance scope to the simplest form (SAQ A).
Evervault Inputs are served within an iFrame retrieved directly from Evervault’s PCI-compliant infrastructure, which can reduce your PCI DSS compliance scope to the simplest form (SAQ A).
Evervault Inputs also support [themes](https://docs.evervault.com/products/inputs/#themes) and custom styles so you can customise how Inputs looks in your UI.
Simply include the component in your JSX to get started.
The component also supports [themes](/products/inputs/#themes) and custom styles so you can customise how Inputs looks in your UI.
### Props

@@ -173,14 +171,27 @@

| `config.disableCVV` | Boolean | Removes the CVV field from Inputs, showing only the Card Number and Expiry fields |
| `config.disableExpiry` | Boolean | Removes the Expiry field from Inputs, showing only the Card Number and CVV fields |
### Retrieving card data
There are two ways of accessing encrypted card data once it has been entered.
To access the encrypted card data, you must pass an `onChange` handler. This function will be called any time the card data is updated and is passed an object with the encrypted card details as well as validation information.
In each case, a `cardData` object containing details about the card data your user has entered is returned.
```jsx
function Payment() {
const handleChange = ({ encryptedCard, isValid }) => {
if (isValid) {
console.log(encryptedCard);
}
};
You can see the format of this object below:
return <EvervaultInput onChange={handleChange} />;
}
```
```json
#### onChange callback params
The onChange callback will be passed the following object as a parameter.
```js
{
"card": {
"encryptedCard": {
"type": "visa_credit",

@@ -191,2 +202,3 @@ "number": "ev:encrypted:abc123",

"expYear": "23"
"lastFour": "1234"
},

@@ -203,21 +215,7 @@ "isValid": true,

#### onChange()
The callback function is run every time your user updates the card data.
```javascript
<EvervaultProvider teamId={"<TEAM_ID>"} appId={"<APP_ID>"}>
<div className="App">
<EvervaultInput
onChange={(encryptedCard) => setEncryptedCard(encryptedCard)}
/>
</div>
</EvervaultProvider>
```
### Localization
The iFrame can be localized on initialization by providing a set of labels in the [config](#inputs-params-config).
The iFrame can be localized on initialization by providing a set of labels in the [config](https://docs.evervault.com/sdks/reactjs#input-props-config).
```javascript
```jsx
const config = {

@@ -229,7 +227,3 @@ cardNumberLabel: 'Numéro de carte:',

<EvervaultProvider teamId={'<TEAM_ID>'} appId={'<APP_ID>'}>
<div className="App">
<EvervaultInput onChange={(encryptedCard) => setEncryptedCard(encryptedCard)} config={config} />
</div>
</EvervaultProvider>
<EvervaultInput onChange={handleChange} config={config} />
```

@@ -241,3 +235,3 @@

```javascript
```jsx
const config = {

@@ -252,7 +246,3 @@ fontUrl: 'https://fonts.googleapis.com/css2?family=Poppins:wght@100;800&display=swap',

<EvervaultProvider teamId={'<TEAM_ID>'} appId={'<APP_ID>'}>
<div className="App">
<EvervaultInput onChange={(encryptedCard) => setEncryptedCard(encryptedCard)} config={config} />
</div>
</EvervaultProvider>
<EvervaultInput onChange={handleChange} config={config} />
```

@@ -264,10 +254,85 @@

```javascript
<EvervaultProvider teamId={'<TEAM_ID>'} appId={'<APP_ID>'}>
<div className="App">
<EvervaultInput onInputsLoad={() => { console.log("Inputs has loaded!")}} />
</div>
</EvervaultProvider>
```jsx
<EvervaultInput
onInputsLoad={() => {
console.log("Inputs has loaded!");
}}
/>
```
## `<EvervaultReveal />`
Use [Evervault Reveal](https://docs.evervault.com/products/inputs#reveal) to show encrypted card
details to show your users their encrypted card details in plaintext in a secure iFrame hosted by
Evervault. Before using Reveal you'll first have to create a Relay to decrypt the card details;
Reveal expects to receive the card data from the Relay as a JSON object with the schema below.
Note: It is important that the endpoint that you create sets the applicable CORS headers so that it
can be accessed from the Inputs iFrame. Otherwise your requests will fail!
```json
{
"cardNumber": "string | number",
"cvv": "string | number",
"expiry": "string | number"
}
```
Once you have your endpoint that returns the encrypted card data, you'll need to create an
[Evervault Inbound Relay](https://docs.evervault.com/products/inbound-relay) that will decrypt the
encrypted card data as is passes through it, before it gets to the iFrame. Once you have created
your Relay you can add the component to your React app.
```jsx
export default function Reveal() {
const request = {
url: "https://blackhole-posterior-io.relay.evervault.com/4m0s3d",
method: "GET",
headers: {
Authorization: "Bearer ey...",
},
};
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<EvervaultReveal request={request}></EvervaultReveal>
</main>
);
}
```
The only required field is `request` which takes an object that supports all of the same fields as a [Javascript Request Object](https://developer.mozilla.org/en-US/docs/Web/API/Request). The URL must be the Evervault Inbound
Relay you configured earlier.
### Props
| Parameter | Type | Description |
| ----------------------------------- | ---------------- | ----------------------------------------------------------------------------------------------- |
| `onRevealLoad` | Function | A function that is called when the iFrame that serves Reveal has loaded. |
| `config` | String \| Object | A theme string (supported: default, minimal or material), or a config object for custom styles. |
| `config.theme` | String | The base styling for Inputs. Currently supports default, minimal and material. |
| `config.height` | String | The height of the Evervault Inputs iframe. |
| `config.primaryColor` | String | The main theme color. |
| `config.labelColor` | String | The color CSS property applied to the input labels. |
| `config.inputBorderColor` | String | The border-color CSS property applied to inputs. |
| `config.inputTextColor` | String | The color CSS property applied to inputs. |
| `config.inputBackgroundColor` | String | The color CSS property applied to the ::placeholder CSS pseudo-element for inputs. |
| `config.inputBorderRadius` | String | The border-radius CSS property applied to inputs. |
| `config.inputHeight` | String | The height CSS property applied to inputs. |
| `config.cardNumberLabel` | String | The label for the card number input |
| `config.expirationDateLabel` | String | The label for the expiration date input |
| `config.securityCodeLabel` | String | The label for the security code input |
| `config.expirationDatePlaceholder` | String | The placeholder for the expiration date input |
| `config.invalidCardNumberLabel` | String | The message shown on an invalid card number |
| `config.invalidExpirationDateLabel` | String | The message shown on an invalid expiration date |
| `config.invalidSecurityCodeLabel` | String | The message shown on an invalid security code |
| `config.fontUrl` | String | Load a custom font with the Google Fonts API |
| `config.fontFamily` | String | Set the font-family for the fontUrl |
| `config.inputFontSize` | String | Set the font-size property of the input attribute |
| `config.inputBoxShadow` | String | Set the box-shadow property of the input attribute |
| `config.labelFontSize` | String | Set the font-size property of the label attribute |
| `config.labelWeight` | String | Set the font-weight property of the label attribute |
| `config.disableCVV` | Boolean | Removes the CVV field from Inputs, showing only the Card Number and Expiry fields |
| `config.disableExpiry` | Boolean | Removes the Expiry field from Inputs, showing only the Card Number and CVV fields |
## Contributing

@@ -274,0 +339,0 @@ 

.github/CODEOWNERS
.github/pull_request_template.md
.github/workflows/build.yml
.github/workflows/codeql.yml
.github/workflows/publish.yml
build/lib/index.js
index.d.ts
index.js
webpack.config.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc