@wirexapp/card-sdk-web 1.1.0-beta.4 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +219 -0
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,224 @@
|
|
|
1
1
|
# @wirexapp/card-sdk-web
|
|
2
2
|
|
|
3
|
+
## 1.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 8097859: CVV entry masking — show / hide what was typed into the top-up CVV field. The
|
|
8
|
+
CVV has always been masked as it is typed (a password input); this adds the
|
|
9
|
+
reveal element's masking model to that input, for both collect variants
|
|
10
|
+
(`createCardTopUpFields`, `createCardTopUpForm`). The card number is not
|
|
11
|
+
affected, and with no option passed nothing changes.
|
|
12
|
+
|
|
13
|
+
- `masked` (boolean, default `true`) — the state at mount; `false` starts the
|
|
14
|
+
field shown.
|
|
15
|
+
- `maskToggle: 'button' | 'text' | 'none'` (default `'none'`) — an in-frame
|
|
16
|
+
control at the field's right edge: the reveal's eye / eye-off icon, or a
|
|
17
|
+
text button from the new collect strings `show` / `hide`. It is the same
|
|
18
|
+
control the reveal rows draw (one module in the frames), themed by the same
|
|
19
|
+
`copyIconSize` / `colorCopyIcon` / `colorCopyIconHover` tokens. No `'row'`
|
|
20
|
+
mode: a tap on an input has to focus it. The toggle never takes the focus
|
|
21
|
+
from the field; the value and the caret stay.
|
|
22
|
+
- `maskAfter` (ms, default never) — shown digits re-mask from the frame,
|
|
23
|
+
counted from the moment they are visible.
|
|
24
|
+
- `setMasked(boolean)` on `PciCollectElement` and `PciCollectGroup` (the group
|
|
25
|
+
forwards to its `cvv` field) — host control in place, safe before `mount()`
|
|
26
|
+
resolves and after `destroy()`. Host→frame event `collect-set-masked`, sent
|
|
27
|
+
with the reply-less `PciFrameChannel.post()`.
|
|
28
|
+
- `onMaskedChange({ masked, reason })` — the state the frame applied, once at
|
|
29
|
+
mount (`'init'`) and after every change (`'user'`, `'host'`, `'timeout'`).
|
|
30
|
+
Frame→host event `collect-masked-changed`: a boolean and a reason, never
|
|
31
|
+
the value.
|
|
32
|
+
- `PciCollectGroup.field(name, options?)` takes the same masking options for
|
|
33
|
+
the `cvv` field (they win over the group config's).
|
|
34
|
+
- React: `CardCvvField` takes `masked` (live — forwarded in place, never a
|
|
35
|
+
remount), `maskToggle`, `maskAfter` and `onMaskedChange`. Mirroring
|
|
36
|
+
`onMaskedChange` into the state `masked` is rendered from is safe — the rule
|
|
37
|
+
is "when in doubt, mask": a hide is always sent, a show is not sent when it
|
|
38
|
+
is the echo of the frame's own "shown" report.
|
|
39
|
+
|
|
40
|
+
No reveal gate (`onRevealRequested`) on the input — the digits are the user's
|
|
41
|
+
own typing — and no `maskedPlaceholder`: the masked rendering is the browser's
|
|
42
|
+
password bullet. Microsoft Edge's built-in reveal button is now hidden in the
|
|
43
|
+
CVV field (it showed the digits behind the frame's state); the SDK's toggle
|
|
44
|
+
and `setMasked()` are the only ways to show them, in every browser alike.
|
|
45
|
+
The OCT package's surface is unchanged (its profile has no CVV). Additive
|
|
46
|
+
within protocol v1: frames that predate this ignore the three options and
|
|
47
|
+
`collect-set-masked`, keep the CVV masked and never send
|
|
48
|
+
`collect-masked-changed`; ship the frames first.
|
|
49
|
+
|
|
50
|
+
- 901cddf: Collect failures. `PciFrameRequestError` gains `code`,
|
|
51
|
+
`retryable` and `reason`: the mobile SDK's failure payload
|
|
52
|
+
(`WirexCollectErrorPayload`), with the same values classified by the same rules.
|
|
53
|
+
|
|
54
|
+
- `code` is one of a frozen set: `unauthorized`, `actionRequired`,
|
|
55
|
+
`updateRequired`, `invalidInput`, `temporary`, `failed`. It is typed as the
|
|
56
|
+
`PciFrameErrorCode` union, so a `switch` over it checks exhaustively.
|
|
57
|
+
- `retryable` says whether sending the request again is safe.
|
|
58
|
+
- `reason` is present where one `code` has two remedies: `invalidInput` with
|
|
59
|
+
`cardAlreadyLinked` (enter another card) or `cardLimitReached` (remove one
|
|
60
|
+
first). The set grows; handle an unknown value.
|
|
61
|
+
|
|
62
|
+
The frame classifies a tokenize failure by the backend's business code on a 400
|
|
63
|
+
(`0243`, `0366`), otherwise by the HTTP status. A request without an answer is
|
|
64
|
+
`temporary`; a `Validation failed — …` reply is `invalidInput`. Messages are
|
|
65
|
+
unchanged. Older frames send none of the fields (`code` and `reason` undefined,
|
|
66
|
+
`retryable` false): ship the frames first.
|
|
67
|
+
|
|
68
|
+
- 390c416: New `fontSmoothing` appearance token — `'auto'` (default, as today) or
|
|
69
|
+
`'antialiased'`: the frame document gets `-webkit-font-smoothing:
|
|
70
|
+
antialiased` and `-moz-osx-font-smoothing: grayscale`. Host pages whose
|
|
71
|
+
global CSS antialiases the body (Mantine, Tailwind preflight, most design
|
|
72
|
+
systems) otherwise sit next to frame text that macOS renders visibly heavier
|
|
73
|
+
at the same family, size and weight. Applies to the collect, reveal and
|
|
74
|
+
wallet frames; enumerated and re-validated in the frame, and an older frame
|
|
75
|
+
drops the token and keeps `auto`.
|
|
76
|
+
- d4654e9: Reveal `copy` option — `'button'` (default: the icon button, as today),
|
|
77
|
+
`'row'` (the whole row is one copy control: a real `<button>`, no icon, no
|
|
78
|
+
reserved width; the copied state shows on the value and is announced to
|
|
79
|
+
assistive tech) or `'none'` (no copy affordance; the value stays selectable
|
|
80
|
+
text). Copy still runs inside the frame and `onCopied` still carries the
|
|
81
|
+
field name only. Enumerated and re-validated in the frame; an older frame
|
|
82
|
+
ignores the option and renders the icon button.
|
|
83
|
+
|
|
84
|
+
Reveal `showLabels` option (default `true`). `false` renders no label
|
|
85
|
+
element at all — not an empty one — so a row is exactly as tall as its
|
|
86
|
+
value; the label string becomes the value's `aria-label`, and the icon copy
|
|
87
|
+
button's name carries the field ("Card Number: Copy"). With `copy:
|
|
88
|
+
'button'` such a row is floored at the icon's hit target (`copyIconSize` +
|
|
89
|
+
12px) so adjacent buttons never overlap. Replaces the `fontSizeLabel: '0px'`
|
|
90
|
+
/ `lineHeightLabel: '0px'` workaround.
|
|
91
|
+
|
|
92
|
+
Reveal `rowStyle` option — `'plain'` (default, as today) or `'boxed'`: each
|
|
93
|
+
row becomes a pill drawn from the box tokens the collect inputs already use
|
|
94
|
+
(`colorBackground`, `colorBorder`, `borderRadius`, `borderWidth`,
|
|
95
|
+
`controlMinHeight`; 16px horizontal padding, `spacingUnit` vertical,
|
|
96
|
+
`fieldGap` between pills), so a border hugs the value instead of the
|
|
97
|
+
iframe. Deliberately opt-in: those tokens already reach reveal frames from
|
|
98
|
+
hosts that share one appearance object with collect, so honouring them on
|
|
99
|
+
presence would have restyled existing reveal rows.
|
|
100
|
+
|
|
101
|
+
Reveal `layout` option — `'column'` (default) or `'row'`: the frame's
|
|
102
|
+
fields sit side by side with equal widths, separated by the new `fieldGap`
|
|
103
|
+
appearance token (length; default `12px`; also the gap between `'boxed'`
|
|
104
|
+
pills). `fields: ['expiry', 'cvv']` with `layout: 'row'` is one frame and
|
|
105
|
+
one `/details` call where two single-field frames called it twice with the
|
|
106
|
+
same action token. Frame-wide on purpose: a mixed arrangement is two
|
|
107
|
+
frames, because a nested `fields` shape would not be ignorable by older
|
|
108
|
+
frames.
|
|
109
|
+
|
|
110
|
+
New `wordSpacing` appearance token (length grammar): extra space between
|
|
111
|
+
the card number's four-digit groups in the reveal frame — the value is
|
|
112
|
+
still chunked with single spaces, and no other row is affected. Reveal
|
|
113
|
+
`fields` entries are now validated against the known row names (unknown
|
|
114
|
+
entries are dropped instead of rendering an `undefined` label).
|
|
115
|
+
|
|
116
|
+
- 417ab29: Reveal masking — show/hide each sensitive value in place (WPAY-5064). The
|
|
117
|
+
masked state is per row (number, expiry, CVV, PIN; never the cardholder) and
|
|
118
|
+
lives in the frame; while masked the value TEXT is replaced (card number:
|
|
119
|
+
one glyph per digit except the last four; expiry `••/••`; CVV / PIN fully),
|
|
120
|
+
with the same character count so the row keeps its height. The values are
|
|
121
|
+
still fetched once at mount under the step-up and the copy control still
|
|
122
|
+
copies the real value — masking is a display aid, not a second
|
|
123
|
+
authorisation. Two things change the state:
|
|
124
|
+
|
|
125
|
+
- the USER, through an opt-in in-frame control: `maskToggle` (`'button'` =
|
|
126
|
+
eye / eye-off icon, themed by the `copyIcon*` tokens; `'text'` = a text
|
|
127
|
+
button from the new `show` / `hide` strings, sized to the wider word;
|
|
128
|
+
`'row'` = the value itself; default `'none'`), with `maskToggleByField`
|
|
129
|
+
overrides;
|
|
130
|
+
- the HOST, through `masked` at mount (`true`, or a per-row map such as
|
|
131
|
+
`{ cvv: true, pin: true }`) and `PciRevealElement.setMasked(boolean | map)`
|
|
132
|
+
later — no refetch, no new `actionToken` (host→frame event
|
|
133
|
+
`reveal-set-masked`, sent with the new reply-less `PciFrameChannel.post()`).
|
|
134
|
+
|
|
135
|
+
`onMaskedChange` / `reveal-masked-changed` reports the state of every
|
|
136
|
+
rendered maskable row (never the cardholder) after every change with
|
|
137
|
+
`{ masked, field?, reason }` (`'init'`,
|
|
138
|
+
`'user'`, `'host'`, `'timeout'`). `maskAfter` (ms, a number or a per-row map;
|
|
139
|
+
default never) re-masks a shown row from the frame; `onRevealRequested`
|
|
140
|
+
gates revealing: the toggle then only asks (`reveal-requested { field }`)
|
|
141
|
+
and the host reveals with `setMasked({ [field]: false })`. React: the
|
|
142
|
+
`masked` prop of `CardReveal` is live (forwarded in place, a map compared by
|
|
143
|
+
value); `onMaskedChange` and `onRevealRequested` are props. New string
|
|
144
|
+
`maskedPlaceholder` (the glyph; default `•`). Older frames ignore every
|
|
145
|
+
masking option and show the values: ship the frames first.
|
|
146
|
+
|
|
147
|
+
Reveal copy control — `copy: 'text'` renders the `copy` / `copied` strings
|
|
148
|
+
as a text button (the same shape set as `maskToggle`), and `copyByField`
|
|
149
|
+
overrides `copy` per row (`{ pin: 'none' }` keeps the icon button everywhere
|
|
150
|
+
but the PIN). Each entry is validated in the frame; an invalid entry leaves
|
|
151
|
+
that row on `copy`; older frames ignore the map. `copy: 'none'` keeps its
|
|
152
|
+
meaning (no control, the value stays selectable text).
|
|
153
|
+
|
|
154
|
+
Frames: the reveal presentation options are now resolved in one pure module
|
|
155
|
+
(`revealOptions.ts`) with unit tests; `fields` that is not an array is
|
|
156
|
+
ignored instead of thrown on; a row's side controls (toggle, copy) are
|
|
157
|
+
siblings of the cell, so `copy: 'row'` and a toggle button combine.
|
|
158
|
+
|
|
159
|
+
- 731da3e: Wallet checkout TOKEN MODE (WPAY-4431): pass the backend's short-lived top-up
|
|
160
|
+
token as `auth.checkoutToken` and the hosted checkout executes the top-up
|
|
161
|
+
itself, reporting `onExecuted` / `onExecuteFailed` (`wallet-executed` /
|
|
162
|
+
`wallet-execute-failed` on the wire) — the wallet payment token never leaves
|
|
163
|
+
the frame. Legacy tokenize-and-return (`onToken`) is unchanged without `auth`.
|
|
164
|
+
|
|
165
|
+
Token mode also brings Google Pay to desktop (`googlePayHandoff: 'qr' | 'none'`,
|
|
166
|
+
probe flag `googlePayHandoff`): the frame draws a QR that carries the checkout
|
|
167
|
+
itself — the token, the quote and the estimate's `provider` name (new init /
|
|
168
|
+
`arm()` / `update()` field) — and an Android phone opens the same checkout
|
|
169
|
+
top-level, pays and executes. Nothing is stored on the frames service and the
|
|
170
|
+
desktop never learns the outcome: hosts reconcile by their own status reads
|
|
171
|
+
after `wallet-state: handoff-pending`. `arm(quote, config, auth?, provider?)` /
|
|
172
|
+
`update(quote, config?, auth?, provider?)`; `wallet-update` carries `auth` and
|
|
173
|
+
`provider`; new `wallet-state` values `executing`, `handoff-pending`.
|
|
174
|
+
|
|
175
|
+
`buildWalletLaunchFragment` / `buildWalletLaunchUrl` (core) build the same
|
|
176
|
+
compact fragment for a Chrome Custom Tab launch (`#t=&e=&s=&p=[&r=]`); the page
|
|
177
|
+
resolves the provider block from the public BaaS config by name.
|
|
178
|
+
|
|
179
|
+
- c57257e: The wallet top-up surface is stable. `card-wallet-topup-web` and the wallet
|
|
180
|
+
exports of `card-react` / `card-sdk-web` (`useWalletAvailability`,
|
|
181
|
+
`WalletTopUpForm`, `createWalletTopUpForm`, `openWalletCheckoutPopup`) ship
|
|
182
|
+
on `latest` with the rest of the family, under the same semver guarantees as
|
|
183
|
+
the PCI packages. The `@beta` TSDoc markers are gone, and the `beta` dist-tag
|
|
184
|
+
is no longer published to: install the family without a tag, all packages on
|
|
185
|
+
one version.
|
|
186
|
+
|
|
187
|
+
### Patch Changes
|
|
188
|
+
|
|
189
|
+
- 274c69f: Fixed: the frames rendered as solid white rectangles in host pages that declare
|
|
190
|
+
`<meta name="color-scheme" content="dark">` (or `light dark` with dark
|
|
191
|
+
preferred) — typical of hybrid-app shells and dark-themed sites. The SDK set
|
|
192
|
+
`color-scheme: normal` on the iframe element; Chromium resolves `normal` from
|
|
193
|
+
the host's meta, so under a dark host the element became dark while the frame
|
|
194
|
+
document is light, and on that mismatch the browser paints the frame's canvas
|
|
195
|
+
opaque (CSS Color Adjust). The iframe element is now explicitly
|
|
196
|
+
`color-scheme: light`, matching the frame documents, which now declare
|
|
197
|
+
`:root { color-scheme: light }` as well — the frames stay transparent under any
|
|
198
|
+
host scheme. Hosts that set their dark theme through CSS alone were never
|
|
199
|
+
affected. The SDK change alone removes the mismatch for an updated host; the
|
|
200
|
+
frame-document change makes the pair explicit and independent of any meta.
|
|
201
|
+
- Updated dependencies [8097859]
|
|
202
|
+
- Updated dependencies [901cddf]
|
|
203
|
+
- Updated dependencies [cc46627]
|
|
204
|
+
- Updated dependencies [390c416]
|
|
205
|
+
- Updated dependencies [274c69f]
|
|
206
|
+
- Updated dependencies [b43affc]
|
|
207
|
+
- Updated dependencies [d4654e9]
|
|
208
|
+
- Updated dependencies [417ab29]
|
|
209
|
+
- Updated dependencies [1d89a12]
|
|
210
|
+
- Updated dependencies [5f67be4]
|
|
211
|
+
- Updated dependencies [33b4595]
|
|
212
|
+
- Updated dependencies [a629a98]
|
|
213
|
+
- Updated dependencies [731da3e]
|
|
214
|
+
- Updated dependencies [c57257e]
|
|
215
|
+
- @wirexapp/card-sdk-core@1.1.0
|
|
216
|
+
- @wirexapp/card-topup-web@1.1.0
|
|
217
|
+
- @wirexapp/card-oct-web@1.1.0
|
|
218
|
+
- @wirexapp/card-reveal-web@1.1.0
|
|
219
|
+
- @wirexapp/card-3ds-web@1.1.0
|
|
220
|
+
- @wirexapp/card-wallet-topup-web@1.1.0
|
|
221
|
+
|
|
3
222
|
## 1.1.0-beta.4
|
|
4
223
|
|
|
5
224
|
### Minor Changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wirexapp/card-sdk-web",
|
|
3
|
-
"version": "1.1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Umbrella over the Wirex PCI card SDK capability packages (topup, oct, reveal, 3DS, wallet top-up) with the createPciSdk factory. CHD-free loader.",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -37,11 +37,11 @@
|
|
|
37
37
|
"prepublishOnly": "yarn clean && yarn build"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@wirexapp/card-3ds-web": "1.1.0
|
|
41
|
-
"@wirexapp/card-oct-web": "1.1.0
|
|
42
|
-
"@wirexapp/card-reveal-web": "1.1.0
|
|
43
|
-
"@wirexapp/card-sdk-core": "1.1.0
|
|
44
|
-
"@wirexapp/card-topup-web": "1.1.0
|
|
45
|
-
"@wirexapp/card-wallet-topup-web": "1.1.0
|
|
40
|
+
"@wirexapp/card-3ds-web": "1.1.0",
|
|
41
|
+
"@wirexapp/card-oct-web": "1.1.0",
|
|
42
|
+
"@wirexapp/card-reveal-web": "1.1.0",
|
|
43
|
+
"@wirexapp/card-sdk-core": "1.1.0",
|
|
44
|
+
"@wirexapp/card-topup-web": "1.1.0",
|
|
45
|
+
"@wirexapp/card-wallet-topup-web": "1.1.0"
|
|
46
46
|
}
|
|
47
47
|
}
|