react

In this section

Type Aliases

CheckinPickerProps

type CheckinPickerProps = {
  appearance?: "card" | "flat";
  checkinOptions?: Omit<CheckinOptions, "wallet" | "signal" | "session">;
  className?: string;
  description?: string;
  elementRef?: (element) => void;
  footer?: boolean;
  heading?: string;
  mock?: boolean;
  mode?: "checkin" | "pick";
  onChoose?: (detail) => void;
  onDeclined?: (detail) => void;
  onError?: (detail) => void;
  onResponse?: (detail) => void;
  platform?: boolean;
  registry?: string;
  remember?: boolean;
  request?: CheckinRequestInput;
  strings?: Partial<PickerStrings>;
  style?: CSSProperties;
  theme?: "light" | "dark" | "auto";
  wallets?: Wallet[];
};

Defined in: src/react/index.ts:24

Properties

appearance?

optional appearance?: "card" | "flat";

Defined in: src/react/index.ts:38

checkinOptions?

optional checkinOptions?: Omit<CheckinOptions, "wallet" | "signal" | "session">;

Defined in: src/react/index.ts:46

className?

optional className?: string;

Defined in: src/react/index.ts:47

description?

optional description?: string;

Defined in: src/react/index.ts:42

elementRef?

optional elementRef?: (element) => void;

Defined in: src/react/index.ts:55

Receives the element, e.g. to call setOutcome in pick mode.

Parameters

Parameter	Type
`element`	`SmartCheckinPicker` & `HTMLElement` \| `null`

Returns

void

optional footer?: boolean;

Defined in: src/react/index.ts:40

Show the SMART Health Check-in mark (default true).

heading?

optional heading?: string;

Defined in: src/react/index.ts:41

mock?

optional mock?: boolean;

Defined in: src/react/index.ts:34

Offer the simulated wallet. Development only.

mode?

optional mode?: "checkin" | "pick";

Defined in: src/react/index.ts:36

"checkin" (default) runs the flow; "pick" only chooses.

onChoose?

optional onChoose?: (detail) => void;

Defined in: src/react/index.ts:49

Parameters

Parameter	Type
`detail`	{ `session?`: `WalletSession`; `wallet`: `Wallet`; }
`detail.session?`	`WalletSession`
`detail.wallet`	`Wallet`

Returns

void

onDeclined?

optional onDeclined?: (detail) => void;

Defined in: src/react/index.ts:52

Parameters

Parameter	Type
`detail`	{ `result?`: `CheckinResult`; `wallet`: `Wallet`; }
`detail.result?`	`CheckinResult`
`detail.wallet`	`Wallet`

Returns

void

onError?

optional onError?: (detail) => void;

Defined in: src/react/index.ts:53

Parameters

Parameter	Type
`detail`	{ `code?`: `CheckinErrorCode`; `message`: `string`; `wallet?`: `Wallet`; }
`detail.code?`	`CheckinErrorCode`
`detail.message`	`string`
`detail.wallet?`	`Wallet`

Returns

void

onResponse?

optional onResponse?: (detail) => void;

Defined in: src/react/index.ts:51

response is absent when a server holding the keys kept the data (result.status is "kept-on-server").

Parameters

Parameter	Type
`detail`	{ `response?`: `CheckinResponse`; `result`: `CheckinResult`; `wallet`: `Wallet`; }
`detail.response?`	`CheckinResponse`
`detail.result`	`CheckinResult`
`detail.wallet`	`Wallet`

Returns

void

platform?

optional platform?: boolean;

Defined in: src/react/index.ts:30

Offer the device's own wallet (default true).

registry?

optional registry?: string;

Defined in: src/react/index.ts:28

Wallet registry URL. Omit for no web wallets.

remember?

optional remember?: boolean;

Defined in: src/react/index.ts:32

Remember the last app used on this site (default false).

request?

optional request?: CheckinRequestInput;

Defined in: src/react/index.ts:26

What to ask for. Required unless mode="pick".

strings?

optional strings?: Partial<PickerStrings>;

Defined in: src/react/index.ts:43

style?

optional style?: CSSProperties;

Defined in: src/react/index.ts:48

theme?

optional theme?: "light" | "dark" | "auto";

Defined in: src/react/index.ts:37

wallets?

optional wallets?: Wallet[];

Defined in: src/react/index.ts:45

The wallets to offer (from wallets()), instead of registry / platform / mock.

SmartCheckinPickerAttributes

type SmartCheckinPickerAttributes = {
  appearance?: "flat";
  description?: string;
  footer?: "off";
  heading?: string;
  mock?: boolean | "";
  mode?: "checkin" | "pick";
  platform?: "off";
  registry?: string;
  remember?: boolean | "";
  theme?: "light" | "dark" | "auto";
};

Defined in: src/react/index.ts:160

Attributes of <smart-checkin-picker> when written directly in JSX. Set request and the other properties through a ref.

Properties

appearance?

optional appearance?: "flat";

Defined in: src/react/index.ts:167

description?

optional description?: string;

Defined in: src/react/index.ts:170

optional footer?: "off";

Defined in: src/react/index.ts:168

heading?

optional heading?: string;

Defined in: src/react/index.ts:169

mock?

optional mock?: boolean | "";

Defined in: src/react/index.ts:164

mode?

optional mode?: "checkin" | "pick";

Defined in: src/react/index.ts:165

platform?

optional platform?: "off";

Defined in: src/react/index.ts:162

registry?

optional registry?: string;

Defined in: src/react/index.ts:161

remember?

optional remember?: boolean | "";

Defined in: src/react/index.ts:163

theme?

optional theme?: "light" | "dark" | "auto";

Defined in: src/react/index.ts:166

Functions

CheckinPicker()

function CheckinPicker(props): DOMElement<DOMAttributes<SmartCheckinPicker & HTMLElement>, SmartCheckinPicker & HTMLElement>;

Defined in: src/react/index.ts:59

The <smart-checkin-picker> element as a React component.

Parameters

Parameter	Type
`props`	`CheckinPickerProps`

Returns

DOMElement<DOMAttributes<SmartCheckinPicker & HTMLElement>, SmartCheckinPicker & HTMLElement>

useCheckin()

function useCheckin(request, options?): {
  response: CheckinResponse | undefined;
  result: CheckinResult | undefined;
  start: (wallet) => 
     | Promise<undefined>
     | Promise<
     | {
     request: SmartCheckinRequest;
     response: CheckinResponse;
     status: "completed";
     wallet: Wallet;
     warnings: CheckinWarning[];
   }
     | {
     request: SmartCheckinRequest;
     serverReference?: string;
     status: "kept-on-server";
     wallet: Wallet;
   }
     | {
     request: SmartCheckinRequest;
     status: "declined";
     wallet: Wallet;
   }
     | {
     error: {
        check?: string;
        code: CheckinErrorCode;
        message: string;
     };
     request: SmartCheckinRequest;
     status: "failed";
     wallet: Wallet;
  }>;
  status:   | "declined"
     | "waiting"
     | "completed"
     | "kept-on-server"
     | "failed"
     | "idle";
  wallets: Wallet[];
};

Defined in: src/react/index.ts:119

For pages drawing their own buttons: the wallets to offer, and start, which runs a check-in with one of them. Call start(wallet) from a click handler; it opens a web wallet's tab inside the click.

Parameters

Parameter	Type
`request`	`CheckinRequestInput`
`options`	`WalletsOptions` & `Omit`<`CheckinOptions`, `"wallet"` \| `"session"` \| `"signal"`>

Returns

{
  response: CheckinResponse | undefined;
  result: CheckinResult | undefined;
  start: (wallet) => 
     | Promise<undefined>
     | Promise<
     | {
     request: SmartCheckinRequest;
     response: CheckinResponse;
     status: "completed";
     wallet: Wallet;
     warnings: CheckinWarning[];
   }
     | {
     request: SmartCheckinRequest;
     serverReference?: string;
     status: "kept-on-server";
     wallet: Wallet;
   }
     | {
     request: SmartCheckinRequest;
     status: "declined";
     wallet: Wallet;
   }
     | {
     error: {
        check?: string;
        code: CheckinErrorCode;
        message: string;
     };
     request: SmartCheckinRequest;
     status: "failed";
     wallet: Wallet;
  }>;
  status:   | "declined"
     | "waiting"
     | "completed"
     | "kept-on-server"
     | "failed"
     | "idle";
  wallets: Wallet[];
}

response

response: CheckinResponse | undefined;

result

result: CheckinResult | undefined;

start

start: (wallet) => 
  | Promise<undefined>
  | Promise<
  | {
  request: SmartCheckinRequest;
  response: CheckinResponse;
  status: "completed";
  wallet: Wallet;
  warnings: CheckinWarning[];
}
  | {
  request: SmartCheckinRequest;
  serverReference?: string;
  status: "kept-on-server";
  wallet: Wallet;
}
  | {
  request: SmartCheckinRequest;
  status: "declined";
  wallet: Wallet;
}
  | {
  error: {
     check?: string;
     code: CheckinErrorCode;
     message: string;
  };
  request: SmartCheckinRequest;
  status: "failed";
  wallet: Wallet;
}>;

Parameters

Parameter	Type
`wallet`	`Wallet` \| `undefined`

Returns

| Promise<undefined> | Promise< | { request: SmartCheckinRequest; response: CheckinResponse; status: "completed"; wallet: Wallet; warnings: CheckinWarning[]; } | { request: SmartCheckinRequest; serverReference?: string; status: "kept-on-server"; wallet: Wallet; } | { request: SmartCheckinRequest; status: "declined"; wallet: Wallet; } | { error: { check?: string; code: CheckinErrorCode; message: string; }; request: SmartCheckinRequest; status: "failed"; wallet: Wallet; }>

status

status: 
  | "declined"
  | "waiting"
  | "completed"
  | "kept-on-server"
  | "failed"
  | "idle";

wallets

wallets: Wallet[] = list;

References

PickerOutcome

Re-exports PickerOutcome