Guides

React Native SDK

You can use our React Native SDK to:

  • Encrypt data client-side
  • Collect Card Data

Quickstart

Install SDK

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

Initialize SDK

Once installed, initialize the React Native SDK with your Team and App ID found in the Evervault Dashboard.

Use the init function to initialize the SDK. You only need to do this once in your application.

Encrypt a String

After initializing the SDK, you can use the encrypt function to encrypt a String.

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.

Reference

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.

Parameters
teamIdRequiredString

The Team ID found in the Evervault Dashboard.

appIdRequiredString

The App ID found in the Evervault Dashboard.

CardPayload

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

Properties
card.nameString

The card holder name.

card.numberString

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

card.brandString

The global payment card brand associated with the card.

card.localBrandsArray<String>

The local payment card brands that are accepted by the card

card.lastFourString

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

card.binString

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

card.expiry.monthString

The month for the card expiry field.

card.expiry.yearString

The year for the card expiry field.

card.cvcString

The encrypted card CVC.

errors{ [field]: 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.

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

Props
configCardConfig
initialValueCardForm

Initial Values for the card fields.

onChange(payload: CardPayload) => void

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

styleStyleProp<TextStyle>

The style to apply to the container component.

<Card.Number />

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

Props
autofocusBoolean

Whether or not the input should be autofocused.

styleStyleProp<TextStyle>

The style to apply to the container component.

disabledBoolean

Whether or not the input is disabled.

placeholderString

The placeholder text for the input.

readOnlyString

Whether or not the input is read-only.

<Card.Expiry />

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

Props
styleStyleProp<TextStyle>

The style to apply to the container component.

disabledBoolean

Whether or not the input is disabled.

placeholderString

The placeholder text for the input.

readOnlyString

Whether or not the input is read-only.

<Card.CVC />

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

Props
styleStyleProp<TextStyle>

The style to apply to the container component.

disabledBoolean

Whether or not the input is disabled.

placeholderString

The placeholder text for the input.

readOnlyString

Whether or not the input is read-only.

<Card.Holder />

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

Props
styleStyleProp<TextStyle>

The style to apply to the container component.

disabledBoolean

Whether or not the input is disabled.

placeholderString

The placeholder text for the input.

readOnlyString

Whether or not the input is read-only.

encrypt(data)

Parameters
dataRequiredany

The data to encrypt.

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.