@wirexapp/card-reveal-web 0.1.0-beta.0

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# @wirexapp/card-reveal-web
+
+## 0.1.0-beta.0
+
+### Minor Changes
+
+- 1ff075a: Initial public beta of the Wirex PCI card SDK family: collect (top-up + OCT
+  destination), own-card reveal, 3DS step-up, React bindings, and the umbrella
+  package — all versioned in lockstep. Card data renders only inside
+  Wirex-served iframes; the packages are CHD-free loaders.
+
+### Patch Changes
+
+- Updated dependencies [1ff075a]
+  - @wirexapp/card-sdk-core@0.1.0-beta.0

package/README.md

@@ -0,0 +1,13 @@
+# @wirexapp/card-reveal-web
+
+Display an issued card's PAN / expiry / CVV inside Wirex-served PCI iframes. The frame
+fetches the values directly from the Wirex API and renders them in place;
+copy-to-clipboard runs inside the frame. The host page never sees the values. CHD-free
+loader.
+
+- `createCardReveal(sdk, config)` → `PciRevealElement { mount, destroy }`.
+- Requires the user's bearer plus a fresh single-use `action_token` (wallet-signature
+  step-up) minted immediately before mounting.
+
+React bindings: `@wirexapp/card-react`. Full partner docs: `partner-docs/` in the repo
+(packages → card-reveal-web).

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * `@wirexapp/card-reveal-web` — display an issued card's PAN / expiry / CVV
+ * inside Wirex-served iframes. The values render (and copy to clipboard) inside
+ * the frames only; the host page never sees them.
+ */
+import { type PciSdkConfig } from '@wirexapp/card-sdk-core';
+import { PciRevealElement, type PciRevealElementConfig } from './revealElement.js';
+export type { PciRevealAuth, PciRevealElementConfig } 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;
+export type * from '@wirexapp/card-sdk-core';
+export { PciFrameRequestError } from '@wirexapp/card-sdk-core';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +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,oBAAoB,CAAC;AAEnF,YAAY,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,+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/index.js

@@ -0,0 +1,14 @@
+/**
+ * `@wirexapp/card-reveal-web` — display an issued card's PAN / expiry / CVV
+ * inside Wirex-served iframes. The values render (and copy to clipboard) inside
+ * the frames only; the host page never sees them.
+ */
+import { buildFrameUrl } from '@wirexapp/card-sdk-core';
+import { PciRevealElement } from './revealElement.js';
+export { PciRevealElement } from './revealElement.js';
+/** Create a reveal element bound to the given frame origin. */
+export const createCardReveal = (sdk, config) => new PciRevealElement(buildFrameUrl(sdk, 'reveal'), config);
+// Value re-export so `error instanceof PciFrameRequestError` works when
+// imported from this package.
+export { PciFrameRequestError } from '@wirexapp/card-sdk-core';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,aAAa,EAAqB,MAAM,yBAAyB,CAAC;AAE3E,OAAO,EAAE,gBAAgB,EAA+B,MAAM,oBAAoB,CAAC;AAGnF,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,+DAA+D;AAC/D,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,GAAiB,EAAE,MAA8B,EAAoB,EAAE,CACtG,IAAI,gBAAgB,CAAC,aAAa,CAAC,GAAG,EAAE,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAC;AAK7D,wEAAwE;AACxE,8BAA8B;AAC9B,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/revealElement.d.ts

@@ -0,0 +1,41 @@
+import type { PciAppearance, PciFrameStrings, PciRevealField, PciRevealState } from '@wirexapp/card-sdk-core';
+export interface PciRevealAuth {
+    getBearerToken: () => Promise<string>;
+    /** Cardholder identity headers (X-User-Email / X-User-Wallet). Per-user
+     *  session data — a cross-origin frame cannot read it, so the host supplies
+     *  it. The API base URL and X-Chain-Id are NOT here: they are the frame
+     *  service's own config (`window.__WX_ENDPOINTS__`). */
+    userEmail?: string;
+    userWallet?: string;
+}
+export interface PciRevealElementConfig {
+    cardId: string;
+    /** One-shot step-up token minted by the host via the wallet-signature flow.
+     *  By design: reveal authenticates with the caller's bearer + this existing
+     *  `action_token` against `/v1/cards/:id/details|cvv`. Same model for Wirex
+     *  apps and B2B partners; there is no separate reveal-session token. */
+    actionToken: string;
+    fetchDetails: boolean;
+    fetchCvv: boolean;
+    /** Exact rows to render, in order — one field per iframe. Overrides
+     *  `fetchDetails`/`fetchCvv` (they're derived from the requested fields). */
+    fields?: PciRevealField[];
+    cardholderName?: string;
+    auth: PciRevealAuth;
+    appearance?: PciAppearance;
+    strings?: PciFrameStrings;
+    onStateChange?: (state: PciRevealState) => void;
+}
+/**
+ * Own-card reveal element. The frame fetches PAN/expiry/CVV directly from the
+ * BaaS API and renders them inside the iframe; copy-to-clipboard runs inside
+ * the frame too. The host page never sees the values.
+ */
+export declare class PciRevealElement {
+    private readonly config;
+    private readonly channel;
+    constructor(frameUrl: string, config: PciRevealElementConfig);
+    mount(container: HTMLElement): Promise<void>;
+    destroy(): void;
+}
+//# sourceMappingURL=revealElement.d.ts.map

package/dist/revealElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"revealElement.d.ts","sourceRoot":"","sources":["../src/revealElement.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9G,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;;;4EAGwE;IACxE,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,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CACjD;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;IAQtD,KAAK,CAAC,SAAS,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAuBlD,OAAO,IAAI,IAAI;CAGhB"}

package/dist/revealElement.js

@@ -0,0 +1,42 @@
+import { PciFrameChannel } from '@wirexapp/card-sdk-core';
+/**
+ * Own-card reveal element. The frame fetches PAN/expiry/CVV directly from the
+ * BaaS API and renders them inside the iframe; copy-to-clipboard runs inside
+ * the frame too. The host page never sees the values.
+ */
+export class PciRevealElement {
+    constructor(frameUrl, config) {
+        this.config = config;
+        this.channel = new PciFrameChannel(frameUrl, {}, { allowClipboard: true });
+        this.channel.onMessage(message => {
+            if (message.type === 'reveal-state')
+                config.onStateChange?.(message.state);
+        });
+    }
+    async mount(container) {
+        await this.channel.mount(container);
+        await this.channel.request({
+            type: 'init',
+            config: {
+                mode: 'reveal',
+                auth: {
+                    bearerToken: await this.config.auth.getBearerToken(),
+                    userEmail: this.config.auth.userEmail,
+                    userWallet: this.config.auth.userWallet,
+                },
+                cardId: this.config.cardId,
+                actionToken: this.config.actionToken,
+                fetchDetails: this.config.fetchDetails,
+                fetchCvv: this.config.fetchCvv,
+                fields: this.config.fields,
+                cardholderName: this.config.cardholderName,
+                appearance: this.config.appearance,
+                strings: this.config.strings,
+            },
+        });
+    }
+    destroy() {
+        this.channel.destroy();
+    }
+}
+//# sourceMappingURL=revealElement.js.map

package/dist/revealElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"revealElement.js","sourceRoot":"","sources":["../src/revealElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAgC1D;;;;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;QAC7E,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;aAC7B;SACF,CAAC,CAAC;IACL,CAAC;IAED,OAAO;QACL,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;IACzB,CAAC;CACF"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@wirexapp/card-reveal-web",
+  "version": "0.1.0-beta.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",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "dev": "tsc -p tsconfig.build.json --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "yarn run -T tsc --noEmit",
+    "prepublishOnly": "yarn clean && yarn build"
+  },
+  "dependencies": {
+    "@wirexapp/card-sdk-core": "0.1.0-beta.0"
+  }
+}