@paydock/client-sdk/bundles/types/widget/html-multi-widget.d.ts

Paydock client sdk

import { Container } from "../components/container";
import { IFrame } from "../components/iframe";
import { type IEventData } from "../components/iframe-event";
import { type IFormValidation, type IFormValues, type ValidatorFieldsMapKey } from '../components/param';
import { type ITriggerData, Trigger } from "../components/trigger";
import { MultiWidget } from "./multi-widget";
export interface IEventMetaData extends IEventData {
    configuration_token: string;
    type: string;
    account_name?: string;
    account_number?: string;
    card_number_last4?: string;
    card_number_length?: number;
    card_scheme?: string;
    gateway_type?: string;
}
export interface IEventAfterLoadData extends IEventData {
}
export interface IEventFinishData extends IEventData {
    payment_source: string;
    payment_source_token?: string;
}
/**
 * Interface of data from validation event.
 *
 * @interface IFormValidation
 *
 * @param {string} event The name of the event.
 * @param {string} message_source A system variable that identifies the event source.
 * @param {string} purpose A system variable that states the purpose of the event.
 * @param {string} [ref_id] Custom unique value that identifies result of processed operation.
 * @param {boolean} [form_valid] Indicates wether or not the form is valid.
 * @param {Array<string>} [invalid_fields] Names of form fields with invalid data.
 * @param {Array<string>} [invalid_showed_fields] Names of invalid form fields which are already displaying the error.
 * @param {Partial<Record<CardValidatorValue | GenericValidatorValue, Array<string>>>} [validators] Object containing validator identifiers as keys and the fields subject to that validator as an array of form field names.
 *  See list of available [Generic Vallidators]{@link GENERIC_VALIDATORS} and [Card Validators]{@link CARD_VALIDATORS},
 */
/**
 * Contains basic information associated with the event and additional meta data
 * specific to the event. E.g., card info, gateway info, etc.
 *
 * @interface IEventMetaData
 *
 * @param {string} event The name of the event.
 * @param {string} purpose A system variable that states the purpose of the event.
 * @param {string} message_source A system variable that identifies the event source.
 * @param {string} [ref_id] Custom unique value that identifies result of processed operation.
 * @param {string} configuration_token Token received from our API with widget data
 * @param {string} type Payment type 'card', 'bank_account'
 * @param {string} gateway_type Gateway type
 * @param {string} [card_number_last4] Last 4 digit of your card
 * @param {string} [card_scheme] Card scheme, e.g., (Visa, Mastercard and American Express (AmEx))
 * @param {number} [card_number_length] Card number length
 * @param {string} [account_name] Bank account account name
 * @param {string} [account_number] Bank account account number
 * */
/**
 * Interface of data from event.
 * @interface IEventAfterLoadData
 *
 * @param {string} event The name of the event.
 * @param {string} purpose A system variable that states the purpose of the event.
 * @param {string} message_source A system variable that identifies the event source.
 * @param {string} [ref_id] Custom unique value that identifies result of processed operation.
 * */
/**
 * Interface of data from event.
 * @interface IEventFinishData
 *
 * @param {string} event The name of the event.
 * @param {string} purpose A system variable that states the purpose of the event.
 * @param {string} message_source A system variable that identifies the event source.
 * @param {string} [ref_id] Custom unique value that identifies result of processed operation.
 * @param {string} payment_source One time token. Result from this endpoint [API docs](https://docs.paydock.com/#tokens)
 * */
/**
 * List of available event's name
 * @const EVENT
 *
 * @type {object}
 * @param {string} AFTER_LOAD=afterLoad
 * @param {string} SUBMIT=submit
 * @param {string} FINISH=finish
 * @param {string} VALIDATION=validation
 * @param {string} VALIDATION_ERROR=validationError
 * @param {string} SYSTEM_ERROR=systemError
 * @param {string} META_CHANGE=metaChange
 * @param {string} RESIZE=resize
 */
/**
 * List of available event's name
 * @const VAULT_DISPLAY_EVENT
 *
 * @type {object}
 * @param {string} AFTER_LOAD=afterLoad
 * @param {string} SYSTEM_ERROR=system_error
 * @param {string} CVV_SECURE_CODE_REQUESTED=cvv_secure_code_requested
 * @param {string} CARD_NUMBER_SECURE_CODE_REQUESTED=card_number_secure_code_requested
 * @param {string} ACCESS_FORBIDDEN=access_forbidden
 * @param {string} SESSION_EXPIRED=systemError
 * @param {string} SYSTEM_ERROR=session_expired
 * @param {string} OPERATION_FORBIDDEN=operation_forbidden
 */
/**
 * Class HtmlMultiWidget include method for working with html
 * @constructor
 * @extends MultiWidget
 *
 * @param {string} selector - Selector of html element. Container for widget
 * @param {string} publicKey - PayDock users public key
 * @param {(Configuration | string | Configuration[] | string[])} conf - exemplar[s] Configuration class OR configuration token
 * @example
 * var widget = new MultiWidget('#widget', 'publicKey','configurationToken'); // With a pre-created configuration token
 *
 * var widget = new MultiWidget('#widget', 'publicKey',['configurationToken', 'configurationToken2']); // With pre-created configuration tokens
 *
 * var widget = new MultiWidget('#widget', 'publicKey', new Configuration('gatewayId')); With Configuration
 *
 * var widget = new MultiWidget('#widget', 'publicKey',[ With Configurations
 *      Configuration(), // default gateway_id,
 *      Configuration('not_configured'), // without gateway,
 *      Configuration('gatewayId'),
 *      Configuration('gatewayId', 'bank_account')
 * ]);
 */
declare class HtmlMultiWidget extends MultiWidget {
    protected container: Container;
    protected iFrame: IFrame;
    protected triggerElement: Trigger;
    protected validationData: IFormValidation;
    /** @constructs */ constructor(selector: string, publicKey: string, conf: any);
    /**
     * Loads the widget.
     *
     * Calling this method results in an iframe element being inserted and rendered in the DOM.
     */
    load(): void;
    /**
     * Registers a form validation callback for validation events.
     */
    protected afterLoad(): void;
    /**
     * Listen to events of widget
     *
     * @example
     *
     * ```javascript
     * widget.on('form_submit', function (data) {
     *      console.log(data);
     * });
     * ```
     *
     * @example
     *
     * ```javascript
     * widget.on('form_submit').then(function (data) {
     *      console.log(data);
     * });
     * ```
     *
     * @typedef {(data: IEventData | IEventMetaData | IEventFinishData | IFormValidation) => void} EventListenerCallback
     *
     * @param {string} eventName - The name of the event that should be listened. Available event names [EVENT]{@link EVENT}.
     * @param {EventListenerCallback} [cb] - A function to be invoked whenever the event occurs.
     *
     * @return {Promise<IEventData | IEventMetaData | IEventFinishData | IFormValidation> | void}
     */
    on(eventName: string): Promise<IEventData | IEventMetaData | IEventFinishData | IFormValidation>;
    on(eventName: string, cb: (data: IEventData | IEventMetaData | IEventFinishData | IFormValidation) => void): any;
    /**
     * Registers callback that will be invoked for every trigger.
     *
     * @param {'submit_form' | 'tab'} triggers - The Widget element identifier that caused the trigger.
     * @param {ITriggerData} data - Data that will be sent to the widget when the trigger occurs.
     */
    trigger(triggerName: string, data?: ITriggerData): void;
    /**
     * Gets a reference to the form current validation state.
     *
     * !Warning: do not directly modify the values of the returned object.
     *
     * @return {IFormValidation} Form validation object
     */
    getValidationState(): IFormValidation;
    /**
     * Checks if a given form is valid.
     *
     * A form is valid if all form fields are valid.
     *
     * @return {boolean} Indicates wether or not form is valid.
     */
    isValidForm(): boolean;
    /**
     * Using this method you can check if a specific form field is invalid
     *
     * @param {string} field - Field name
     * @return {boolean} Field is invalid
     */
    isInvalidField(field?: string): boolean;
    /**
     * Checks if a given form field is displaying an error.
     *
     * @param {string} field - The form field name
     *
     * @return {boolean} Indicates wether or not the Error message is being displayed on the associated field.
     */
    isFieldErrorShowed(field?: string): boolean;
    /**
     * Checks if a given form field is valid or invalid by name.
     *
     * @param {string} field - The form field name
     * @param validator - The name of the validator.
     *
     * @return {boolean} Indicates wether or not the field is invalid based on validator intepretation.
     */
    isInvalidFieldByValidator(field: string, validator: ValidatorFieldsMapKey): boolean;
    /**
     * Hides the widget.
     *
     * E.g., use this method to hide the widget after it loads.
     *
     * @param {boolean} [saveSize=false] Wether the original iframe element size should be saved before being hidden.
     */
    hide(saveSize: boolean): void;
    /**
     * Shows the widget.
     *
     * E.g., use this method to show the widget after it was explicitly hidden.
     */
    show(): void;
    /**
     * Reloads the widget.
     */
    reload(): void;
    /**
     * Hides the specified Widget elements by their identifier.
     *
     * @example
     *
     * ```javascript
     * widget.hideElements(['submit_button', 'email']);
     * ```
     *
     * @param {string[]} elements - List of element which can be hidden [ELEMENT]{@link ELEMENT} || [FORM_FIELD]{@link FORM_FIELD}
     */
    hideElements(elements: string[]): void;
    /**
     * Shows the specified Widget elements by their identifier.
     *
     * @example
     *
     * ```javascript
     * widget.showElements(['submit_button', 'email']);
     * ```
     *
     * @param {string[]} elements - List of elements which can be showed [ELEMENT]{@link ELEMENT} || [FORM_FIELD]{@link FORM_FIELD}
     */
    showElements(elements: string[]): void;
    /**
     * Updates the form field values inside the widget.
     *
     * @example
     *
     * ```javascript
     * widget.updateFormValues({
     *   email: 'predefined@email.com',
     *   card_name: 'Houston'
     * });
     *```
     *
     * @param {IFormValues} fieldValues - Fields with values
     */
    updateFormValues(fieldValues: IFormValues): void;
    /**
     * Updates a single form field values inside the widget by the form field name.
     *
     * @example
     *
     * ```javascript
     * widget.updateFormValue("card_name", "John Doe");
     *```
     *
     * @param {string} key - The form field name
     * @param {string} value - The form field value
     */
    updateFormValue(key: string, value: string): void;
    /**
     * Inserts the event data (after finish event) onto the input field associated with the provided CSS selector.
     *
     * @param {string} selector - A CSS selector. E.g., ".my-class", "#my-id", or others
     * @param {string} dataType - The data type of IEventData object.
     */
    onFinishInsert(selector: string, dataType: string): void;
    /**
     * Intercepts a form submission and delegates processing to the widget.
     *
     * An simplified example of the process:
     * - User clicks submit button in your form
     * - This implicitly triggers a submission to the widget
     * - The widget submits your form
     *
     * @note The widget's submit button will be hidden.
     *
     * @param {string} selector - css selector of your form
     *
     * @example
     *
     * ```html
     * <body>
     *  <form id="myForm">
     *      <input name="amount">
     *      <button type="submit">Submit</button>
     *  </form>
     *  <script>
     *     widget.interceptSubmitForm('#myForm');
     *  </script>
     * </body>
     * ```
     */
    interceptSubmitForm(selector: string): void;
    /**
     * This method hides a submit button and automatically execute form submit
     */
    useCheckoutAutoSubmit(): void;
    /**
     * Use this method for resize iFrame according content height
     *
     * @example
     *
     * ```javascript
     * widget.useAutoResize();
     *```
     */
    useAutoResize(): void;
}
export { HtmlMultiWidget };
//# sourceMappingURL=html-multi-widget.d.ts.map