npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@stripe/stripe-terminal-react-native

v0.0.1-beta.16

Published

Stripe Terminal React Native SDK

Downloads

8,708

Readme

Stripe Terminal React Native SDK (Beta)

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.

Getting started

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.

Requirements

JS

  • The SDK uses TypeScript features available in Babel version 7.9.0 and above. Alternatively use the plugin-transform-typescript plugin in your project.

Android

  • Android API level 26 and above
    • Note that attempting to override minSdkVersion to decrease the minimum supported API level will not work due to internal runtime API level validation. Furthermore, Stripe is updating the Terminal Android SDK to support Google’s recently released Android 14 (SDK 34). Please continue to target SDK 33 in the meantime as there are known issues with mPOS devices and TTP when targeting SDK 34. Please track the following ticket for updates on progress.
  • compileSdkVersion = 33
  • targetSdkVersion = 31

iOS

  • Compatible with apps targeting iOS 13 or above.

Try the example app

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:

  1. Run yarn bootstrap from the root directory to build the SDK.
  2. Navigate to our example backend and click the button to deploy it on Heroku.
  3. Navigate to the example-app folder and run yarn install to install all example app dependencies.
  4. Copy .env.example to .env, and set the URL of the Heroku app you just deployed.
  5. Run either yarn ios or yarn android depending on which platform you would like to build.

Installation

yarn add @stripe/stripe-terminal-react-native

or

npm install @stripe/stripe-terminal-react-native

Example code

Initialization

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 />;
}

Hooks and events

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,
    });
  }
}

export default withStripeTerminal(PaymentScreen);

Additional docs

Contributing

See the contributor guidelines to learn how to contribute to the repository.