# Member cards in an account drawer

> Render the signed-in guest's branded membership card through the same-origin account integration.


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.

```tsx
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.

## Brand and account navigation

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:

```tsx
<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.