@payrails/web-sdk 5.28.0 → 5.29.0-RC.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payrails/web-sdk",
-  "version": "5.28.0",
+  "version": "5.29.0-RC.0",
   "description": "SDK providing tokenization options on the client for merchants",
   "main": "index.js",
   "types": "payrails.d.ts",

package/payrails-styles.css

@@ -760,12 +760,12 @@ button.payrails-generic-button {
   min-height: 44px;
 }
 
-#payrails-container-wrapper {
+.payrails-container-wrapper {
   width: 100%;
   min-height: 90px;
 }
 
-.with-card-holder #payrails-container-wrapper {
+.with-card-holder .payrails-container-wrapper {
   width: 100%;
   height: min-content;
   min-height: 120px;

package/payrails.d.ts

@@ -453,6 +453,10 @@ declare class ComposableElement {
     update: (options: any) => void;
 }
 
+/**
+ * Configuration interface for creating collect elements
+ * Defines the structure and styling options for form input elements
+ */
 interface CollectElementInput {
     table?: string;
     column?: string;
@@ -466,23 +470,116 @@ interface CollectElementInput {
     validations?: IValidationRule[];
     skyflowID?: string;
 }
+/**
+ * Options interface for the collect operation
+ * Controls how data is collected and processed
+ */
 interface ICollectOptions {
     tokens?: boolean;
     additionalFields?: IInsertRecordInput;
     upsert?: Array<IUpsertOptions>;
 }
+/**
+ * ComposableContainer class - Main container for managing secure form elements
+ *
+ * This class extends the base Container and provides functionality to:
+ * - Create and manage secure iframe-based form elements
+ * - Handle secure communication between parent and iframe contexts
+ * - Collect and tokenize sensitive data while maintaining PCI compliance
+ * - Manage element lifecycle (create, mount, validate, collect, destroy)
+ */
 declare class ComposableContainer extends Container {
     #private;
     type: string;
     private bus;
     private iframe;
+    /**
+     * Constructor - Initializes the composable container
+     *
+     * Sets up the secure iframe, establishes communication channels,
+     * and prepares the container for element creation and management.
+     *
+     * @param options - Container configuration (layout, styles, etc.)
+     * @param metaData - Client metadata and configuration
+     * @param skyflowElements - Global elements registry
+     * @param context - Application context with logging and config
+     */
     constructor(options: any, metaData: any, skyflowElements: any, context: any);
+    /**
+     * Creates a new composable form element
+     *
+     * This method creates a secure form element (like card number, CVV, etc.)
+     * that will be rendered inside the secure iframe. The element is added to
+     * the container's element list but not yet mounted to the DOM.
+     *
+     * @param input - Element configuration (type, styles, validations, etc.)
+     * @param options - Additional options like required field validation
+     * @returns ComposableElement instance for further configuration
+     */
     create: (input: CollectElementInput, options?: any) => ComposableElement;
+    /**
+     * Registers an event listener for container events
+     *
+     * Allows the application to listen for events like form submission,
+     * validation errors, or other container-level events.
+     *
+     * @param eventName - The name of the event to listen for
+     * @param handler - The callback function to execute when the event occurs
+     */
     on: (eventName: string, handler: any) => void;
+    /**
+     * Mounts the container and its elements to a DOM element
+     *
+     * This method organizes the created elements according to the specified layout,
+     * applies styling, and renders them within the provided DOM element.
+     * The elements are rendered inside secure iframes for PCI compliance.
+     *
+     * @param domElement - The DOM element where the form should be mounted
+     */
     mount: (domElement: any) => void;
+    /**
+     * Mounts the container element to the DOM and triggers a mounted event
+     *
+     * This method mounts the container element to the specified DOM element
+     * and then emits an event to notify the SDK that the container has been mounted.
+     *
+     * @param domElement - The DOM element where the container should be mounted
+     */
+    mountContainerElement: (domElement: string) => void;
+    /**
+     * Unmounts the container and cleans up all resources
+     *
+     * This method removes all elements from the DOM, clears internal state,
+     * and removes the iframe to prevent memory leaks.
+     */
     unmount: () => void;
+    /**
+     * Validates all elements in the container
+     *
+     * Checks that all elements are mounted and triggers validation
+     * in the secure iframe. Returns a promise that resolves with
+     * validation results.
+     *
+     * @returns Promise that resolves with validation results
+     */
     validate: () => Promise<unknown>;
+    /**
+     * Collects data from all elements in the container
+     *
+     * This method securely collects sensitive data from all mounted elements,
+     * validates the data, and optionally tokenizes it. The actual data collection
+     * happens within the secure iframe to maintain PCI compliance.
+     *
+     * @param options - Collection options (tokenization, additional fields, etc.)
+     * @returns Promise that resolves with collected/tokenized data
+     */
     collect: (options?: ICollectOptions) => Promise<unknown>;
+    /**
+     * Resets all form elements to their initial state
+     *
+     * Clears all input values and resets validation states
+     * by sending a reset command to the secure iframe.
+     */
     reset(): void;
 }
 
@@ -518,6 +615,7 @@ interface Mountable {
 }
 interface ElementOptions {
     id?: string;
+    dataTestId?: string;
     className?: string | string[];
     styles?: Partial<CSSStyleDeclaration>;
 }
@@ -525,8 +623,9 @@ declare class PayrailsElement implements Mountable {
     protected element: HTMLElement;
     protected subElements: Array<Mountable>;
     readonly id: string | undefined;
+    readonly dataTestId: string | undefined;
     protected eventBus: _payrails_iframe_event_bus.IframeEventBus;
-    constructor(elementType: string, { id, className }?: ElementOptions);
+    constructor(elementType: string, { id, className, dataTestId }?: ElementOptions);
     get parentElement(): HTMLElement | null;
     get selector(): string;
     mount(location: string): void;
@@ -562,6 +661,11 @@ interface CollectElementOptions {
     errorTextStyles?: object;
     required?: boolean;
     enableCardIcon?: boolean;
+    translations?: {
+        error?: {
+            default?: string;
+        };
+    };
 }
 type PayrailsContainerType = 'COLLECT' | 'COMPOSABLE';
 interface CollectContainerOptions {
@@ -593,11 +697,14 @@ interface PayrailsSecureField {
     resetError?: () => void;
     setValue?: (elementValue: string) => void;
     clearValue?: () => void;
+    update: (data: CollectElementOptions) => void;
 }
 declare class PayrailsCollectContainer implements Mountable {
     bin: string;
     isBinLookupEnabled: boolean;
     readonly id = "payrails-container-wrapper";
+    readonly dataTestId = "payrails-container-wrapper";
+    readonly className = "payrails-container-wrapper";
     private static instance;
     private readonly __container;
     private element;
@@ -677,6 +784,7 @@ declare const regexes: {
     hipercard: RegExp;
     unionpay: RegExp;
     maestro: RegExp;
+    elo: RegExp;
 };
 type CardNetwork = keyof typeof regexes;
 
@@ -811,9 +919,14 @@ declare class CardForm extends PayrailsElementWithStoreInstrumentCheckbox {
     private throttledFetchBinLookup;
     private lastBin;
     private lastBinLookup;
+    private defaultStyles;
+    private defaultTranslations;
     constructor(collectContainer: PayrailsCollectContainer, options?: CardFormOptions | undefined);
     private initializeFormFields;
     getErrorTextStyles(errorTextStyles: any): any;
+    private updateStyles;
+    private updateTranslations;
+    update(options: Partial<Pick<CardFormOptions, 'styles' | 'translations'>>): void;
     private createFormField;
     private initializeCustomLayout;
     private hasFieldBeenUsed;
@@ -826,14 +939,15 @@ declare class CardForm extends PayrailsElementWithStoreInstrumentCheckbox {
         reset?: boolean;
     }): void;
     private triggerOnReady;
+    private prepareErrorStyles;
     private prepareLabelStyles;
-    private prepareInputStyles;
+    prepareInputStyles(styles: CardFieldStyles, type: ElementType): CardFieldStyles;
     validate(): Promise<{
         isValid: boolean;
         errors: string;
     }>;
     get isValid(): boolean;
-    get cardNetwork(): "" | "visa" | "mastercard" | "amex" | "diners" | "discover" | "jcb" | "hipercard" | "unionpay" | "maestro";
+    get cardNetwork(): "" | "visa" | "mastercard" | "amex" | "diners" | "discover" | "jcb" | "hipercard" | "unionpay" | "maestro" | "elo";
     onChange(): void;
     private updateInstallments;
     private reset;
@@ -851,6 +965,8 @@ declare class CardForm extends PayrailsElementWithStoreInstrumentCheckbox {
         bin: string;
     }>;
     private getinstallmentOptions;
+    unmount(): void;
+    mount(selector: string): void;
 }
 interface LabelStyles {
     base?: Partial<CSSStyleDeclaration>;
@@ -946,6 +1062,7 @@ declare class CardPaymentButton extends PayrailsElement {
     private readonly returnInfo?;
     selectedInstrument: StoredPaymentInstrument | null;
     paymentInstallmentElement: PayrailsElementWithPaymentInstallmentsDropdown | null;
+    private isLoading;
     get bin(): string | undefined;
     private readonly paymentExecutor;
     private cardForm;
@@ -963,6 +1080,9 @@ declare class CardPaymentButton extends PayrailsElement {
     private onAuthorizationFailed;
     private onPay;
     private constructEncryptedPayment;
+    private updateStyles;
+    private updateTranslations;
+    update(options: Partial<Pick<CardPaymentButtonOptions, 'styles' | 'translations'>>): void;
     private handleAuthorizationResult;
 }
 declare enum AuthorizationFailureReasons {
@@ -1010,9 +1130,10 @@ interface GooglePayButtonOptions extends StoreInstrumentElementOptions {
 }
 declare class GooglePayButton extends PayrailsElementWithStoreInstrumentCheckbox {
     protected options: GooglePayButtonOptions;
-    private static instance;
     private readonly paymentExecutor;
     private static googleSDKClient;
+    private sdkLoadedCalled;
+    private buttonElement;
     private static getSDKClient;
     static isGooglePayAvailable(allowedPaymentMethods: google.payments.api.IsReadyToPayPaymentMethodSpecification[], environment?: PayrailsEnvironment, merchantInfo?: google.payments.api.MerchantInfo): Promise<boolean>;
     constructor(options: GooglePayButtonOptions);
@@ -1070,7 +1191,6 @@ interface ButtonOptions {
         hover?: Partial<CSSStyleDeclaration>;
     };
 }
-
 interface GenericRedirectButtonOptions {
     styles?: ButtonOptions['styles'];
     translations?: {
@@ -1082,14 +1202,24 @@ interface GenericRedirectButtonOptions {
 declare class GenericRedirectButton extends PayrailsElement {
     protected options: GenericRedirectButtonOptions;
     private readonly returnInfo?;
-    constructor(options: GenericRedirectButtonOptions, returnInfo?: ReturnInfo | undefined);
     private popup;
-    private buildRedirectButton;
     private readonly paymentExecutor;
+    private isDisabled;
+    private isLoading;
+    constructor(options: GenericRedirectButtonOptions, returnInfo?: ReturnInfo | undefined);
+    private setStyles;
+    private removeStyles;
+    private triggerLoading;
     private onClick;
     private handleAuthorizationResult;
     private createPopupWithTimeout;
     private redirectToPaymentLink;
+    private updateStyles;
+    private updateTranslations;
+    update(options: {
+        styles?: ButtonOptions['styles'];
+        translations?: ButtonOptions['translations'];
+    }): void;
 }
 
 interface GenericRedirectDropinOptions {
@@ -1228,6 +1358,7 @@ interface DropinOptions {
         [key: string]: any;
         mercadoPago?: GenericRedirectDropinOptions['config'];
         preselectFirstPaymentOption?: boolean;
+        showPaymentMethodLogo?: boolean;
         cards?: {
             showCardHolderName?: boolean;
             showExistingCards?: boolean;
@@ -1538,4 +1669,5 @@ declare class ApplePayButton extends PayrailsElementWithStoreInstrumentCheckbox
     private onApplePayAuthorized;
 }
 
-export { ApplePayButtonOptions, AuthorizationFailureReasons, CardFormOptions, CardListOptions, CardPaymentButtonOptions, DropinOptions, ElementType, GooglePayButtonOptions, INTEGRATION_TYPE, InitOptions, PAYMENT_METHOD_CODES, PaymentEvents, PaypalButtonOptions, Payrails, PayrailsAmount, PayrailsClientOptions, PayrailsContainerType, PayrailsEnvironment, PayrailsSecureField, PayrailsSecureFieldEvent, SaveInstrumentResponse, WorkflowExecutionResponse };
+export { AuthorizationFailureReasons, ElementType, INTEGRATION_TYPE, PAYMENT_METHOD_CODES, Payrails, PayrailsEnvironment };
+export type { ApplePayButtonOptions, CardFormOptions, CardListOptions, CardPaymentButtonOptions, DropinOptions, GooglePayButtonOptions, InitOptions, PaymentEvents, PaypalButtonOptions, PayrailsAmount, PayrailsClientOptions, PayrailsContainerType, PayrailsSecureField, PayrailsSecureFieldEvent, SaveInstrumentResponse, WorkflowExecutionResponse };