@everymatrix/cashier-method-details 1.22.10

package/src/CashierMethodDetails.svelte

@@ -0,0 +1,592 @@
+<svelte:options tag={null} />
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { _, addNewMessages, setupI18n, setLocale } from './i18n';
+  import { TRANSLATIONS } from './translations';
+
+  import '@everymatrix/cashier-iframe-redirect';
+  import '@everymatrix/cashier-confirm-modal'
+  import '@everymatrix/cashier-notifications'
+
+  import type {PaymentMethod} from "./CashierMethodDetails.types";
+
+  export enum FieldTypes {
+    Unknown ='Unknown',
+    Text ='Text',
+    Boolean ='Boolean',
+    Number ='Number',
+    Money ='Money',
+    DateTime ='DateTime',
+    Lookup ='Lookup',
+    IpAddress ='IpAddress',
+    Date ='Date',
+    Time ='Time',
+    LookupCollection = 'LookupCollection',
+    Hidden = 'Hidden',
+    Label = 'Label',
+    Password = 'Password',
+    Link = 'Link',
+    Image = 'Image',
+    Html = 'Html',
+    QRCod = 'QRCode'
+  }
+  export let endpoint: string;
+  export let session: string;
+  export let lang: string;
+  export let translationurl: string;
+  export let customerid: string;
+  export let currency: string;
+  export let amount: number;
+  export let selectedpaymentmethodname: string;
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = ''
+
+  const VISIBLE_FIELD_TYPES: string[] =
+          'Text,Number,Money,Boolean,Lookup,Date,Time,DateTime,Password,Label,Link,QRCode'.split(',');
+  export enum RedirectionModeStringEnum {
+    Default = 'Default',
+    RedirectWithRetry = 'Redirect'
+  }
+
+  let xPaymentSessionToken: string;
+  let selectedPaymentMethod: PaymentMethod = {} as PaymentMethod;
+  let fields = [];
+  let prepareFields = {};
+  let isLoading:boolean = false;
+  let isMethodOpen:boolean  = false;
+  let displayNone:boolean = false;
+  let customStylingContainer:HTMLElement;
+  let prepareRequest;
+  let showConfirmModal:boolean = false;
+  let redirectUrl: string;
+  let windowRedirect: Window;
+  let showRedirectNotification: boolean;
+  let redirectMode: RedirectionModeStringEnum;
+  let showRetryNotification: boolean;
+  let isProcessingTxn: boolean;
+  let isTranslationLoaded: boolean;
+  let openedLookup: number | null;
+  let clickedElem: HTMLElement;
+  $: endpoint && session && selectedpaymentmethodname && currency && getPaymentDetails();
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+  $: lang && setActiveLanguage();
+  $: lang && translationurl && setTranslationUrl();
+
+  const setActiveLanguage = ():void => {
+    setLocale(lang);
+  }
+  const setTranslationUrl = () => {
+    let url:string = translationurl;
+    if (url) {
+      return  fetch(url).then((res:any) => res.json())
+              .then((res) => {
+                Object.keys(res).forEach((item:any):void => {
+                  addNewMessages(item, res[item]);
+                  isTranslationLoaded = true;
+                });
+              }).catch((err:any) => {
+                isTranslationLoaded = true;
+              });
+    }
+  }
+
+  Object.keys(TRANSLATIONS).forEach((item:any):void => {
+    addNewMessages(item, TRANSLATIONS[item]);
+  });
+
+  const getPaymentDetails = () => {
+    const url:URL = new URL(`${endpoint}/v1/player/${customerid}/payment/GetPaymentMethod`);
+    const headers = new Headers();
+    headers.append("accept", "application/json");
+    headers.append("Content-Type", "application/json");
+    const requestParams:RequestInit = {
+      method: "POST",
+      mode: "cors",
+      headers: headers,
+      body: JSON.stringify({
+        "PaymentMethodName": selectedpaymentmethodname,
+        "Currency": currency,
+        "XPaymentSessionToken": session
+      })
+    }
+    fetch(url, requestParams).then(res => res.json()).then(data => {
+      xPaymentSessionToken = data.XPaymentSessionToken;
+      selectedPaymentMethod = data.PaymentMethod;
+      fields = selectedPaymentMethod.Fields;
+      prepareFields = {};
+    })
+  }
+
+  const setClientStyling = ():void => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+
+  const setClientStylingURL = ():void => {
+    displayNone = true;
+
+    let url:URL = new URL(clientstylingurl);
+    let cssFile:HTMLElement = document.createElement('style');
+
+    fetch(url.href)
+            .then((res:any) => res.text())
+            .then((data:any) => {
+              cssFile.innerHTML = data
+
+              setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+              setTimeout(() => { displayNone = false; }, 500);
+            });
+  }
+
+  onMount(() => {
+    window.addEventListener('closeModal', closeModal, false);
+    window.addEventListener('confirmModal', confirmTxn, false);
+    window.addEventListener('closeIframe', closeIframe, false);
+    window.addEventListener('notificationButtonClick', retryRedirect, false);
+    document.addEventListener('click',closeAllLookups)
+
+    return () => {
+      window.removeEventListener('closeModal', closeModal);
+      window.removeEventListener('confirmModal', confirmTxn);
+      window.removeEventListener('closeIframe', closeIframe);
+      window.removeEventListener('notificationButtonClick', retryRedirect);
+    }
+
+  });
+
+  const closeAllLookups = (e) => {
+    if(!e.composedPath().includes(clickedElem)){
+      openedLookup = null;
+    }
+  }
+
+  const showLookup = (event, index) => {
+    if (index === openedLookup) {
+      openedLookup = null
+      return;
+    }
+    clickedElem = event.composedPath()[0]
+    openedLookup = index
+  }
+
+  const prepareTxn = () => {
+    isProcessingTxn = true;
+    const url:URL = new URL(`${endpoint}/v1/player/${customerid}/payment/GetPaymentPrepare`);
+    const headers = new Headers();
+    headers.append("accept", "application/json");
+    headers.append("Content-Type", "application/json");
+    const requestParams:RequestInit = {
+      method: "POST",
+      mode: "cors",
+      headers: headers,
+      body: JSON.stringify({
+        "XPaymentSessionToken": xPaymentSessionToken,
+        "Transaction": {
+          "PaymentMethod": selectedPaymentMethod.Name,
+          "Amount": amount,
+          "Currency": currency,
+          "CustomFields": prepareFields
+        },
+        "Account": {}
+      })
+    }
+    fetch(url, requestParams).then((res) => res.json()).then(data => {
+      xPaymentSessionToken = data.XPaymentSessionToken;
+      isProcessingTxn = false;
+      showConfirmModal = true;
+    })
+  }
+  const closeIframe = () => {
+    redirectUrl = null;
+  }
+  const closeModal = () => {
+    showConfirmModal = false;
+  }
+  const confirmTxn = () => {
+    isProcessingTxn = true;
+    const url:URL = new URL(`${endpoint}/v1/player/${customerid}/payment/GetPaymentConfirm`);
+    const headers = new Headers();
+    headers.append("accept", "application/json");
+    headers.append("Content-Type", "application/json");
+    const requestParams:RequestInit = {
+      method: "POST",
+      mode: "cors",
+      headers: headers,
+      body: JSON.stringify({
+        "XPaymentSessionToken": xPaymentSessionToken,
+      })
+    }
+    fetch(url, requestParams).then((res) => res.json()).then(data => {
+      xPaymentSessionToken = data.XPaymentSessionToken;
+      redirectUrl = data.RedirectUrl;
+      redirectMode = data.RedirectionMode;
+      isProcessingTxn = false;
+      if (data.RedirectionMode === RedirectionModeStringEnum.RedirectWithRetry) {
+        windowRedirect = window.open(data.RedirectUrl, '_blank');
+        showRedirectNotification = !!windowRedirect;
+        if (!windowRedirect) {
+          showRetryNotification = true;
+        }
+      }
+    })
+  }
+  const retryRedirect = () => {
+    windowRedirect = window.open(redirectUrl, '_blank');
+    showRedirectNotification = true;
+    showRetryNotification = false;
+  }
+
+  const showField = (field) => {
+    return !field.CorrelationFieldName || (field.CorrelationFieldName && prepareFields[field.CorrelationFieldName] === field.CorrelationFieldValue)
+  }
+
+
+</script>
+
+
+<div class="CashierMethodDetails">
+  {#if isTranslationLoaded && selectedPaymentMethod.Name}
+    <div class="MethodsDetails">
+      <form on:submit|preventDefault={prepareTxn}>
+        <div class="FieldWrapper">
+          <div class="form-logo">
+            <div class="SelectedLogoWrapper">
+              <img src={selectedPaymentMethod.Logos[0].LogoUrl} alt={selectedPaymentMethod.Label} />
+            </div>
+            <div class="SelectedLogoDescription">
+              {selectedPaymentMethod.Label}
+            </div>
+          </div>
+          {#if !selectedPaymentMethod.HideAmountField}
+          <div class="Amount">
+            <label>
+              <span class="Required">
+                {$_('amountLabel')}
+              </span>
+              {#if selectedPaymentMethod.IsAmountConfigurable}
+                <input type="number" bind:value={amount} placeholder="{$_('amountPlaceholder')}">
+                {#if selectedPaymentMethod.DisplayCurrency}
+                  <span class="AmountLimits">
+                    {selectedPaymentMethod.DisplayCurrency.MinAmountLimit ? `${$_('generalMin')} ${selectedPaymentMethod.DisplayCurrency.MinAmountLimit} ${currency}` : ''}
+                    {selectedPaymentMethod.DisplayCurrency.MaxAmountLimit ? `/ ${$_('generalMax')} ${selectedPaymentMethod.DisplayCurrency.MaxAmountLimit} ${currency}` : ''}
+                  </span>
+                {/if}
+              {:else}
+                <span class="NonConfigurableAmount">
+                  {amount} {currency}
+                </span>
+              {/if}
+            </label>
+          </div>
+          {/if}
+        </div>
+          {#each fields as field, index}
+            {#if showField(field)}
+              <div class="FieldWrapper" class:Hidden={field.Type === FieldTypes.Hidden}>
+              <label>
+                <span class:Required={field.IsRequired}>{field.Label}</span>
+                {#if field.Description && field.Description !== field.Label}
+                  <span class="Description">{field.Description}</span>
+                {/if}
+                {#if field.Type === FieldTypes.Text}
+                  <input type="text" bind:value={prepareFields[field.Name]} placeholder="{field.Placeholder}">
+
+                {:else if field.Type === FieldTypes.Number || field.Type === FieldTypes.Money}
+                  <input type="number" placeholder="{field.Placeholder}" bind:value={prepareFields[field.Name]}>
+
+                {:else if field.Type === FieldTypes.Password}
+                  <input type="password" bind:value={prepareFields[field.Name]} placeholder="{field.Placeholder}">
+
+                {:else if field.Type === FieldTypes.Hidden}
+                  <input type="hidden" bind:value={prepareFields[field.Name]} placeholder="{field.Placeholder}">
+
+                {:else if field.Type === FieldTypes.Lookup}
+                  <div class="CustomSelect">
+                    <div class="Selected" id="{index}" on:click="{(e) => showLookup(e,index)}">{prepareFields[field.Name] || ''}</div>
+                    <div class="OptionList" class:Opened={openedLookup === index}>
+                      {#each field.Values as value}
+                        <div on:click="{() => {prepareFields[field.Name] = value.Name; fields = fields}}">
+                          <span>{value.Value}</span>
+                        </div>
+                      {/each}
+                    </div>
+                  </div>
+                {:else if field.Type === FieldTypes.Boolean}
+                  <input type="checkbox" bind:value={prepareFields[field.Name]} placeholder="{field.Placeholder}">
+                {:else}
+                  <input type="text" bind:value={prepareFields[field.Name]} placeholder="{field.Placeholder}">
+                {/if}
+              </label>
+              </div>
+            {/if}
+          {/each}
+        {#if !isProcessingTxn}
+          <button class="PrimaryButton" type="submit">
+            <svg class="ButtonLock"  xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M7.51564 0.574496C6.49714 0.733152 5.5928 1.46162 5.21164 2.43037C5.01714 2.92471 4.98674 3.24368 4.98671 4.78987L4.98668 5.99306L4.55336 6.00671C4.20693 6.01762 4.08258 6.03221 3.93336 6.07946C3.43136 6.23846 3.00318 6.58293 2.73943 7.04C2.70133 7.106 2.63639 7.256 2.59508 7.37334L2.52002 7.58665V13.9067L2.59268 14.12C2.6993 14.4331 2.83849 14.6518 3.09336 14.9067C3.34821 15.1615 3.56693 15.3007 3.88002 15.4073L4.09336 15.48H11.9067L12.12 15.4073C12.4331 15.3007 12.6518 15.1615 12.9067 14.9067C13.1616 14.6518 13.3007 14.4331 13.4074 14.12L13.48 13.9067V7.58665L13.405 7.37334C13.1846 6.74712 12.6999 6.27875 12.0667 6.08C11.9191 6.03371 11.7891 6.0184 11.4467 6.00696L11.0134 5.99253L11.0133 4.78959C11.0133 4.128 11.0008 3.45465 10.9855 3.29334C10.9257 2.66268 10.7188 2.13556 10.3497 1.67368C9.66549 0.817589 8.6023 0.405214 7.51564 0.574496ZM8.46436 1.58665C9.01596 1.7035 9.52999 2.11659 9.79758 2.65809C9.98521 3.03771 9.98202 3.00646 9.99305 4.58L10.003 6H5.99702L6.00699 4.58C6.01802 3.00646 6.01483 3.03771 6.20246 2.65809C6.31793 2.42446 6.43799 2.26065 6.61818 2.09103C6.89043 1.83468 7.21371 1.65496 7.52352 1.58775C7.74977 1.53865 8.23518 1.53809 8.46436 1.58665ZM11.9201 7.0955C12.0975 7.17871 12.2992 7.37412 12.3874 7.54806C12.4231 7.61846 12.465 7.75796 12.4805 7.85803C12.4993 7.97978 12.5061 8.97962 12.501 10.88L12.4934 13.72L12.4082 13.8997C12.26 14.2127 12.0016 14.419 11.6821 14.4796C11.4864 14.5167 4.51364 14.5167 4.31793 14.4796C3.99843 14.419 3.74008 14.2127 3.59183 13.8997L3.50668 13.72L3.49905 10.88C3.49393 8.97728 3.50074 7.97987 3.51964 7.85778C3.57627 7.49218 3.79218 7.21543 4.12918 7.0765L4.28002 7.01431L8.02668 7.0205L11.7734 7.02665L11.9201 7.0955Z" fill="white"/>
+            </svg>
+            {$_('makeDepositButton')}
+            <span class="ButtonAmount">{amount || $_('amountPlaceholder')} {currency}</span>
+          </button>
+        {:else}
+          <button class="PrimaryButton">
+            <svg class="ButtonSpinner" xmlns="http://www.w3.org/2000/svg" width="15" height="14" viewBox="0 0 15 14" fill="none">
+              <path d="M14.0282 6.58425C13.9037 4.05374 12.3688 1.68916 10.0872 0.61058C7.59818 -0.509483 4.56986 -0.0531603 2.49567 1.68916C0.504443 3.34851 -0.408201 6.04496 0.172573 8.57547C0.711862 11.0645 2.6616 13.0972 5.10915 13.7609C8.0545 14.5906 10.7509 13.1802 12.4103 10.7741C10.9169 12.7653 8.63527 14.0928 6.10476 13.6365C3.57424 13.1802 1.50005 11.2719 0.919281 8.78289C0.297024 6.12793 1.54154 3.34851 3.90612 1.97955C6.35366 0.569097 9.79682 1.10839 11.4147 3.51445C11.8295 4.09522 12.1199 4.80045 12.2444 5.50567C12.3688 6.08644 12.3273 6.7087 12.4103 7.28947C12.4933 7.82876 12.9496 8.53399 13.5718 8.16063C14.1111 7.82876 14.0696 7.12354 14.0282 6.58425C14.0696 6.87464 14.0282 6.41831 14.0282 6.58425Z" fill="white"/>
+            </svg>
+            {$_('processingButton')}
+          </button>
+        {/if}
+        {#if showRetryNotification}
+          <cashier-notifications
+                  text="{$_('retryText')}"
+                  button="{$_('retryButton')}"
+          >
+          </cashier-notifications>
+        {/if}
+      </form>
+      {#if showRedirectNotification}
+        <div class="RedirectionNotification">
+          <img src="//static.everymatrix.com/mmstage/cashier/assets/redirect.png" alt="">
+          <span class="RedirectionTitle">{$_('redirectTitle')}</span>
+          <span class="RedirectionMessage">{$_('redirectMessage')}</span>
+          <div class="RedirectionClose" on:click={() => {showRedirectNotification = false}}>{$_('backToPayment')}</div>
+        </div>
+      {/if}
+    </div>
+    {/if}
+  {#if redirectUrl && redirectMode === RedirectionModeStringEnum.Default}
+    <div class="IframeRedirect">
+      <cashier-iframe-redirect
+              lang="{lang}"
+              translationurl="{translationurl}"
+              iframeurl="{redirectUrl}"
+      ></cashier-iframe-redirect>
+    </div>
+  {/if}
+  {#if showConfirmModal}
+    <cashier-confirm-modal>
+      <span slot="text">{$_('confirmDepositText')} {amount} {currency} ?</span>
+      <div slot="confirm">{$_('confirmDepositButton')}</div>
+    </cashier-confirm-modal>
+  {/if}
+</div>
+
+
+<style lang="scss">
+  @keyframes loading-spinner {
+    from {
+      transform: rotate(0deg)
+    }
+    to {
+      transform: rotate(360deg)
+    }
+  }
+  .MethodsDetails {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    &:has(.RedirectionNotification) form {
+      visibility: hidden;
+    }
+  }
+  .form-logo {
+    align-items: center;
+    display: flex;
+    height: 50px;
+    border-bottom: 1px solid var(--emw--color-gray-100, #E8E9EB);
+
+    .SelectedLogoDescription {
+      color: var(--emw--color-black, #111);
+      font-size: var(--emw--font-size-small, 14px);
+      margin: 7px 5px 7px 7px;
+      word-break: break-word;
+    }
+
+    .SelectedLogoWrapper {
+      width: 56px;
+      height: 32px;
+      flex-shrink: 0;
+      background: var(--emw--color-background, #FFF);
+      border: 1px solid var(--emw--color-gray-100, #E8E9EB);
+      border-radius: var(--emw--border-radius-large, 6px);
+
+      img {
+        max-height: 32px;
+        max-width: 56px;
+      }
+    }
+  }
+  .RedirectionNotification {
+    height: 100%;
+    width: inherit;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    .RedirectionClose {
+      display: flex;
+      width: 234px;
+      height: 36px;
+      flex-direction: column;
+      justify-content: center;
+      flex-shrink: 0;
+      color: var(--emw--color-white, #FFF);
+      cursor: pointer;
+      text-align: center;
+      font-size: var(--emw--font-size-x-small, 12px);
+      font-style: normal;
+      font-weight: 500;
+      line-height: normal;
+      text-transform: uppercase;
+      border-radius: 4px;
+      background: var(--emw--color-primary, #7EC51E);
+    }
+    .RedirectionTitle {
+      color: var(--emw--color-black, #111);
+      font-size: var(--emw--font-size-x-small, 12px);
+      font-style: normal;
+      text-transform: none;
+      font-weight: var(--emw--font-weight-bold, 600);
+    }
+    .RedirectionMessage {
+      color: var(--emw--color-gray-300, #666);
+      font-size: var(--emw--font-size-x-small, 12px);
+      font-style: normal;
+      text-transform: none;
+    }
+  }
+  cashier-iframe-redirect {
+    height: inherit;
+    width: inherit;
+  }
+  .IframeRedirect {
+    display: flex;
+    position: absolute;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    background-color: var(--emw--color-gray-transparency-20, rgba(0, 0, 0, .2));
+  }
+  .FieldWrapper, label{
+    display: flex;
+    flex-direction: column ;
+  }
+  .FieldWrapper {
+    background-color: var(--emw--color-gray-transparency-100, rgba(255, 255, 255, 1));
+    border-radius: 6px;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
+    padding: 0 15px 15px;
+    margin-bottom: 10px;
+    &.Hidden {
+      height: 0;
+      visibility: hidden;
+      margin: 0;
+      padding: 0;
+    }
+  }
+  .AmountLimits {
+    color: var(--emw--color-gray-300, #666);
+    font-size: var(--emw--font-size-x-small, 12px);
+    margin: 5px 0 0 2px;
+    line-height: var(--emw--font-size-x-small, 12px);
+  }
+  input, .Selected {
+    border: 1px solid var(--emw--color-gray-100, #E8E9EB);
+    border-radius: var(--emw--border-radius-medium, 4px);
+    height: 40px;
+    line-height: var(--emw--size-small, 14px);
+    color: var(--emw--color-black, #111);
+    padding: 0 15px;
+    &:focus {
+      outline: none;
+    }
+  }
+
+  label {
+    color: var(--emw--color-black, #111);
+    font-size: var(--emw--size-small, 14px);
+    margin-top: 7px;
+    line-height: 27px;
+    span.Required:before {
+      content: '*';
+      display: inline-block;
+      margin-right: 2px;
+    }
+  }
+  .Description {
+    color: var(--emw--color-gray-300, #666);
+    font-size: var(--emw--font-size-x-small, 12px);
+    margin: 0 0 5px 2px;
+    line-height:  var(--emw--font-size-x-small, 12px);
+  }
+  .PrimaryButton {
+    color: var(--emw--color-white, #FFF);
+    text-align: center;
+    font-size: var(--emw--font-size-small, 14px);
+    font-style: normal;
+    font-weight: 400;
+    height: 46px;
+    border-radius: 50px;
+    line-height: normal;
+    border: none;
+    background: var(--emw--color-primary, #7EC51E);
+    width: 100%;
+    margin: 12px 0;
+    cursor: pointer;
+    text-transform: uppercase;
+    .ButtonSpinner {
+      animation: loading-spinner 1s linear infinite
+    }
+  }
+  .CustomSelect {
+    width: 100%;
+    position: relative;
+  }
+  .Selected {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    &:after {
+      position: absolute;
+      content: "";
+      top: 19px;
+      right: 10px;
+      width: 0;
+      height: 0;
+      border: 6px solid transparent;
+      border-color: rgb(168 169 170) transparent transparent transparent;
+    }
+  }
+  .OptionList {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 99;
+    background-color: white;
+    border: 1px solid var(--emw--color-gray-100, #E8E9EB);
+    border-radius: var(--emw--border-radius-medium, 4px);
+    margin-top: 5px;
+    div {
+      padding: 8px 16px;
+      cursor: pointer;
+      user-select: none;
+      &:hover {
+         background-color: var(--emw--color-background-secondary, #F9F9F9)
+      }
+    }
+    &.Opened {
+      display: block;
+    }
+  }
+</style>

package/src/CashierMethodDetails.types.ts

@@ -0,0 +1,91 @@
+export interface PaymentMethod {
+    Name: string;
+    PaymentSolutionName: string;
+    Label: string;
+    Description: string;
+    IsAmountConfigurable: boolean;
+    HideAmountField: boolean;
+    IsIntegerAmount: boolean;
+    IsPrefirmSupported: boolean;
+    IsFake: boolean;
+    RedirectLink: string;
+    AmountMultiplier: number;
+    RedirectionMode: Number;
+    DisplayCurrency: PaymentMethodCurrencyConfig;
+    Currencies: Array<PaymentMethodCurrencyConfig>;
+    Fields: Array<PaymentMethodDetails>;
+    Account: any;
+    Logos: any;
+    PredefinedAmounts: number[];
+    PaymentMethodsAmounts: any;
+    InfoLink?: string;
+    ShortDescription?: string;
+    logoUrls: any;
+    DisableContinueButton: boolean;
+    Settings: any;
+    Tags: string[];
+    CardToken: string;
+    LoaderDisplayTime: number
+}
+
+export interface PaymentMethodCurrencyConfig {
+    Name: string;
+    Label: string;
+    Description: string;
+    Amounts: Array<number>;
+    MinAmountLimit: number;
+    MaxAmountLimit: number;
+}
+export interface PaymentMethodDetails {
+    Name: string;
+    Label: string;
+    Description: string;
+    Type: string;
+    DefaultValue: any;
+    Format: string;
+    Placeholder: string;
+    DisplayPlaceholder?: string;
+    IsReadonly: boolean;
+    IsRequired: boolean;
+    IsPrimaryField: boolean;
+    DemandUserInput: boolean;
+    AutoTrim: boolean;
+    MaxValue: string;
+    MinValue: string;
+    AutoUppercase: boolean;
+    CorrelationFieldName: string;
+    CorrelationFieldValue: string[];
+    NotEqualToFieldName: string;
+    Values: any[];
+    Selected: Object;
+    UseCopyButton: boolean;
+    InputMask: string[];
+}
+
+export const FIELD_TYPES = {
+    0: 'Unknown',
+    1: 'Text',
+    2: 'Boolean',
+    3: 'Number',
+    4: 'Money',
+    5: 'DateTime',
+    6: 'Lookup',
+    7: 'IpAddress',
+    8: 'Date',
+    9: 'Time',
+    10: 'LookupCollection',
+    11: 'Hidden',
+    12: 'Label',
+    13: 'Password',
+    14: 'Link',
+    15: 'Image',
+    19: 'Html',
+    20: 'QRCode'
+};
+export const VISIBLE_FIELD_TYPES: string[] =
+    'Text,Number,Money,Boolean,Lookup,Date,Time,DateTime,Password,Label,Link,QRCode'.split(',');
+
+export enum RedirectionModeStringEnum {
+    Default = 'Default',
+    RedirectWithRetry = 'Redirect'
+}