react-native-stripe-terminal

React Native wrapper for the Stripe Terminal SDK. (iOS & Android compatible!)

Getting started

First, follow all Stripe instructions under "Install the iOS SDK" and/or "Install the Android SDK" (depending on your platform). Then:

$ npm install git+https://github.com/nawaz4225/crowdbotics-react-native-stripe-terminal.git --save

Mostly automatic installation

$ npm i crowdbotics-react-native-stripe-terminal

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ crowdbotics-react-native-stripe-terminal and add RNStripeTerminal.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNStripeTerminal.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)

Android

1. Open up android/app/src/main/java/[...]/MainApplication.java

• Add import com.reactlibrary.RNStripeTerminalPackage; to the imports at the top of the file
• Add new RNStripeTerminalPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':crowdbotics-react-native-stripe-terminal'
   project(':crowdbotics-react-native-stripe-terminal').projectDir = new File(rootProject.projectDir, 	'../node_modules/crowdbotics-react-native-stripe-terminal/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':crowdbotics-react-native-stripe-terminal')

Usage

The StripeTerminal object is a singleton. You must first call StripeTerminal.initialize and provide a function to fetch the connection token (see Stripe docs).

Basic usage

import StripeTerminal from 'crowdbotics-react-native-stripe-terminal';

// First, initialize the SDK
StripeTerminal.initialize({
  fetchConnectionToken: () => {
    return fetch('https://your.endpoint/terminal', { method: 'POST' })
      .then(resp => resp.json())
      .then(data => data.secret);
  }
});

// Add a listener to handle when readers are discovered.
// You could display the readers to the user to select, or just
// auto-connect to the first available reader.
StripeTerminal.addReadersDiscoveredListener(readers => {
  if (readers.length) {
    StripeTerminal.connectReader(readers[0].serialNumber)
      .then(() => {
        // reader is connected
        // now safe to call `StripeTerminal.createPaymentIntent`
      });
  }
});

// When you're ready, scan for readers
StripeTerminal.discoverReaders(
  StripeTerminal.DeviceTypeChipper2X,
  StripeTerminal.DiscoveryMethodBluetoothProximity);

// After a reader is connected, create a payment intent.
// 
// Note: In `react-native-stripe-terminal`, `createPayment`
// abstracts `createPaymentIntent`, collectPaymentMethod`, and
// `confirmPaymentIntent` into a single method. If any of them fail,
// the Promise will be rejected. A resolved promise means that the
// payment was authorized & posted to Stripe and awaits capture.
StripeTerminal.createPayment({ amount: 1200, currency: "usd" })
  .then(intent => {
    console.log('Payment intent created', intent);
  })
  .catch(error => {
    console.log(error);
  });

// You can use the following listeners to update your interface with
// instructions for the user.
const waitingListener = StripeTerminal.addDidBeginWaitingForReaderInputListener(text => {
  // `text` is a string of instructions, like "Swipe / Tap / Dip".
  this.setState({ displayText: text });
});
const inputListener = StripeTerminal.addDidRequestReaderInputPrompt(text => {
  // `text` is a prompt like "Retry Card".
  this.setState({ displayText: text });
});

// Make sure you remove the listeners when you're done
// (e.g. in componentWillUnmount).
waitingListener.remove();
inputListener.remove();

Hooks usage

If you're running React Native ^0.59 / React ^16.8.0, you can use Hooks to seamlessly integrate Stripe Terminal into your React Native application.

import StripeTerminal, { useStripeTerminal, useStripeTerminalCreatePayment } from 'crowdbotics-react-native-stripe-terminal';

// Somewhere early in your application...
StripeTerminal.initialize({
  fetchConnectionToken: () => {
    return fetch('https://your.endpoint/terminal', { method: 'POST' })
      .then(resp => resp.json())
      .then(data => data.secret);
  }
});

// Then, inside your components...
function PaymentScreen() {
  const {
    connectionStatus,
    connectedReader,
    paymentStatus,
    cardInserted,
    readerInputOptions,
    readerInputPrompt
  } = useStripeTerminalState();
}

// And when you're finally read to *collect* a payment...
function CollectPaymentScreen() {
  const {
    connectionStatus,
    connectedReader,
    paymentStatus,
    cardInserted,
    readerInputOptions,
    readerInputPrompt
  } = useStripeTerminalCreatePayment({
    amount: 123,
    description: "Test payment",
    onSuccess: result => {
      Alert.alert("Payment received", JSON.stringify(result));
    },
    onFailure: err => {
      Alert.alert("Failed to create payment", JSON.stringify(err));
    }
  });
}