Set up your integration
Set up a Stripe Terminal SDK or server-driven integration to accept in-person payments.
Vorsicht
Terminal’s React Native library is in public preview and in active development. Please report any issues you encounter to our github project.
Getting started with the React Native SDK requires four steps:
- Install the SDK in your app.
- Configure your app.
- Set up the connection token endpoint in your app and backend.
- Initialize the SDK in your app.
Install the SDKClient-side
The React Native SDK is open source and fully documented. Internally, it makes use of native iOS and Android SDKs. Install the SDK by running:
Set up the connection token endpointServer-sideClient-side
Server-side
To connect to a reader, your backend needs to give the SDK permission to use the reader with your Stripe account, by providing it with the secret from a ConnectionToken. Your backend needs to only create connection tokens for clients that it trusts.
Obtain the secret from the ConnectionToken on your server and pass it to the client side.
Vorsicht
The secret from the ConnectionToken lets you connect to any Stripe Terminal reader and take payments with your Stripe account. Be sure to authenticate the endpoint for creating connection tokens and protect it from cross-site request forgery (CSRF).
Client-side
To give the SDK access to this endpoint, create a token provider single function that requests a ConnectionToken from your backend.
import { StripeTerminalProvider } from '@stripe/stripe-terminal-react-native'; const fetchTokenProvider = async () => { const response = await fetch(`{YOUR BACKEND URL}/connection_token`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, }); const { secret } = await response.json(); return secret; };
This function is called whenever the SDK needs to authenticate with Stripe or the Reader. It’s also called when a new connection token is needed to connect to a reader (for example, when your app disconnects from a reader). If the SDK can’t retrieve a new connection token from your backend, connecting to a reader fails with the error from your server.
Vorsicht
Do not cache or hardcode the connection token. The SDK manages the connection token’s lifecycle.
Initialize the SDKClient-side
To get started, pass in your token provider implemented in Step 3 to StripeTerminalProvider as a prop.
import { StripeTerminalProvider } from '@stripe/stripe-terminal-react-native'; function Root() { const fetchTokenProvider = async () => { const response = await fetch(`${API_URL}/connection_token`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, }); const { secret } = await response.json(); return secret; }; return ( <StripeTerminalProvider logLevel="verbose" tokenProvider={fetchTokenProvider} > <App /> </StripeTerminalProvider> ); }
As a last step, call the initialize method from useStripeTerminal hook. You must call the initialize method from a component nested within StripeTerminalProvider and not from the component that contains the StripeTerminalProvider.
function App() { const { initialize } = useStripeTerminal(); useEffect(() => { initialize(); }, [initialize]); return <View />; }
SDK updates
Stripe periodically releases updates which can include new functionality, bug fixes, and security updates. Update your SDK as soon as a new version is available. The currently available SDKs are:
- Stripe Terminal Android SDK
- Stripe Terminal iOS SDK
- Stripe Terminal JavaScript SDK
- Stripe Terminal React Native SDK