@monei-js/components/types/component.d.ts

MONEI UI Components enable you to collect sensitive payment information using customizable UI components.

export const PROP_TYPE: {
  STRING: string;
  OBJECT: string;
  FUNCTION: string;
  BOOLEAN: string;
  NUMBER: string;
  ARRAY: string;
};
export const EVENT: {
  RENDER: string;
  RENDERED: string;
  DISPLAY: string;
  ERROR: string;
  CLOSE: string;
  DESTROY: string;
  PROPS: string;
  RESIZE: string;
  FOCUS: string;
};
export const PROP_SERIALIZATION: {
  JSON: string;
  DOTIFY: string;
  BASE64: string;
};
export const CONTEXT: {
  IFRAME: string;
  POPUP: string;
};
export type CrossDomainLocationType = {};
export type ZalgoPromise<T> = Promise<T>;
export type CrossDomainWindowType = {
  location: string | CrossDomainLocationType;
  self: CrossDomainWindowType;
  closed: boolean;
  open: () => CrossDomainWindowType;
  close: () => void;
  focus: () => void;
  top: CrossDomainWindowType;
  frames: Array<CrossDomainWindowType>;
  opener?: CrossDomainWindowType;
  parent: CrossDomainWindowType;
  length: number;
  postMessage: () => void;
};

export type CancelableType = {
  cancel: () => void;
};

export type EventEmitterType = {
  on: (eventName: string, handler: Function) => CancelableType;
  once: (eventName: string, handler: Function) => CancelableType;
  trigger: (eventName: string, ...args: any[]) => ZalgoPromise<void>;
  triggerOnce: (eventName: string, ...args: any[]) => ZalgoPromise<void>;
  reset: () => void;
};

type LoggerPayload = Record<string, string | undefined>;

type Logger = {
  info: (event: string, payload?: LoggerPayload) => any;
};

export type EventHandlerType<T> = (e: T) => void | ZalgoPromise<void>;
export type timeoutPropType = number;
export type windowPropType = CrossDomainWindowType;
export type cspNoncePropType = string;
export type closePropType = () => ZalgoPromise<void>;
export type focusPropType = () => ZalgoPromise<void>;
export type showPropType = () => ZalgoPromise<void>;
export type hidePropType = () => ZalgoPromise<void>;
export type resizePropType = (props: {width?: number; height?: number}) => ZalgoPromise<void>;
export type getParentPropType = () => CrossDomainWindowType;
export type getParentDomainPropType = () => string;

export type onDisplayPropType = EventHandlerType<void>;
export type onRenderedPropType = EventHandlerType<void>;
export type onRenderPropType = EventHandlerType<void>;
export type onClosePropType = EventHandlerType<void>;
export type onDestroyPropType = EventHandlerType<void>;
export type onResizePropType = EventHandlerType<void>;
export type onFocusPropType = EventHandlerType<void>;
export type onErrorPropType = EventHandlerType<any>;
export type onPropsPropType<P> = (input: (props: PropsType<P>) => void) => void;

export type DimensionsType = {
  width: number;
  height: number;
};

export type CssDimensionsType = {
  width: string;
  height: string;
};

export type StringMatcherType = string | Array<string>;

export type PropsInputType<P> = {
  timeout?: timeoutPropType;
  window?: windowPropType;
  cspNonce?: cspNoncePropType;
  onDisplay?: onDisplayPropType;
  onRendered?: onRenderedPropType;
  onRender?: onRenderPropType;
  onClose?: onClosePropType;
  onDestroy?: onDestroyPropType;
  onResize?: onResizePropType;
  onFocus?: onFocusPropType;
  onError?: onErrorPropType;
  onProps?: onPropsPropType<P>;
} & P;

export type PropsType<P> = {
  timeout?: timeoutPropType;
  window?: windowPropType;
  close?: closePropType;
  focus?: focusPropType;
  resize?: resizePropType;
  cspNonce?: cspNoncePropType;

  onDisplay: onDisplayPropType;
  onRendered: onRenderedPropType;
  onRender: onRenderPropType;
  onClose: onClosePropType;
  onDestroy: onDestroyPropType;
  onResize: onResizePropType;
  onFocus: onFocusPropType;
  onError: onErrorPropType;
  onProps: onPropsPropType<P>;
} & P;

export type RenderOptionsType<P> = {
  uid: string;
  props: PropsInputType<P>;
  tag: string;
  context: string;
  close: (value: string) => ZalgoPromise<void>;
  focus: () => ZalgoPromise<any>;
  doc: Document;
  container?: HTMLElement;
  dimensions: DimensionsType;
  state: Record<string, any>;
  event: EventEmitterType;
  frame?: HTMLIFrameElement;
  prerenderFrame?: HTMLIFrameElement;
};

export type ComponentOptionsType<P> = {
  tag: string;
  url: string | ((input: {props: PropsType<P>}) => string);
  domain?: string | RegExp;
  bridgeUrl?: string;

  props?: Record<string, any>;
  exports?: Record<string, any>;

  dimensions?: CssDimensionsType;
  autoResize?: {width?: boolean; height?: boolean; element?: string};

  allowedParentDomains?: StringMatcherType;

  attributes?: {
    iframe?: Record<string, string>;
    popup?: Record<string, string>;
  };

  defaultContext?: any;

  containerTemplate?: (props: RenderOptionsType<P>) => HTMLElement | undefined;
  prerenderTemplate?: (props: RenderOptionsType<P>) => HTMLElement | undefined;

  validate?: (input: {props: PropsInputType<P>}) => void;
  logger?: Logger;
};

export interface MoneiComponent<P> {
  new (props: PropsInputType<P>): MoneiComponent<P>;
  render: (container?: string | HTMLElement, context?: typeof CONTEXT) => ZalgoPromise<void>;
  renderTo: (target: CrossDomainWindowType, container?: string, context?: typeof CONTEXT) => ZalgoPromise<void>;
  driver: (driverName: string, dep: Record<string, any>) => any;
  isChild: () => boolean;
  xprops?: PropsType<P>;
  canRenderTo: (win: CrossDomainWindowType) => ZalgoPromise<boolean>;
  state: Record<any, any>;
  close: () => ZalgoPromise<void>;
  focus: () => ZalgoPromise<void>;
  resize: (dimensions: DimensionsType) => ZalgoPromise<void>;
  onError: (error: any) => ZalgoPromise<void>;
  updateProps: (props: Partial<PropsInputType<P>>) => ZalgoPromise<void>;
  event: EventEmitterType;
  show: () => ZalgoPromise<void>;
  hide: () => ZalgoPromise<void>;
  [key: string]: any;
}

export function create<P>(options: ComponentOptionsType<P>): MoneiComponent<P>;