@wirexapp/card-reveal-web 1.1.0-beta.4 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,141 @@
 # @wirexapp/card-reveal-web
 
+## 1.1.0
+
+### Minor Changes
+
+- d4654e9: Reveal `copy` option — `'button'` (default: the icon button, as today),
+  `'row'` (the whole row is one copy control: a real `<button>`, no icon, no
+  reserved width; the copied state shows on the value and is announced to
+  assistive tech) or `'none'` (no copy affordance; the value stays selectable
+  text). Copy still runs inside the frame and `onCopied` still carries the
+  field name only. Enumerated and re-validated in the frame; an older frame
+  ignores the option and renders the icon button.
+
+  Reveal `showLabels` option (default `true`). `false` renders no label
+  element at all — not an empty one — so a row is exactly as tall as its
+  value; the label string becomes the value's `aria-label`, and the icon copy
+  button's name carries the field ("Card Number: Copy"). With `copy:
+'button'` such a row is floored at the icon's hit target (`copyIconSize` +
+  12px) so adjacent buttons never overlap. Replaces the `fontSizeLabel: '0px'`
+  / `lineHeightLabel: '0px'` workaround.
+
+  Reveal `rowStyle` option — `'plain'` (default, as today) or `'boxed'`: each
+  row becomes a pill drawn from the box tokens the collect inputs already use
+  (`colorBackground`, `colorBorder`, `borderRadius`, `borderWidth`,
+  `controlMinHeight`; 16px horizontal padding, `spacingUnit` vertical,
+  `fieldGap` between pills), so a border hugs the value instead of the
+  iframe. Deliberately opt-in: those tokens already reach reveal frames from
+  hosts that share one appearance object with collect, so honouring them on
+  presence would have restyled existing reveal rows.
+
+  Reveal `layout` option — `'column'` (default) or `'row'`: the frame's
+  fields sit side by side with equal widths, separated by the new `fieldGap`
+  appearance token (length; default `12px`; also the gap between `'boxed'`
+  pills). `fields: ['expiry', 'cvv']` with `layout: 'row'` is one frame and
+  one `/details` call where two single-field frames called it twice with the
+  same action token. Frame-wide on purpose: a mixed arrangement is two
+  frames, because a nested `fields` shape would not be ignorable by older
+  frames.
+
+  New `wordSpacing` appearance token (length grammar): extra space between
+  the card number's four-digit groups in the reveal frame — the value is
+  still chunked with single spaces, and no other row is affected. Reveal
+  `fields` entries are now validated against the known row names (unknown
+  entries are dropped instead of rendering an `undefined` label).
+
+- 417ab29: Reveal masking — show/hide each sensitive value in place (WPAY-5064). The
+  masked state is per row (number, expiry, CVV, PIN; never the cardholder) and
+  lives in the frame; while masked the value TEXT is replaced (card number:
+  one glyph per digit except the last four; expiry `••/••`; CVV / PIN fully),
+  with the same character count so the row keeps its height. The values are
+  still fetched once at mount under the step-up and the copy control still
+  copies the real value — masking is a display aid, not a second
+  authorisation. Two things change the state:
+
+  - the USER, through an opt-in in-frame control: `maskToggle` (`'button'` =
+    eye / eye-off icon, themed by the `copyIcon*` tokens; `'text'` = a text
+    button from the new `show` / `hide` strings, sized to the wider word;
+    `'row'` = the value itself; default `'none'`), with `maskToggleByField`
+    overrides;
+  - the HOST, through `masked` at mount (`true`, or a per-row map such as
+    `{ cvv: true, pin: true }`) and `PciRevealElement.setMasked(boolean | map)`
+    later — no refetch, no new `actionToken` (host→frame event
+    `reveal-set-masked`, sent with the new reply-less `PciFrameChannel.post()`).
+
+  `onMaskedChange` / `reveal-masked-changed` reports the state of every
+  rendered maskable row (never the cardholder) after every change with
+  `{ masked, field?, reason }` (`'init'`,
+  `'user'`, `'host'`, `'timeout'`). `maskAfter` (ms, a number or a per-row map;
+  default never) re-masks a shown row from the frame; `onRevealRequested`
+  gates revealing: the toggle then only asks (`reveal-requested { field }`)
+  and the host reveals with `setMasked({ [field]: false })`. React: the
+  `masked` prop of `CardReveal` is live (forwarded in place, a map compared by
+  value); `onMaskedChange` and `onRevealRequested` are props. New string
+  `maskedPlaceholder` (the glyph; default `•`). Older frames ignore every
+  masking option and show the values: ship the frames first.
+
+  Reveal copy control — `copy: 'text'` renders the `copy` / `copied` strings
+  as a text button (the same shape set as `maskToggle`), and `copyByField`
+  overrides `copy` per row (`{ pin: 'none' }` keeps the icon button everywhere
+  but the PIN). Each entry is validated in the frame; an invalid entry leaves
+  that row on `copy`; older frames ignore the map. `copy: 'none'` keeps its
+  meaning (no control, the value stays selectable text).
+
+  Frames: the reveal presentation options are now resolved in one pure module
+  (`revealOptions.ts`) with unit tests; `fields` that is not an array is
+  ignored instead of thrown on; a row's side controls (toggle, copy) are
+  siblings of the cell, so `copy: 'row'` and a toggle button combine.
+
+- 731da3e: Wallet checkout TOKEN MODE (WPAY-4431): pass the backend's short-lived top-up
+  token as `auth.checkoutToken` and the hosted checkout executes the top-up
+  itself, reporting `onExecuted` / `onExecuteFailed` (`wallet-executed` /
+  `wallet-execute-failed` on the wire) — the wallet payment token never leaves
+  the frame. Legacy tokenize-and-return (`onToken`) is unchanged without `auth`.
+
+  Token mode also brings Google Pay to desktop (`googlePayHandoff: 'qr' | 'none'`,
+  probe flag `googlePayHandoff`): the frame draws a QR that carries the checkout
+  itself — the token, the quote and the estimate's `provider` name (new init /
+  `arm()` / `update()` field) — and an Android phone opens the same checkout
+  top-level, pays and executes. Nothing is stored on the frames service and the
+  desktop never learns the outcome: hosts reconcile by their own status reads
+  after `wallet-state: handoff-pending`. `arm(quote, config, auth?, provider?)` /
+  `update(quote, config?, auth?, provider?)`; `wallet-update` carries `auth` and
+  `provider`; new `wallet-state` values `executing`, `handoff-pending`.
+
+  `buildWalletLaunchFragment` / `buildWalletLaunchUrl` (core) build the same
+  compact fragment for a Chrome Custom Tab launch (`#t=&e=&s=&p=[&r=]`); the page
+  resolves the provider block from the public BaaS config by name.
+
+### Patch Changes
+
+- 274c69f: Fixed: the frames rendered as solid white rectangles in host pages that declare
+  `<meta name="color-scheme" content="dark">` (or `light dark` with dark
+  preferred) — typical of hybrid-app shells and dark-themed sites. The SDK set
+  `color-scheme: normal` on the iframe element; Chromium resolves `normal` from
+  the host's meta, so under a dark host the element became dark while the frame
+  document is light, and on that mismatch the browser paints the frame's canvas
+  opaque (CSS Color Adjust). The iframe element is now explicitly
+  `color-scheme: light`, matching the frame documents, which now declare
+  `:root { color-scheme: light }` as well — the frames stay transparent under any
+  host scheme. Hosts that set their dark theme through CSS alone were never
+  affected. The SDK change alone removes the mismatch for an updated host; the
+  frame-document change makes the pair explicit and independent of any meta.
+- Updated dependencies [8097859]
+- Updated dependencies [901cddf]
+- Updated dependencies [cc46627]
+- Updated dependencies [390c416]
+- Updated dependencies [274c69f]
+- Updated dependencies [b43affc]
+- Updated dependencies [d4654e9]
+- Updated dependencies [417ab29]
+- Updated dependencies [1d89a12]
+- Updated dependencies [5f67be4]
+- Updated dependencies [33b4595]
+- Updated dependencies [a629a98]
+- Updated dependencies [731da3e]
+  - @wirexapp/card-sdk-core@1.1.0
+
 ## 1.1.0-beta.4
 
 ### Minor Changes

package/dist/index.d.ts

@@ -5,7 +5,7 @@
  */
 import { type PciSdkConfig } from '@wirexapp/card-sdk-core';
 import { PciRevealElement, type PciRevealElementConfig } from './revealElement.js';
-export type { PciRevealAuth, PciRevealElementConfig } from './revealElement.js';
+export type { PciRevealAuth, PciRevealElementConfig, PciRevealMaskedChange } from './revealElement.js';
 export { PciRevealElement } from './revealElement.js';
 /** Create a reveal element bound to the given frame origin. */
 export declare const createCardReveal: (sdk: PciSdkConfig, config: PciRevealElementConfig) => PciRevealElement;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE3E,OAAO,EAAE,gBAAgB,EAAE,KAAK,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAEhF,YAAY,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAC7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,+DAA+D;AAC/D,eAAO,MAAM,gBAAgB,GAAI,KAAK,YAAY,EAAE,QAAQ,sBAAsB,KAAG,gBACzB,CAAC;AAI7D,mBAAmB,yBAAyB,CAAC;AAG7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE3E,OAAO,EAAE,gBAAgB,EAAE,KAAK,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAEhF,YAAY,EAAE,aAAa,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACpG,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,+DAA+D;AAC/D,eAAO,MAAM,gBAAgB,GAAI,KAAK,YAAY,EAAE,QAAQ,sBAAsB,KAAG,gBACzB,CAAC;AAI7D,mBAAmB,yBAAyB,CAAC;AAG7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/revealElement.d.ts

@@ -1,4 +1,4 @@
-import type { PciAppearance, PciFrameStrings, PciRevealCopyMode, PciRevealField, PciRevealLayout, PciRevealRowStyle, PciRevealState } from '@wirexapp/card-sdk-core';
+import type { PciAppearance, PciFrameStrings, PciRevealCopyByField, PciRevealCopyMode, PciRevealField, PciRevealLayout, PciRevealMaskedFields, PciRevealMaskedReason, PciRevealMaskedState, PciRevealMaskToggleByField, PciRevealMaskToggleMode, PciRevealRowStyle, PciRevealState } from '@wirexapp/card-sdk-core';
 export interface PciRevealAuth {
     getBearerToken: () => Promise<string>;
     /** Cardholder identity headers (X-User-Email / X-User-Wallet). Per-user
@@ -8,6 +8,16 @@ export interface PciRevealAuth {
     userEmail?: string;
     userWallet?: string;
 }
+/** `onMaskedChange` payload: the masked state of every rendered maskable row
+ *  (never the cardholder, so "every value true" means all hidden) after a
+ *  change, which row the user toggled or the timer re-masked (absent for
+ *  the mount report and for `setMasked()`), and who made the change. Field
+ *  names, booleans and a reason — never a value. */
+export interface PciRevealMaskedChange {
+    masked: PciRevealMaskedState;
+    field?: PciRevealField;
+    reason: PciRevealMaskedReason;
+}
 export interface PciRevealElementConfig {
     cardId: string;
     /** One-shot step-up token minted by the host via the wallet-signature flow.
@@ -24,9 +34,10 @@ export interface PciRevealElementConfig {
     auth: PciRevealAuth;
     appearance?: PciAppearance;
     strings?: PciFrameStrings;
-    /** Copy affordance: `'button'` (default, the icon button), `'row'` (the
-     *  whole row is one copy control, no icon) or `'none'`. Copy still runs
-     *  inside the frame and `onCopied` still fires in `'row'` mode. Read at
+    /** Copy affordance: `'button'` (default, the icon button), `'text'` (a
+     *  text button from the `copy` / `copied` strings), `'row'` (the whole
+     *  row is one copy control, no icon) or `'none'`. Copy still runs inside
+     *  the frame and `onCopied` still fires in every copying mode. Read at
      *  mount, like `appearance`. */
     copy?: PciRevealCopyMode;
     /** Render the label above each value (default `true`). `false` renders no
@@ -41,6 +52,36 @@ export interface PciRevealElementConfig {
      *  apart) so e.g. `['expiry', 'cvv']` is one frame and one `/details`
      *  call; `'column'` (default) stacks them. Read at mount. */
     layout?: PciRevealLayout;
+    /** Copy affordance per row, overriding `copy` for the named fields only
+     *  (e.g. `{ pin: 'none' }`). Each entry is validated in the frame; an
+     *  invalid one leaves that row on `copy`. Read at mount. */
+    copyByField?: PciRevealCopyByField;
+    /** Start with the values masked: `true` for every sensitive row, or a map
+     *  of the rows to mask (`{ cvv: true, pin: true }`; default: nothing
+     *  masked). The values are still fetched at mount under the step-up;
+     *  masking only replaces the TEXT the frame draws (card number: all but
+     *  the last four digits; expiry `••/••`; CVV / PIN fully; the cardholder
+     *  row never). The copy control keeps copying the real value. The state
+     *  is per row and lives in the frame; the user's `maskToggle` and your
+     *  `setMasked()` both change it in place — no refetch, no new token. An
+     *  older frame ignores it and shows the values — `onMaskedChange` reports
+     *  the state the frame actually applied. */
+    masked?: boolean | PciRevealMaskedFields;
+    /** The in-frame show/hide control on every sensitive row (default
+     *  `'none'`: drive masking from your own UI through `setMasked()`).
+     *  `'button'` — an eye / eye-off icon button beside the value (before the
+     *  copy button, same `copyIcon*` tokens); `'text'` — a text button from
+     *  the `show` / `hide` strings; `'row'` — tapping the value toggles it
+     *  (where the row is also the copy control, copying wins). Read at mount. */
+    maskToggle?: PciRevealMaskToggleMode;
+    /** `maskToggle` per row, overriding it for the named fields only. */
+    maskToggleByField?: PciRevealMaskToggleByField;
+    /** Re-mask a shown row after this many milliseconds (a number for every
+     *  sensitive row, or a map per row; default: never). Counted from the
+     *  moment the value is visible; masking it earlier cancels the timer.
+     *  Reported through `onMaskedChange` with reason `'timeout'`. A host with
+     *  its own policy needs none of this — re-mask through `setMasked()`. */
+    maskAfter?: number | Partial<Record<PciRevealField, number>>;
     onStateChange?: (state: PciRevealState) => void;
     /** The user copied a row's value inside the frame. Carries the field name
      *  ONLY — never the value or anything derived from it. Intended for host
@@ -48,6 +89,17 @@ export interface PciRevealElementConfig {
     onCopied?: (event: {
         field: PciRevealField;
     }) => void;
+    /** The frame's masked state as applied: once at mount (confirming
+     *  `masked`) and after every change — the user's toggle, your
+     *  `setMasked()`, the `maskAfter` timer. */
+    onMaskedChange?: (event: PciRevealMaskedChange) => void;
+    /** Gate revealing behind your own check: when set, the in-frame toggle
+     *  does NOT reveal a masked row — the frame reports the request here and
+     *  the row stays masked until you call `setMasked({ [field]: false })`
+     *  (after your step-up, biometrics, …). Hiding is never gated. */
+    onRevealRequested?: (event: {
+        field: PciRevealField;
+    }) => void;
 }
 /**
  * Own-card reveal element. The frame fetches PAN/expiry/CVV directly from the
@@ -57,8 +109,21 @@ export interface PciRevealElementConfig {
 export declare class PciRevealElement {
     private readonly config;
     private readonly channel;
+    /** `setMasked()` calls that arrived before the frame was initialized —
+     *  the frame drops events before its init, so they are replayed after it,
+     *  in order (the frame merges them; unchanged state is reported by nobody). */
+    private pendingMasked;
+    private initialized;
+    private destroyed;
     constructor(frameUrl: string, config: PciRevealElementConfig);
     mount(container: HTMLElement): Promise<void>;
+    /** Mask or show values in place — no refetch, no new `actionToken`.
+     *  `true` / `false` sets every sensitive row; a map sets the rows it
+     *  names and leaves the others (`{ cvv: false }` reveals the CVV only).
+     *  Safe to call before `mount()` resolves (applied once the frame is
+     *  initialized) and after `destroy()` (ignored). The frame confirms
+     *  through `onMaskedChange` when the state actually changed. */
+    setMasked(masked: boolean | PciRevealMaskedFields): void;
     destroy(): void;
 }
 //# sourceMappingURL=revealElement.d.ts.map

package/dist/revealElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"revealElement.d.ts","sourceRoot":"","sources":["../src/revealElement.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,aAAa;IAC5B,cAAc,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;IACtC;;;4DAGwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,MAAM,CAAC;IACf;;;gCAG4B;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB;iFAC6E;IAC7E,MAAM,CAAC,EAAE,cAAc,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE,aAAa,CAAC;IACpB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;oCAGgC;IAChC,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;sDAEkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;+EAE2E;IAC3E,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B;;iEAE6D;IAC7D,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD;;qBAEiB;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,cAAc,CAAA;KAAE,KAAK,IAAI,CAAC;CACvD;AAED;;;;GAIG;AACH,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAyB;IAChD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAkB;gBAE9B,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,sBAAsB;IAStD,KAAK,CAAC,SAAS,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IA2BlD,OAAO,IAAI,IAAI;CAGhB"}
+{"version":3,"file":"revealElement.d.ts","sourceRoot":"","sources":["../src/revealElement.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,oBAAoB,EACpB,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,0BAA0B,EAC1B,uBAAuB,EACvB,iBAAiB,EACjB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,aAAa;IAC5B,cAAc,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;IACtC;;;4DAGwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;oDAIoD;AACpD,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,oBAAoB,CAAC;IAC7B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,qBAAqB,CAAC;CAC/B;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,MAAM,CAAC;IACf;;;gCAG4B;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB;iFAC6E;IAC7E,MAAM,CAAC,EAAE,cAAc,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE,aAAa,CAAC;IACpB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;;oCAIgC;IAChC,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;sDAEkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;+EAE2E;IAC3E,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B;;iEAE6D;IAC7D,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;gEAE4D;IAC5D,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC;;;;;;;;;gDAS4C;IAC5C,MAAM,CAAC,EAAE,OAAO,GAAG,qBAAqB,CAAC;IACzC;;;;;iFAK6E;IAC7E,UAAU,CAAC,EAAE,uBAAuB,CAAC;IACrC,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,0BAA0B,CAAC;IAC/C;;;;6EAIyE;IACzE,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;IAC7D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD;;qBAEiB;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,cAAc,CAAA;KAAE,KAAK,IAAI,CAAC;IACtD;;gDAE4C;IAC5C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACxD;;;sEAGkE;IAClE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,cAAc,CAAA;KAAE,KAAK,IAAI,CAAC;CAChE;AAED;;;;GAIG;AACH,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAyB;IAChD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAkB;IAC1C;;mFAE+E;IAC/E,OAAO,CAAC,aAAa,CAA8C;IACnE,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,SAAS,CAAS;gBAEd,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,sBAAsB;IAatD,KAAK,CAAC,SAAS,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAuClD;;;;;oEAKgE;IAChE,SAAS,CAAC,MAAM,EAAE,OAAO,GAAG,qBAAqB,GAAG,IAAI;IASxD,OAAO,IAAI,IAAI;CAKhB"}

package/dist/revealElement.js

@@ -6,6 +6,12 @@ import { PciFrameChannel } from '@wirexapp/card-sdk-core';
  */
 export class PciRevealElement {
     constructor(frameUrl, config) {
+        /** `setMasked()` calls that arrived before the frame was initialized —
+         *  the frame drops events before its init, so they are replayed after it,
+         *  in order (the frame merges them; unchanged state is reported by nobody). */
+        this.pendingMasked = [];
+        this.initialized = false;
+        this.destroyed = false;
         this.config = config;
         this.channel = new PciFrameChannel(frameUrl, {}, { allowClipboard: true });
         this.channel.onMessage(message => {
@@ -13,6 +19,11 @@ export class PciRevealElement {
                 config.onStateChange?.(message.state);
             if (message.type === 'reveal-copied')
                 config.onCopied?.({ field: message.field });
+            if (message.type === 'reveal-masked-changed') {
+                config.onMaskedChange?.({ masked: message.masked, field: message.field, reason: message.reason });
+            }
+            if (message.type === 'reveal-requested')
+                config.onRevealRequested?.({ field: message.field });
         });
     }
     async mount(container) {
@@ -38,10 +49,41 @@ export class PciRevealElement {
                 showLabels: this.config.showLabels,
                 rowStyle: this.config.rowStyle,
                 layout: this.config.layout,
+                copyByField: this.config.copyByField,
+                masked: this.config.masked,
+                maskToggle: this.config.maskToggle,
+                maskToggleByField: this.config.maskToggleByField,
+                maskAfter: this.config.maskAfter,
+                // Revealing is the host's call exactly when it asked to hear about
+                // the requests.
+                revealGate: this.config.onRevealRequested ? 'host' : 'frame',
             },
         });
+        if (this.destroyed)
+            return;
+        this.initialized = true;
+        for (const masked of this.pendingMasked)
+            this.channel.post({ type: 'reveal-set-masked', masked });
+        this.pendingMasked = [];
+    }
+    /** Mask or show values in place — no refetch, no new `actionToken`.
+     *  `true` / `false` sets every sensitive row; a map sets the rows it
+     *  names and leaves the others (`{ cvv: false }` reveals the CVV only).
+     *  Safe to call before `mount()` resolves (applied once the frame is
+     *  initialized) and after `destroy()` (ignored). The frame confirms
+     *  through `onMaskedChange` when the state actually changed. */
+    setMasked(masked) {
+        if (this.destroyed)
+            return;
+        if (!this.initialized) {
+            this.pendingMasked.push(masked);
+            return;
+        }
+        this.channel.post({ type: 'reveal-set-masked', masked });
     }
     destroy() {
+        this.destroyed = true;
+        this.pendingMasked = [];
         this.channel.destroy();
     }
 }

package/dist/revealElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"revealElement.js","sourceRoot":"","sources":["../src/revealElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AA6D1D;;;;GAIG;AACH,MAAM,OAAO,gBAAgB;IAI3B,YAAY,QAAgB,EAAE,MAA8B;QAC1D,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,IAAI,eAAe,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;QAC3E,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE;YAC/B,IAAI,OAAO,CAAC,IAAI,KAAK,cAAc;gBAAE,MAAM,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YAC3E,IAAI,OAAO,CAAC,IAAI,KAAK,eAAe;gBAAE,MAAM,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;QACpF,CAAC,CAAC,CAAC;IACL,CAAC;IAED,KAAK,CAAC,KAAK,CAAC,SAAsB;QAChC,MAAM,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACpC,MAAM,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;YACzB,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE;gBACN,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE;oBACJ,WAAW,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,EAAE;oBACpD,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS;oBACrC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU;iBACxC;gBACD,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM;gBAC1B,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,WAAW;gBACpC,YAAY,EAAE,IAAI,CAAC,MAAM,CAAC,YAAY;gBACtC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;gBAC9B,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM;gBAC1B,cAAc,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc;gBAC1C,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU;gBAClC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO;gBAC5B,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI;gBACtB,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU;gBAClC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;gBAC9B,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM;aAC3B;SACF,CAAC,CAAC;IACL,CAAC;IAED,OAAO;QACL,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;IACzB,CAAC;CACF"}
+{"version":3,"file":"revealElement.js","sourceRoot":"","sources":["../src/revealElement.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wirexapp/card-reveal-web",
-  "version": "1.1.0-beta.4",
+  "version": "1.1.0",
   "type": "module",
   "description": "Reveal an issued card's PAN/expiry/CVV inside Wirex-served PCI iframes; values never reach the host page. CHD-free loader.",
   "license": "UNLICENSED",
@@ -37,6 +37,6 @@
     "prepublishOnly": "yarn clean && yarn build"
   },
   "dependencies": {
-    "@wirexapp/card-sdk-core": "1.1.0-beta.4"
+    "@wirexapp/card-sdk-core": "1.1.0"
   }
 }