{"id":26829441,"url":"https://github.com/stripe/stripe-terminal-react-native","last_synced_at":"2025-04-06T14:10:33.186Z","repository":{"id":37087960,"uuid":"433542525","full_name":"stripe/stripe-terminal-react-native","owner":"stripe","description":"React Native SDK for Stripe Terminal","archived":false,"fork":false,"pushed_at":"2024-05-23T09:47:47.000Z","size":7780,"stargazers_count":91,"open_issues_count":33,"forks_count":44,"subscribers_count":11,"default_branch":"main","last_synced_at":"2024-05-23T10:08:45.882Z","etag":null,"topics":["react-native","stripe","stripe-terminal"],"latest_commit_sha":null,"homepage":"https://stripe.com/docs/terminal/payments/setup-integration?terminal-sdk-platform=react-native","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stripe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-30T18:29:51.000Z","updated_at":"2024-07-24T17:00:14.620Z","dependencies_parsed_at":"2023-02-09T15:02:16.621Z","dependency_job_id":"b1ddc8d5-e1ab-420b-a007-c7538eb448bf","html_url":"https://github.com/stripe/stripe-terminal-react-native","commit_stats":{"total_commits":331,"total_committers":25,"mean_commits":13.24,"dds":0.6586102719033233,"last_synced_commit":"a6d986fdb757b570cf4348f26e8b750206a565d7"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stripe%2Fstripe-terminal-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stripe%2Fstripe-terminal-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stripe%2Fstripe-terminal-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stripe%2Fstripe-terminal-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stripe","download_url":"https://codeload.github.com/stripe/stripe-terminal-react-native/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247492513,"owners_count":20947544,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-native","stripe","stripe-terminal"],"created_at":"2025-03-30T13:16:41.969Z","updated_at":"2025-04-06T14:10:33.165Z","avatar_url":"https://github.com/stripe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stripe Terminal React Native SDK (Beta)\n\nStripe Terminal enables you to build your own in-person checkout to accept payments in the physical world. Built on Stripe's payments network, Terminal helps you unify your online and offline payment channels. With the Stripe Terminal React Native SDK, you can connect to pre-certified card readers from your React Native app and drive a customized in-store checkout flow.\n\n- [Getting started](#getting-started)\n- [Requirements](#requirements)\n  - [JS](#js)\n  - [Android](#android)\n  - [iOS](#ios)\n- [Try the example app](#try-the-example-app)\n- [Installation](#installation)\n- [Example code](#example-code)\n  - [Initialization](#initialization)\n  - [Hooks and events](#hooks-and-events)\n- [Additional docs](#additional-docs)\n- [Contributing](#contributing)\n\n## Getting started\n\n\u003e Note: The below docs are not yet available and will be released as we near open beta\n\nGet started with our [📚 integration guides](https://stripe.com/docs/terminal/payments/setup-sdk?terminal-sdk-platform=react-native) and [example project](https://stripe.com/docs/terminal/example-applications?terminal-sdk-platform=react-native), or [📘 browse the SDK reference](https://stripe.dev/stripe-terminal-react-native).\n\nUpdating to a newer version of the SDK? See our [release notes](https://github.com/stripe/stripe-terminal-react-native/releases).\n\n## Requirements\n\n### JS\n\n- The SDK uses TypeScript features available in Babel version `7.9.0` and above.\n  Alternatively use the `plugin-transform-typescript` plugin in your project.\n\n### Android\n\n- Android API level 26 and above\n  * Note that attempting to override minSdkVersion to decrease the minimum supported API level will not work due to internal runtime API level validation.\n- compileSdkVersion = 33\n- targetSdkVersion = 31\n\n### iOS\n\n- Compatible with apps targeting iOS 13 or above.\n\n## Try the example app\n\nThe React Native SDK includes an open-source example app, which you can use to familiarize yourself with the SDK and reader before starting your own integration.\n\nTo build the example app from source, you'll need to:\n\n1. Run `yarn bootstrap` from the root directory to build the SDK.\n2. Navigate to our [example backend](https://github.com/stripe/example-terminal-backend) and click the button to deploy it on Heroku.\n3. Navigate to the `example-app` folder and run `yarn install` to install all example app dependencies.\n4. Copy `.env.example` to `.env`, and set the URL of the Heroku app you just deployed.\n5. Run either `yarn ios` or `yarn android` depending on which platform you would like to build.\n\n## Installation\n\n```sh\nyarn add @stripe/stripe-terminal-react-native\n```\n\nor\n\n```sh\nnpm install @stripe/stripe-terminal-react-native\n```\n\n## Example code\n\n### Initialization\n\nTo initialize Stripe Terminal SDK in your React Native app, use the `StripeTerminalProvider` component in the root component of your application.\n\nFirst, create an endpoint on your backend server that creates a new connection token via the Stripe Terminal API.\n\nNext, create a token provider that will fetch connection token from your server and provide it to StripeTerminalProvider as a parameter.\nStripe Terminal SDK will fetch it when it's needed.\n\n```tsx\n// Root.tsx\nimport { StripeTerminalProvider } from '@stripe/stripe-terminal-react-native';\n\nfunction Root() {\n  const fetchTokenProvider = async () =\u003e {\n    const response = await fetch(`${API_URL}/connection_token`, {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n    });\n    const { secret } = await response.json();\n    return secret;\n  };\n\n  return (\n    \u003cStripeTerminalProvider\n      logLevel=\"verbose\"\n      tokenProvider={fetchTokenProvider}\n    \u003e\n      \u003cApp /\u003e\n    \u003c/StripeTerminalProvider\u003e\n  );\n}\n```\n\nAs a last step, simply call `initialize` method from `useStripeTerminal` hook.\nPlease note that `initialize` method must be called from a nested component of `StripeTerminalProvider`.\n\n```tsx\n// App.tsx\nfunction App() {\n  const { initialize } = useStripeTerminal();\n\n  useEffect(() =\u003e {\n    initialize();\n  }, [initialize]);\n\n  return \u003cView /\u003e;\n}\n```\n\n### Hooks and events\n\nStripe Terminal SDK provides dedicated hook which exposes bunch of methods and props to be used within your App.\nAdditionally, you have access to the internal state of SDK that contains information about the current connection, discovered readers and loading state.\n\n```tsx\n// PaymentScreen.tsx\n\nimport { useStripeTerminal } from '@stripe/stripe-terminal-react-native';\n\nexport default function PaymentScreen() {\n  const { discoverReaders, connectedReader, discoveredReaders } =\n    useStripeTerminal({\n      onUpdateDiscoveredReaders: (readers) =\u003e {\n        // access to discovered readers\n      },\n      onDidChangeConnectionStatus: (status) =\u003e {\n        // access to the current connection status\n      },\n    });\n\n  useEffect(() =\u003e {\n    const { error } = await discoverReaders({\n      discoveryMethod: 'bluetoothScan',\n      simulated: true,\n    });\n  }, [discoverReaders]);\n\n  return \u003cView /\u003e;\n}\n```\n\nIn case your app uses `React Class Components` you can use dedicated `withStripeTerminal` Higher-Order-Component.\nPlease note that unlike the hooks approach, you need to use event emitter to listen on specific events that comes from SDK.\n\n[Here](https://github.com/stripe/stripe-terminal-react-native/blob/281df38/src/hooks/useStripeTerminal.tsx#L85-L109) you can find the list of available events to be used within the event emitter.\n\nExample:\n\n```tsx\n// PaymentScreen.tsx\n\nimport {\n  withStripeTerminal,\n  WithStripeTerminalProps,\n  CHANGE_CONNECTION_STATUS,\n  Reader,\n} from '@stripe/stripe-terminal-react-native';\n\nclass PaymentScreen extends React.Component {\n  componentDidMount() {\n    this.discoverReaders();\n    const eventSubscription = props.emitter.addListener(\n      CHANGE_CONNECTION_STATUS, // didChangeConnectionStatus\n      (status: Reader.ConnectionStatus) =\u003e {\n        // access to the current connection status\n      }\n    );\n  }\n  async discoverReaders() {\n    this.props.discoverReaders({\n      discoveryMethod: 'bluetoothScan',\n      simulated: true,\n    });\n  }\n}\n\nexport default withStripeTerminal(PaymentScreen);\n```\n\n## Additional docs\n\n- [Running e2e tests locally](https://github.com/stripe/stripe-terminal-react-native/blob/main/docs/e2e-tests.md)\n\n## Contributing\n\nSee the [contributor guidelines](https://github.com/stripe/stripe-terminal-react-native/blob/main/CONTRIBUTING.md) to learn how to contribute to the repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstripe%2Fstripe-terminal-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstripe%2Fstripe-terminal-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstripe%2Fstripe-terminal-react-native/lists"}