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

package/src/types/card.ts

@@ -34,6 +34,11 @@ export interface ISaveCardSkyflowRequest {
     subscription_id?: string;
 }
 
+/**
+ * @deprecated Raw card fields are no longer accepted by `saveCustomerCard()`.
+ * Use `mountCardFields()` to render Skyflow Elements in your form and call
+ * `saveCustomerCard()` with no arguments.
+ */
 export interface ISaveCardRequest {
     card_number: string;
     cvv: string;
@@ -50,8 +55,99 @@ export enum CardFieldEnum {
 }
 export type CardField = "cvv" | "card_number" | "expiration_month" | "expiration_year" | "cardholder_name";
 
+/**
+ * Configuration for mounting Skyflow Elements into developer-provided `<div>` containers.
+ *
+ * Used in two scenarios:
+ * - **New card form** (no `card_id`): mount all 5 fields before calling `payment()` or
+ *   `saveCustomerCard()`. Default container IDs are `#collect_<field>` (e.g. `#collect_card_number`).
+ * - **Saved-card CVV** (with `card_id`): mount only `cvv` for a specific saved card before
+ *   calling `payment()` with the card's skyflow_id. Default container ID is `#collect_cvv_<card_id>`.
+ *
+ * Custom container IDs can be set via the `{ field, container_id }` object form of each field entry.
+ */
 export interface IMountCardFieldsRequest {
     fields: (CardField | { container_id?: string; field: CardField })[];
     card_id?: string;
     unmount_context?: 'all' | 'current' | 'create' | string;
 }
+
+// ─── Reveal Elements ──────────────────────────────────────────────────────────
+
+/**
+ * Card fields that can be revealed via Skyflow Reveal Elements.
+ *
+ * `cvv` is intentionally excluded: PCI DSS Requirement 3.2.1 prohibits storing or
+ * displaying the card verification value after authorisation.
+ */
+export type RevealableCardField = Exclude<CardField, 'cvv'>;
+
+/**
+ * Styles accepted by Skyflow Reveal Elements.
+ * Note: Reveal elements only support `base`, `copyIcon`, and `global` style variants
+ * (unlike Collect elements which also support `focus`, `complete`, `invalid`, etc.).
+ */
+export interface IRevealElementInputStyles {
+    base?: Record<string, any>;
+    copyIcon?: Record<string, any>;
+    global?: Record<string, any>;
+}
+
+/** Full styles object for a Skyflow Reveal Element. */
+export interface IRevealElementStyles {
+    inputStyles?: IRevealElementInputStyles;
+    labelStyles?: { base?: Record<string, any>; global?: Record<string, any> };
+    errorTextStyles?: { base?: Record<string, any>; global?: Record<string, any> };
+}
+
+/**
+ * Per-field reveal configuration.
+ * When using the shorthand string form (e.g. `'card_number'`), defaults are applied automatically.
+ *
+ * Redaction levels are fixed by the SDK to comply with PCI DSS and cannot be overridden:
+ * - `card_number`       → `MASKED`     (shows only first-6 / last-4 digits)
+ * - `cardholder_name`   → `PLAIN_TEXT`
+ * - `expiration_month`  → `PLAIN_TEXT`
+ * - `expiration_year`   → `PLAIN_TEXT`
+ */
+export interface IRevealCardField {
+    /** The card field to reveal. CVV is not allowed per PCI DSS req. 3.2.1. */
+    field: RevealableCardField;
+    /**
+     * ID of the `<div>` container where the Reveal Element will be mounted.
+     * Defaults to `#reveal_<field>` (e.g. `#reveal_card_number`).
+     */
+    container_id?: string;
+    /**
+     * Placeholder text shown inside the iframe before `reveal()` is called.
+     * If not set, Skyflow shows the token string.
+     */
+    altText?: string;
+    /** Label rendered by Skyflow above the element. */
+    label?: string;
+    /** Per-field styles. Overrides `IRevealCardFieldsRequest.styles` for this field. */
+    styles?: IRevealElementStyles;
+}
+
+/**
+ * Request object for `revealCardFields()`.
+ *
+ * Call `revealCardFields()` after a successful `saveCustomerCard()` or `payment()` that
+ * processed a new card. The SDK stores the Skyflow tokens from the collect operation and
+ * uses them to populate Skyflow Reveal Elements (secure iframes) in the provided `<div>` containers.
+ *
+ * Redaction is applied automatically per PCI DSS guidelines and cannot be configured.
+ */
+export interface IRevealCardFieldsRequest {
+    /**
+     * Fields to reveal. Each entry can be a plain `RevealableCardField` string (uses all defaults)
+     * or an `IRevealCardField` object for custom container, label, altText or styles.
+     * CVV is not a valid option.
+     */
+    fields: (RevealableCardField | IRevealCardField)[];
+    /**
+     * Global styles applied to all reveal elements.
+     * Per-field `styles` in `IRevealCardField` takes priority over this.
+     */
+    styles?: IRevealElementStyles;
+}

package/src/types/checkout.ts

@@ -109,7 +109,12 @@ export interface IProcessPaymentRequest {
     metadata?: Record<string, any>;
     currency?: string;
     payment_method?: string;
-    card?: ICardFields | string;
+    /**
+     * For a saved card: pass the `skyflow_id` string of the saved card.
+     * For a new card: omit this field — card data is collected from Skyflow Elements
+     * mounted via `mountCardFields()`.
+     */
+    card?: string;
     isSandbox?: boolean;
     apm_config?: IMPConfigRequest | Record<string, any>;
     /**
@@ -120,6 +125,10 @@ export interface IProcessPaymentRequest {
     order_reference?: string | null;
 }
 
+/**
+ * @deprecated Raw card fields are no longer accepted by `payment()` or `saveCustomerCard()`.
+ * Use `mountCardFields()` to render Skyflow Elements and collect card data securely.
+ */
 export interface ICardFields {
     card_number: string;
     cvv: string;

package/src/types/commons.ts

@@ -158,6 +158,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 {}
 export interface IApiError {
@@ -209,6 +217,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 {}
@@ -236,7 +260,7 @@ export interface CollectInputStylesVariant
   dropdownIcon?: Record<string, any>;
   dropdown?: Record<string, any>;
   dropdownListItem?: Record<string, any>;
-  global: Record<string, any>;
+  global?: Record<string, any>;
 }
 
 export interface CollectLabelStylesVariant

package/src/types/liteInlineCheckout.ts

@@ -1,7 +1,7 @@
 import { IConfigureCheckout } from "./commons";
 import {
   ICustomerCardsResponse,
-  ISaveCardRequest,
+  IRevealCardFieldsRequest,
   ISaveCardResponse,
 } from "./card";
 import { IPaymentMethod } from "./paymentMethod";
@@ -76,16 +76,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.
@@ -224,9 +227,18 @@ export interface ILiteCheckout {
   ): 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
    */
@@ -239,4 +251,34 @@ 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/src/types/requests.ts

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