Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 2 months 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-11-02T03:11:45.268Z (about 2 months 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.