@sumup/react-native-checkout 0.0.0-alpha.1

package/src/hooks/base/useCvcCode/index.ts

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import type { InputModel } from '../../../types/PaymentSheet';
+import consts from '../../../consts/validation';
+import { useStrings } from '../../../contexts/LanguageContext';
+import { isCvcValid } from '../../../helpers/validation/paymentFields';
+
+export const useCvcCode = (): InputModel => {
+  const { strings } = useStrings();
+
+  const [value, setValue] = useState('');
+  const [errorText, setErrorText] = useState('');
+
+  const isValid = isCvcValid(value);
+
+  const onFocus = () => {
+    setErrorText('');
+  };
+
+  const onBlur = () => {
+    if (value.length === consts.EMPTY_FIELD_LENGTH) {
+      return;
+    }
+
+    showErrorIfNeeded();
+  };
+
+  const reset = () => {
+    setValue('');
+    setErrorText('');
+  };
+
+  const showErrorIfNeeded = () => {
+    if (value.length === consts.EMPTY_FIELD_LENGTH) {
+      setErrorText(strings.choosePaymentMethod.cardInformation.requiredField);
+    } else if (!isValid) {
+      setErrorText(strings.choosePaymentMethod.cardInformation.invalidCvv);
+    }
+  };
+
+  return {
+    value,
+    errorText,
+    isValid,
+    setValue,
+    setErrorText,
+    onFocus,
+    onBlur,
+    reset,
+    showErrorIfNeeded,
+  };
+};

package/src/hooks/base/useExpirationDate/index.ts

@@ -0,0 +1,71 @@
+import { useRef, useState } from 'react';
+import { useStrings } from '../../../contexts/LanguageContext';
+import type { ExpirationDateInputModel } from '../../../types/PaymentSheet';
+import consts from '../../../consts/validation';
+import {
+  isValidExpirationDate,
+  normalizeExpirationInput,
+} from '../../../helpers/validation/paymentFields';
+
+export const useExpirationDate = (): ExpirationDateInputModel => {
+  const { strings } = useStrings();
+
+  const [value, setValue] = useState('');
+  const [errorText, setErrorText] = useState('');
+  const [isValid, setIsValid] = useState(false);
+
+  const monthRef = useRef(0);
+  const yearRef = useRef(0);
+
+  const onChangeText = (text: string) => {
+    const normalized = normalizeExpirationInput(text);
+    setValue(normalized.value);
+
+    monthRef.current = normalized.month;
+    yearRef.current = normalized.year;
+
+    setIsValid(isValidExpirationDate(normalized.year, normalized.month));
+  };
+
+  const onFocus = () => {
+    setErrorText('');
+  };
+
+  const onBlur = () => {
+    if (value.length === consts.EMPTY_FIELD_LENGTH) {
+      return;
+    }
+
+    showErrorIfNeeded();
+  };
+
+  const showErrorIfNeeded = () => {
+    if (value.length === consts.EMPTY_FIELD_LENGTH) {
+      setErrorText(strings.choosePaymentMethod.cardInformation.requiredField);
+    } else if (!isValid) {
+      setErrorText(strings.choosePaymentMethod.cardInformation.invalidDate);
+    }
+  };
+
+  const reset = () => {
+    setValue('');
+    setErrorText('');
+    setIsValid(false);
+    monthRef.current = 0;
+    yearRef.current = 0;
+  };
+
+  return {
+    value,
+    errorText,
+    isValid,
+    month: monthRef.current,
+    year: yearRef.current,
+    setValue: onChangeText,
+    setErrorText,
+    onFocus,
+    onBlur,
+    reset,
+    showErrorIfNeeded,
+  };
+};

package/src/hooks/base/useName/index.ts

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import type { InputModel } from '../../../types/PaymentSheet';
+import consts from '../../../consts/validation';
+import { useStrings } from '../../../contexts/LanguageContext';
+import { isNameValid } from '../../../helpers/validation/paymentFields';
+
+export const useName = (defaultName?: string | null): InputModel => {
+  const { strings } = useStrings();
+
+  const [value, setValue] = useState(defaultName || '');
+  const [errorText, setErrorText] = useState('');
+
+  const isValid = isNameValid(value);
+
+  const onFocus = () => {
+    setErrorText('');
+  };
+
+  const onBlur = () => {
+    if (value.length === consts.EMPTY_FIELD_LENGTH) {
+      return;
+    }
+
+    showErrorIfNeeded();
+  };
+
+  const reset = () => {
+    setValue('');
+    setErrorText('');
+  };
+
+  const showErrorIfNeeded = () => {
+    if (value.length === consts.EMPTY_FIELD_LENGTH) {
+      setErrorText(strings.choosePaymentMethod.cardInformation.requiredField);
+    } else if (!isValid) {
+      setErrorText(strings.choosePaymentMethod.cardInformation.shortLenght);
+    }
+  };
+
+  return {
+    value,
+    errorText,
+    isValid,
+    setValue,
+    setErrorText,
+    onFocus,
+    onBlur,
+    reset,
+    showErrorIfNeeded,
+  };
+};

package/src/hooks/useSafeArea.ts

@@ -0,0 +1,12 @@
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Platform, StatusBar } from 'react-native';
+
+export const useSafeArea = () => {
+  const insets = useSafeAreaInsets();
+
+  const top =
+    Platform.OS === 'android'
+      ? insets.top + (StatusBar.currentHeight || 0)
+      : insets.top;
+  return { ...insets, top };
+};

package/src/hooks/useSumUp.ts

@@ -0,0 +1,100 @@
+import { useCallback } from 'react';
+import { useStrings } from '../contexts/LanguageContext';
+import { usePaymentStore, useSaveCardStore } from '../contexts/StoreContext';
+import type * as PaymentSheet from '../types/PaymentSheet';
+import logger from '../services/Logger';
+import { CommonSheet, SaveCardSheet } from '../types';
+import { PresentSheetResult } from '../types/CommonSheet';
+import {
+  normalizePresentSheetResult,
+  normalizePublicSdkError,
+} from '../publicApi/errors';
+
+/**
+ * useSumUp hook
+ */
+export function useSumUp() {
+  const {
+    showPaymentSheet,
+    hidePaymentSheet,
+    configure: configurePayment,
+  } = usePaymentStore();
+  const { configure: configureSaveCard, showSaveCardSheet } =
+    useSaveCardStore();
+  const { initStrings } = useStrings();
+
+  const initPaymentSheet = useCallback(
+    async (
+      params: PaymentSheet.InitPaymentSheetProps
+    ): Promise<PaymentSheet.InitPaymentSheetResult> => {
+      try {
+        initStrings(params.language);
+        return normalizePresentSheetResult(await configurePayment(params));
+      } catch (error) {
+        throw normalizePublicSdkError(error);
+      }
+    },
+    [configurePayment, initStrings]
+  );
+
+  const presentPaymentSheet =
+    useCallback(async (): Promise<PresentSheetResult> => {
+      return new Promise((resolve, reject) => {
+        try {
+          showPaymentSheet((result) =>
+            resolve(normalizePresentSheetResult(result))
+          );
+        } catch (error) {
+          reject(normalizePublicSdkError(error));
+        }
+      });
+    }, [showPaymentSheet]);
+
+  const dismissPaymentSheet = useCallback(async (): Promise<void> => {
+    try {
+      return hidePaymentSheet(false);
+    } catch (error) {
+      throw normalizePublicSdkError(error);
+    }
+  }, [hidePaymentSheet]);
+
+  const initSaveCardSheet = useCallback(
+    async (
+      params: SaveCardSheet.InitSaveCardSheetProps
+    ): Promise<SaveCardSheet.InitSaveCardSheetResult> => {
+      try {
+        initStrings(params.language);
+        return normalizePresentSheetResult(await configureSaveCard(params));
+      } catch (error) {
+        throw normalizePublicSdkError(error);
+      }
+    },
+    [configureSaveCard, initStrings]
+  );
+
+  const presentSaveCardSheet =
+    useCallback(async (): Promise<PresentSheetResult> => {
+      return new Promise((resolve, reject) => {
+        try {
+          showSaveCardSheet((result) =>
+            resolve(normalizePresentSheetResult(result))
+          );
+        } catch (error) {
+          reject(normalizePublicSdkError(error));
+        }
+      });
+    }, [showSaveCardSheet]);
+
+  const configureLogs = (onLog: CommonSheet.OnLogCallback) => {
+    logger.setupCallback(onLog);
+  };
+
+  return {
+    configureLogs,
+    initPaymentSheet,
+    presentPaymentSheet,
+    initSaveCardSheet,
+    presentSaveCardSheet,
+    dismissPaymentSheet,
+  };
+}

package/src/index.tsx

@@ -0,0 +1,16 @@
+// hooks
+export { useSumUp } from './hooks/useSumUp';
+
+// components
+export { SumUpProvider } from './components/SumUpProvider';
+export { PaymentSheet } from './components/PaymentSheet';
+
+// types
+export * from './types';
+
+// public api contracts
+export {
+  PublicSdkError,
+  PUBLIC_SDK_ERROR_CODES,
+  type PublicSdkErrorCode,
+} from './publicApi/errors';

package/src/publicApi/errors.ts

@@ -0,0 +1,155 @@
+import { ERROR_CODES } from '../consts/errors';
+import type { PresentSheetResult, SheetError } from '../types/CommonSheet';
+
+export const PUBLIC_SDK_ERROR_CODES = {
+  api: 'API_ERROR',
+  canceled: 'CANCELED',
+  invalidInput: 'INVALID_INPUT',
+  network: 'NETWORK',
+  threeDSecure: 'THREE_D_SECURE',
+  unknown: 'UNKNOWN',
+} as const;
+
+export type PublicSdkErrorCode =
+  (typeof PUBLIC_SDK_ERROR_CODES)[keyof typeof PUBLIC_SDK_ERROR_CODES];
+
+interface PublicSdkErrorParams {
+  code: PublicSdkErrorCode;
+  message: string;
+  cause?: unknown;
+}
+
+export class PublicSdkError extends Error {
+  readonly code: PublicSdkErrorCode;
+  readonly cause: unknown;
+
+  constructor(params: PublicSdkErrorParams) {
+    super(params.message);
+    this.name = 'PublicSdkError';
+    this.code = params.code;
+    this.cause = params.cause;
+  }
+}
+
+const INVALID_INPUT_PATTERNS = [
+  'required',
+  'invalid',
+  'configured',
+  'should be configured',
+  'wasn`t configured',
+];
+
+const NETWORK_PATTERNS = [
+  'network',
+  'offline',
+  'internet',
+  'timed out',
+  'timeout',
+  'failed to fetch',
+];
+
+const THREE_D_SECURE_PATTERNS = ['3ds', '3d secure', 'three d secure'];
+
+const hasMatchingPattern = (value: string, patterns: string[]) =>
+  patterns.some((pattern) => value.includes(pattern));
+
+const isObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null;
+
+export const inferPublicSdkErrorCode = (
+  params: {
+    errorCode?: string;
+    message?: string;
+    status?: SheetError['status'];
+  } = {}
+): PublicSdkErrorCode => {
+  const errorCode = params.errorCode?.trim();
+  const message = params.message?.toLowerCase().trim() || '';
+
+  if (params.status === 'canceled') {
+    return PUBLIC_SDK_ERROR_CODES.canceled;
+  }
+
+  if (errorCode === ERROR_CODES.invalid) {
+    return PUBLIC_SDK_ERROR_CODES.invalidInput;
+  }
+
+  if (errorCode === ERROR_CODES.unknown) {
+    return PUBLIC_SDK_ERROR_CODES.network;
+  }
+
+  if (errorCode) {
+    return PUBLIC_SDK_ERROR_CODES.api;
+  }
+
+  if (hasMatchingPattern(message, NETWORK_PATTERNS)) {
+    return PUBLIC_SDK_ERROR_CODES.network;
+  }
+
+  if (hasMatchingPattern(message, THREE_D_SECURE_PATTERNS)) {
+    return PUBLIC_SDK_ERROR_CODES.threeDSecure;
+  }
+
+  if (hasMatchingPattern(message, INVALID_INPUT_PATTERNS)) {
+    return PUBLIC_SDK_ERROR_CODES.invalidInput;
+  }
+
+  return PUBLIC_SDK_ERROR_CODES.unknown;
+};
+
+const getErrorMessage = (error: unknown) => {
+  if (error instanceof Error && error.message) {
+    return error.message;
+  }
+
+  if (isObject(error) && typeof error.message === 'string') {
+    return error.message;
+  }
+
+  return 'Unknown SDK error';
+};
+
+export const normalizePublicSdkError = (error: unknown): PublicSdkError => {
+  if (error instanceof PublicSdkError) {
+    return error;
+  }
+
+  const status =
+    isObject(error) && error.status === 'canceled'
+      ? 'canceled'
+      : isObject(error) && error.status === 'failure'
+        ? 'failure'
+        : undefined;
+  const errorCode =
+    isObject(error) && typeof error.errorCode === 'string'
+      ? error.errorCode
+      : undefined;
+  const message = getErrorMessage(error);
+
+  return new PublicSdkError({
+    code: inferPublicSdkErrorCode({ errorCode, message, status }),
+    message,
+    cause: error,
+  });
+};
+
+export const normalizePresentSheetResult = (
+  result: PresentSheetResult
+): PresentSheetResult => {
+  if (!result.error || result.error.status !== 'failure') {
+    return result;
+  }
+
+  return {
+    ...result,
+    error: {
+      ...result.error,
+      errorCode:
+        result.error.errorCode ||
+        inferPublicSdkErrorCode({
+          message: result.error.message,
+          status: result.error.status,
+        }),
+    },
+  };
+};

package/src/services/API/ApiManager/index.ts

@@ -0,0 +1,182 @@
+import logger from '../../../services/Logger';
+import { ERROR_CODES } from '../../../consts/errors';
+
+export class ApiError extends Error {
+  errorCode: string;
+  detail?: string;
+  title?: string;
+  param?: string;
+
+  constructor(params: {
+    message: string;
+    errorCode: string;
+    detail?: string;
+    title?: string;
+    param?: string;
+  }) {
+    super(params.message);
+    this.errorCode = params.errorCode;
+    this.detail = params.detail;
+    this.param = params.param;
+    this.title = params.title;
+  }
+}
+
+export enum RequestType {
+  checkoutById,
+  retrieveCheckout,
+  myProfile,
+  listPaymentInstruments,
+  deletePaymentInstrument,
+}
+
+export const getRequestString = (
+  requestType: RequestType,
+  params: string[]
+) => {
+  switch (requestType) {
+    case RequestType.myProfile:
+      return '/public/merchant-profile';
+    case RequestType.listPaymentInstruments:
+      return `/checkouts/${params[0]}/customers/${params[1]}/payment-instruments`;
+    case RequestType.deletePaymentInstrument:
+      return `/checkouts/${params[0]}/customers/${params[1]}/payment-instruments/${params[2]}`;
+    case RequestType.checkoutById:
+      return `/checkouts/${params[0]}`;
+    case RequestType.retrieveCheckout:
+      return `/checkouts/${params[0]}/status`;
+    default:
+      return '';
+  }
+};
+
+export const getRequestType = (requestType: RequestType) => {
+  switch (requestType) {
+    case RequestType.checkoutById:
+      return 'PUT';
+    case RequestType.deletePaymentInstrument:
+      return 'DELETE';
+    default:
+      return 'GET';
+  }
+};
+
+const getVersion = (requestType: RequestType) => {
+  switch (requestType) {
+    case RequestType.retrieveCheckout:
+    case RequestType.listPaymentInstruments:
+    case RequestType.deletePaymentInstrument:
+      return 'v0.2';
+    default:
+      return 'v0.1';
+  }
+};
+
+export const getDomain = () => {
+  return 'https://api.sumup.com/';
+};
+
+const createBody = (requestType: RequestType, body?: Object | undefined) => {
+  switch (requestType) {
+    default:
+      return JSON.stringify(body);
+  }
+};
+
+const createAuthHeader = (
+  requestType: RequestType,
+  publicKey: string
+): HeadersInit_ => {
+  switch (requestType) {
+    case RequestType.retrieveCheckout:
+      return {};
+    case RequestType.myProfile:
+      return {
+        'SumUp-Public-Api-Key': publicKey,
+      };
+    default:
+      return {};
+  }
+};
+
+export const request = async <T>(
+  requestType: RequestType,
+  publicKey: string,
+  params: {
+    domain?: string;
+    body?: Object;
+    urlParams?: Object;
+    params?: string[];
+    query?: string;
+    responseNotExpected?: boolean;
+  }
+) => {
+  let headers: HeadersInit_ = {
+    'Accept': 'application/json',
+    'Content-Type': 'application/json',
+  };
+
+  const authHeader = createAuthHeader(requestType, publicKey);
+  headers = { ...headers, ...authHeader };
+
+  let paramsString = '';
+  if (params.urlParams) {
+    for (const [key, value] of Object.entries(params.urlParams)) {
+      if (value !== undefined && value !== null) {
+        if (Array.isArray(value)) {
+          value.forEach((item) => {
+            paramsString += paramsString.length === 0 ? '?' : '&';
+            paramsString += key + '=' + item;
+          });
+        } else {
+          paramsString += paramsString.length === 0 ? '?' : '&';
+          paramsString += key + '=' + value;
+        }
+      }
+    }
+  }
+
+  const url =
+    (params.domain ? params.domain : getDomain()) +
+    getVersion(requestType) +
+    getRequestString(requestType, params.params || []) +
+    paramsString;
+  logger.log(`[API] request url:`, { data: { url } });
+
+  return new Promise<T>((resolve, reject) => {
+    fetch(url, {
+      method: getRequestType(requestType),
+      headers,
+      body: createBody(requestType, params.body),
+    })
+      .then(async (response) => {
+        const data = params.responseNotExpected ? {} : await response.json();
+        logger.log(`[API] response data:`, { data });
+
+        if (response.status >= 400 && response.status < 600) {
+          reject(
+            new ApiError({
+              message: data.error_message || data.detail || data.message,
+              errorCode: data.error_code,
+              detail: data.detail,
+              title: data.title,
+              param: data.param,
+            })
+          );
+
+          return;
+        }
+
+        resolve(data);
+      })
+      .catch((error) => {
+        logger.log(`[API] fetch is failed:`, { error });
+        reject(
+          new ApiError({
+            message: error.message,
+            errorCode: ERROR_CODES.unknown,
+          })
+        );
+      });
+  });
+};