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

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

@@ -0,0 +1,148 @@
+import {
+  CardPaymentRequest,
+  TokenPaymentRequest,
+} from '../../../types/Requests';
+import type { ApplePay, GooglePay } from '../../../types';
+import type { MyProfile, PaymentInstrument } from '../../../types/PaymentSheet';
+import { request, RequestType } from '../ApiManager';
+import { PullingService } from '../PullingService';
+import type {
+  ListPaymentInstrumentsResponse,
+  MyProfileResponse,
+  PayCheckout3DSecureResponse,
+  PayCheckoutResponse,
+  RetrieveCheckoutResponse,
+} from './models';
+import {
+  Checkout,
+  CheckoutStatus,
+  ThreeDSecureModel,
+} from '../../../types/CommonSheet';
+
+export class CheckoutApiManager {
+  private publicKey: string;
+  private domain: string | undefined;
+
+  constructor(publicKey: string, domain?: string) {
+    this.domain = domain;
+    this.publicKey = publicKey;
+  }
+
+  getListPaymentInstruments = async (
+    checkoutId: string,
+    customerId: string
+  ): Promise<PaymentInstrument[]> => {
+    const response = await request<ListPaymentInstrumentsResponse>(
+      RequestType.listPaymentInstruments,
+      this.publicKey,
+      {
+        domain: this.domain,
+        params: [checkoutId, customerId],
+      }
+    );
+
+    return response
+      .filter(
+        (item) =>
+          item.active &&
+          item.type === 'CARD' &&
+          item.mandate?.status === 'active'
+      )
+      .map((item) => ({
+        token: item.token,
+        type: item.card.type,
+        lastDigits: item.card.last_4_digits,
+      }));
+  };
+
+  getMyProfile = async (): Promise<MyProfile> => {
+    const response = await request<MyProfileResponse>(
+      RequestType.myProfile,
+      this.publicKey,
+      {
+        domain: this.domain,
+      }
+    );
+
+    return {
+      merchantId: response.merchant.code,
+      merchantName: response.merchant.name,
+      countryCode: response.merchant.country,
+    };
+  };
+
+  getCheckout = async (checkoutId: string): Promise<Checkout> => {
+    const response = await request<RetrieveCheckoutResponse>(
+      RequestType.retrieveCheckout,
+      this.publicKey,
+      {
+        domain: this.domain,
+        params: [checkoutId],
+      }
+    );
+
+    return {
+      id: checkoutId,
+      status: response.status,
+      amount: response.amount,
+      currency: response.currency,
+      purpose: response.purpose,
+    };
+  };
+
+  handlePayment = async (
+    checkoutId: string,
+    model:
+      | TokenPaymentRequest
+      | CardPaymentRequest
+      | GooglePay.PaymentRequest
+      | ApplePay.PaymentRequest
+  ): Promise<{ status: CheckoutStatus } | ThreeDSecureModel> => {
+    const response = await request<
+      PayCheckoutResponse | PayCheckout3DSecureResponse
+    >(RequestType.checkoutById, this.publicKey, {
+      domain: this.domain,
+      params: [checkoutId],
+      body: model,
+    });
+
+    if ('next_step' in response) {
+      return {
+        url: response.next_step.url,
+        method: response.next_step.method,
+        payload: response.next_step.payload,
+      };
+    }
+
+    if (response.status === 'PENDING') {
+      const pullResponse = await PullingService.pull(
+        () => this.getCheckout(checkoutId),
+        (checkout) => checkout.status !== 'PENDING'
+      );
+
+      return {
+        status: pullResponse.status,
+      };
+    }
+
+    return {
+      status: response.status,
+    };
+  };
+
+  deletePaymentInstrument = async (
+    checkoutId: string,
+    customerId: string,
+    token: string
+  ) => {
+    return await request<void>(
+      RequestType.deletePaymentInstrument,
+      this.publicKey,
+      {
+        domain: this.domain,
+        params: [checkoutId, customerId, token],
+        responseNotExpected: true,
+      }
+    );
+  };
+}

package/src/services/API/CheckoutApiManager/models.ts

@@ -0,0 +1,140 @@
+import { CheckoutStatus } from '../../../types/CommonSheet';
+
+export interface RetrieveCheckoutResponse {
+  amount: number;
+  currency: string;
+  id: string;
+  merchant_code: string;
+  status: CheckoutStatus;
+  purpose?: 'SETUP_RECURRING_PAYMENT';
+}
+
+export interface CheckoutTransactionResponse {
+  amount: number;
+  currency: string;
+  entry_mode: string;
+  id: string;
+  installments_count: number;
+  internal_id: number;
+  merchant_code: string;
+  payment_type: string;
+  status: CheckoutStatus;
+  timestamp: string;
+  tip_amount: number;
+  transaction_code: string;
+  vat_amount: number;
+}
+
+export interface PayCheckoutResponse {
+  checkout_reference: string;
+  amount: number;
+  currency: string;
+  pay_to_email: string;
+  merchant_code: string;
+  description: string;
+  id: string;
+  status: CheckoutStatus;
+  date: string;
+  transaction_code: string;
+  transaction_id: string;
+  merchant_name: string;
+  purpose: string;
+  transactions: CheckoutTransactionResponse[];
+}
+
+export interface PayCheckout3DSecureResponse {
+  next_step: {
+    url: string;
+    method: string;
+    redirect_url?: string;
+    mechanism: string[];
+    payload: Record<string, string>;
+  };
+}
+
+// for /public/merchant-profile
+interface MyProfilePaymentMethod {
+  id: 'apple_pay' | 'google_pay' | string;
+  name: string;
+}
+
+export interface MyProfileResponse {
+  // for /public/merchant-profile
+  merchant: {
+    code: string;
+    country: string;
+    currency: string;
+    name: string;
+  };
+  payment_methods: MyProfilePaymentMethod[];
+  // for /me
+  // account: {
+  //   type: string;
+  //   username: string;
+  // };
+  // details_submitted: boolean;
+  // is_migrated_payleven_br: boolean;
+  // merchant_profile: {
+  //   address: {
+  //     address_line1: string;
+  //     city: string;
+  //     country: string;
+  //     landline: string;
+  //     post_code: string;
+  //   };
+  //   business_owners: [];
+  //   company_name: string;
+  //   complete: boolean;
+  //   country: string;
+  //   default_currency: string;
+  //   doing_business_as: {
+  //     business_name: string;
+  //     dynamic_descriptor: string;
+  //     email: string;
+  //   };
+  //   legal_type: {
+  //     description: string;
+  //     full_description: string;
+  //     id: number;
+  //     sole_trader: boolean;
+  //   };
+  //   locale: string;
+  //   merchant_category_code: string;
+  //   merchant_code: string;
+  //   mobile_phone: string;
+  // };
+  // personal_profile: {
+  //   address: {
+  //     address_line1: string;
+  //     city: string;
+  //     country: string;
+  //     post_code: string;
+  //   };
+  //   complete: boolean;
+  //   date_of_birth: string;
+  //   first_name: string;
+  //   last_name: string;
+  //   mobile_phone: string;
+  // };
+  // requirements: [];
+  // signup_time: string;
+  // verifications: [];
+}
+
+interface ListPaymentInstrument {
+  token: string;
+  active: boolean;
+  type: 'CARD';
+  card: {
+    last_4_digits: string;
+    type: 'VISA';
+  };
+  mandate?: {
+    type: 'recurrent';
+    status: 'active' | 'disabled';
+    merchantCode: string;
+  };
+  created_at: string;
+}
+
+export type ListPaymentInstrumentsResponse = ListPaymentInstrument[];

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

@@ -0,0 +1,29 @@
+const DEFAULT_INTERVAL = 1000;
+const DEFAULT_MAX_REPEAT_TIMES = 30;
+
+export class PullingService {
+  static pull = async <T>(
+    request: () => Promise<T>,
+    condition: (data: T) => boolean,
+    config?: {
+      maxRepeatTimes?: number;
+      defaultInterval?: number;
+    }
+  ): Promise<T> => {
+    const maxRepeatTimes = config?.maxRepeatTimes || DEFAULT_MAX_REPEAT_TIMES;
+    const interval = config?.defaultInterval || DEFAULT_INTERVAL;
+
+    for (let counter = 0; counter < maxRepeatTimes; counter++) {
+      const response = await request();
+      if (condition(response)) {
+        return response;
+      }
+
+      if (counter < maxRepeatTimes - 1) {
+        await new Promise((resolve) => setTimeout(resolve, interval));
+      }
+    }
+
+    throw new Error('Polling timeout');
+  };
+}

package/src/services/ApplePayService/index.ts

@@ -0,0 +1,54 @@
+import type { ApplePay } from '../../types';
+import consts from '../../consts/nativePayMethod';
+import logger from '../Logger';
+import { getNativePaymentsBridge } from '../NativePaymentsBridge';
+
+export class ApplePayService {
+  private applePayNative = getNativePaymentsBridge();
+
+  private isConfigured = false;
+
+  configure = async (props: ApplePay.InitApplePayProps) => {
+    this.applePayNative.configure(
+      {
+        countryCode: props.countryCode,
+        currencyCode: props.currencyCode,
+        supportedNetworks: consts.supportedCardTypesIOS,
+        merchantIdentifier: props.merchantIdentifier,
+      },
+      {
+        total: {
+          label: props.label,
+          amount: props.amount,
+        },
+      }
+    );
+
+    this.isConfigured = true;
+  };
+
+  canMakePayments = async (): Promise<boolean> => {
+    return !this.isConfigured
+      ? false
+      : await this.applePayNative.canMakePayments();
+  };
+
+  present = async (): Promise<ApplePay.PresentResponse | undefined> => {
+    try {
+      const response = await this.applePayNative.presentApplePay();
+
+      return {
+        paymentMethod: response.paymentMethod,
+        transactionIdentifier: response.transactionIdentifier,
+        paymentData: JSON.parse(response.paymentData),
+      };
+    } catch (error) {
+      logger.log('[ApplePay] Error:', { error });
+      return;
+    }
+  };
+}
+
+const applePayService = new ApplePayService();
+
+export default applePayService;

package/src/services/GooglePayService/index.ts

@@ -0,0 +1,67 @@
+import type { GooglePay } from '../../types';
+import consts from '../../consts/nativePayMethod';
+import logger from '../Logger';
+import { getNativePaymentsBridge } from '../NativePaymentsBridge';
+
+export class GooglePayService {
+  private googlePayNative = getNativePaymentsBridge();
+
+  private requestData: GooglePay.RequestData | undefined;
+  private isReady = false;
+
+  configure = async (props: GooglePay.InitGooglePayProps) => {
+    const allowedCardNetworks = consts.supportedCardTypesAndroid;
+    const allowedCardAuthMethods = consts.android.allowedCardAuthMethods;
+
+    this.requestData = {
+      cardPaymentMethod: {
+        tokenizationSpecification: {
+          type: consts.android.type,
+          gateway: consts.android.gateway,
+          gatewayMerchantId: props.gatewayMerchantId,
+        },
+        allowedCardNetworks,
+        allowedCardAuthMethods,
+      },
+      transaction: {
+        totalPrice: props.amount.toString(),
+        totalPriceStatus: consts.android.totalPriceStatus,
+        currencyCode: props.currencyCode,
+      },
+      merchantName: props.merchantName,
+    };
+
+    this.googlePayNative.setEnvironment(
+      props.isProductionEnvironment
+        ? this.googlePayNative.ENVIRONMENT_PRODUCTION
+        : this.googlePayNative.ENVIRONMENT_TEST
+    );
+
+    this.isReady = await this.googlePayNative.isReadyToPay(
+      allowedCardNetworks,
+      allowedCardAuthMethods
+    );
+  };
+
+  canMakePayments = async () => {
+    return this.isReady;
+  };
+
+  present = async (): Promise<GooglePay.PresentResponse | undefined> => {
+    if (this.requestData) {
+      try {
+        return JSON.parse(
+          await this.googlePayNative.requestPayment(this.requestData)
+        );
+      } catch (error) {
+        logger.log('[GooglePay] Error:', { error });
+      }
+    }
+
+    return;
+  };
+}
+
+const googlePayService = new GooglePayService();
+
+export default googlePayService;

package/src/services/Logger/index.ts

@@ -0,0 +1,28 @@
+import { LogEventData, OnLogCallback } from '../../types/CommonSheet';
+
+class Logger {
+  private onLog: OnLogCallback | undefined;
+
+  private baseParams: Record<string, string> = {};
+
+  setup = (params: Record<string, any>) => {
+    this.baseParams = params;
+  };
+
+  reset = () => {
+    this.baseParams = {};
+  };
+
+  setupCallback = (onLogCallback: OnLogCallback) => {
+    this.onLog = onLogCallback;
+
+    this.log('logs configured', {});
+  };
+
+  log = (message: string, model: LogEventData) => {
+    this.onLog?.(`[SDK] ${message}`, model, this.baseParams);
+  };
+}
+
+const logger = new Logger();
+export default logger;

package/src/services/NativePaymentsBridge/index.ts

@@ -0,0 +1,44 @@
+import { NativeModules } from 'react-native';
+import type { GooglePay } from '../../types';
+
+type ConfigureApplePayPayload = {
+  countryCode: string;
+  currencyCode: string;
+  supportedNetworks: string[];
+  merchantIdentifier: string;
+};
+
+type ConfigureApplePaySummary = {
+  total: {
+    label: string;
+    amount: number;
+  };
+};
+
+interface SumupReactNativeModule {
+  configure: (
+    payload: ConfigureApplePayPayload,
+    summary: ConfigureApplePaySummary
+  ) => void;
+  canMakePayments: () => Promise<boolean>;
+  presentApplePay: () => Promise<{
+    paymentMethod: {
+      displayName: string;
+      network: string;
+      type: string;
+    };
+    transactionIdentifier: string;
+    paymentData: string;
+  }>;
+  setEnvironment: (environment: number) => void;
+  isReadyToPay: (
+    allowedCardNetworks: string[],
+    allowedCardAuthMethods: string[]
+  ) => Promise<boolean>;
+  requestPayment: (requestData: GooglePay.RequestData) => Promise<string>;
+  ENVIRONMENT_TEST: number;
+  ENVIRONMENT_PRODUCTION: number;
+}
+
+export const getNativePaymentsBridge = (): SumupReactNativeModule =>
+  NativeModules.SumupReactNative as SumupReactNativeModule;

package/src/stores/BaseSheetStore/index.ts

@@ -0,0 +1,181 @@
+import { ApiError } from '../../services/API/ApiManager';
+import { CheckoutApiManager } from '../../services/API/CheckoutApiManager';
+import type { ApplePay, GooglePay } from '../../types';
+import type { RootStore } from '../RootStore';
+import { Alert } from 'react-native';
+import en from '../../translations/en-GB.json';
+import { ERROR_CODES } from '../../consts/errors';
+import logger from '../../services/Logger';
+import {
+  Checkout,
+  EmptyCallback,
+  InvalidFieldError,
+  PaymentStatus,
+  PresentSheetResult,
+} from '../../types/CommonSheet';
+import { CardPaymentRequest, TokenPaymentRequest } from '../../types/Requests';
+
+const DELAY_TO_HIDE_PAYMENT_SHEET_AFTER_SUCCESS_PAYMENT = 1500;
+
+export type PresentPaymentResolveCallback = (
+  result: PresentSheetResult
+) => void;
+
+export class BaseSheetStore {
+  private onReset: EmptyCallback | undefined;
+
+  protected rootStore: RootStore;
+
+  protected checkoutApi: CheckoutApiManager;
+
+  protected checkoutId: string | undefined;
+
+  protected presentSheetResolveCallback:
+    | PresentPaymentResolveCallback
+    | undefined;
+
+  isSheetVisible = false;
+  paymentStatus: PaymentStatus = 'default';
+
+  constructor(
+    rootStore: RootStore,
+    publicKey: string,
+    domain?: string,
+    onReset?: EmptyCallback
+  ) {
+    this.rootStore = rootStore;
+    this.checkoutApi = new CheckoutApiManager(publicKey, domain);
+    this.onReset = onReset;
+  }
+
+  setIsSheetVisible = (isVisible: boolean) => {
+    this.isSheetVisible = isVisible;
+  };
+
+  setPaymentStatus = (paymentStatus: PaymentStatus) => {
+    this.paymentStatus = paymentStatus;
+  };
+
+  handlePayment = async (
+    validCheckoutId: string,
+    model:
+      | TokenPaymentRequest
+      | CardPaymentRequest
+      | GooglePay.PaymentRequest
+      | ApplePay.PaymentRequest
+  ): Promise<InvalidFieldError | void> => {
+    this.setPaymentStatus('processing');
+
+    try {
+      const response = await this.checkoutApi.handlePayment(
+        validCheckoutId,
+        model
+      );
+
+      if (response && 'url' in response) {
+        this.rootStore.threeDSecureStore.show(response);
+        return;
+      }
+
+      if (response.status === 'PAID') {
+        logger.log('the checkout is paid', {});
+        this.proceedSuccessfulPayment();
+        return;
+      }
+
+      this.handleFailedTransaction();
+    } catch (err) {
+      if (err instanceof ApiError) {
+        if (err.errorCode === ERROR_CODES.checkoutProcessed) {
+          logger.log('the checkout is already processed', {});
+          this.proceedSuccessfulPayment();
+          return;
+        }
+
+        this.setPaymentStatus('failed');
+
+        if (err.errorCode === ERROR_CODES.invalid) {
+          logger.log('validation error', { error: err });
+          return {
+            message: err.title || err.message,
+            param: err.param || '',
+          };
+        }
+
+        logger.log('API error while processing the checkout', { error: err });
+
+        this.setIsSheetVisible(false);
+        this.presentSheetResolveCallback?.({
+          error: {
+            status: 'failure',
+            message: err.message,
+            errorCode: err.errorCode,
+          },
+        });
+
+        return;
+      }
+
+      this.handleFailedTransaction();
+    }
+  };
+
+  protected getAndValidateCheckout = async (
+    checkoutId?: string
+  ): Promise<PresentSheetResult | Checkout> => {
+    if (!checkoutId) {
+      return {
+        error: {
+          status: 'failure',
+          message: 'checkoutId field is required',
+        },
+      };
+    }
+
+    const checkout = await this.checkoutApi.getCheckout(checkoutId);
+
+    if (checkout.status === 'PAID') {
+      return {
+        error: {
+          status: 'failure',
+          message: 'The checkout was already paid.',
+        },
+      };
+    }
+
+    if (checkout.status === 'EXPIRED') {
+      return {
+        error: {
+          status: 'failure',
+          message: 'The checkout is expired.',
+        },
+      };
+    }
+
+    return checkout;
+  };
+
+  protected handleFailedTransaction = () => {
+    this.setPaymentStatus('failed');
+    Alert.alert(en.common.alerts.failedTransaction.title);
+  };
+
+  protected proceedSuccessfulPayment = () => {
+    this.setPaymentStatus('success');
+
+    setTimeout(() => {
+      this.setIsSheetVisible(false);
+      this.presentSheetResolveCallback?.({});
+      this.onReset?.();
+    }, DELAY_TO_HIDE_PAYMENT_SHEET_AFTER_SUCCESS_PAYMENT);
+  };
+
+  protected baseReset = () => {
+    this.checkoutId = undefined;
+    this.setPaymentStatus('default');
+
+    this.rootStore.paymentInstrumentsStore.reset();
+    this.rootStore.nativePaymentStore.reset();
+    this.rootStore.threeDSecureStore.reset();
+  };
+}