https://github.com/a-tokyo/react-native-stripe-identity

🆔 React Native implementation for Stripe.js Identity
https://github.com/a-tokyo/react-native-stripe-identity

expo flow identity identity-verification online-payments payments react-native react-native-expo react-native-stripe security stripe stripe-identity typescript verification

Last synced: 17 days ago
JSON representation

🆔 React Native implementation for Stripe.js Identity

• Host: GitHub
• URL: https://github.com/a-tokyo/react-native-stripe-identity
• Owner: a-tokyo
• License: mit
• Created: 2020-10-21T21:29:44.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2023-01-01T05:07:06.000Z (almost 2 years ago)
• Last Synced: 2024-10-18T14:59:50.468Z (21 days ago)
• Topics: expo, flow, identity, identity-verification, online-payments, payments, react-native, react-native-expo, react-native-stripe, security, stripe, stripe-identity, typescript, verification
• Language: JavaScript
• Homepage: https://stripe.com/docs/identity
• Size: 851 KB
• Stars: 21
• Watchers: 5
• Forks: 10
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
# React Native Stripe Identity

React Native implementation for [Stripe.js Identity](https://stripe.com/docs/identity).



  

  





  







  



## Description

The library allows you to use [Stripe.js Identity](https://stripe.com/docs/identity) with react-native/expo without ejecting. You can use it with both server-side implementations and client-side implementations. Simply ensure you follow the [url structure guidelines below](#important-notes-about-urls).

#### API version

`identity_beta=v3`

## Prequisites

- This library relies on [React Native Webview](https://www.npmjs.com/package/react-native-webview). Please follow [this guide](https://github.com/react-native-community/react-native-webview/blob/HEAD/docs/Getting-Started.md) to install in your project first.

## Installation

- Ensure you've completed the setps in [prequisites.](#prequisites)

- Install package via npm or yarn:

`npm install --save react-native-stripe-identity` OR `yarn add react-native-stripe-identity`

- Import in your project

```javascript

import StripeIdentity from 'react-native-stripe-identity';

```

## Usage

```jsx

import StripeIdentity from 'react-native-stripe-identity';

const MyStripeIdentity = () => (

   {

      console.log(`Stripe identity session succeeded. verification intent id: ${verificationIntentId}.`);

    }}

    onRefresh={() => {

      console.log(`Stripe identity session requested refresh.`);

    }}

  />

);

export default MyStripeIdentity;

```

## Important Notes about URLs

- [return_url](https://stripe.com/docs/identity/intents#create-a-verificationintent) must have the query string param `?vi={VERIFICATION_INTENT_ID}`.

  - vi must be the last param - passed to the onSuccess function as verificationIntentId

- A simple way to do this is using [url-join](https://www.npmjs.com/package/url-join). eg: `urlJoin(myReturnUrl, '?vi={VERIFICATION_INTENT_ID}')`.

## Component props

- `redirectToUrl` (string) - The Identity webpage url - Stripe's [`identity.next_action.redirect_to_url`](https://stripe.com/docs/identity/intents#create-a-verificationintent).

- `refreshUrl` (string) - The Identity return url - Stripe's identity.refresh_url - Intercepted to call onRefresh.

- `onSuccess` (?Function) - Called upon success of the identity session with `{ ...props, verificationIntentId: 'VERIFICATION_INTENT_ID' }`

- `onRefresh` (?Function) - Called upon identity session redirecting to refreshUrl with `{ ...props }`

- `onLoadingComplete` (?Function) - Called when the Stripe identity session webpage loads successfully.

- `webViewProps` (?Object) - WebView Component props, spread on the WebView Component.

- `renderOnComplete` (?(props) => React$Node) - Optional rendering function returning a component to display upon identity completion. note: You don't need this if your onSuccess and onRefresh functions navigate away from the component.

### Troubleshooting

- If you face Camera/Gallery permissions issues checkout the solutions in [this react-native-permissions issue](https://github.com/react-native-webview/react-native-webview/issues/508#issuecomment-543758204)

## Contributing

Pull requests are highly appreciated! For major changes, please open an issue first to discuss what you would like to change.

### Notice

Stripe identity is still in beta.