npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@stripe/stripe-identity-react-native

v0.2.13

Published

Stripe identity react native SDK library

Downloads

6,808

Readme

Stripe Identity React Native SDK

Stripe Identity enables online businesses to securely verify the identities of users around the world. Robust identity verification helps prevent fraud, simplify compliance, and increase trust. Stripe will use biometric technology (on images of you and your IDs) and other data sources. With the Stripe Identity React Native SDK, you can confidently verify the authenticity of ID documents from over 33 countries in your React Native application.

To get access to the Identity React Native SDK, visit the Identity Settings page and click Enable.

Getting started

Get started with our 📚 integration guides and example project.

Updating to a newer version of the SDK? See our changelog.

Features

Simplified security: We've made it simple for you to securely collect your user's personally identifiable information (PII) such as identity document images. Sensitive PII data is sent directly to Stripe Identity instead of passing through your server. For more information, see our integration security guide.

Automatic document capture: We automatically capture images of the front and back of government-issued photo ID to ensure a clear and readable image.

Prebuilt UI: We provide IdentityVerificationSheet, a prebuilt UI that combines all the steps required to collect ID documents, selfies, and ID numbers into a single sheet that displays on top of your app.

Automated verification: Stripe Identity's automated verification technology looks for patterns to help determine if an ID document is real or fake and uses distinctive physiological characteristics of faces to match your users' selfies to photos on their ID document. Collected identity information is checked against a global set of databases to confirm that it exists. Learn more about the verification checks supported by Stripe Identity, accessing verification results, or our integration guide on handling verification outcomes.

Requirements

The SDK uses TypeScript features available in Babel version 7.9.0 and above. Alternatively use the plugin-transform-typescript plugin in your project.

Android

  • Compatible with Android 5.0 (API level 21) and above.
  • Stripe Identity requires the hosting activity to use material theme. To enable material theme:
    • Open your project's app/src/main/AndroidManifest.xml.
    • Make sure the android:theme applied to the application is a child of one of the material themes(e.g Theme.MaterialComponents.DayNight).

      See more details about material theme here.

iOS

Note: Xcode 13 is no longer supported by Apple. Please upgrade to Xcode 14.1 or later.

  • Compatible with apps targeting iOS 13.0 or above.
  • Run pod install in your ios directory to ensure that you also install the required native dependencies.
  • Stripe Identity requires access to the device’s camera to capture identity documents. To enable your app to request camera permissions:
    • Open your project’s Info.plist.
    • Add the NSCameraUsageDescription key.
    • Add a string value that explains to your users why your app requires camera permissions(e.g This app uses the camera to take a picture of your identity documents.).

Usage example

Get started with our 📚 integration guides and example project, or 📘 browse the SDK reference.

To initialize Stripe Identity SDK in your React Native app, use the useStripeIdentity hook in the screen where you want to use it.

First you need a server-side endpoint to create the VerificationSession and ephemeral key secret, then you can send a POST request to create verification session:

const fetchVerificationSessionParams = async () => {
  try {
    const data = await fetch(
      `${YOUR_SERVER_BASE_URL}/create-verification-session`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: {},
      }
    );
    const json = await data.json();
    return json;
  } catch (e) {
    return {};
  }
};

Once you get options you can use useStripeIdentity passing fetchOptions to it.

// HomeScreen.tsx
import { useStripeIdentity } from '@stripe/stripe-identity-react-native';
import logo from './assets/logo.png';

function HomeScreen() {
  const fetchOptions = async () => {
    const response = await fetchVerificationSessionParams();

    return {
      sessionId: response.id,
      ephemeralKeySecret: response.ephemeral_key_secret,
      brandLogo: Image.resolveAssetSource(logo),
    };
  };

  const { status, present, loading } = useStripeIdentity(fetchOptions);

  const handlePress = useCallback(() => {
    present();
  }, [present]);

  const renderButton = useCallback(() => {
    if (loading) {
      return <ActivityIndicator />;
    }
    return <Button title="Verify Identity" onPress={handlePress} />;
  }, [loading, handlePress]);

  return (
    <View>
      <View>{renderButton()}</View>
      <Text>Status: {status}</Text>
    </View>
  );
}

Or if you don't want to use useStripeIdentity hook, you can also use this method to create your own implementation:

// HomeScreen.tsx
import { useState } from 'react';
import { presentIdentityVerificationSheet } from '@stripe/stripe-identity-react-native';
import logo from './assets/logo.png';

function HomeScreen() {
  const [loading, setLoading] = useState(false);
  const [status, setStatus] = useState<
    IdentityVerificationSheetStatus | undefined
  >();
  const [error, setError] = useState<StripeError | undefined>();

  const fetchOptions = async () => {
    const response = await fetchVerificationSessionParams();

    return {
      sessionId: response.id,
      ephemeralKeySecret: response.ephemeral_key_secret,
      brandLogo: Image.resolveAssetSource(logo),
    };
  };

  const present = async () => {
    setLoading(true);
    const options = await fetchOptions();
    setLoading(false);
    const { status, error } = await presentIdentityVerificationSheet(options);
    setStatus(status);
    setError(error);
  };

  const handlePress = useCallback(() => {
    present();
  }, [present]);

  const renderButton = useCallback(() => {
    if (loading) {
      return <ActivityIndicator />;
    }
    return <Button title="Verify Identity" onPress={handlePress} />;
  }, [loading, handlePress]);

  return (
    <View>
      <View>{renderButton()}</View>
      <Text>Status: {status}</Text>
    </View>
  );
}

There are two types available: StripeError and IdentityVerificationSheetStatus, you can import these in your TypeScript project directly from Stripe Identity React Native SDK:

import type {
  StripeError,
  IdentityVerificationSheetStatus,
} from '@stripe/stripe-identity-react-native';

Run the example app

  • Run this command from root folder
    • cd example && yarn
  • Install pods for iOS and update StripeIdentity
    • cd ios && pod install && pod update StripeIdentity
  • Run example app on a specific simulator/emulator from root folder
    • yarn example ios
    • or
    • yarn example android
  • Or from example folder
    • yarn ios
    • or
    • yarn android

Contributing

See the contributor guidelines to learn how to contribute to the repository.