@tonder.io/ionic-lite-sdk 0.0.34-beta.2 → 0.0.35-beta.0

package/src/classes/liteCheckout.ts

@@ -1,17 +1,39 @@
-import {injectMercadoPagoSecurity} from "../helpers/mercadopago";
+import {fetchBusiness} from "../data/businessApi";
 
 declare const MP_DEVICE_SESSION_ID: string | undefined;
 
-import Skyflow from "skyflow-js";
-import CollectContainer from "skyflow-js/types/core/external/collect/collect-container";
-import CollectElement from "skyflow-js/types/core/external/collect/collect-element";
-import { APM, Business, TonderAPM } from "../types/commons";
-import { CreateOrderRequest, CreatePaymentRequest, RegisterCustomerCardRequest, StartCheckoutRequest, TokensRequest, StartCheckoutFullRequest, StartCheckoutIdRequest } from "../types/requests";
-import { GetBusinessResponse, CustomerRegisterResponse, CreateOrderResponse, CreatePaymentResponse, StartCheckoutResponse, GetVaultTokenResponse, IErrorResponse, GetCustomerCardsResponse, RegisterCustomerCardResponse } from "../types/responses";
+import {APM, Business, IInlineCheckoutBaseOptions, TonderAPM} from "../types/commons";
+import { CreateOrderRequest, CreatePaymentRequest, RegisterCustomerCardRequest, StartCheckoutRequest, StartCheckoutFullRequest, StartCheckoutIdRequest } from "../types/requests";
+import {
+  CustomerRegisterResponse,
+  CreateOrderResponse,
+  CreatePaymentResponse,
+  StartCheckoutResponse,
+  IErrorResponse,
+  RegisterCustomerCardResponse,
+  GetBusinessResponse
+} from "../types/responses";
 import { ErrorResponse } from "./errorResponse";
-import { buildErrorResponse, buildErrorResponseFromCatch, getBrowserInfo, getPaymentMethodDetails, getBusinessId } from "../helpers/utils";
-import { ThreeDSHandler } from "./3dsHandler";
+import {
+  buildErrorResponse,
+  buildErrorResponseFromCatch,
+  getBrowserInfo,
+  getBusinessId,
+  formatPublicErrorResponse, getCardType
+} from "../helpers/utils";
 import { getCustomerAPMs } from "../data/api";
+import {BaseInlineCheckout} from "./BaseInlineCheckout";
+import {fetchCustomerCards, removeCustomerCard, saveCustomerCard} from "../data/cardApi";
+import {MESSAGES} from "../shared/constants/messages";
+import {ICustomerCardsResponse, ISaveCardRequest, ISaveCardResponse} from "../types/card";
+import {getSkyflowTokens} from "../helpers/skyflow";
+import {fetchCustomerAPMs} from "../data/paymentMethodApi";
+import {IPaymentMethod} from "../types/paymentMethod";
+import {ICardFields} from "../types/checkout";
+import {ILiteInlineCheckout} from "../types/liteInlineCheckout";
+import {startCheckoutRouter} from "../data/checkoutApi";
+import {getOpenpayDeviceSessionID} from "../data/openPayApi";
+import {getPaymentMethodDetails} from "../shared/catalog/paymentMethodsCatalog";
 
 declare global {
   interface Window {
@@ -19,151 +41,193 @@ declare global {
   }
 }
 
-export type LiteCheckoutConstructor = {
-  signal: AbortSignal;
-  baseUrlTonder: string;
-  apiKeyTonder: string;
-};
-
-export class LiteCheckout implements LiteCheckoutConstructor {
-  signal: AbortSignal;
-  baseUrlTonder: string;
-  apiKeyTonder: string;
-  process3ds: ThreeDSHandler;
+export interface LiteCheckoutConstructor  extends IInlineCheckoutBaseOptions {}
+
+export class LiteCheckout extends BaseInlineCheckout implements ILiteInlineCheckout  {
   activeAPMs: APM[] = []
-  merchantData?: Business | ErrorResponse;
+  #customerData?: Record<string, any>;
 
   constructor({
-    signal,
-    baseUrlTonder,
-    apiKeyTonder,
+      apiKey,
+      mode,
+      returnUrl,
+      callBack,
   }: LiteCheckoutConstructor) {
-    this.baseUrlTonder = baseUrlTonder;
-    this.signal = signal;
-    this.apiKeyTonder = apiKeyTonder;
-    this.process3ds = new ThreeDSHandler({ 
-      apiKey: this.apiKeyTonder, 
-      baseUrl: this.baseUrlTonder,
-    })
-    this.#init()
+    super({mode, apiKey, returnUrl, callBack});
   }
 
-  async #init(){
-    this.getActiveAPMs()
-    const { mercado_pago } = await this.#fetchMerchantData() as Business
-    if (!!mercado_pago && mercado_pago.active){
-      injectMercadoPagoSecurity()
-    }
+  async injectCheckout() {
+    await this._initializeCheckout();
   }
 
-  async getOpenpayDeviceSessionID(
-    merchant_id: string,
-    public_key: string,
-    is_sandbox: boolean
-  ): Promise<string | ErrorResponse> {
+  async getCustomerCards(): Promise<ICustomerCardsResponse> {
     try {
-      let openpay = await window.OpenPay;
-      openpay.setId(merchant_id);
-      openpay.setApiKey(public_key);
-      openpay.setSandboxMode(is_sandbox);
-      return await openpay.deviceData.setup({
-        signal: this.signal,
-      }) as string;
-    } catch (e) {
-      throw buildErrorResponseFromCatch(e);
+      await this._fetchMerchantData()
+      const { auth_token } = await this._getCustomer();
+      const response = await fetchCustomerCards(
+          this.baseUrl,
+          auth_token,
+          this.merchantData!.business.pk,
+      );
+
+      return {
+        ...response,
+        cards: response.cards.map((ic) => ({
+          ...ic,
+          icon: getCardType(ic.fields.card_scheme),
+        })),
+      };
+    } catch (error) {
+      throw formatPublicErrorResponse(
+          {
+            message: MESSAGES.getCardsError,
+          },
+          error,
+      );
     }
   }
-  async #fetchMerchantData() {
+
+  async saveCustomerCard(card: ISaveCardRequest): Promise<ISaveCardResponse> {
     try {
-      if (!this.merchantData){
-        this.merchantData = await this.getBusiness();
-      }
-      return this.merchantData
-    }catch(e){
-      return this.merchantData
+      await this._fetchMerchantData()
+      const { auth_token } = await this._getCustomer();
+      const { vault_id, vault_url, business } = this.merchantData!;
+
+      const skyflowTokens = await getSkyflowTokens({
+        vault_id: vault_id,
+        vault_url: vault_url,
+        data: card,
+        baseUrl: this.baseUrl,
+        apiKey: this.apiKeyTonder,
+      });
+
+      return await saveCustomerCard(
+          this.baseUrl,
+          auth_token,
+          business?.pk,
+          skyflowTokens,
+      );
+    } catch (error) {
+      throw formatPublicErrorResponse(
+          {
+            message: MESSAGES.saveCardError,
+          },
+          error,
+      );
     }
   }
 
-  async getBusiness(): Promise<GetBusinessResponse | ErrorResponse> {
+
+  async removeCustomerCard(skyflowId: string): Promise<string> {
     try {
-      const getBusiness = await fetch(
-        `${this.baseUrlTonder}/api/v1/payments/business/${this.apiKeyTonder}`,
-        {
-          headers: {
-            Authorization: `Token ${this.apiKeyTonder}`,
+      await this._fetchMerchantData()
+      const { auth_token } = await this._getCustomer();
+      const { business } = this.merchantData!;
+
+      return await removeCustomerCard(
+          this.baseUrl,
+          auth_token,
+          skyflowId,
+          business?.pk,
+      );
+    } catch (error) {
+      throw formatPublicErrorResponse(
+          {
+            message: MESSAGES.removeCardError,
           },
-          signal: this.signal,
-        }
+          error,
       );
-
-      if (getBusiness.ok) return (await getBusiness.json()) as Business;
-
-      throw await buildErrorResponse(getBusiness);
-    } catch (e) {
-      throw buildErrorResponseFromCatch(e);
     }
   }
 
-  async verify3dsTransaction () {
-    const result3ds = await this.process3ds.verifyTransactionStatus()
-    const resultCheckout = await this.resumeCheckout(result3ds)
-    this.process3ds.setPayload(resultCheckout)
-    return this.handle3dsRedirect(resultCheckout)
-  }
 
-  async resumeCheckout(response: any) {
-    // Stop the routing process if the transaction is either hard declined or successful
-    if (response?.decline?.error_type === "Hard") {
-      return response
+  async getCustomerPaymentMethods(): Promise<IPaymentMethod[]> {
+    try {
+      const response = await fetchCustomerAPMs(this.baseUrl, this.apiKeyTonder);
+
+      const apms_results =
+          response && "results" in response && response["results"].length > 0
+              ? response["results"]
+              : [];
+
+      return apms_results
+          .filter((apmItem) => apmItem.category.toLowerCase() !== "cards")
+          .map((apmItem) => {
+            const apm = {
+              id: apmItem.pk,
+              payment_method: apmItem.payment_method,
+              priority: apmItem.priority,
+              category: apmItem.category,
+              ...getPaymentMethodDetails(apmItem.payment_method),
+            };
+            return apm;
+          })
+          .sort((a, b) => a.priority - b.priority);
+    } catch (error) {
+      throw formatPublicErrorResponse(
+          {
+            message: MESSAGES.getPaymentMethodsError,
+          },
+          error,
+      );
     }
+  }
 
-    if (["Success", "Authorized"].includes(response?.transaction_status)) {
-      return response;
+  async getBusiness(): Promise<GetBusinessResponse> {
+    try {
+      return await fetchBusiness(this.baseUrl, this.apiKeyTonder, this.abortController.signal)
+    } catch (e) {
+      throw formatPublicErrorResponse({
+        message: MESSAGES.getBusinessError
+      },e);
     }
+  }
 
-    if (response) {
-      const routerItems = {
-        checkout_id: response?.checkout?.id,
-      };
-      try {
-        const routerResponse = await this.handleCheckoutRouter(
-            routerItems
-        );
-        return routerResponse
-      }catch (error){
-        // throw error
-      }
-      return response
-    }
+  _setCartTotal(total: string) {
+    this.cartTotal = total;
   }
 
-  async handle3dsRedirect(response: ErrorResponse | StartCheckoutResponse | false | undefined) {
-    const iframe = response && 'next_action' in response ? response?.next_action?.iframe_resources?.iframe:null
-    if (iframe) {
-      this.process3ds.loadIframe()!.then(() => {
-        //TODO: Check if this will be necessary on the frontend side
-        // after some the tests in production, since the 3DS process
-        // doesn't works properly on the sandbox environment
-        // setTimeout(() => {
-        //   process3ds.verifyTransactionStatus();
-        // }, 10000);
-        this.process3ds.verifyTransactionStatus();
-      }).catch((error: any) => {
-        console.log('Error loading iframe:', error)
-      })
-    } else {
-      const redirectUrl = this.process3ds.getRedirectUrl()
-      if (redirectUrl) {
-        this.process3ds.redirectToChallenge()
+  async _checkout({ card, payment_method, isSandbox }: {card?: ICardFields | string; payment_method?: string; isSandbox?: boolean;}) {
+    await this._fetchMerchantData()
+    const customer = await this._getCustomer(
+        this.abortController.signal,
+    );
+    const { vault_id, vault_url } = this.merchantData!;
+    let skyflowTokens;
+    if (!payment_method || payment_method !== "" || payment_method === null) {
+      if (typeof card === "string") {
+        skyflowTokens = {
+          skyflow_id: card,
+        };
       } else {
-        return response;
+        skyflowTokens = await getSkyflowTokens({
+          vault_id: vault_id,
+          vault_url: vault_url,
+          data: {...card, card_number: card!.card_number.replace(/\s+/g, '')},
+          baseUrl: this.baseUrl,
+          apiKey: this.apiKeyTonder,
+        });
       }
     }
+
+    return await this._handleCheckout({
+      card: skyflowTokens,
+      payment_method,
+      customer,
+      isSandbox
+    });
   }
-  
+
+
+  // TODO: DEPRECATED
+  /**
+   * @deprecated This method is deprecated and will be removed in a future release.
+   * It is no longer necessary to use this method as customer registration is now automatically handled
+   * during the payment process or when using card management methods.
+   */
   async customerRegister(email: string): Promise<CustomerRegisterResponse | ErrorResponse> {
     try {
-      const url = `${this.baseUrlTonder}/api/v1/customer/`;
+      const url = `${this.baseUrl}/api/v1/customer/`;
       const data = { email: email };
       const response = await fetch(url, {
         method: "POST",
@@ -171,7 +235,7 @@ export class LiteCheckout implements LiteCheckoutConstructor {
           "Content-Type": "application/json",
           Authorization: `Token ${this.apiKeyTonder}`,
         },
-        signal: this.signal,
+        signal: this.abortController.signal,
         body: JSON.stringify(data),
       });
 
@@ -182,9 +246,16 @@ export class LiteCheckout implements LiteCheckoutConstructor {
     }
   }
 
+
+  // TODO: DEPRECATED
+  /**
+   * @deprecated This method is deprecated and will be removed in a future release.
+   * It is no longer necessary to use this method as order creation is now automatically
+   * handled when making a payment through the `payment` function.
+   */
   async createOrder(orderItems: CreateOrderRequest): Promise<CreateOrderResponse | ErrorResponse> {
     try {
-      const url = `${this.baseUrlTonder}/api/v1/orders/`;
+      const url = `${this.baseUrl}/api/v1/orders/`;
       const data = orderItems;
       const response = await fetch(url, {
         method: "POST",
@@ -201,9 +272,15 @@ export class LiteCheckout implements LiteCheckoutConstructor {
     }
   }
 
+  // TODO: DEPRECATED
+  /**
+   * @deprecated This method is deprecated and will be removed in a future release.
+   * It is no longer necessary to use this method as payment creation is now automatically
+   * handled when making a payment through the `payment` function.
+   */
   async createPayment(paymentItems: CreatePaymentRequest): Promise<CreatePaymentResponse | ErrorResponse> {
     try {
-      const url = `${this.baseUrlTonder}/api/v1/business/${paymentItems.business_pk}/payments/`;
+      const url = `${this.baseUrl}/api/v1/business/${paymentItems.business_pk}/payments/`;
       const data = paymentItems;
       const response = await fetch(url, {
         method: "POST",
@@ -219,32 +296,30 @@ export class LiteCheckout implements LiteCheckoutConstructor {
       throw buildErrorResponseFromCatch(e);
     }
   }
-  async handleCheckoutRouter(routerData: StartCheckoutRequest | StartCheckoutIdRequest){
-    try {
-      const url = `${this.baseUrlTonder}/api/v1/checkout-router/`;
-      const data = routerData;
-      const response = await fetch(url, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Token ${this.apiKeyTonder}`,
-        },
-        body: JSON.stringify({...data, ...(typeof MP_DEVICE_SESSION_ID !== "undefined" ? {mp_device_session_id: MP_DEVICE_SESSION_ID}:{})}),
-      });
-      if (response.ok) return await response.json() as StartCheckoutResponse;
-      throw await buildErrorResponse(response);
-    } catch (e) {
-      throw buildErrorResponseFromCatch(e);
-    }
-  }
 
+  // TODO: DEPRECATED
+  /**
+   * @deprecated This method is deprecated and will be removed in a future release.
+   * Use the {@link payment} method
+   */
   async startCheckoutRouter(routerData: StartCheckoutRequest | StartCheckoutIdRequest): Promise<StartCheckoutResponse | ErrorResponse | undefined> {
-    const checkoutResult = await this.handleCheckoutRouter(routerData);
+    const checkoutResult = await startCheckoutRouter(this.baseUrl, this.apiKeyTonder, routerData);
     const payload = await this.init3DSRedirect(checkoutResult)
     if(payload)
       return checkoutResult;
   }
 
+  // TODO: DEPRECATED
+  async init3DSRedirect(checkoutResult: ErrorResponse | StartCheckoutResponse){
+    this.process3ds.setPayload(checkoutResult)
+    return await this._handle3dsRedirect(checkoutResult)
+  }
+
+  // TODO: DEPRECATED
+  /**
+   * @deprecated This method is deprecated and will be removed in a future release.
+   * Use the {@link payment} method
+   */
   async startCheckoutRouterFull(routerFullData: StartCheckoutFullRequest): Promise<StartCheckoutResponse | ErrorResponse | undefined> {
     
     try {
@@ -261,7 +336,7 @@ export class LiteCheckout implements LiteCheckoutConstructor {
         payment_method
       } = routerFullData;
 
-      const merchantResult = await this.getBusiness();
+      const merchantResult = await this._fetchMerchantData();
 
       const customerResult : CustomerRegisterResponse | ErrorResponse = await this.customerRegister(customer.email);
 
@@ -303,7 +378,7 @@ export class LiteCheckout implements LiteCheckoutConstructor {
           const { openpay_keys, business } = merchantResult
 
           if (openpay_keys.merchant_id && openpay_keys.public_key) {
-            deviceSessionIdTonder = await this.getOpenpayDeviceSessionID(
+            deviceSessionIdTonder = await getOpenpayDeviceSessionID(
               openpay_keys.merchant_id,
               openpay_keys.public_key,
               isSandbox
@@ -339,7 +414,7 @@ export class LiteCheckout implements LiteCheckoutConstructor {
             ...(typeof MP_DEVICE_SESSION_ID !== "undefined" ? {mp_device_session_id: MP_DEVICE_SESSION_ID}:{})
           };
 
-          const checkoutResult = await this.handleCheckoutRouter(routerItems);
+          const checkoutResult = await startCheckoutRouter(this.baseUrl, this.apiKeyTonder, routerItems);
           const payload = await this.init3DSRedirect(checkoutResult)
           if(payload)
             return checkoutResult;
@@ -371,100 +446,21 @@ export class LiteCheckout implements LiteCheckoutConstructor {
     }
   }
 
-  async init3DSRedirect(checkoutResult: ErrorResponse | StartCheckoutResponse){
-    this.process3ds.setPayload(checkoutResult)
-    return await this.handle3dsRedirect(checkoutResult)
-  }
-
-  async getSkyflowTokens({
-    vault_id,
-    vault_url,
-    data,
-  }: TokensRequest): Promise<any | ErrorResponse> {
-    const skyflow = Skyflow.init({
-      vaultID: vault_id,
-      vaultURL: vault_url,
-      getBearerToken: async () => await this.getVaultToken(),
-      options: {
-        logLevel: Skyflow.LogLevel.ERROR,
-        env: Skyflow.Env.DEV,
-      },
-    });
-
-    const collectContainer: CollectContainer = skyflow.container(
-      Skyflow.ContainerType.COLLECT
-    ) as CollectContainer;
-
-    const fieldPromises = await this.getFieldsPromise(data, collectContainer);
-
-    const result = await Promise.all(fieldPromises);
-
-    const mountFail = result.some((item: boolean) => !item);
-
-    if (mountFail) {
-      throw buildErrorResponseFromCatch(Error("Ocurrió un error al montar los campos de la tarjeta"));
-    } else {
-      try {
-        const collectResponseSkyflowTonder = await collectContainer.collect() as any;
-        if (collectResponseSkyflowTonder) return collectResponseSkyflowTonder["records"][0]["fields"];
-        throw buildErrorResponseFromCatch(Error("Por favor, verifica todos los campos de tu tarjeta"))
-      } catch (error) {
-        throw buildErrorResponseFromCatch(error);
-      }
-    }
-  }
-
-  async getVaultToken(): Promise<string> {
-    try {
-      const response = await fetch(`${this.baseUrlTonder}/api/v1/vault-token/`, {
-        method: "GET",
-        headers: {
-          Authorization: `Token ${this.apiKeyTonder}`,
-        },
-        signal: this.signal,
-      });
-      if (response.ok) return (await response.json() as GetVaultTokenResponse)?.token;
-      throw new Error(`HTTPCODE: ${response.status}`)
-    } catch (e) {
-      throw new Error(`Failed to retrieve bearer token; ${typeof e == "string" ? e : (e as Error).message}`)
-    }
-  }
-
-  async getFieldsPromise(data: any, collectContainer: CollectContainer): Promise<Promise<boolean>[]> {
-    const fields = await this.getFields(data, collectContainer);
-    if (!fields) return [];
-
-    return fields.map((field: { element: CollectElement, key: string }) => {
-      return new Promise((resolve) => {
-        const div = document.createElement("div");
-        div.hidden = true;
-        div.id = `id-${field.key}`;
-        document.querySelector(`body`)?.appendChild(div);
-        setTimeout(() => {
-          field.element.mount(`#id-${field.key}`);
-          setInterval(() => {
-            if (field.element.isMounted()) {
-              const value = data[field.key];
-              field.element.update({ value: value });
-              return resolve(field.element.isMounted());
-            }
-          }, 120);
-        }, 120);
-      });
-    })
-  }
-
+  // TODO: DEPRECATED
+  /**
+   * @deprecated This method is deprecated and will be removed in a future release.
+   * Use the {@link saveCustomerCard} method
+   */
   async registerCustomerCard(customerToken: string, data: RegisterCustomerCardRequest): Promise<RegisterCustomerCardResponse | ErrorResponse> {
     try {
-      await this.#fetchMerchantData()
+      await this._fetchMerchantData()
 
-      const response = await fetch(`${this.baseUrlTonder}/api/v1/business/${getBusinessId(this.merchantData)}/cards/`, {
+      const response = await fetch(`${this.baseUrl}/api/v1/business/${getBusinessId(this.merchantData)}/cards/`, {
         method: 'POST',
         headers: {
           'Authorization': `Token ${customerToken}`,
           'Content-Type': 'application/json'
         },
-        signal: this.signal,
         body: JSON.stringify({...data})
       });
 
@@ -475,36 +471,21 @@ export class LiteCheckout implements LiteCheckoutConstructor {
     }
   }
 
-  async getCustomerCards(customerToken: string): Promise<GetCustomerCardsResponse | ErrorResponse> {
-    try {
-      await this.#fetchMerchantData()
-
-      const response = await fetch(`${this.baseUrlTonder}/api/v1/business/${getBusinessId(this.merchantData)}/cards`, {
-        method: 'GET',
-        headers: {
-          'Authorization': `Token ${customerToken}`,
-          'Content-Type': 'application/json'
-        },
-        signal: this.signal,
-      });
-
-      if (response.ok) return await response.json() as GetCustomerCardsResponse;
-      throw await buildErrorResponse(response);
-    } catch (error) {
-      throw buildErrorResponseFromCatch(error);
-    }
-  }
-
+  // TODO: DEPRECATED
+  /**
+   * @deprecated This method is deprecated and will be removed in a future release.
+   * Use the {@link removeCustomerCard} method
+   */
   async deleteCustomerCard(customerToken: string, skyflowId: string = ""): Promise<Boolean | ErrorResponse> {
     try {
-      await this.#fetchMerchantData()
-      const response = await fetch(`${this.baseUrlTonder}/api/v1/business/${getBusinessId(this.merchantData)}/cards/${skyflowId}`, {
+      await this._fetchMerchantData()
+      const response = await fetch(`${this.baseUrl}/api/v1/business/${getBusinessId(this.merchantData)}/cards/${skyflowId}`, {
         method: 'DELETE',
         headers: {
           'Authorization': `Token ${customerToken}`,
           'Content-Type': 'application/json'
         },
-        signal: this.signal,
+        signal: this.abortController.signal,
       });
 
       if (response.ok) return true;
@@ -514,36 +495,28 @@ export class LiteCheckout implements LiteCheckoutConstructor {
     }
   }
 
-  private async getFields(data: any, collectContainer: CollectContainer): Promise<{ element: CollectElement, key: string }[]> {
-    return await Promise.all(
-      Object.keys(data).map(async (key) => {
-        const cardHolderNameElement = await collectContainer.create({
-          table: "cards",
-          column: key,
-          type: Skyflow.ElementType.INPUT_FIELD,
-        });
-        return { element: cardHolderNameElement, key: key };
-      })
-    )
-  }
-
+  // TODO: DEPRECATED
+  /**
+   * @deprecated This method is deprecated and will be removed in a future release.
+   * Use the {@link getCustomerPaymentMethods} method
+   */
   async getActiveAPMs(): Promise<APM[]> {
     try {
-      const apms_response = await getCustomerAPMs(this.baseUrlTonder, this.apiKeyTonder);
+      const apms_response = await getCustomerAPMs(this.baseUrl, this.apiKeyTonder);
       const apms_results = apms_response && apms_response['results'] && apms_response['results'].length > 0 ? apms_response['results'] : []
       this.activeAPMs = apms_results
-        .filter((apmItem: TonderAPM) =>
-          apmItem.category.toLowerCase() !== 'cards')
-        .map((apmItem: TonderAPM) => {
-          const apm: APM = {
-            id: apmItem.pk,
-            payment_method: apmItem.payment_method,
-            priority: apmItem.priority,
-            category: apmItem.category,
-            ...getPaymentMethodDetails(apmItem.payment_method,)
-          }
-          return apm;
-        }).sort((a: APM, b: APM) => a.priority - b.priority);
+          .filter((apmItem: TonderAPM) =>
+              apmItem.category.toLowerCase() !== 'cards')
+          .map((apmItem: TonderAPM) => {
+            const apm: APM = {
+              id: apmItem.pk,
+              payment_method: apmItem.payment_method,
+              priority: apmItem.priority,
+              category: apmItem.category,
+              ...getPaymentMethodDetails(apmItem.payment_method,)
+            }
+            return apm;
+          }).sort((a: APM, b: APM) => a.priority - b.priority);
 
       return this.activeAPMs
     } catch (e) {
@@ -551,4 +524,5 @@ export class LiteCheckout implements LiteCheckoutConstructor {
       return [];
     }
   }
+
 }