React Native SDK

You can use our React Native SDK to:

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

Quickstart

Install SDK

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

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.

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.

Reference

<EvervaultProvider />

CardPayload

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

<Card />

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

Make sure you have initialized the Evervault SDK before using the Card component.

You may render some or all of the available Card Sub-Components.

The onComplete field of the payload will be true when all of the currently rendered fields are filled out successfully with valid values. For example, if you were to omit the <Card.CVC /> component and render the <Card.Number />, <Card.Expiry /> and <Card.Holder /> components. The onComplete field will be true, when the three rendered components have valid values.

Card Input Components

The Card component has support for collecting Card Number, Expiry, CVC and Card Holder information. These components accept almost all the same properties as the standard React Native TextInput component.

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

<Card.Holder />

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

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.

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.

<ThreeDSecure />

This is a provider module which provides access to the 3DS authentication process. It should be used in combination with the useThreeDSecure hook. The <ThreeDSecure /> provider 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.

<ThreeDSecure.Frame />

The <ThreeDSecure.Frame /> component is used to display the 3DS webview inside your own custom components. It is available within the <ThreeDSecure /> provider component. It should be used in combination with the useThreeDSecure hook. The component returns a webview which will handle the authentication process. You will need to use the cancel() method, returned from the useThreeDSecure hook, to handle the user closing the 3DS webview before completion.

encrypt(data)

On iOS you can pass data types like Booleans, Objects and Arrays to the encrypt function. The full list of supported data types can be found in our iOS SDK Documentation.

Currently on Android only encrypting Strings is supported.

init(teamId, appId)

The init function initializes the Evervault SDK with your Team and App ID. You only need to do this once in your application, but must run the command before using any other Evervault functions or components.