React Components

Two components ship with the JavaScript SDK. Both handle session generation, the realtime subscription, expiry and regeneration — you supply credentials and callbacks.

npm install @loyaltylt/sdk react react-dom qrcode.react

import { QRLogin, QRCardDisplay } from '@loyaltylt/sdk/react';
import '@loyaltylt/sdk/styles';

`<QRLogin />`

Renders the QR code a customer scans to sign in.

<QRLogin
  config={{
    // Both values reach the browser. Only ever ship them to a terminal you control.
    apiKey: process.env.NEXT_PUBLIC_LOYALTY_KEY!,
    apiSecret: process.env.NEXT_PUBLIC_LOYALTY_SECRET!,
    locale: 'lt',
    shopId: 1,
    deviceName: 'Till 3',
  }}
  callbacks={{
    onScanned: () => setHint('Confirm on your phone'),
    onAuthenticated: ({ token, user }) => signIn(token, user),
    onExpired: () => setHint('QR code expired'),
    onCancelled: () => setHint('Login cancelled'),
    onError: (error) => console.error(error),
  }}
  showSendLink
  autoRegenerate
/>

This component sends your API secret from the browser. There is no way around it: the component opens the QR session itself. Render it only on a POS terminal you control. For a public website, open the session on your server and render the returned qr_code yourself — see Building your own.

Prop	Type	Description
`config`	`QRLoginConfig`	`apiKey`, `apiSecret`, and optional `apiUrl`, `locale`, `shopId`, `deviceName`
`callbacks`	`QRLoginCallbacks`	`onScanned`, `onAuthenticated`, `onCancelled`, `onExpired`, `onError`
`texts`	`QRLoginTexts`	Override any of the built-in strings
`showSendLink`	`boolean`	Show the "text me the app link" form
`autoRegenerate`	`boolean`	Generate a fresh session when one expires
`className`	`string`	Class applied to the wrapper

onAuthenticated receives { token, user } — the customer's JWT and profile.

`<QRCardDisplay />`

The customer-facing side: renders a signed-in customer's loyalty card as a QR code for staff to scan.

<QRCardDisplay
  userToken={token}
  showUserInfo
  showPoints
  autoRefresh
  refreshInterval={30000}
  size={256}
  onError={(error) => console.error(error)}
/>

Prop	Type	Description
`userToken`	`string`	The customer's JWT (required)
`cardId`	`number`	Which card to show, when the customer has several
`size`	`number`	QR code size in pixels
`showUserInfo`	`boolean`	Show the customer's name
`showPoints`	`boolean`	Show the points balance
`autoRefresh`	`boolean`	Re-fetch the card periodically
`refreshInterval`	`number`	Refresh period in ms
`texts`	`QRCardDisplayTexts`	Override any of the built-in strings
`config`	`QRCardDisplayConfig`	Optional `apiUrl` and `locale`
`onError`	`(error: Error) => void`	Called on failures

Localisation

Both components default to English. Pass texts to replace any string:

<QRLogin
  config={config}
  texts={{
    title: 'Prisijunkite su Loyalty.lt',
    scanInstruction: 'Nuskaitykite su Loyalty.lt programėle',
    expired: 'QR kodas nebegalioja',
    regenerate: 'Sugeneruoti naują',
  }}
/>

Building your own

Neither component is required. generateQrLogin + subscribeToQrLogin give you the same flow with your own markup — see QR Login.

React Components

React Components

<QRLogin />

<QRCardDisplay />

Localisation

Building your own

On this page

`<QRLogin />`

`<QRCardDisplay />`