Capacitor-stripe-terminal NPM

npm

WARNING: Until this project reaches 1.0, the API is subject to breaking changes.

📝 Table of Contents

🏁 Getting Started

iOS Setup

First, follow all Stripe instructions under "Configure your app". Then run the following in your Capacitor project:

# install the bridge
npm install capacitor-stripe-terminal

# sync the iOS project
npx cap sync ios

Android Setup

(not supported yet)

🎈 Usage

import {
  StripeTerminalPlugin,
  DeviceType,
  DiscoveryMethod
} from 'capacitor-stripe-terminal'

// First, initialize the SDK
const terminal = new StripeTerminal({
  fetchConnectionToken: async () => {
    const resp = await fetch('https://your-backend.dev/token', {
      method: 'POST'
    })
    const data = await resp.json()

    return data.secret
  }
})

// Start scanning for readers
// capacitor-stripe-terminal uses Observables for any data streams
// To stop scanning, unsubscribe from the Observable.
// You must connect to a reader while scanning
terminal
  .discoverReaders({
    simulated: false,
    deviceType: DeviceType.Chipper2X,
    discoveryMethod: DiscoveryMethod.BluetoothProximity
  })
  .subscribe(readers => {
    if (readers.length) {
      terminal
        .connectReader({ serialNumber: readers[0].serialNumber })
        .then(connectedReader => {
          // the reader is now connected and usable
        })
    }
  })

// Once the reader is connected, collect a payment intent!
;(async () => {
  // subscribe to user instructions - these should be displayed to the user
  const waitingSubscription = terminal
    .readerDisplayMessage()
    .subscribe(message => {
      console.log('readerDisplayMessage', message.text)
    })
  const inputSubscription = terminal.readerInput().subscribe(message => {
    console.log('readerInput', message.text)
  })

  // retrieve the payment intent
  const pi = await terminal.retrievePaymentIntent(
    'your client secret created server side'
  )

  // collect the payment method
  await terminal.collectPaymentMethod()

  // and finally, process the payment
  await terminal.processPayment()

  // once you are done, make sure to unsubscribe (e.g. in ngOnDestroy)
  waitingSubscription.unsubscribe()
  inputSubscription.unsubscribe()
})()

See the full docs here.