Security News
vlt Debuts New JavaScript Package Manager and Serverless Registry at NodeConf EU
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
@stripe/stripe-terminal-react-native
Advanced tools
Stripe 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.
Note: The below docs are not yet available and will be released as we near open beta
Get started with our 📚 integration guides and example project, or 📘 browse the SDK reference.
Updating to a newer version of the SDK? See our release notes.
7.9.0
and above.
Alternatively use the plugin-transform-typescript
plugin in your project.The 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.
To build the example app from source, you'll need to:
yarn bootstrap
from the root directory to build the SDK.example-app
folder and run yarn install
to install all example app dependencies..env.example
to .env
, and set the URL of the Heroku app you just deployed.yarn ios
or yarn android
depending on which platform you would like to build.yarn add @stripe/stripe-terminal-react-native
or
npm install @stripe/stripe-terminal-react-native
To initialize Stripe Terminal SDK in your React Native app, use the StripeTerminalProvider
component in the root component of your application.
First, create an endpoint on your backend server that creates a new connection token via the Stripe Terminal API.
Next, create a token provider that will fetch connection token from your server and provide it to StripeTerminalProvider as a parameter. Stripe Terminal SDK will fetch it when it's needed.
// Root.tsx
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, simply call initialize
method from useStripeTerminal
hook.
Please note that initialize
method must be called from a nested component of StripeTerminalProvider
.
// App.tsx
function App() {
const { initialize } = useStripeTerminal();
useEffect(() => {
initialize();
}, [initialize]);
return <View />;
}
Stripe Terminal SDK provides dedicated hook which exposes bunch of methods and props to be used within your App. Additionally, you have access to the internal state of SDK that contains information about the current connection, discovered readers and loading state.
// PaymentScreen.tsx
import { useStripeTerminal } from '@stripe/stripe-terminal-react-native';
export default function PaymentScreen() {
const { discoverReaders, connectedReader, discoveredReaders } =
useStripeTerminal({
onUpdateDiscoveredReaders: (readers) => {
// access to discovered readers
},
onDidChangeConnectionStatus: (status) => {
// access to the current connection status
},
});
useEffect(() => {
const { error } = await discoverReaders({
discoveryMethod: 'bluetoothScan',
simulated: true,
});
}, [discoverReaders]);
return <View />;
}
In case your app uses React Class Components
you can use dedicated withStripeTerminal
Higher-Order-Component.
Please note that unlike the hooks approach, you need to use event emitter to listen on specific events that comes from SDK.
Here you can find the list of available events to be used within the event emitter.
Example:
// PaymentScreen.tsx
import {
withStripeTerminal,
WithStripeTerminalProps,
CHANGE_CONNECTION_STATUS,
Reader,
} from '@stripe/stripe-terminal-react-native';
class PaymentScreen extends React.Component {
componentDidMount() {
this.discoverReaders();
const eventSubscription = props.emitter.addListener(
CHANGE_CONNECTION_STATUS, // didChangeConnectionStatus
(status: Reader.ConnectionStatus) => {
// access to the current connection status
}
);
}
async discoverReaders() {
this.props.discoverReaders({
discoveryMethod: 'bluetoothScan',
simulated: true,
});
}
}
export default withStripeTerminal(PaymentScreen);
See the contributor guidelines to learn how to contribute to the repository.
FAQs
Stripe Terminal React Native SDK
We found that @stripe/stripe-terminal-react-native demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.