@wirexapp/card-sdk-web 1.1.0-beta.3 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,258 @@
 # @wirexapp/card-sdk-web
 
+## 1.1.0
+
+### Minor Changes
+
+- 8097859: CVV entry masking — show / hide what was typed into the top-up CVV field. The
+  CVV has always been masked as it is typed (a password input); this adds the
+  reveal element's masking model to that input, for both collect variants
+  (`createCardTopUpFields`, `createCardTopUpForm`). The card number is not
+  affected, and with no option passed nothing changes.
+
+  - `masked` (boolean, default `true`) — the state at mount; `false` starts the
+    field shown.
+  - `maskToggle: 'button' | 'text' | 'none'` (default `'none'`) — an in-frame
+    control at the field's right edge: the reveal's eye / eye-off icon, or a
+    text button from the new collect strings `show` / `hide`. It is the same
+    control the reveal rows draw (one module in the frames), themed by the same
+    `copyIconSize` / `colorCopyIcon` / `colorCopyIconHover` tokens. No `'row'`
+    mode: a tap on an input has to focus it. The toggle never takes the focus
+    from the field; the value and the caret stay.
+  - `maskAfter` (ms, default never) — shown digits re-mask from the frame,
+    counted from the moment they are visible.
+  - `setMasked(boolean)` on `PciCollectElement` and `PciCollectGroup` (the group
+    forwards to its `cvv` field) — host control in place, safe before `mount()`
+    resolves and after `destroy()`. Host→frame event `collect-set-masked`, sent
+    with the reply-less `PciFrameChannel.post()`.
+  - `onMaskedChange({ masked, reason })` — the state the frame applied, once at
+    mount (`'init'`) and after every change (`'user'`, `'host'`, `'timeout'`).
+    Frame→host event `collect-masked-changed`: a boolean and a reason, never
+    the value.
+  - `PciCollectGroup.field(name, options?)` takes the same masking options for
+    the `cvv` field (they win over the group config's).
+  - React: `CardCvvField` takes `masked` (live — forwarded in place, never a
+    remount), `maskToggle`, `maskAfter` and `onMaskedChange`. Mirroring
+    `onMaskedChange` into the state `masked` is rendered from is safe — the rule
+    is "when in doubt, mask": a hide is always sent, a show is not sent when it
+    is the echo of the frame's own "shown" report.
+
+  No reveal gate (`onRevealRequested`) on the input — the digits are the user's
+  own typing — and no `maskedPlaceholder`: the masked rendering is the browser's
+  password bullet. Microsoft Edge's built-in reveal button is now hidden in the
+  CVV field (it showed the digits behind the frame's state); the SDK's toggle
+  and `setMasked()` are the only ways to show them, in every browser alike.
+  The OCT package's surface is unchanged (its profile has no CVV). Additive
+  within protocol v1: frames that predate this ignore the three options and
+  `collect-set-masked`, keep the CVV masked and never send
+  `collect-masked-changed`; ship the frames first.
+
+- 901cddf: Collect failures. `PciFrameRequestError` gains `code`,
+  `retryable` and `reason`: the mobile SDK's failure payload
+  (`WirexCollectErrorPayload`), with the same values classified by the same rules.
+
+  - `code` is one of a frozen set: `unauthorized`, `actionRequired`,
+    `updateRequired`, `invalidInput`, `temporary`, `failed`. It is typed as the
+    `PciFrameErrorCode` union, so a `switch` over it checks exhaustively.
+  - `retryable` says whether sending the request again is safe.
+  - `reason` is present where one `code` has two remedies: `invalidInput` with
+    `cardAlreadyLinked` (enter another card) or `cardLimitReached` (remove one
+    first). The set grows; handle an unknown value.
+
+  The frame classifies a tokenize failure by the backend's business code on a 400
+  (`0243`, `0366`), otherwise by the HTTP status. A request without an answer is
+  `temporary`; a `Validation failed — …` reply is `invalidInput`. Messages are
+  unchanged. Older frames send none of the fields (`code` and `reason` undefined,
+  `retryable` false): ship the frames first.
+
+- 390c416: New `fontSmoothing` appearance token — `'auto'` (default, as today) or
+  `'antialiased'`: the frame document gets `-webkit-font-smoothing:
+antialiased` and `-moz-osx-font-smoothing: grayscale`. Host pages whose
+  global CSS antialiases the body (Mantine, Tailwind preflight, most design
+  systems) otherwise sit next to frame text that macOS renders visibly heavier
+  at the same family, size and weight. Applies to the collect, reveal and
+  wallet frames; enumerated and re-validated in the frame, and an older frame
+  drops the token and keeps `auto`.
+- 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.
+
+- c57257e: The wallet top-up surface is stable. `card-wallet-topup-web` and the wallet
+  exports of `card-react` / `card-sdk-web` (`useWalletAvailability`,
+  `WalletTopUpForm`, `createWalletTopUpForm`, `openWalletCheckoutPopup`) ship
+  on `latest` with the rest of the family, under the same semver guarantees as
+  the PCI packages. The `@beta` TSDoc markers are gone, and the `beta` dist-tag
+  is no longer published to: install the family without a tag, all packages on
+  one version.
+
+### 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]
+- Updated dependencies [c57257e]
+  - @wirexapp/card-sdk-core@1.1.0
+  - @wirexapp/card-topup-web@1.1.0
+  - @wirexapp/card-oct-web@1.1.0
+  - @wirexapp/card-reveal-web@1.1.0
+  - @wirexapp/card-3ds-web@1.1.0
+  - @wirexapp/card-wallet-topup-web@1.1.0
+
+## 1.1.0-beta.4
+
+### Minor Changes
+
+- 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
+
+- Updated dependencies [731da3e]
+  - @wirexapp/card-sdk-core@1.1.0-beta.4
+  - @wirexapp/card-wallet-topup-web@1.1.0-beta.4
+  - @wirexapp/card-topup-web@1.1.0-beta.4
+  - @wirexapp/card-oct-web@1.1.0-beta.4
+  - @wirexapp/card-reveal-web@1.1.0-beta.4
+  - @wirexapp/card-3ds-web@1.1.0-beta.4
+
 ## 1.1.0-beta.3
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wirexapp/card-sdk-web",
-  "version": "1.1.0-beta.3",
+  "version": "1.1.0",
   "type": "module",
   "description": "Umbrella over the Wirex PCI card SDK capability packages (topup, oct, reveal, 3DS, wallet top-up) with the createPciSdk factory. CHD-free loader.",
   "license": "UNLICENSED",
@@ -37,11 +37,11 @@
     "prepublishOnly": "yarn clean && yarn build"
   },
   "dependencies": {
-    "@wirexapp/card-3ds-web": "1.1.0-beta.3",
-    "@wirexapp/card-oct-web": "1.1.0-beta.3",
-    "@wirexapp/card-reveal-web": "1.1.0-beta.3",
-    "@wirexapp/card-sdk-core": "1.1.0-beta.3",
-    "@wirexapp/card-topup-web": "1.1.0-beta.3",
-    "@wirexapp/card-wallet-topup-web": "1.1.0-beta.3"
+    "@wirexapp/card-3ds-web": "1.1.0",
+    "@wirexapp/card-oct-web": "1.1.0",
+    "@wirexapp/card-reveal-web": "1.1.0",
+    "@wirexapp/card-sdk-core": "1.1.0",
+    "@wirexapp/card-topup-web": "1.1.0",
+    "@wirexapp/card-wallet-topup-web": "1.1.0"
   }
 }