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

package/README.md

@@ -71,8 +71,10 @@ const cards = await liteCheckout.getCustomerCards();
 ```
 
 ```javascript
-// Save a new card
-const newCard = await liteCheckout.saveCustomerCard(cardData);
+// Mount Skyflow Elements for card fields, then save
+await liteCheckout.mountCardFields({ fields: ['cardholder_name', 'card_number', 'expiration_month', 'expiration_year', 'cvv'] });
+// After user fills in the fields:
+const newCard = await liteCheckout.saveCustomerCard();
 ```
 
 ```javascript
@@ -86,8 +88,10 @@ const paymentMethods = await liteCheckout.getCustomerPaymentMethods();
 ```
 
 ```javascript
-// Process a payment
-const paymentResponse = await liteCheckout.payment(paymentData);
+// New card payment: mount fields first, then pay
+await liteCheckout.mountCardFields({ fields: ['cardholder_name', 'card_number', 'expiration_month', 'expiration_year', 'cvv'] });
+// After user fills in the fields:
+const paymentResponse = await liteCheckout.payment(paymentData); // no card field needed
 ```
 
 ## Configuration Options
@@ -162,11 +166,7 @@ When calling the `payment` method, use the following data structure:
 
 - **metadata**: Object for including any additional information about the transaction. This can be used for internal references or tracking.
 
-- **card**: (for LiteCheckout) Object containing card information. This is used differently depending on whether it's a new card or a saved card:
-
-    - For a new card: Include `card_number`, `cvv`, `expiration_month`, `expiration_year`, and `cardholder_name`.
-    - For a saved card: Include only the `skyflow_id` of the saved card.
-    - This is only used when not paying with a payment_method.
+- **card**: (for LiteCheckout) Used only when paying with a **saved card** — pass the `skyflow_id` string of the saved card. For a **new card**, omit this field and use `mountCardFields()` to collect card data via Skyflow Elements before calling `payment()`. This field is not used when paying with `payment_method`.
 
 - **payment_method**: (for LiteCheckout) String indicating the alternative payment method to be used (e.g., "Spei"). This is only used when not paying with a card.
 - **order_reference**:  Unique order reference from the merchant. Used to visually identify/filter the order in dashboard.
@@ -260,14 +260,7 @@ const paymentData = {
   metadata: {
     order_id: "ORDER123",
   },
-  // For a new card:
-  card: {
-    card_number: "4111111111111111",
-    cvv: "123",
-    expiration_month: "12",
-    expiration_year: "25",
-    cardholder_name: "John Doe",
-  },
+  // For a new card: omit `card` — use mountCardFields() before calling payment().
   // card: "skyflow_id" // for a selected saved card.
   // payment_method: "Spei", // For the selected payment method.
   // apm_config: {} // Optional, only for APMs like Mercado Pago, Oxxo Pay
@@ -320,44 +313,171 @@ if (
 - `configureCheckout(data)`: Set initial checkout data
 - `injectCheckout()`: Initialize the checkout
 - `getCustomerCards()`: Retrieve saved cards
-- `saveCustomerCard(cardData)`: Save a new card
+- `saveCustomerCard()`: Save a new card (requires `mountCardFields()` called first)
 - `removeCustomerCard(cardId)`: Remove a saved card
 - `getCustomerPaymentMethods()`: Get available payment methods
 - `payment(data)`: Process a payment
 - `verify3dsTransaction()`: Verify a 3DS transaction
-- `mountCardFields({ fields, card_id })`: Mounts card input fields (e.g., CVV) for a saved card. Useful for requesting CVV when listing saved cards. 
+- `mountCardFields({ fields, card_id })`: Mount Skyflow Elements (secure iframes) into developer-provided `<div>` containers. Used for both **new card enrollment** and **saved-card CVV collection**.
 
 #### mountCardFields
 
-Mounts card input fields (currently CVV) for a saved card. When a `card_id` is provided, the CVV input will be associated with that specific card, allowing you to update its CVV. This is useful for workflows where you need to request CVV for saved cards before payment.
+Mounts Skyflow Elements (secure iframes) into developer-provided `<div>` containers. This is the secure way to collect card data — card values never pass through your application.
 
 **Parameters:**
 
-| Name    | Type     | Required | Description                                                         |
-|---------|----------|----------|---------------------------------------------------------------------|
-| fields  | string[] | Yes      | Array of fields to mount (currently supports `["cvv"]`).            |
-| card_id | string   | No       | Card ID of the saved card. Associates the CVV input with this card. |
+| Name             | Type                                             | Required | Description                                                                              |
+|------------------|--------------------------------------------------|----------|------------------------------------------------------------------------------------------|
+| fields           | `CardField[]` or `{ field, container_id? }[]`   | Yes      | Fields to mount. Use string names or objects with an optional custom `container_id`.    |
+| card_id          | string                                           | No       | Skyflow ID of a saved card. When provided, elements update that card (e.g. CVV only).  |
+| unmount_context  | string                                           | No       | Which context to unmount before mounting: `'all'` (default), `'current'`, or `'none'`. |
+
+**Default container IDs** (used when no custom `container_id` is provided):
+
+| Field              | Default div ID                          |
+|--------------------|-----------------------------------------|
+| `cardholder_name`  | `#collect_cardholder_name`              |
+| `card_number`      | `#collect_card_number`                  |
+| `expiration_month` | `#collect_expiration_month`             |
+| `expiration_year`  | `#collect_expiration_year`              |
+| `cvv` (new card)   | `#collect_cvv`                          |
+| `cvv` (saved card) | `#collect_cvv_<card_id>`               |
+
+**Use case 1 — New card enrollment / payment:**
+```html
+<!-- Place these divs where you want the fields to appear -->
+<div id="collect_cardholder_name"></div>
+<div id="collect_card_number"></div>
+<div id="collect_expiration_month"></div>
+<div id="collect_expiration_year"></div>
+<div id="collect_cvv"></div>
+```
+```ts
+// Mount all 5 fields (call once during setup, before payment or save)
+await liteCheckout.mountCardFields({
+  fields: ['cardholder_name', 'card_number', 'expiration_month', 'expiration_year', 'cvv']
+});
+
+// New card payment — no `card` field needed
+await liteCheckout.payment({ customer, cart, currency });
+
+// Or save the new card
+await liteCheckout.saveCustomerCard();
+```
+
+**Use case 2 — Saved-card CVV collection:**
+```html
+<div id="collect_cvv_saved-card-id"></div>
+```
+```ts
+// Mount only the CVV field for the selected saved card
+liteCheckout.mountCardFields({ fields: ['cvv'], card_id: 'saved-card-id' });
+
+// Then pay with the saved card
+await liteCheckout.payment({ customer, cart, card: 'saved-card-id' });
+```
+
+**Custom container IDs:**
+```ts
+await liteCheckout.mountCardFields({
+  fields: [
+    { field: 'card_number',  container_id: '#my-card-number' },
+    { field: 'cvv',          container_id: '#my-cvv' },
+    { field: 'cardholder_name', container_id: '#my-name' },
+    { field: 'expiration_month', container_id: '#my-month' },
+    { field: 'expiration_year',  container_id: '#my-year' },
+  ]
+});
+```
 
 **Important Notes:**
-1. **Single Card Selection Only:** The CVV input for a saved card must only be displayed when a specific card is selected.
-2. **One CVV Input at a Time:** You cannot display multiple CVV inputs for different cards simultaneously. Only one CVV update operation should be active at any given time.
-3. **Mutually Exclusive with Card Form:** The CVV input for a saved card cannot be shown at the same time as the full card enrollment form. These are two separate workflows:
-   - **Save New Card:** Use the complete card form without `card_id`.
-   - **Update CVV for Saved Card:** Use CVV input with `card_id` only.
+1. **New card vs saved card are mutually exclusive:** Do not show the full card form and a saved-card CVV input simultaneously.
+2. **Single saved card at a time:** Only one saved-card CVV input should be active at once.
+3. **Call before submitting:** Always call `mountCardFields()` and let the user fill in the fields before calling `payment()` or `saveCustomerCard()`.
 
-**Example:**
-```tsx
-// Update CVV for a saved card
+---
+
+#### revealCardFields
 
-// 1. Place the div in your component where the CVV field will be mounted
-<div id={`collect_cvv_saved-card-id`}></div>
+Reveals card data collected in the last `saveCustomerCard()` or `payment()` (with a new card) using Skyflow Reveal Elements — secure iframes that render the actual or masked values in your `<div>` containers without ever exposing raw card data to the application.
 
-// 2. Call mountCardFields and pass the card_id of the selected card
-liteCheckout.mountCardFields({ fields: ["cvv"], card_id: "saved-card-id" });
+> **When to call:** After a successful `saveCustomerCard()` or `payment()` that processed a new card (not a saved card).
 
+**Parameters:**
+
+| Name   | Type                                   | Required | Description                                                        |
+|--------|----------------------------------------|----------|--------------------------------------------------------------------|
+| fields | `(CardField \| IRevealCardField)[]`   | Yes      | Fields to reveal. Use string shorthand or objects for custom config. |
+| styles | `IRevealElementStyles`                 | No       | Global styles applied to all reveal elements.                      |
+
+**Default container IDs** (used when no custom `container_id` is provided):
+
+| Field              | Default div ID                  | Default Redaction |
+|--------------------|---------------------------------|-------------------|
+| `cardholder_name`  | `#reveal_cardholder_name`       | `PLAIN_TEXT`      |
+| `card_number`      | `#reveal_card_number`           | `MASKED`          |
+| `expiration_month` | `#reveal_expiration_month`      | `PLAIN_TEXT`      |
+| `expiration_year`  | `#reveal_expiration_year`       | `PLAIN_TEXT`      |
+| `cvv`              | `#reveal_cvv`                   | `REDACTED`        |
 
+**Basic usage — reveal after enrollment:**
+```html
+<!-- Place these divs in your confirmation screen -->
+<div id="reveal_cardholder_name"></div>
+<div id="reveal_card_number"></div>
+<div id="reveal_expiration_month"></div>
+<div id="reveal_expiration_year"></div>
+```
+```ts
+// After successful saveCustomerCard():
+await liteCheckout.saveCustomerCard();
+
+// Reveal card info in the divs above (no raw data exposed)
+await liteCheckout.revealCardFields({
+  fields: ['cardholder_name', 'card_number', 'expiration_month', 'expiration_year']
+});
+// #reveal_card_number will display e.g. "4111 11•• •••• 1111" (MASKED)
+// #reveal_cardholder_name will display the full name (PLAIN_TEXT)
 ```
 
+**Custom redaction and altText per field:**
+```ts
+await liteCheckout.revealCardFields({
+  fields: [
+    { field: 'card_number', redaction: 'PLAIN_TEXT' },        // show full number
+    { field: 'cardholder_name', altText: 'Loading name...' }, // placeholder while loading
+    { field: 'cvv', redaction: 'PLAIN_TEXT', label: 'CVV' },  // show CVV (not recommended in prod)
+  ]
+});
+```
+
+**Custom styles:**
+```ts
+await liteCheckout.revealCardFields({
+  fields: ['card_number', 'cardholder_name'],
+  styles: {
+    inputStyles: {
+      base: {
+        fontFamily: 'Inter, sans-serif',
+        fontSize: '16px',
+        color: '#1d1d1d',
+      }
+    }
+  }
+});
+```
+
+**Available redaction values:**
+
+| Value        | Effect                                          |
+|--------------|-------------------------------------------------|
+| `PLAIN_TEXT` | Full value revealed                             |
+| `MASKED`     | Partial value (e.g. `4111 11•• •••• 1111`)     |
+| `REDACTED`   | All characters replaced (e.g. `***`)            |
+| `DEFAULT`    | Uses the vault's configured redaction           |
+
+---
+
 ## Error Handling
 
 Public SDK methods that fail due to API/SDK execution return an `AppError` (with `name: "TonderError"`).
@@ -449,136 +569,91 @@ export class TonderService {
 }
 
 // checkout.component.ts
-import { Component, OnInit, OnDestroy } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { TonderService } from "./tonder.service";
 
 @Component({
   selector: "app-tonder-checkout",
   template: `
     <div id="container">
-      <form [formGroup]="paymentForm">
-        <div class="lite-container-tonder">
-            <div id="id-name" class="empty-div">
-              <label for="name">Namess: </label>
-              <input id="name" type="text" formControlName="name">
-            </div>
-            <div id="id-cardNumber" class="empty-div">
-              <label for="cardNumber">Card number: </label>
-              <input id="cardNumber" type="text" formControlName="cardNumber">
-            </div>
-            <div class="collect-row">
-              <div class="empty-div">
-                <label for="month">Month: </label>
-                <input id="month" type="text" formControlName="month">
-              </div>
-              <div class="expiration-year">
-                <label for="expirationYear">Year: </label>
-                <input id="expirationYear" type="text" formControlName="expirationYear">
-              </div>
-              <div class="empty-div">
-                <label for="cvv">CVV: </label>
-                <input id="cvv" type="text" formControlName="cvv">
-              </div>
-            </div>
-          <div id="msgError">{{ errorMessage }}</div>
-          <div id="msgNotification"></div>
-          <div class="container-pay-button">
-            <button class="lite-pay-button" (click)="onPayment($event)">Pay</button>
-          </div>
-        </div>
-    
-      </form>
+      <!-- Skyflow Elements will be injected into these divs -->
+      <div id="collect_cardholder_name"></div>
+      <div id="collect_card_number"></div>
+      <div id="collect_expiration_month"></div>
+      <div id="collect_expiration_year"></div>
+      <div id="collect_cvv"></div>
+
+      <div id="msgError">{{ errorMessage }}</div>
+      <button (click)="pay()">Pay</button>
     </div>
   `,
   providers: [
     {
-      provide: TonderInlineService,
-      // Initialization of the Tonder Lite SDK.
-      // Note: Replace these credentials with your own in development/production.
+      provide: TonderService,
       useFactory: () =>
-        new TonderInlineService({
-          apiKey: "11e3d3c3e95e0eaabbcae61ebad34ee5f93c3d27",
+        new TonderService({
+          apiKey: "YOUR_API_KEY",
           returnUrl: "http://localhost:8100/tabs/tab5",
           mode: "stage",
         }),
     },
   ],
 })
-export class TonderCheckoutComponent implements OnInit, OnDestroy {
+export class TonderCheckoutComponent implements OnInit {
   loading = false;
-  checkoutData: IProcessPaymentRequest;
-  paymentForm = new FormGroup({
-      name: new FormControl('Pedro Paramo'),
-      cardNumber: new FormControl('4242424242424242'),
-      month: new FormControl('12'),
-      expirationYear: new FormControl('28'),
-      cvv: new FormControl('123')
-  });
-  
-  constructor(private tonderService: TonderService) {
-      this.checkoutData = {
-          customer: {
-              firstName: "Jhon",
-              lastName: "Doe",
-              email: "john.c.calhoun@examplepetstore.com",
-              phone: "+58452258525"
-          },
-          cart: {
-              total: 25,
-              items: [
-                  {
-                      description: "Test product description",
-                      quantity: 1,
-                      price_unit: 25,
-                      discount: 1,
-                      taxes: 12,
-                      product_reference: 89456123,
-                      name: "Test product",
-                      amount_total: 25
-                  }
-              ]
-          },
-          metadata: {},
-          currency: "MXN"
-      }
-  }
+  errorMessage = "";
+  checkoutData: IProcessPaymentRequest = {
+    customer: {
+      firstName: "John",
+      lastName: "Doe",
+      email: "john.doe@example.com",
+      phone: "+1234567890"
+    },
+    cart: {
+      total: 25,
+      items: [
+        {
+          description: "Test product",
+          quantity: 1,
+          price_unit: 25,
+          discount: 0,
+          taxes: 0,
+          product_reference: 1,
+          name: "Test product",
+          amount_total: 25
+        }
+      ]
+    },
+    currency: "MXN"
+  };
 
-  ngOnInit() {
-    this.initCheckout();
-  }
+  constructor(private tonderService: TonderService) {}
 
-  async initCheckout() {
+  async ngOnInit() {
     this.tonderService.configureCheckout({
-      customer: { email: "example@email.com" },
+      customer: { email: this.checkoutData.customer.email },
     });
     await this.tonderService.injectCheckout();
     this.tonderService.verify3dsTransaction().then((response) => {
       console.log("Verify 3ds response", response);
     });
-    
-    // Calls more functions to get payment methods, saved cards, etc.
+
+    // Mount Skyflow Elements for the new card form
+    await this.tonderService.mountCardFields({
+      fields: ['cardholder_name', 'card_number', 'expiration_month', 'expiration_year', 'cvv']
+    });
   }
 
   async pay() {
     this.loading = true;
     try {
-      const response = await this.tonderService.payment({
-          ...this.checkoutData,
-          card: { // Card details, if not using a payment method.
-              card_number: this.paymentForm.value.cardNumber || "",
-              cvv: this.paymentForm.value.cvv || "",
-              expiration_month: this.paymentForm.value.month || "",
-              expiration_year: this.paymentForm.value.expirationYear || "",
-              cardholder_name: this.paymentForm.value.name || ""
-          },
-          // card: "skyflow_id" // In case a saved card is selected.
-          // payment_method: "" // Payment method if not using the card form
-      });
+      // No `card` field needed — data is collected from Skyflow Elements
+      const response = await this.tonderService.payment(this.checkoutData);
       console.log("Payment successful:", response);
       alert("Payment successful");
     } catch (error) {
       console.error("Payment failed:", error);
-      alert("Payment failed");
+      this.errorMessage = (error as any).message;
     } finally {
       this.loading = false;
     }
@@ -818,6 +893,11 @@ The following functions have been deprecated and should no longer be used. Consi
 - **Deprecated Reason:** This function has been renamed to `getCustomerPaymentMethods` to better align with its purpose. The method's usage has also been updated.
 - **Alternative:** Use the `getCustomerPaymentMethods` method and update your implementation to reflect the changes.
 
+### Raw card fields in `payment()` and `saveCustomerCard()`
+
+- **Deprecated Reason:** Passing raw card values (card number, CVV, etc.) directly to `payment()` or `saveCustomerCard()` is no longer supported. Card data must be collected via Skyflow Elements using `mountCardFields()`.
+- **Alternative:** Call `mountCardFields()` with the required fields, then call `payment()` or `saveCustomerCard()` without card arguments.
+
 ### `getSkyflowTokens`
 
 - **Deprecated Reason:** Card registration and checkout are now automatically handled during the payment process or through card management methods, making this method unnecessary.

package/dist/classes/SdkTelemetryClient.d.ts

@@ -0,0 +1,86 @@
+import { ITelemetryConfig, ITelemetryContext } from "../types/telemetry";
+/**
+ * SdkTelemetryClient - Internal SDK error reporting
+ *
+ * Features:
+ * - Ring buffer (max 100 events)
+ * - Batching (flush every 5s or 10 events)
+ * - Circuit breaker (3 consecutive failures = 10 min pause)
+ * - Non-blocking (never throws)
+ * - Sanitization (truncate message/stack, allowlist context)
+ * - Retry with backoff (max 1 retry)
+ */
+export declare class SdkTelemetryClient {
+    private config;
+    private buffer;
+    private readonly MAX_BUFFER_SIZE;
+    private readonly BATCH_SIZE;
+    private readonly FLUSH_INTERVAL_MS;
+    private readonly REQUEST_TIMEOUT_MS;
+    private readonly MAX_MESSAGE_LENGTH;
+    private readonly MAX_STACK_LENGTH;
+    private readonly MAX_RETRIES;
+    private readonly CIRCUIT_BREAKER_THRESHOLD;
+    private readonly CIRCUIT_BREAKER_TIMEOUT_MS;
+    private flushTimer;
+    private circuitBreaker;
+    constructor(config: ITelemetryConfig);
+    /**
+     * Capture an exception and queue it for sending
+     * @param error - Error object or any thrown value
+     * @param context - Additional context (tenant_id, feature, process_id, user_id, metadata, etc.)
+     */
+    captureException(error: unknown, context?: ITelemetryContext): void;
+    /**
+     * Extract error information from error object
+     */
+    private extractErrorInfo;
+    /**
+     * Safe stringify with circular reference protection
+     */
+    private safeStringify;
+    /**
+     * Build telemetry event with API format
+     */
+    private buildEvent;
+    /**
+     * Truncate string to max length
+     */
+    private truncate;
+    /**
+     * Start automatic flush timer
+     */
+    private startFlushTimer;
+    /**
+     * Flush buffer - send all pending events
+     */
+    private flush;
+    /**
+     * Send a single event with retry logic
+     */
+    private sendEvent;
+    /**
+     * Send HTTP request to telemetry endpoint
+     */
+    private sendHttpRequest;
+    /**
+     * Handle successful send
+     */
+    private onSendSuccess;
+    /**
+     * Handle send failure with retry logic
+     */
+    private onSendFailure;
+    /**
+     * Open circuit breaker
+     */
+    private openCircuitBreaker;
+    /**
+     * Check if circuit breaker is open
+     */
+    private isCircuitBreakerOpen;
+    /**
+     * Cleanup - stop flush timer
+     */
+    destroy(): void;
+}

package/dist/classes/liteCheckout.d.ts

@@ -1,11 +1,11 @@
 import { ErrorResponse } from "./errorResponse";
 import { BaseInlineCheckout } from "./BaseInlineCheckout";
 import { APM, IInlineLiteCheckoutOptions } from "../types/commons";
-import { ICustomerCardsResponse, IMountCardFieldsRequest, ISaveCardRequest, ISaveCardResponse } from "../types/card";
+import { ICustomerCardsResponse, IMountCardFieldsRequest, IRevealCardFieldsRequest, ISaveCardResponse } from "../types/card";
 import { IPaymentMethod } from "../types/paymentMethod";
 import { CreateOrderResponse, CreatePaymentResponse, CustomerRegisterResponse, GetBusinessResponse, RegisterCustomerCardResponse, StartCheckoutResponse } from "../types/responses";
 import { CreateOrderRequest, CreatePaymentRequest, RegisterCustomerCardRequest, StartCheckoutFullRequest, StartCheckoutIdRequest, StartCheckoutRequest, TokensRequest } from "../types/requests";
-import { ICardFields, IStartCheckoutResponse } from "../types/checkout";
+import { IStartCheckoutResponse } from "../types/checkout";
 import { ILiteCheckout } from "../types/liteInlineCheckout";
 declare global {
     interface Window {
@@ -18,15 +18,35 @@ export declare class LiteCheckout extends BaseInlineCheckout implements ILiteChe
     private readonly events;
     private mountedElementsByContext;
     private customerCardsCache;
+    private lastCollectedTokens;
     constructor({ apiKey, mode, returnUrl, callBack, apiKeyTonder, baseUrlTonder, customization, collectorIds, events }: IInlineLiteCheckoutOptions);
     injectCheckout(): Promise<void>;
     getCustomerCards(): Promise<ICustomerCardsResponse>;
-    saveCustomerCard(card: ISaveCardRequest): Promise<ISaveCardResponse>;
+    saveCustomerCard(): Promise<ISaveCardResponse>;
     removeCustomerCard(skyflowId: string): Promise<string>;
     getCustomerPaymentMethods(): Promise<IPaymentMethod[]>;
     mountCardFields(event: IMountCardFieldsRequest): Promise<void>;
     private getContainerByCardId;
     private collectCardTokens;
+    /**
+     * 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 collectCreateCardTokens;
+    /**
+     * 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.
+     */
+    revealCardFields(request: IRevealCardFieldsRequest): Promise<void>;
     unmountCardFields(context?: string): void;
     /**
      * Internal helper to unmount elements from a specific context
@@ -39,7 +59,7 @@ export declare class LiteCheckout extends BaseInlineCheckout implements ILiteChe
     getSkyflowTokens({ vault_id, vault_url, data, }: TokensRequest): Promise<any | ErrorResponse>;
     _setCartTotal(total: string): void;
     _checkout({ card, payment_method, isSandbox, returnUrl: returnUrlData }: {
-        card?: ICardFields | string;
+        card?: string;
         payment_method?: string;
         isSandbox?: boolean;
         returnUrl?: string;

package/dist/helpers/skyflow.d.ts

@@ -2,12 +2,11 @@ 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 { TokensSkyflowRequest } from "../types/requests";
-import { IMountCardFieldsRequest } from "../types/card";
+import { IMountCardFieldsRequest, IRevealCardFieldsRequest } from "../types/card";
 import { IEvents, ILiteCustomizationOptions } from "../types/commons";
 /**
- * [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 declare function getSkyflowTokens({ baseUrl, apiKey, vault_id, vault_url, data, }: TokensSkyflowRequest): Promise<any>;
 export declare function initSkyflowInstance({ baseUrl, apiKey, vault_id, vault_url, }: TokensSkyflowRequest): Promise<Skyflow>;
@@ -20,3 +19,8 @@ export declare function mountSkyflowFields(event: {
     elements: CollectElement[];
     container: CollectContainer;
 }>;
+export declare function mountRevealFields(event: {
+    skyflowInstance: Skyflow;
+    tokens: Record<string, string>;
+    request: IRevealCardFieldsRequest;
+}): Promise<void>;

package/dist/index.d.ts

@@ -3,4 +3,5 @@ import { BaseInlineCheckout } from './classes/BaseInlineCheckout';
 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, RevealRedaction, } from './types/card';
 export { LiteCheckout, BaseInlineCheckout, SdkTelemetryClient, AppError, validateCVV, validateCardNumber, validateCardholderName, validateExpirationMonth, validateExpirationYear };