@tonder.io/ionic-lite-sdk 0.0.68 → 0.0.69-beta.TEC-192.ee4f7cd

package/dist/types/commons.d.ts

@@ -148,6 +148,14 @@ export interface IEventSecureInput {
     isEmpty: boolean;
     isFocused: boolean;
     isValid: boolean;
+    /**
+     * The current value of the field as reported by Skyflow.
+     * Available in non-PROD Skyflow environments (DEV/SANDBOX).
+     * In PROD, sensitive fields (card_number, cvv) return an empty string;
+     * non-sensitive fields (cardholder_name, expiration_month, expiration_year)
+     * may still return their value.
+     */
+    value?: string;
 }
 export interface IEvents extends ICardFormEvents {
 }
@@ -193,6 +201,22 @@ export interface IFormPlaceholder {
 }
 export interface IStyles {
     cardForm?: ILiteCardFormStyles;
+    /** Input-element styles applied only to the cardholder name field. Overrides `cardForm.inputStyles` for this field. */
+    cardholderName?: CollectInputStylesVariant;
+    /** Input-element styles applied only to the card number field. Overrides `cardForm.inputStyles` for this field. */
+    cardNumber?: CollectInputStylesVariant;
+    /** Input-element styles applied only to the CVV field. Overrides `cardForm.inputStyles` for this field. */
+    cvv?: CollectInputStylesVariant;
+    /** Input-element styles applied only to the expiration month field. Overrides `cardForm.inputStyles` for this field. */
+    expirationMonth?: CollectInputStylesVariant;
+    /** Input-element styles applied only to the expiration year field. Overrides `cardForm.inputStyles` for this field. */
+    expirationYear?: CollectInputStylesVariant;
+    /**
+     * Show the card-network icon inside the card number Skyflow Element.
+     * Corresponds to Skyflow's `CollectElementOptions.enableCardIcon`.
+     * @default true
+     */
+    enableCardIcon?: boolean;
 }
 export interface ILiteCardFormStyles extends StylesBaseVariant, IElementStyle {
 }
@@ -215,7 +239,7 @@ export interface CollectInputStylesVariant extends StylesBaseVariant, StylesFocu
     dropdownIcon?: Record<string, any>;
     dropdown?: Record<string, any>;
     dropdownListItem?: Record<string, any>;
-    global: Record<string, any>;
+    global?: Record<string, any>;
 }
 export interface CollectLabelStylesVariant extends StylesBaseVariant, StylesFocusVariant {
     requiredAsterisk?: Record<string, any>;

package/dist/types/liteInlineCheckout.d.ts

@@ -1,5 +1,5 @@
 import { IConfigureCheckout } from "./commons";
-import { ICustomerCardsResponse, ISaveCardRequest, ISaveCardResponse } from "./card";
+import { ICustomerCardsResponse, IRevealCardFieldsRequest, ISaveCardResponse } from "./card";
 import { IPaymentMethod } from "./paymentMethod";
 import { IProcessPaymentRequest, IStartCheckoutResponse } from "./checkout";
 import { ITransaction } from "./transaction";
@@ -50,16 +50,19 @@ export interface ILiteCheckout {
      */
     getCustomerCards(): Promise<ICustomerCardsResponse>;
     /**
-     * Saves a card to a customer's account. This method can be used to add a new card
-     * or update an existing one.
-     * @param {import("./index").ISaveCardRequest} card - The card information to be saved.
+     * Saves a card to a customer's account using card data collected via Skyflow Elements.
+     *
+     * **Requires** that `mountCardFields()` was called first with all five fields
+     * (`cardholder_name`, `card_number`, `expiration_month`, `expiration_year`, `cvv`)
+     * and that the user has filled them in before calling this method.
+     *
      * @returns {Promise<import("./index").ISaveCardResponse>} A promise that resolves with the saved card data.
      *
      * @throws {import("./index").IPublicError} Throws an error object if the operation fails.
      *
      * @public
      */
-    saveCustomerCard(card: ISaveCardRequest): Promise<ISaveCardResponse>;
+    saveCustomerCard(): Promise<ISaveCardResponse>;
     /**
      * Removes a card from a customer's account.
      * @param {string} skyflowId - The unique identifier of the card to be deleted.
@@ -158,9 +161,18 @@ export interface ILiteCheckout {
      */
     getOpenpayDeviceSessionID(merchant_id: string, public_key: string, is_sandbox: boolean): Promise<string | ErrorResponse>;
     /**
-     * Displays and renders card input fields in the checkout.
-     * Uses the provided configuration to show the required fields in the payment form.
-     * @param {import("./card").IMountCardFieldsRequest} event - Configuration for the card fields to render.
+     * Mounts Skyflow Elements (secure iframes) into developer-provided `<div>` containers.
+     *
+     * **New card form** (omit `card_id`): mount all 5 fields before calling `payment()` or
+     * `saveCustomerCard()`. Place divs with default IDs: `collect_cardholder_name`,
+     * `collect_card_number`, `collect_expiration_month`, `collect_expiration_year`, `collect_cvv`.
+     *
+     * **Saved-card CVV** (provide `card_id`): mount only `cvv` for a specific saved card before
+     * calling `payment()`. Default div ID: `collect_cvv_<card_id>`.
+     *
+     * Custom container IDs can be set via `{ field, container_id }` object form per field entry.
+     *
+     * @param {import("./card").IMountCardFieldsRequest} event - Configuration for the fields to render.
      * @returns {Promise<void>} Resolves when the fields have been successfully rendered.
      * @public
      */
@@ -172,4 +184,33 @@ export interface ILiteCheckout {
      * @public
      */
     unmountCardFields(context?: string): void;
+    /**
+     * Reveals card data (from the last `saveCustomerCard()` or `payment()` with a new card)
+     * in developer-provided `<div>` containers using Skyflow Reveal Elements (secure iframes).
+     *
+     * Must be called **after** a successful `saveCustomerCard()` or `payment()` that processed
+     * a new card. The SDK stores the Skyflow tokens from that collect operation internally.
+     *
+     * **Default container IDs:** `#reveal_<field>` (e.g. `#reveal_card_number`).
+     *
+     * **Redaction by field (fixed, cannot be overridden):**
+     * - `card_number` → `MASKED` (e.g. `4111 11•• •••• 1234`)
+     * - `cardholder_name`, `expiration_month`, `expiration_year` → `PLAIN_TEXT`
+     *
+     * > CVV cannot be revealed — PCI DSS 3.2.1 prohibits storing or displaying CVV post-authorization.
+     *
+     * @param request - Fields to reveal, plus optional styles, redaction level, and altText per field.
+     * @returns {Promise<void>} Resolves when all Reveal Elements have been mounted and `reveal()` called.
+     * @public
+     *
+     * @example
+     * ```typescript
+     * // After successful saveCustomerCard():
+     * await liteCheckout.revealCardFields({
+     *   fields: ['card_number', 'cardholder_name', 'expiration_month', 'expiration_year']
+     * });
+     * // → renders masked card info in #reveal_card_number, #reveal_cardholder_name, etc.
+     * ```
+     */
+    revealCardFields(request: IRevealCardFieldsRequest): Promise<void>;
 }

package/dist/types/requests.d.ts

@@ -73,6 +73,7 @@ export type TokensSkyflowRequest = {
     apiKey: string;
     vault_id: string;
     vault_url: string;
+    mode?: string;
     data?: {
         [key: string]: any;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonder.io/ionic-lite-sdk",
-  "version": "0.0.68",
+  "version": "0.0.69-beta.TEC-192.ee4f7cd",
   "description": "Tonder ionic lite SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/classes/liteCheckout.ts

@@ -9,7 +9,7 @@ import {
 } from "../helpers/utils";
 import {getCustomerAPMs} from "../data/api";
 import {BaseInlineCheckout} from "./BaseInlineCheckout";
-import {getSkyflowTokens, initSkyflowInstance, mountSkyflowFields} from "../helpers/skyflow";
+import {getSkyflowTokens, initSkyflowInstance, mountRevealFields, mountSkyflowFields} from "../helpers/skyflow";
 import {startCheckoutRouter} from "../data/checkoutApi";
 import {getOpenpayDeviceSessionID} from "../data/openPayApi";
 import {getPaymentMethodDetails} from "../shared/catalog/paymentMethodsCatalog";
@@ -17,7 +17,7 @@ import {APM, IEvents, IInlineLiteCheckoutOptions, InCollectorContainer, TonderAP
 import {
     ICustomerCardsResponse,
     IMountCardFieldsRequest,
-    ISaveCardRequest,
+    IRevealCardFieldsRequest,
     ISaveCardResponse,
     ISaveCardSkyflowRequest
 } from "../types/card";
@@ -39,7 +39,7 @@ import {
     StartCheckoutRequest,
     TokensRequest
 } from "../types/requests";
-import {ICardFields, IStartCheckoutResponse} from "../types/checkout";
+import {IStartCheckoutResponse} from "../types/checkout";
 import {ILiteCheckout} from "../types/liteInlineCheckout";
 import CollectorContainer from "skyflow-js/types/core/external/collect/collect-container";
 import Skyflow from "skyflow-js";
@@ -61,6 +61,8 @@ export class LiteCheckout extends BaseInlineCheckout implements ILiteCheckout{
   // Store mounted elements by context: 'create' or 'update:card_id'
   private mountedElementsByContext: Map<string, { elements: any[], container: InCollectorContainer | null }> = new Map();
   private customerCardsCache: ICustomerCardsResponse | null = null;
+  // Tokens from the last collectCreateCardTokens() call — used by revealCardFields()
+  private lastCollectedTokens: Record<string, string> | null = null;
 
   constructor({ apiKey, mode, returnUrl, callBack, apiKeyTonder, baseUrlTonder, customization, collectorIds, events }: IInlineLiteCheckoutOptions) {
     super({
@@ -120,32 +122,16 @@ export class LiteCheckout extends BaseInlineCheckout implements ILiteCheckout{
     }
   }
 
-  public async saveCustomerCard(
-    card: ISaveCardRequest,
-  ): Promise<ISaveCardResponse> {
+  public async saveCustomerCard(): Promise<ISaveCardResponse> {
     let cardId: string | null = null;
     try {
       await this._fetchMerchantData();
       const customerResponse = await this._getCustomer() as CustomerRegisterResponse;
       const { auth_token, first_name = "", last_name = "", email = "" } = customerResponse;
-      const { vault_id, vault_url, business } = this.merchantData!;
+      const { business } = this.merchantData!;
       const cardOnFileEnabled = this._hasCardOnFileKeys();
 
-      const sanitizedCard = {
-        card_number: card.card_number.replace(/\s+/g, ""),
-        expiration_month: card.expiration_month.replace(/\s+/g, ""),
-        expiration_year: card.expiration_year.replace(/\s+/g, ""),
-        cvv: card.cvv.replace(/\s+/g, ""),
-        cardholder_name: card.cardholder_name.replace(/\s+/g, ""),
-      };
-
-      const skyflowTokens: any = await getSkyflowTokens({
-        vault_id: vault_id,
-        vault_url: vault_url,
-        data: sanitizedCard,
-        baseUrl: this.baseUrl,
-        apiKey: this.apiKeyTonder,
-      });
+      const skyflowTokens: any = await this.collectCreateCardTokens();
 
       const saveResponse = await this._saveCustomerCard(
         auth_token,
@@ -353,6 +339,81 @@ export class LiteCheckout extends BaseInlineCheckout implements ILiteCheckout{
     }
   }
 
+  /**
+   * Collects card tokens from Skyflow Elements mounted for a new card (the 'create' context).
+   * Requires that `mountCardFields()` was called without a `card_id` beforehand.
+   */
+  private async collectCreateCardTokens(): Promise<Record<string, any>> {
+    const contextData = this.mountedElementsByContext.get('create');
+    const container = contextData?.container?.container as CollectorContainer | null;
+    if (!container) {
+      throw new TonderError({
+        code: ErrorKeyEnum.MOUNT_COLLECT_ERROR,
+        details: {
+          message: 'No card fields are mounted. Call mountCardFields() with the required fields before proceeding.',
+        },
+      });
+    }
+    try {
+      const collectResponse: any = await container.collect();
+      const fields: Record<string, any> = collectResponse?.records?.[0]?.fields || {};
+      // Store tokens so revealCardFields() can use them after save/payment
+      this.lastCollectedTokens = fields;
+      return fields;
+    } catch (e: any) {
+      const errorDescription = e?.error?.description;
+      this.reportSdkError(e, {
+        feature: "collect-create-card-tokens",
+        metadata: {
+          step: "collectCreateCardTokens",
+        },
+      });
+      throw new TonderError({
+        code: ErrorKeyEnum.MOUNT_COLLECT_ERROR,
+        details: {
+          message: errorDescription,
+        },
+      });
+    }
+  }
+
+  /**
+   * Reveals card data collected in the last `saveCustomerCard()` or `payment()` call
+   * (with a new card) in developer-provided `<div>` containers using Skyflow Reveal Elements.
+   *
+   * Must be called **after** a successful `saveCustomerCard()` or `payment()` that processed
+   * a new card (i.e., without a saved-card `skyflow_id`). Skyflow Reveal Elements render the
+   * actual (or masked) values inside secure iframes without exposing them to the application.
+   *
+   * Default container IDs: `#reveal_<field>` (e.g. `#reveal_card_number`).
+   * Default redaction: `MASKED` for card_number, `REDACTED` for cvv, `PLAIN_TEXT` for others.
+   *
+   * @param request - Fields to reveal and optional per-field styles/redaction/altText.
+   */
+  public async revealCardFields(request: IRevealCardFieldsRequest): Promise<void> {
+    if (!this.lastCollectedTokens) {
+      throw buildPublicAppError({
+        errorCode: ErrorKeyEnum.MOUNT_COLLECT_ERROR,
+        details: {
+          message: 'No card tokens available. Call saveCustomerCard() or payment() with a new card before calling revealCardFields().',
+        },
+      });
+    }
+    if (!this.skyflowInstance) {
+      throw buildPublicAppError({
+        errorCode: ErrorKeyEnum.MOUNT_COLLECT_ERROR,
+        details: {
+          message: 'Skyflow instance not initialized. Ensure mountCardFields() was called before saveCustomerCard() or payment().',
+        },
+      });
+    }
+    await mountRevealFields({
+      skyflowInstance: this.skyflowInstance,
+      tokens: this.lastCollectedTokens,
+      request,
+    });
+  }
+
   public unmountCardFields(context: string = 'all'): void {
     if (context === 'all') {
       this.mountedElementsByContext.forEach((contextData, ctx) => {
@@ -427,6 +488,7 @@ export class LiteCheckout extends BaseInlineCheckout implements ILiteCheckout{
       vault_url: vault_url,
       baseUrl: this.baseUrl,
       apiKey: this.apiKeyTonder,
+      mode: this.mode,
     })
   }
 
@@ -484,14 +546,14 @@ export class LiteCheckout extends BaseInlineCheckout implements ILiteCheckout{
     // TODO: DEPRECATED
     returnUrl: returnUrlData
   }: {
-    card?: ICardFields | string;
+    card?: string;
     payment_method?: string;
     isSandbox?: boolean;
     returnUrl?: string;
   }) {
     await this._fetchMerchantData();
     const customer = await this._getCustomer(this.abortController.signal) as CustomerRegisterResponse;
-    const { vault_id, vault_url, business } = this.merchantData!;
+    const { business } = this.merchantData!;
     const { auth_token, first_name = "", last_name = "", email = "" } = customer;
     const cardOnFileEnabled = this._hasCardOnFileKeys();
     let skyflowTokens;
@@ -537,21 +599,8 @@ export class LiteCheckout extends BaseInlineCheckout implements ILiteCheckout{
           await this.collectCardTokens(card);
         }
       } else {
-        const sanitizedCard = {
-          ...card!,
-          card_number: card!.card_number.replace(/\s+/g, ""),
-          expiration_month: card!.expiration_month.replace(/\s+/g, ""),
-          expiration_year: card!.expiration_year.replace(/\s+/g, ""),
-          cvv: card!.cvv.replace(/\s+/g, ""),
-          cardholder_name: card!.cardholder_name.replace(/\s+/g, ""),
-        };
-        skyflowTokens = await getSkyflowTokens({
-          vault_id: vault_id,
-          vault_url: vault_url,
-          data: sanitizedCard,
-          baseUrl: this.baseUrl,
-          apiKey: this.apiKeyTonder,
-        });
+        // New card: collect tokens from mounted Skyflow Elements (mountCardFields must be called first)
+        skyflowTokens = await this.collectCreateCardTokens();
         skyflowId = skyflowTokens.skyflow_id;
 
         if (cardOnFileEnabled) {

package/src/helpers/skyflow.ts

@@ -1,13 +1,15 @@
 import Skyflow from "skyflow-js";
 import CollectContainer from "skyflow-js/types/core/external/collect/collect-container";
 import CollectElement from "skyflow-js/types/core/external/collect/collect-element";
+import RevealContainer from "skyflow-js/types/core/external/reveal/reveal-container";
 import { getVaultToken } from "../data/skyflowApi";
 import { TokensSkyflowRequest } from "../types/requests";
-import { CardFieldEnum, IMountCardFieldsRequest } from "../types/card";
+import { CardFieldEnum, IMountCardFieldsRequest, IRevealCardField, IRevealCardFieldsRequest } from "../types/card";
 import {
   IEvents,
   IInputEvents,
   ILiteCustomizationOptions,
+  IStyles,
   StylesBaseVariant,
 } from "../types/commons";
 import {
@@ -26,9 +28,8 @@ import { buildPublicAppError } from "../shared/utils/appError";
 import { ErrorKeyEnum } from "../shared/enum/ErrorKeyEnum";
 
 /**
- * [DEPRECATION WARNING]
- * This function should be deprecated in favor of using mountSkyflowFields for security,
- * to prevent users from creating their own inputs.
+ * @deprecated This function is deprecated and will be removed in a future release.
+ * Use `mountCardFields()` to render Skyflow Elements and collect card data securely.
  */
 export async function getSkyflowTokens({
   baseUrl,
@@ -135,14 +136,16 @@ export async function initSkyflowInstance({
   apiKey,
   vault_id,
   vault_url,
+  mode,
 }: TokensSkyflowRequest): Promise<Skyflow> {
+  const skyflowEnv = mode === 'production' ? Skyflow.Env.PROD : Skyflow.Env.DEV;
   return Skyflow.init({
     vaultID: vault_id,
     vaultURL: vault_url,
     getBearerToken: async () => await getVaultToken(baseUrl, apiKey),
     options: {
       logLevel: Skyflow.LogLevel.ERROR,
-      env: Skyflow.Env.DEV,
+      env: skyflowEnv,
     },
   });
 }
@@ -176,19 +179,42 @@ export async function mountSkyflowFields(event: {
     [CardFieldEnum.EXPIRATION_YEAR]: [regexMatchRule],
     [CardFieldEnum.CARDHOLDER_NAME]: [lengthMatchRule, regexMatchRule],
   };
-  const customStyles = {
-    errorStyles:
-      customization?.styles?.cardForm?.errorStyles ||
-      DEFAULT_SKYFLOW_ERROR_TEXT_STYLES,
-    inputStyles:
-      customization?.styles?.cardForm?.inputStyles ||
-      DEFAULT_SKYFLOW_INPUT_STYLES,
-    labelStyles:
-      customization?.styles?.cardForm?.labelStyles ||
-      DEFAULT_SKYFLOW_lABEL_STYLES,
+  const fieldToStyleKey: Record<CardFieldEnum, keyof Omit<IStyles, 'cardForm' | 'enableCardIcon'>> = {
+    [CardFieldEnum.CARDHOLDER_NAME]: 'cardholderName',
+    [CardFieldEnum.CARD_NUMBER]: 'cardNumber',
+    [CardFieldEnum.CVV]: 'cvv',
+    [CardFieldEnum.EXPIRATION_MONTH]: 'expirationMonth',
+    [CardFieldEnum.EXPIRATION_YEAR]: 'expirationYear',
   };
+
+  const getFieldStyles = (field: CardFieldEnum) => {
+    const perFieldInputStyles = customization?.styles?.[fieldToStyleKey[field]];
+    const form = customization?.styles?.cardForm;
+    const resolvedInputStyles = perFieldInputStyles ?? form?.inputStyles ?? DEFAULT_SKYFLOW_INPUT_STYLES;
+
+    // For card_number: inject paddingLeft default so text doesn't overlap the card-network icon.
+    // Applied only when the icon is visible (enableCardIcon !== false) and the developer
+    // hasn't already set paddingLeft in their base styles.
+    const iconVisible = field === CardFieldEnum.CARD_NUMBER && customization?.styles?.enableCardIcon !== false;
+    const inputStyles = iconVisible
+      ? {
+          ...resolvedInputStyles,
+          base: {
+            paddingLeft: '15px',             // default — gives room for the card icon
+            ...(resolvedInputStyles as any)?.base, // developer's base overrides, including their own paddingLeft
+          },
+        }
+      : resolvedInputStyles;
+
+    return {
+      inputStyles,
+      labelStyles: form?.labelStyles ?? DEFAULT_SKYFLOW_lABEL_STYLES,
+      errorStyles: form?.errorStyles ?? DEFAULT_SKYFLOW_ERROR_TEXT_STYLES,
+    };
+  };
+
   const labels: Record<string, string> = {
-    name: customization?.labels?.name || DEFAULT_SKYFLOW_lABELS.name,
+    cardholder_name: customization?.labels?.name || DEFAULT_SKYFLOW_lABELS.name,
     card_number:
       customization?.labels?.card_number || DEFAULT_SKYFLOW_lABELS.card_number,
     cvv: customization?.labels?.cvv || DEFAULT_SKYFLOW_lABELS.cvv,
@@ -203,7 +229,7 @@ export async function mountSkyflowFields(event: {
       DEFAULT_SKYFLOW_lABELS.expiration_year,
   };
   const placeholders: Record<string, string> = {
-    name:
+    cardholder_name:
       customization?.placeholders?.name || DEFAULT_SKYFLOW_PLACEHOLDERS.name,
     card_number:
       customization?.placeholders?.card_number ||
@@ -225,21 +251,26 @@ export async function mountSkyflowFields(event: {
   };
 
   if ("fields" in data && Array.isArray(data.fields)) {
+    const cardIconOption = { enableCardIcon: customization?.styles?.enableCardIcon ?? true };
+
     if (data.fields.length > 0 && typeof data.fields[0] === "string") {
       for (const field of data.fields as CardFieldEnum[]) {
-        const element = collectContainer.create({
-          table: "cards",
-          column: field,
-          type: typeByField[field],
-          validations: validationsByField[field],
-          ...customStyles,
-          label: labels[field],
-          placeholder: placeholders[field],
-          ...(data.card_id ? { skyflowID: data.card_id } : {}),
-        });
+        const element = collectContainer.create(
+          {
+            table: "cards",
+            column: field,
+            type: typeByField[field],
+            validations: validationsByField[field],
+            ...getFieldStyles(field),
+            label: labels[field],
+            placeholder: placeholders[field],
+            ...(data.card_id ? { skyflowID: data.card_id } : {}),
+          },
+          field === CardFieldEnum.CARD_NUMBER ? cardIconOption : undefined,
+        );
         handleSkyflowElementEvents({
           element,
-          errorStyles: customStyles.errorStyles,
+          errorStyles: getFieldStyles(field).errorStyles,
           fieldMessage: [
             CardFieldEnum.CVV,
             CardFieldEnum.EXPIRATION_MONTH,
@@ -261,16 +292,19 @@ export async function mountSkyflowFields(event: {
         field: CardFieldEnum;
       }[]) {
         const key = fieldObj.field;
-        const element = collectContainer.create({
-          table: "cards",
-          column: key,
-          type: typeByField[key],
-          validations: validationsByField[key],
-          ...customStyles,
-          label: labels[key],
-          placeholder: placeholders[key],
-          ...(data.card_id ? { skyflowID: data.card_id } : {}),
-        });
+        const element = collectContainer.create(
+          {
+            table: "cards",
+            column: key,
+            type: typeByField[key],
+            validations: validationsByField[key],
+            ...getFieldStyles(key),
+            label: labels[key],
+            placeholder: placeholders[key],
+            ...(data.card_id ? { skyflowID: data.card_id } : {}),
+          },
+          key === CardFieldEnum.CARD_NUMBER ? cardIconOption : undefined,
+        );
         const containerId =
           fieldObj.container_id ||
           `#collect_${String(key)}` + (data.card_id ? `_${data.card_id}` : "");
@@ -371,14 +405,83 @@ const executeEvent = (event: {
     if (typeof eventHandler === "function") {
       eventHandler({
         elementType: get(data, "elementType", ""),
-        isEmpty: get(data, "isEmpty", ""),
-        isFocused: get(data, "isFocused", ""),
-        isValid: get(data, "isValid", ""),
+        isEmpty: get(data, "isEmpty", false),
+        isFocused: get(data, "isFocused", false),
+        isValid: get(data, "isValid", false),
+        value: get(data, "value", ""),
       });
     }
   }
 };
 
+export async function mountRevealFields(event: {
+  skyflowInstance: Skyflow;
+  tokens: Record<string, string>;
+  request: IRevealCardFieldsRequest;
+}): Promise<void> {
+  const { skyflowInstance, tokens, request } = event;
+  const revealContainer = skyflowInstance.container(
+    Skyflow.ContainerType.REVEAL,
+  ) as RevealContainer;
+
+  // Redaction levels are fixed per PCI DSS — not configurable by the caller.
+  // CVV (PCI DSS req. 3.2.1) must never be revealed after authorisation.
+  const pciRedaction: Partial<Record<CardFieldEnum, string>> = {
+    [CardFieldEnum.CARD_NUMBER]:      'MASKED',      // first-6 / last-4 only
+    [CardFieldEnum.CARDHOLDER_NAME]:  'PLAIN_TEXT',
+    [CardFieldEnum.EXPIRATION_MONTH]: 'PLAIN_TEXT',
+    [CardFieldEnum.EXPIRATION_YEAR]:  'PLAIN_TEXT',
+  };
+
+  for (const entry of request.fields) {
+    const isString = typeof entry === 'string';
+    const field = (isString ? entry : (entry as IRevealCardField).field) as CardFieldEnum;
+
+    // CVV must never be revealed — skip silently with a warning.
+    if (field === CardFieldEnum.CVV) {
+      console.warn('[revealCardFields] CVV cannot be revealed (PCI DSS req. 3.2.1). Skipping.');
+      continue;
+    }
+
+    const token = tokens[field];
+    if (!token) {
+      console.warn(`[revealCardFields] No token found for field "${field}", skipping.`);
+      continue;
+    }
+
+    const cfg: Partial<IRevealCardField> = isString ? {} : (entry as IRevealCardField);
+    const containerId = cfg.container_id ?? `#reveal_${field}`;
+    const redactionKey = pciRedaction[field]!;
+    const fieldStyles = cfg.styles ?? {};
+    const globalStyles = request.styles ?? {};
+
+    const element = revealContainer.create({
+      token,
+      redaction: Skyflow.RedactionType[redactionKey as keyof typeof Skyflow.RedactionType], // fixed by SDK
+      ...(cfg.altText !== undefined && { altText: cfg.altText }),
+      ...(cfg.label !== undefined && { label: cfg.label }),
+      ...(fieldStyles.inputStyles || globalStyles.inputStyles
+        ? { inputStyles: fieldStyles.inputStyles ?? globalStyles.inputStyles }
+        : {}),
+      ...(fieldStyles.labelStyles || globalStyles.labelStyles
+        ? { labelStyles: fieldStyles.labelStyles ?? globalStyles.labelStyles }
+        : {}),
+      ...(fieldStyles.errorTextStyles || globalStyles.errorTextStyles
+        ? { errorTextStyles: fieldStyles.errorTextStyles ?? globalStyles.errorTextStyles }
+        : {}),
+    });
+
+    await tryMountElement({ element, containerId });
+  }
+
+  try {
+    await (revealContainer as any).reveal();
+  } catch (e) {
+    // reveal() returns partial success/error — not critical to throw
+    console.warn('[revealCardFields] reveal completed with errors:', e);
+  }
+}
+
 async function tryMountElement(event: {
   element: any;
   containerId: string;

package/src/index.ts

@@ -4,6 +4,14 @@ import { SdkTelemetryClient } from './helpers/SdkTelemetryClient'
 import { AppError } from './shared/utils/appError'
 import { validateCVV, validateCardNumber, validateExpirationMonth, validateCardholderName, validateExpirationYear } from './helpers/validations'
 
+export type {
+    IRevealCardFieldsRequest,
+    IRevealCardField,
+    IRevealElementStyles,
+    IRevealElementInputStyles,
+    RevealableCardField,
+} from './types/card'
+
 export {
     LiteCheckout,
     BaseInlineCheckout,