@finapi/web-form/dist/props.types.d.ts

Library for integrating the finAPI Web Form

export declare type WebFormLanguage = "cs" | "de" | "en" | "fr" | "nl" | "pl" | "sk" | "tr";
/**
 * @internal
 */
export declare enum InfoParam {
    REDIRECT_COMPLETED = "redirect.completed"
}
/**
 * Responsive Layout Configuration.
 */
export declare type LayoutConfig = "xs" | "sm" | "md" | "lg" | {
    xs: number;
    sm: number;
    md: number;
    lg: number;
    xl: number;
};
/**
 * Publicly accessible environments.
 */
export declare type PublicEnvironment = "sandbox" | "live";
/**
 * All environments
 */
export declare type Environment = PublicEnvironment | "staging" | "releaseStaging";
/**
 * Brand related options for the customization.
 * @internal
 */
export declare type Brand = {
    /**
     * Image in Base64 format which will be rendered in Web Form header.
     */
    logo?: string;
    /**
     * Image in Base64 format which will be used as browser tab icon.
     */
    favicon?: string;
    /**
     * Introduction text which will be shown on the first Web Form view.
     */
    introText?: string;
};
/**
 * Set of options which control visibility of some Web Form components.
 * @internal
 */
export declare type Functionality = {
    /**
     * Flag which specifies if the Progress Bar (circles connected with lines
     * graphic) should be shown.
     */
    progressBar?: "RENDER" | "HIDDEN";
    /**
     * Flag which signifies if 'Bank Selection' view to be shown/skipped in case
     * the bank has been preselected by the customer.
     */
    bankDetails?: "LOCKED" | "EDITABLE";
    /**
     * Flag which specifies how or if Bank Login Hint should be shown. This
     * message which comes from the bank might sometimes be too long. Customer
     * can decide to save the space by rendering the hint collapsed or hiding it
     * completely.
     */
    bankLoginHint?: "EXPANDED" | "COLLAPSED" | "HIDDEN";
    /**
     * Flag which specifies if the Save PIN checkbox should be shown.
     */
    storeSecrets?: "RENDER" | "HIDDEN";
    /**
     * Flag which specifies if the Terms and Conditions checkbox should be shown.
     */
    termsAndConditions?: "RENDER" | "HIDDEN";
    /**
     * Flag which specifies if the Footer should be shown.
     */
    footer?: "RENDER" | "HIDDEN";
};
/**
 * Web Form customization.
 * @internal
 */
export declare type ProfileConfig = {
    /**
     * Brand related options for the customization.
     */
    brand?: Brand;
    /**
     * Set of options which control visibility of some Web Form components.
     */
    functionality: Functionality;
};
/**
 * Web Form properties.
 */
export interface WebFormProps {
    /**
     * If specified, then in case when Web Form ends with error, in addition to
     * the Close action an additional action to Open Customer Service is offered
     * to the user. URL will open in new tab.
     */
    customerSupportUrl?: string;
    /**
     * This is useful only for the case when the web form is embedded inside a
     * native app and the end-user connects a redirect bank, as this will result in
     * the end-user being redirected outside your application. After the user
     * finalizes the authentication on bank side, the bank will redirect the
     * end-user to finAPI domain. If the parameter is specified, then we will
     * redirect the end-user back to the given URL, so that end-user comes
     * back to your application. For this to work correctly, please make sure you
     * correctly registered your application Universal Link
     * (iOS)/AppLink(Android), so that your application can catch the redirect.
     */
    backToAppUrl?: string;
    /**
     * Web Form security token for one-time use.
     */
    token: string;
    /**
     * Responsive Layout Configuration. The sizes mean that Web Form will be
     * "forced" to one specific layout and resizing the browser window won't
     * change anything. Object value allows the setup of custom breakpoints. Be
     * aware, that always breakpoints are set on the size of the browser window
     * and not on the size of the container element.
     */
    layoutConfig?: LayoutConfig;
    /**
     * URL of the finAPI server that Web Form will communicate with. If this
     * property is missing, the URL will be resolved based on the
     * 'targetEnvironment' property. If both 'targetUrl' and 'targetEnvironment'
     * are not provided, Web Form will communicate with the Live finAPI
     * environment. The server must belong to finAPI domains '*.finapi.net',
     * '*.finapi.io'.
     *
     * @example https://webform-sandbox.finapi.io
     */
    targetUrl?: string;
    /**
     * The URL of the finAPI server from which the web component JS bundle will be
     * fetched. If this property is not specified, the URL will be determined based
     * on the `targetUrl` or `targetEnvironment`, in that order. If neither is
     * provided, the JS bundle will be fetched from the live environment. The
     * server must belong to one of the finAPI domains: '*.finapi.net' or
     * '*.finapi.io'.
     *
     * @example https://webform-ui-finapi-general-sandbox.finapi.io
     * @internal
     */
    sourceUrl?: string;
    /**
     * This property is for testing and development purposes only.
     *
     * This property allows specifying which finAPI server the Web Form will
     * communicate with. New features are released environment by environment.
     * Sometimes it is necessary to test them before they reach the live
     * production environment. This option will influence where the Loader
     * fetches the Web Component bundle JS file from, and to which backend server
     * the Web Form will be sending requests. Properties `targetUrl` and
     * `sourceUrl` take precedence over this property.
     *
     * @example
     * FinApiWebForm.load(container, { token: "XXXXX", targetEnvironment: "sandbox" })
     *
     * @deprecated To connect to the sandbox environment, set
     * `https://webform-sandbox.finapi.io` as the value for the property `targetUrl`.
     */
    targetEnvironment?: Environment;
    /**
     * It enables the setting of the language for the Web Form. The visibility of
     * the language select item is still controlled solely by the Web Form Profile
     * configuration. The language selected through the select item is also
     * remembered for the current Access User and takes precedence over the value
     * of this property.
     */
    language?: WebFormLanguage;
    /**
     * Removes margins on the edges and some spacing inside webform.
     */
    noMargins?: string;
    /**
     * STANDALONE when the web form is shown in a standalone web page;
     * EMBEDDED when the web form is embedded into the customer's web page.
     * @internal
     */
    platform?: string;
    /**
     * If specified, when the Web Form completes successfully, instead
     * of the "Close" button the "Continue" button is shown.
     * This button redirects the end user to the specified URL in the same tab.
     * @internal
     */
    redirectUrl?: string;
    /**
     * If specified, when the Web Form ends with an error, the end user will be
     * automatically redirected to the specified URL in the same tab.
     * @internal
     */
    errorRedirectUrl?: string;
    /**
     * If specified, when the end user aborts a Web Form, they will be
     * automatically redirected to the specified URL in the same tab.
     * @internal
     */
    abortRedirectUrl?: string;
    /**
     * When passed as true, Web Form will show Error View with message about invalid URL.
     * @internal
     */
    isInvalidUrl?: boolean;
    /**
     * If infoParam is set, then instead of starting Web Form we show Info View
     * with message that belongs to the InfoParam. Currently used to show
     * "Go back" message after bank redirect.
     * @internal
     */
    infoParam?: InfoParam;
}
/**
 * Web Form event handlers.
 */
export interface WebFormHandlers {
    /**
     * Callback for the complete event.
     * The moment when this callback is triggered, depends on whether a profile is
     * applied to the web form, and whether this profile has
     * "functionality.skipConfirmationView" flag set to "true" - in that case, the
     * callback is triggered immediately once the flow is completed. Otherwise, the
     * end user will first see the "Confirmation" view,
     * and only when the end user clicks the "Close" button, the callback will be
     * triggered.
     */
    onComplete?: () => void;
    /**
     * Callback for the fail event.
     * In case of an error, the end user will first see the "Error" view with
     * error details. Only when the end user clicks the "Close" button, the
     * callback will be triggered.
     */
    onFail?: () => void;
    /**
     * Callback for the abort event.
     * In case the end user cancels (aborts) the web form, they will first see the "Abort" view.
     * Only when the end user clicks the "Close" button, the callback will be triggered.
     */
    onAbort?: () => void;
    /**
     * Callback in case of error occurs while loading the Web form.
     * It may happen if Web Form bundle js fails to load due to
     * any reason that prevents it from downloading.
     */
    onLoadError?: () => void;
    /**
     * Callback triggered when first component of the Web Form is rendered.
     */
    onLoaded?: () => void;
    /**
     * Callback is triggered when the bank redirects to the Web Form. The embedded
     * Web Form opens the bank page in a new browser tab. After the user logs in,
     * the bank page navigates to the URL of the standalone Web Form. At this
     * point, there are two Web Forms open: the original embedded form and the new
     * standalone form. The new standalone Web Form will display a message to "go
     * back to your app" and trigger this callback, which can be used to
     * automatically close it if the browser allows it.
     * @internal
     */
    onBlindRedirectCallback?: () => void;
}