Member cards in an account drawer

View .md

Use the SDK’s KismetMembershipCard inside your site’s account drawer. It uses the same guest account and saved design as My Kismet. A separate embed script or a second sign-in is not required.

This component ships with the SDK change that adds KismetMembershipCard and GuestMemberCardSchema. Pin a release containing those exports before adoption.

Read the account

Set up the branded guest account, saves and same-origin BFF first. Continue using the SDK’s authentication, CSRF, refresh and logout contracts. Browser code never receives a Kismet access or refresh token.

import { createKismetGuestBrowserClient, KismetMembershipCard } from '@kismet-tech/sdk/react';
import type { GuestSelf } from '@kismet-tech/sdk/entities';

const guest = createKismetGuestBrowserClient();
// After the verified same-origin session is ready:
const account = await guest.getSelf();

function DrawerCard({ account }: { account: GuestSelf | null }) {
  return <KismetMembershipCard card={account?.memberCard} />;
}

The server chooses the verified guest and installation collection. Do not pass a guest, membership or collection ID from the browser to select a card. The server requires an active membership, an enabled program/card and the saved Connected partner account drawers setting. TEST installations do not receive a LIVE membership verification code.

An omitted memberCard means this API version does not support the projection. null means no card is available. Neither is permission to manufacture a card, QR or membership. The component renders nothing in those states. Keep an unavailable account read distinct from a successful empty account.

Manage the program name and artwork in Insiders > Member cards. The SDK preserves the returned design: colors, repeating pattern or image, logo variant, program/tier labels, member-since date and visible actions. Card artwork uses the approved collection media library. The component fits its drawer container and respects reduced-motion preferences.

The front flips to the QR and account actions. Supply callbacks that use your site’s own authenticated account navigation:

<KismetMembershipCard
  card={account.memberCard}
  onViewBenefits={() => openAccountSection('benefits')}
  onViewTrip={() => openAccountSection('trips')}
  onRefresh={refreshGuestAccount}
  activity={tripTiles}
/>

activity is an optional list of { id, title, dateLabel, imageUrl?, onOpen? }. It appears as a horizontal row below the reverse side. Build it only from authorized account data; the host decides which current or historical activity to show. Do not infer itinerary access from an ID or put guest credentials in links. Preserve your account route after any required login.

Privacy and verification

Load and refresh the card through the private, no-store guest account read. Clear the account object immediately on logout or identity change, including while a replacement account is loading. Re-read when reopening the drawer so program changes, revoked membership and refreshed codes are reflected. Do not put card data in public page caches, analytics, logs or local storage.

The QR is generated locally, with no external QR-image service. Its opaque proof stays in a URL fragment until the verifier submits it in a request body. Scanning checks the current relationship to the business. It does not sign in, redeem a perk, award an entitlement or authorize payment. Expired codes are hidden; provide onRefresh to read the current account again.

Before release, verify an enabled member, canceled/nonmember, signed-out guest, disabled drawer placement, TEST installation, expired proof and account switch. Use the actual backend projection for this smoke; a designer’s illustrative card is not a membership verification fixture.

Member cards in an account drawer

Read the account

Brand and account navigation

Privacy and verification