.cooper4952

[jagged spade]

https://stripe.com/docs/terminal/payments/connect-reader have you called discoverReaders() ?

[bright coral]

I didnt call it. however, I think, fetchToken call is first

[jagged spade]

What made you think so?

https://stripe.com/docs/terminal/payments/setup-integration?terminal-sdk-platform=react-native#connection-token-client-side
This function is called whenever the SDK needs to authenticate with Stripe or with 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).

[bright coral]

Can you please advise when I call discoverReader function and where?

[jagged spade]

Please follow the doc that I shared earlier.

[bright coral]

This isnt react native. my app is reactjs

I just added discoverReaders.

`import { Fragment, useEffect, useRef, useState } from "react";
import { loadStripeTerminal } from "@stripe/terminal-js";
import { Button } from "reactstrap";
import useJwt from "@src/auth/jwt/useJwt";

const VirtualTerminal = () => {
const terminalRef = useRef();
function unexpectedDisconnect() {
console.log("connectionStatusChange");
}

function connectionStatusChange() {
console.log("connectionStatusChange");
}
const discoverReaders = async () => {
// disconnectReader();

const config = { simulated: true };
const discoverResult = await terminalRef.current.discoverReaders(config);

if (discoverResult.error) {
  return discoverResult.error;
} else {
  if (discoverResult.discoveredReaders.length > 0) {
    console.log(discoverResult.discoveredReaders);
    const connectedResult = await terminalRef.current.connectReader(
      discoverResult.discoveredReaders[0],
      { fail_if_in_use: true }
    );
  } else {
    console.log("No devices found.");
  }

  return discoverResult.discoveredReaders;
}

};
const initializeTerminal = async () => {
const StripeTerminal = await loadStripeTerminal();
terminalRef.current = StripeTerminal.create({
onFetchConnectionToken: async () => {
const connectionToken = await useJwt
.fetchConnectionToken({
storeId: business.id,
})
.then((r) => {
return r.data;
});
return connectionToken.secret;
},
onUnexpectedReaderDisconnect: unexpectedDisconnect,
onConnectionStatusChange: connectionStatusChange,
});
};

return (
<>
<Button
onClick={async () => {
await initializeTerminal();
await discoverReaders();
}}
>
Test
</Button>
</>
);
};
export default VirtualTerminal;`

[jagged spade]

OK, then you can follow this guide https://stripe.com/docs/terminal/payments/connect-reader?terminal-sdk-platform=js&reader-type=simulated