DocsSDKsAPI
Dashboard

SDKs

React Native SDK

You can use our React Native SDK to:

  • Encrypt data client-side
  • Collect card data securely
  • Perform 3D Secure authentication

Installation

Our React Native SDK is distributed via npm, and can be installed using your preferred package manager.

The react-native-webview package is a peer dependency and will need to be installed as well.

Linking

This package supports autolinking.

Expo

This library has native code, so it does not work with Expo Go. However, you can install it using a custom development build.

Proguard Rules

If you are using code shrinking with ProGuard for Android, you will need to specify exclusion rules for several Evervault dependencies. The required ProGuard rules can be found in our Android SDK docs.

Quickstart

Add the EvervaultProvider to your App

Wrap your app with the <EvervaultProvider /> component and pass your Team and App ID as props.

Your Team and App ID can be found in the Evervault Dashboard.

Collect Card Data

You can use the <Card /> component to collect card data securely.

If you don't need to collect all four types of supported Card Data, you can omit the relevant components.

However, the components cannot be used individually outside of the <Card /> component.

Perform 3D Secure Authentication

You can use the <ThreeDSecure /> component in combination with the Evervault API to perform 3DS authentications.

In order to use the 3DS component you must first create a 3DS session on your backend and pass it to your frontend. You can then use the <ThreeDSecure.Frame /> component to display the 3DS webview.

Components

<EvervaultProvider />

Wraps your app in a new Evervault context, scoped to a specific team and app.

Props
teamIdRequiredString

The Team ID found in the Evervault Dashboard.

appIdRequiredString

The App ID found in the Evervault Dashboard.

<Card />

The Card component is used to collect card data securely. It is a wrapper component that manages the state of the child input components:

You do not have to render all of the available child input components as children. For example, if you only need to collect a card number and expiry, you can omit the Card.Cvc and Card.Holder components.

The onComplete field will be true once all rendered fields are filled out successfully with valid values.

Props
acceptedBrandsCardBrandName[]

An array of card brands that are accepted. If not provided, all brands are accepted.

defaultValuesCardForm

Default values for the card fields.

onChange(payload: CardPayload) => void

A callback function that is called whenever the card data changes.

validationMode'onChange' | 'onBlur' | 'onTouched' | 'all'

The validation mode for the card fields. Defaults to all.

<Card.Holder />

Used as a child of <Card /> to collect the name of a card holder.

<Card.Number />

Used as a child of <Card /> to collect a card number.

<Card.Expiry />

Used as a child of <Card /> to collect a card expiry.

<Card.Cvc />

Used as a child of <Card /> to collect a card CVC.

<ThreeDSecure />

The ThreeDSecure component is used to provide access to the 3DS authentication process.

This component allows you to use the <ThreeDSecure.Frame /> component to display the 3DS webview. Any custom components you want to display alongside the 3DS webview should be wrapped in the ThreeDSecure component.

It should be used in combination with the useThreeDSecure hook.

Props
stateRequiredThreeDSecureState

The 3DS session state returned from the useThreeDSecure hook.

<ThreeDSecure.Frame />

The ThreeDSecure.Frame component is used to display the 3DS webview, which will handle the authentication process.

If the user closes the frame before completion, you will need to use the cancel() method (from the useThreeDSecure hook) to properly close the webview and clean up the session.

Props
styleStyleProp<ViewStyle>

The style for the inner WebView component.

Hooks

useEvervault()

The useEvervault hook is used to access the current Evervault scope in context.

Any component that uses this hook must be wrapped in the <EvervaultProvider /> component.

Returns

encrypt(data)

Encrypts the provided data using native encryption modules and the Evervault API.

Parameters
dataRequired

The data to encrypt.

useThreeDSecure()

The useThreeDSecure hook is used to manage the 3DS authentication process.

It returns an object with start() and cancel() methods. The returned object should be used with the <ThreeDSecure /> component.

Returns

start(sessionId, callbacks)

The start function is used to kick off the 3DS authentication process.

Parameters
sessionIdRequiredString

The 3DS session ID. A 3DS session can be created using the Evervault API.

callbacksThreeDSecureCallbacks

The callbacks to be called when the 3DS authentication process is finished.

cancel()

The cancel() function is used to cancel the ongoing 3DS authentication process. This can be particularly useful for canceling a session when a custom cancel button is triggered.

Types

CardBrandName

The type for the card brand name. One of the following:

  • american-express
  • visa
  • mastercard
  • discover
  • jcb
  • diners-club
  • unionpay
  • maestro
  • mir
  • elo
  • hipercard
  • hiper
  • szep
  • uat

CardPayload

The payload returned by the onChange callback of the <Card /> component.

Properties
card.namestring | null

The card holder name.

card.numberstring | null

The encrypted card number. This will only be present if the number is valid.

card.brandCardBrandName | null

The global payment card brand associated with the card.

card.localBrandsCardBrandName[]

The local payment card brands that are accepted by the card

card.lastFourstring | null

The last 4 digits of the card. This will only be present if the number is valid.

card.binstring | null

The bin for the card. This will only be present if the number id valid.

card.expiry.monthstring | null

The month for the card expiry field.

card.expiry.yearstring | null

The year for the card expiry field.

card.cvcstring | null

The encrypted card CVC.

errors{ name?: string, number?: string, expiry?: string, cvc?: string }

Validation errors related to the card details.

isValidboolean

Whether or not there are any errors present.

isCompleteboolean

Whether or not all of the fields have been filled out successfully with valid values.

EvervaultInput

The type for the ref that can be passed to the <Card /> input components.

It exposes a subset of the React Native TextInput methods.

EvervaultInputProps

The type for the props that can be passed to the <Card /> input components.

It is a subset of the React Native TextInputProps type.

ThreeDSecureState

The type for the state returned from the useThreeDSecure hook.

Properties
sessionThreeDSecureSession | null

The 3DS session object.

isVisibleboolean

Whether or not the <ThreeDSecure.Frame /> component is visible.

start(sessionId: string, callbacks?: ThreeDSecureCallbacks) => void

Starts the 3DS authentication process for the given session ID.

cancel() => void

Cancels the current 3DS authentication process.

Migration Guide

If your app currently uses @evervault/evervault-react-native, follow the steps below to migrate to the new package.

Install react-native-webview

The react-native-webview package is now a peer dependency and will need to be installed as well.

Update your imports

The package name has been updated to @evervault/react-native.

Remove top-level function calls

In the previous version, you could call init() and encrypt() directly from the package.

These functions are no longer exposed at the top level. Instead:

Update Card props

In the previous version, you could pass styles to the <Card /> component via the style prop.

The Card component no longer renders a View, so you should move the styles to a parent or child View.

The previous version also accepted acceptedBrands via the config prop. This has been moved top-level:

Finally, the initialValue prop has been renamed to defaultValues:

Rename Card.CVC to Card.Cvc

The Card.CVC prop has been renamed to Card.Cvc.