#ky_code
quick shaleBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1413201089033142354
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
atomic crag
Hi there, taking a look
If you see 4 yellow LEDs then that indicates the Reader did connect: https://docs.stripe.com/terminal/payments/setup-reader/stripe-m2#power
What do you mean exactly by "the app doesn't find it"?
safe yarrow
but i didnt try to connect the reader.
atomic crag
You don't have connectReader() in your code?
safe yarrow
i do have, but i didnt press the button to connect
const { discoverReaders, discoveredReaders, connectReader, isInitialized, loading } =
useStripeTerminal({
onUpdateDiscoveredReaders: (readers) => {
// After the SDK discovers a reader, your app can connect to it.
console.log(readers, 'readers');
setSelectedReader(readers[0]);
},
});
this is returning an empty string
ops empty array
[]
(NOBRIDGE) LOG [Stripe terminal]: didChangeConnectionStatus discovering
and loading is true, and it doesnt change to false
atomic crag
Can you share your full code?
safe yarrow
atomic crag
After the 4 flashes it doesn't then flash every 5 seconds, correct?
Can you show me your StripeTerminalProvider code as well?
Where are you calling initialize()?
safe yarrow
import React, { ReactElement, useCallback } from "react";
import { useMutation } from "@apollo/client";
import { StripeTerminalProvider as StripeProvider } from "@stripe/stripe-terminal-react-native";
import { useAppContext } from "@/context/appContextProvider";
import * as AUTH_QUERY from "../../../graphql/auth.graphql";
import TapToPayWarmup from "./TapToPayWarmup";
interface TerminalConnectionTokenResult {
createTerminalConnectionToken: {
secret: string;
};
}
interface StripeTerminalProviderProps {
children: ReactElement;
}
export default function StripeTerminalProvider({
children,
}: Readonly<StripeTerminalProviderProps>) {
const { isLoading, currentOrg } = useAppContext();
const [createTerminalConnectionToken] =
useMutation<TerminalConnectionTokenResult>(
AUTH_QUERY.CreateTerminalConnectionToken,
);
const fetchTokenProvider = useCallback(async () => {
const response = await createTerminalConnectionToken({
variables: {
currentSpace: currentOrg?.spaces?.[0]?.slug,
},
});
console.log(response);
return response?.data?.createTerminalConnectionToken.secret || "";
}, [createTerminalConnectionToken, currentOrg?.spaces]);
if (isLoading || !currentOrg) {
return children;
}
return (
<StripeProvider logLevel="verbose" tokenProvider={fetchTokenProvider}>
<>
<TapToPayWarmup />
{children}
</>
</StripeProvider>
);
}
import { useEffect } from "react";
import { useStripeTerminal } from "@stripe/stripe-terminal-react-native";
// this needs to be a component bc of stripe reqs
export default function TapToPayWarmup() {
const { discoverReaders, initialize, isInitialized, discoveredReaders } =
useStripeTerminal();
useEffect(() => {
if (!isInitialized) {
initialize();
}
}, [initialize, isInitialized]);
useEffect(() => {
const warmupTapToPay = async () => {
if (!isInitialized || discoveredReaders.length > 0) return;
// try {
// await discoverReaders({
// discoveryMethod: "tapToPay",
// });
// } catch (error) {
// console.error(error);
// }
};
warmupTapToPay();
}, [isInitialized, discoverReaders, discoveredReaders]);
return null;
}
quick shaleBOT
🧑💻 How to format code on Discord
Inline code: wrap in single backticks (`)
This:
The variable `foo` contains the value `bar`.
Will turn into this:
The variable
foocontains the valuebar.
Code blocks: wrap in three backticks (```)
Also, you can specify the language after the first three backticks to get syntax highlighting.
This:
```javascript
function foo() {
return 'bar';
}
```
Will turn into this:
function foo() {
return 'bar';
}```
Notes about **code blocks**:
- Specifying the language is optional (e.g., you can omit `javascript` in the example above)
- If you don't specify the language you won't get syntax highlighting
- When you're inside a code block (after you type \`\`\`) the `Return`/`Enter` key will add a new line instead of sending your message
- Once you end the code block `Return`/`Enter` works normally again
You can [read more about message formatting on Discord's website.](https://support.discord.com/hc/en-us/articles/210298617)^ for the future
safe yarrow
ops sorry
atomic crag
No worries
safe yarrow
hey i have a really dumb question that i just came up in my mind
the device looks a little different from the image
how can i know that this device is the correct one?
atomic crag
Hmm well you could look at the design files at https://docs.stripe.com/terminal/payments/setup-reader/stripe-m2#m2-accessories
You could also take a picture and post it here
safe yarrow
atomic crag
atomic crag
Can you provide the serial number?
safe yarrow
thx
atomic crag
Yeah the serial number should be STRM2 for the prefix: https://support.stripe.com/questions/find-the-serial-number-for-a-stripe-terminal-card-reader-device
Where did you get this device from?
Curious what happens when you scan that QR code?
atomic crag
lol may want to ask your boss then about where it came from!
But yeah that doesn't seem to be an M2 which would explain things here!
safe yarrow
Curious what happens when you scan that QR code?
it is the serial number
atomic crag
Ah
safe yarrow
lol
atomic crag
lol well glad we at least know why it isn't working
atomic crag
np!
atomic crag
I would expect it to, yes. But not positive how this would function if there is no device in range. I'd test again with an actual M2
safe yarrow
hm but if there isnt it will keep scanning?
atomic crag
Ah one sec, I think loading there might be used to indicate it is already scanning
Yep, loading is not about initialization of the SDK, it is about whether an operation is in progress.
So you could use it to implement a UI when calling discover or connect or when processing the payments, etc.
atomic crag
Yes while it is scanning
safe yarrow
but if i dont have a device, like now, how can i cancel it
atomic crag
You can set a timeout for discovery: https://stripe.dev/stripe-terminal-react-native/api-reference/types/DiscoverReadersParams.html or call cancelDiscovering(): https://stripe.dev/stripe-terminal-react-native/api-reference/interfaces/StripeTerminalSdkType.html#canceldiscovering-1
safe yarrow
: )