Set up your integration
Set up a Stripe Terminal SDK or server-driven integration to accept in-person payments.
Note
For smart readers, such as the BBPOS WisePOS E reader or Stripe Reader S700, we recommend using the server-driven integration instead of the JavaScript SDK. The server-driven integration uses the Stripe API instead of relying on local network communications to collect payments. See our platform comparison to help you choose the best platform for your needs.
Terminal JavaScript SDK requirements
When you integrate with smart readers using the JavaScript SDK, make sure your network meets our network requirements.
Getting started with the JavaScript SDK requires three steps:
- Install the SDK and client library on your checkout page.
- Set up the connection token endpoint on your web application app and backend.
- Initialize the SDK in your web application.
Note
If you integrate your web application with the JavaScript SDK, you can run it in a mobile browser as long as the mobile device is connected to the same local network as the reader, and devices on that network can communicate directly with one another.
Install the SDK and client libraryClient-sideServer-side
Client-side
To get started, include this script on your checkout page. This script must always load directly from https://js.stripe.com for compatibility with the latest reader software. Don’t include the script in a bundle or host a copy yourself; this might break your integration without warning.
<script src="https://js.stripe.com/terminal/v1/"></script>
Use the Terminal JS SDK as a module
We also provide an npm package to load and use the Terminal JS SDK as a module. For more information, check out the project on GitHub.
Note
For information on migrating from beta versions of the JavaScript SDK, see the Stripe Terminal Beta Migration Guide.
Server-side
Use our official libraries for access to the Stripe API from your application:
Set up the ConnectionToken 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.
Caution
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 function in your web application that requests a ConnectionToken
from your backend and returns the secret
from the ConnectionToken
object.
async function fetchConnectionToken() { // Your backend should call /v1/terminal/connection_tokens and return the JSON response from Stripe const response = await fetch('https://{{YOUR_BACKEND_URL}}/connection_token', { method: "POST" }); const data = await response.json(); return data.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.
Caution
Do not cache or hardcode the connection token. The SDK manages the connection token’s lifecycle.
Initialize the SDKClient-side
The StripeTerminal object made available by the SDK exposes a generic interface for discovering readers, connecting to a reader, and creating payments. To initialize a StripeTerminal
instance in your JavaScript application, provide the ConnectionToken
function implemented in Step 2.
You must also provide a function to handle unexpected disconnects from the reader, onUnexpectedReaderDisconnect. In this function, your app needs to notify the user that the reader disconnected. You can also include a way to attempt to reconnect to a reader. For more information, see Handling disconnects.
const terminal = StripeTerminal.create({ onFetchConnectionToken: fetchConnectionToken, onUnexpectedReaderDisconnect: unexpectedDisconnect, }); function unexpectedDisconnect() { // You might want to display UI to notify the user and start re-discovering readers }
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
Supported browsers
The Stripe Terminal JavaScript SDK strives to support all recent versions of major browsers. We support:
- Edge on Windows.
- Firefox on desktop platforms.
- Chrome and Safari on all platforms.
- The Android native browser on Android 4.4 and later.
If you have issues with the Stripe Terminal JavaScript SDK on a specific browser, please email support-terminal@stripe.com.
Caution
Note: Using the Stripe Terminal JavaScript SDK with React Native isn’t supported. To build Stripe Terminal into your mobile app with React Native, use the Stripe Terminal React Native SDK.