DASH-4251 feat(device-data-collection.ts): add data device iframe to sdk by Devlaird · Pull Request #49 · fatzebra/fatzebra-js

Devlaird · 2025-08-29T03:43:32Z

📝 Description

Jira ticket: https://fatzebra.atlassian.net/browse/DASH-4251

Details of change

This PR adds a device data collection iframe to the SDK, it builds up the iframe programmatically, sets the device data collection url (obtained from the setup step) and submits the browser information to cybersource. The result of this device data collection is then sent back through the iframe and listened to here: https://github.com/fatzebra/fatzebra-js/pull/49/changes#diff-83824c86d9374e1a61667c46e39b1e188be35d0a021682e07fa9ce1503714f6dR60 it is from this point an error is logged or, we proceed with enrollment. The following stage (enrollment) is in this PR: Dash 4252 check enrollment (take-1) #54

Here is the sequence diagram

https://fatzebra.atlassian.net/wiki/spaces/~61e4f3f95fcc3700685404f6/pages/edit-v2/2754445322?draftShareId=ee1f53cd-33b8-461b-9885-1ed31ecca060

New3DSFlow (updated) (2).pdf

this was integration tested in staging against Brents PR: https://github.com/fatzebra/gateway/pull/147

Change Rollback Plan

Roll forward and is feature flagged under: https://crm.pmnts-staging.io/paynow_flipper/features/new_threeds_flow

Change Checklist

The following must be reviewed and signed off by the creator of the PR. To sign off review and check each

🔑 Security

Security of any environment is not reduced by this change.
All existing security controls remain in place or have been replaced with equal or stronger controls.

Testing of Changes

Testing results have been verified as complete and covering all aspects of the change.
Evidence of testing attached
Security scans are passing
No package vulnerabilities introduced

🔎 Quality assurance

Reviewed this PR myself
Automated tests are required and included
Security controls have been reviewed
Changes are Blue-Green friendly

this is a wip for building up the data device iframe, the next step is to implement the setIframeUrl method which is the result of calling sca/setup on gateway

…m fields collect device data for cybersource antifraud.

after tokenizing a card pass the card token to the new gateway client to run sca setup

… happy and sad path add spec for new-api-gateway-client to handle setup shape - paymentIntent and card token

threeds setup is on /threed_ds/setup path not on /sca/setup

setup params were not being passed through: cardToken & paymentIntent

pass correct shape of data for gateway to handle

fix spec

after tokenizing the card, hit three_ds/setup endpoint, use the result to populate iframe with url, jwt value, submit iframe form.

the device data collection iframe returns a result through postmessage

remove console log

src/dom.ts

pulled main into feature branch

snyk-io-au · 2025-09-24T23:46:35Z

⚠️ Snyk checks are incomplete.

Status	Scanner	Total (0)
⚠️	Open Source Security	See details
⚠️	Licenses	See details
✅	Code Security	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

src/main.ts

src/hpp/hpp.ts

fz-anvu · 2025-12-18T04:59:44Z

src/device-data-collection.ts

+
+  private static getFormOrThrow(): HTMLFormElement {
+    const el = this.getForm();
+    if (!el) throw new Error("Form not initialized. Call createIframe() first.");


Should we be handling these (and on line 148) somewhere?

fz-wtio

non-blocking comments

fz-wtio · 2025-12-18T06:07:40Z

src/device-data-collection.ts

+
+export default class DeviceDataCollection {
+  // Shared IDs so other classes can query the DOM directly too
+  static IFRAME_ID = "cardinal_collection_iframe";


static readonly instead?

ahh good shout out

fz-wtio · 2025-12-18T06:10:02Z

src/device-data-collection.ts

+  private static handleDataCollectionResponse(event: any) {
+    if (event.origin !== "https://centinelapistag.cardinalcommerce.com") { return; }
+
+    const response = JSON.parse(event.data);


Is this guaranteed (all event data from that origin is always parseable to JSON)? Or better if we err on the safe side (surround with try/catch)?

fz-wtio · 2025-12-18T06:54:37Z

src/dom.ts

+  ): HTMLElementTagNameMap[T] {
+    const id = props?.id?.toString();
+    if (id) {
+      const existing = doc.getElementById(id) as HTMLElementTagNameMap[T] | null;


I assume it's intentional the props are not applied again here? I guess the assumption being made here is that if an element with a props.id already exists then all the props it needs has already been applied by a previous operation.

…device-collection

Devlaird added 13 commits August 29, 2025 13:39

feat(device-data-collection.ts): add data device iframe to sdk

ab1b4e7

this is a wip for building up the data device iframe, the next step is to implement the setIframeUrl method which is the result of calling sca/setup on gateway

feat(device-data-collection.ts): collect device data and populate for…

7c20c86

…m fields collect device data for cybersource antifraud.

feat(new-api-gateway-client): add new gateway api for 3DS setup

11eeb13

after tokenizing a card pass the card token to the new gateway client to run sca setup

test(new-api-gateway-client.test): test verification hash responses -…

a5d8bb8

… happy and sad path add spec for new-api-gateway-client to handle setup shape - paymentIntent and card token

fix(new-api-gateway-client.ts): set correct path for setup

f35c21b

threeds setup is on /threed_ds/setup path not on /sca/setup

fix(hpp.ts): pass through setup params

7ce7ed1

setup params were not being passed through: cardToken & paymentIntent

fix(new-api-gateway-client): spread payment intent

6ddcb6f

pass correct shape of data for gateway to handle

fix(new-api-gateway-client): fix spec

eca6d54

fix spec

setIframeUrl

beeb581

feat(hpp.ts): submit device data collection to cardinal

2279c2c

after tokenizing the card, hit three_ds/setup endpoint, use the result to populate iframe with url, jwt value, submit iframe form.

feat(device-data-collection.ts): handle device data collection response

62b828c

the device data collection iframe returns a result through postmessage

revert(new-api-gateway-client): revert mock shape of data for setup spec

98254f2

fix: remove console log

62846a2

remove console log

Devlaird commented Sep 9, 2025

View reviewed changes

src/dom.ts Show resolved Hide resolved

chore(all): resolving conflicts

4514cfb

pulled main into feature branch

Merge branch 'main' into DASH-4251-device-collection

c6505e8

Devlaird marked this pull request as ready for review December 16, 2025 00:05

Devlaird requested a review from a team as a code owner December 16, 2025 00:05

fz-anvu reviewed Dec 16, 2025

View reviewed changes

src/main.ts Show resolved Hide resolved

fz-anvu reviewed Dec 16, 2025

View reviewed changes

src/hpp/hpp.ts Show resolved Hide resolved

fz-brentchuang approved these changes Dec 17, 2025

View reviewed changes

fz-anvu reviewed Dec 18, 2025

View reviewed changes

fz-wtio approved these changes Dec 18, 2025

View reviewed changes

Devlaird added 4 commits January 7, 2026 12:44

Merge branch 'main' of github.com:fatzebra/fatzebra-js into DASH-4251-…

9e6d684

…device-collection

tightened method access modifiers in the device data collection class

3f0df4c

remove weak types

aa0db2f

implement comments

eeca980

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DASH-4251 feat(device-data-collection.ts): add data device iframe to sdk#49

DASH-4251 feat(device-data-collection.ts): add data device iframe to sdk#49
Devlaird wants to merge 19 commits intomainfrom
DASH-4251-device-collection

Devlaird commented Aug 29, 2025 •

edited

Loading

Uh oh!

Uh oh!

snyk-io-au bot commented Sep 24, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

fz-anvu Dec 18, 2025

Uh oh!

fz-wtio left a comment

Uh oh!

fz-wtio Dec 18, 2025

Uh oh!

Devlaird Jan 7, 2026

Uh oh!

fz-wtio Dec 18, 2025

Uh oh!

fz-wtio Dec 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

4 participants

Conversation

Devlaird commented Aug 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 Description

Change Rollback Plan

Change Checklist

🔑 Security

Testing of Changes

🔎 Quality assurance

Uh oh!

Uh oh!

snyk-io-au bot commented Sep 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ Snyk checks are incomplete.

Uh oh!

Uh oh!

Uh oh!

fz-anvu Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

fz-wtio left a comment

Choose a reason for hiding this comment

Uh oh!

fz-wtio Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Devlaird Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

fz-wtio Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

fz-wtio Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

4 participants

Devlaird commented Aug 29, 2025 •

edited

Loading

snyk-io-au bot commented Sep 24, 2025 •

edited

Loading