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

package/src/stores/NativePaymentStore/index.ts

@@ -0,0 +1,137 @@
+import { Platform } from 'react-native';
+import type {
+  InitPaymentApplePay,
+  InitPaymentGooglePay,
+} from '../../types/PaymentSheet';
+import applePayService from '../../services/ApplePayService';
+import googlePayService from '../../services/GooglePayService';
+import type { RootStore } from '../RootStore';
+import { makeAutoObservable } from 'mobx';
+import { ApiError } from '../../services/API/ApiManager';
+import type { PaymentSheet } from '../../types';
+import logger from '../../services/Logger';
+import { Checkout } from '../../types/CommonSheet';
+
+interface NativePaymentConfigureModel {
+  checkout: Checkout;
+  myProfile: PaymentSheet.MyProfile;
+  applePay?: InitPaymentApplePay;
+  googlePay?: InitPaymentGooglePay;
+}
+
+export class NativePaymentStore {
+  private rootStore: RootStore;
+
+  private checkoutId: string | undefined;
+
+  canPayWithNativeView = false;
+
+  constructor(rootStore: RootStore) {
+    this.rootStore = rootStore;
+
+    makeAutoObservable(this);
+  }
+
+  setCanPayWithNativeView = (canPayWithNativeView: boolean) => {
+    this.canPayWithNativeView = canPayWithNativeView;
+  };
+
+  configure = async (
+    params: NativePaymentConfigureModel
+  ): Promise<PaymentSheet.InitPaymentSheetResult | undefined> => {
+    this.reset();
+
+    if (
+      !(
+        (params.applePay && Platform.OS === 'ios') ||
+        (params.googlePay && Platform.OS === 'android') ||
+        !params.myProfile
+      )
+    ) {
+      return;
+    }
+
+    logger.log('[NativePayment] configuring native store', { data: params });
+
+    try {
+      if (params.applePay && Platform.OS === 'ios') {
+        await applePayService.configure({
+          countryCode: params.myProfile.countryCode,
+          currencyCode: params.checkout.currency,
+          merchantIdentifier: params.applePay.merchantIdentifier,
+          label: params.myProfile.merchantName,
+          amount: params.checkout.amount,
+        });
+
+        this.setCanPayWithNativeView(await applePayService.canMakePayments());
+      }
+
+      if (params.googlePay && Platform.OS === 'android') {
+        await googlePayService.configure({
+          isProductionEnvironment: params.googlePay.isProductionEnvironment,
+          currencyCode: params.checkout.currency,
+          amount: params.checkout.amount,
+          gatewayMerchantId: params.myProfile.merchantId,
+          merchantName: params.myProfile.merchantName,
+        });
+
+        this.setCanPayWithNativeView(await googlePayService.canMakePayments());
+      }
+
+      this.checkoutId = params.checkout.id;
+    } catch (err) {
+      logger.log('[NativePayment] failed to configure', { error: err });
+
+      if (err instanceof ApiError) {
+        return {
+          error: {
+            status: 'failure',
+            message: err.message,
+          },
+        };
+      }
+    }
+
+    return;
+  };
+
+  presentApplePay = async () => {
+    if (!this.checkoutId) {
+      return;
+    }
+
+    const model = await applePayService.present();
+    logger.log('[ApplePay] Model:', { data: model });
+    if (!model) {
+      return;
+    }
+
+    this.rootStore.paymentStore.handlePayment(this.checkoutId, {
+      payment_type: 'apple_pay',
+      apple_pay: { token: model },
+    });
+  };
+
+  presentGooglePay = async () => {
+    if (!this.checkoutId) {
+      return;
+    }
+
+    const model = await googlePayService.present();
+    logger.log('[GooglePay] Model:', { data: model });
+    if (!model) {
+      return;
+    }
+
+    this.rootStore.paymentStore.handlePayment(this.checkoutId, {
+      payment_type: 'google_pay',
+      google_pay: model,
+    });
+  };
+
+  reset = () => {
+    this.checkoutId = undefined;
+
+    this.setCanPayWithNativeView(false);
+  };
+}

package/src/stores/PaymentInstrumentsStore/index.ts

@@ -0,0 +1,166 @@
+import type { RootStore } from '../RootStore';
+import { CheckoutApiManager } from '../../services/API/CheckoutApiManager';
+import { makeAutoObservable } from 'mobx';
+import type { PaymentSheet } from '../../types';
+import { ApiError } from '../../services/API/ApiManager';
+import type { PaymentInstrument } from '../../types/PaymentSheet';
+import logger from '../../services/Logger';
+import { Checkout } from '../../types/CommonSheet';
+
+interface PaymentInstrumentsConfigureModel {
+  customerId?: string;
+  checkout: Checkout;
+}
+
+export class PaymentInstrumentsStore {
+  private rootStore: RootStore;
+
+  private checkoutApi: CheckoutApiManager;
+
+  private checkoutId: string | undefined;
+
+  private customerId: string | undefined;
+
+  selectedPaymentInstrument: PaymentInstrument | null = null;
+  paymentInstruments: PaymentInstrument[] | null = null;
+  canCardBeSavedForFuturePayments = false;
+
+  constructor(rootStore: RootStore, publicKey: string, domain?: string) {
+    this.rootStore = rootStore;
+    this.checkoutApi = new CheckoutApiManager(publicKey, domain);
+
+    makeAutoObservable(this);
+  }
+
+  setCanCardBeSavedForFuturePayments = (
+    canCardBeSavedForFuturePayments: boolean
+  ) => {
+    this.canCardBeSavedForFuturePayments = canCardBeSavedForFuturePayments;
+  };
+
+  setSelectedPaymentInstruments = (
+    selectedPaymentInstrument: PaymentInstrument | null
+  ) => {
+    this.selectedPaymentInstrument = selectedPaymentInstrument;
+  };
+
+  setPaymentInstruments = (paymentInstruments: PaymentInstrument[] | null) => {
+    this.paymentInstruments = paymentInstruments;
+  };
+
+  getPaymentInstrumentByToken = (token?: string) => {
+    return this.paymentInstruments?.find((item) => item.token === token);
+  };
+
+  configure = async (
+    params: PaymentInstrumentsConfigureModel
+  ): Promise<PaymentSheet.InitPaymentSheetResult | undefined> => {
+    this.reset();
+
+    if (!params.customerId) {
+      return;
+    }
+
+    logger.log('[Instruments] configuring store', {});
+
+    this.setCanCardBeSavedForFuturePayments(true);
+
+    try {
+      const paymentInstruments =
+        await this.checkoutApi.getListPaymentInstruments(
+          params.checkout.id,
+          params.customerId
+        );
+
+      if (paymentInstruments.length > 0) {
+        this.setSelectedPaymentInstruments(paymentInstruments[0]!);
+        this.setPaymentInstruments(paymentInstruments);
+        this.customerId = params.customerId;
+        this.checkoutId = params.checkout.id;
+      }
+    } catch (err) {
+      logger.log('[Instruments] failed to configure', {
+        error: err,
+      });
+
+      if (err instanceof ApiError) {
+        return {
+          error: {
+            status: 'failure',
+            message: err.message,
+          },
+        };
+      }
+    }
+
+    return;
+  };
+
+  selectPaymentInstrument = (token: string) => {
+    const paymentInstrument = this.paymentInstruments?.find(
+      (item) => item.token === token
+    );
+
+    if (paymentInstrument) {
+      this.setSelectedPaymentInstruments(paymentInstrument);
+    }
+  };
+
+  deletePaymentInstrument = async (token: string) => {
+    if (!this.checkoutId || !this.customerId || !this.paymentInstruments) {
+      throw Error('SDK is not configured');
+    }
+
+    logger.log('[Instruments] deleting instrument', { data: { token } });
+
+    try {
+      await this.checkoutApi.deletePaymentInstrument(
+        this.checkoutId,
+        this.customerId,
+        token
+      );
+
+      let copyPaymentInstruments = [...this.paymentInstruments];
+      copyPaymentInstruments = copyPaymentInstruments.filter(
+        (item) => item.token !== token
+      );
+
+      if (copyPaymentInstruments.length === 0) {
+        this.setPaymentInstruments(null);
+        this.setSelectedPaymentInstruments(null);
+      } else {
+        if (this.selectedPaymentInstrument?.token === token) {
+          this.setSelectedPaymentInstruments(copyPaymentInstruments[0]!);
+        }
+
+        this.setPaymentInstruments(copyPaymentInstruments);
+      }
+
+      return copyPaymentInstruments;
+    } catch (err) {
+      logger.log('[Instruments] failed to delete instrument', { error: err });
+      return this.paymentInstruments;
+    }
+  };
+
+  payWithToken = async (token: string) => {
+    if (!this.checkoutId || !this.customerId) {
+      return;
+    }
+
+    return this.rootStore.paymentStore.handlePayment(this.checkoutId, {
+      payment_type: 'card',
+      token,
+      customer_id: this.customerId,
+    });
+  };
+
+  reset = () => {
+    this.checkoutId = undefined;
+    this.customerId = undefined;
+
+    this.setSelectedPaymentInstruments(null);
+    this.setPaymentInstruments(null);
+    this.setCanCardBeSavedForFuturePayments(false);
+  };
+}

package/src/stores/PaymentStore/index.ts

@@ -0,0 +1,188 @@
+import { action, makeObservable, observable } from 'mobx';
+import { ApiError } from '../../services/API/ApiManager';
+import type { PaymentSheet } from '../../types';
+import { getUserAgent } from '../../helpers/getUserAgent';
+import type { RootStore } from '../RootStore';
+import logger from '../../services/Logger';
+import { CardPayment, Checkout } from '../../types/CommonSheet';
+import {
+  BaseSheetStore,
+  PresentPaymentResolveCallback,
+} from '../BaseSheetStore';
+
+export class PaymentStore extends BaseSheetStore {
+  amount: number | null = null;
+  currency: string | null = null;
+  cardHolderName: string | null = null;
+  saveCardForFutureUsage: boolean | null = null;
+  countryCode: string | null = null;
+
+  constructor(rootStore: RootStore, publicKey: string, domain?: string) {
+    const onReset = () => {
+      this.reset();
+    };
+
+    super(rootStore, publicKey, domain, onReset);
+
+    makeObservable(this, {
+      isSheetVisible: observable,
+      paymentStatus: observable,
+      setIsSheetVisible: action,
+      setPaymentStatus: action,
+      reset: action,
+    });
+  }
+
+  configure = async (
+    params: PaymentSheet.InitPaymentSheetProps
+  ): Promise<PaymentSheet.InitPaymentSheetResult> => {
+    this.reset();
+
+    logger.setup({
+      checkoutId: params.checkoutId,
+      customerId: params.customerId,
+    });
+
+    logger.log('configuring SDK', { data: params });
+
+    try {
+      const checkoutResult = await this.getAndValidateCheckout(
+        params.checkoutId
+      );
+
+      if ('error' in checkoutResult) {
+        return checkoutResult;
+      }
+
+      const checkout = checkoutResult as Checkout;
+
+      if (checkout.purpose && checkout.purpose !== 'CHECKOUT') {
+        return {
+          error: {
+            status: 'failure',
+            message: 'The checkout should be configured without any purpose.',
+          },
+        };
+      }
+
+      this.rootStore.threeDSecureStore.configure(
+        params.checkoutId,
+        this.proceedSuccessfulPayment,
+        this.handleFailedTransaction,
+        () => this.setPaymentStatus('default')
+      );
+
+      const paymentInstrumentsError =
+        await this.rootStore.paymentInstrumentsStore.configure({
+          checkout,
+          customerId: params.customerId,
+        });
+
+      if (paymentInstrumentsError) {
+        return paymentInstrumentsError;
+      }
+
+      const myProfile = await this.checkoutApi.getMyProfile();
+
+      const nativePaymentError =
+        await this.rootStore.nativePaymentStore.configure({
+          checkout,
+          myProfile,
+          applePay: params.applePay,
+          googlePay: params.googlePay,
+        });
+
+      if (nativePaymentError) {
+        return nativePaymentError;
+      }
+
+      this.cardHolderName = params.defaultCardDetails?.cardHolderName || null;
+      this.saveCardForFutureUsage =
+        params.defaultCardDetails?.saveCardForFutureUsage || null;
+      this.checkoutId = params.checkoutId;
+      this.amount = checkout.amount;
+      this.currency = checkout.currency;
+      this.countryCode = myProfile.countryCode;
+    } catch (err) {
+      logger.log('failed to configure the SDK', { error: err });
+
+      if (err instanceof ApiError) {
+        return {
+          error: {
+            status: 'failure',
+            message: err.message,
+          },
+        };
+      }
+    }
+
+    return {};
+  };
+
+  showPaymentSheet = async (resolve: PresentPaymentResolveCallback) => {
+    if (!this.checkoutId) {
+      resolve({
+        error: {
+          status: 'failure',
+          message: 'Payment Sheet wasn`t configured',
+        },
+      });
+
+      return;
+    }
+
+    logger.log('showing payment sheet', {});
+
+    this.setIsSheetVisible(true);
+    this.presentSheetResolveCallback = resolve;
+  };
+
+  hidePaymentSheet = (throwCanceledError: boolean) => {
+    if (throwCanceledError) {
+      this.presentSheetResolveCallback?.({
+        error: {
+          status: 'canceled',
+        },
+      });
+    }
+
+    logger.log('hiding payment sheet', {});
+
+    this.setIsSheetVisible(false);
+  };
+
+  pay = async (card: CardPayment) => {
+    if (!this.checkoutId) {
+      this.setPaymentStatus('failed');
+      return;
+    }
+
+    return this.handlePayment(this.checkoutId, {
+      payment_type: 'card',
+      card: {
+        name: card.name,
+        number: card.number,
+        expiry_month: card.expiryMonth,
+        expiry_year: card.expiryYear,
+        cvv: card.cvv,
+      },
+      mandate:
+        card.saveCard &&
+        this.rootStore.paymentInstrumentsStore.canCardBeSavedForFuturePayments
+          ? {
+              type: 'recurrent',
+              user_agent: getUserAgent(),
+            }
+          : undefined,
+    });
+  };
+
+  reset = () => {
+    this.baseReset();
+
+    this.amount = null;
+    this.currency = null;
+    this.cardHolderName = null;
+    this.saveCardForFutureUsage = null;
+  };
+}

package/src/stores/RootStore.ts

@@ -0,0 +1,29 @@
+import { NativePaymentStore } from './NativePaymentStore';
+import { PaymentInstrumentsStore } from './PaymentInstrumentsStore';
+import { PaymentStore } from './PaymentStore';
+import { SaveCardStore } from './SaveCardStore';
+import { ThreeDSecureStore } from './ThreeDSecureStore';
+
+export class RootStore {
+  paymentStore: PaymentStore;
+  saveCardStore: SaveCardStore;
+  nativePaymentStore: NativePaymentStore;
+  paymentInstrumentsStore: PaymentInstrumentsStore;
+  threeDSecureStore: ThreeDSecureStore;
+
+  constructor(publicKey: string, domain?: string) {
+    if (!publicKey) {
+      console.error('SDK cannot be configured without publicKey.');
+    }
+
+    this.paymentStore = new PaymentStore(this, publicKey, domain);
+    this.saveCardStore = new SaveCardStore(this, publicKey, domain);
+    this.nativePaymentStore = new NativePaymentStore(this);
+    this.threeDSecureStore = new ThreeDSecureStore(publicKey, domain);
+    this.paymentInstrumentsStore = new PaymentInstrumentsStore(
+      this,
+      publicKey,
+      domain
+    );
+  }
+}

package/src/stores/SaveCardStore/index.ts

@@ -0,0 +1,159 @@
+import { action, makeObservable, observable } from 'mobx';
+import { ApiError } from '../../services/API/ApiManager';
+import type { RootStore } from '../RootStore';
+import logger from '../../services/Logger';
+import { SaveCardSheet } from '../../types';
+import { CardPayment, Checkout } from '../../types/CommonSheet';
+import { getUserAgent } from '../../helpers/getUserAgent';
+import {
+  BaseSheetStore,
+  PresentPaymentResolveCallback,
+} from '../BaseSheetStore';
+
+export class SaveCardStore extends BaseSheetStore {
+  amount: number | null = null;
+  currency: string | null = null;
+  cardHolderName: string | null = null;
+  countryCode: string | null = null;
+
+  constructor(rootStore: RootStore, publicKey: string, domain?: string) {
+    const onReset = () => {
+      this.reset();
+    };
+
+    super(rootStore, publicKey, domain, onReset);
+
+    makeObservable(this, {
+      isSheetVisible: observable,
+      paymentStatus: observable,
+      setIsSheetVisible: action,
+      setPaymentStatus: action,
+      reset: action,
+    });
+  }
+
+  configure = async (
+    params: SaveCardSheet.InitSaveCardSheetProps
+  ): Promise<SaveCardSheet.InitSaveCardSheetResult> => {
+    this.reset();
+
+    logger.setup({
+      checkoutId: params.checkoutId,
+      customerId: params.customerId,
+    });
+
+    logger.log('configuring SaveCardSheet', { data: params });
+
+    try {
+      const checkoutResult = await this.getAndValidateCheckout(
+        params.checkoutId
+      );
+
+      if ('error' in checkoutResult) {
+        return checkoutResult;
+      }
+
+      const checkout = checkoutResult as Checkout;
+
+      if (checkout.purpose !== 'SETUP_RECURRING_PAYMENT') {
+        return {
+          error: {
+            status: 'failure',
+            message:
+              'The checkout should be configured with the SETUP_RECURRING_PAYMENT purpose.',
+          },
+        };
+      }
+
+      const myProfile = await this.checkoutApi.getMyProfile();
+
+      this.rootStore.threeDSecureStore.configure(
+        params.checkoutId,
+        this.proceedSuccessfulPayment,
+        this.handleFailedTransaction,
+        () => this.setPaymentStatus('default')
+      );
+
+      this.checkoutId = params.checkoutId;
+      this.amount = checkout.amount;
+      this.currency = checkout.currency;
+      this.cardHolderName = params.defaultCardDetails?.cardHolderName || null;
+      this.countryCode = myProfile.countryCode;
+    } catch (err) {
+      logger.log('failed to configure the SDK', { error: err });
+
+      if (err instanceof ApiError) {
+        return {
+          error: {
+            status: 'failure',
+            message: err.message,
+          },
+        };
+      }
+    }
+
+    return {};
+  };
+
+  showSaveCardSheet = async (resolve: PresentPaymentResolveCallback) => {
+    if (!this.checkoutId) {
+      resolve({
+        error: {
+          status: 'failure',
+          message: 'Payment Sheet wasn`t configured',
+        },
+      });
+      return;
+    }
+
+    logger.log('showing save card sheet', {});
+
+    this.setIsSheetVisible(true);
+
+    this.presentSheetResolveCallback = resolve;
+  };
+
+  hideSaveCardSheet = (throwCanceledError: boolean) => {
+    if (throwCanceledError) {
+      this.presentSheetResolveCallback?.({
+        error: {
+          status: 'canceled',
+        },
+      });
+    }
+
+    logger.log('hiding save card sheet', {});
+
+    this.setIsSheetVisible(false);
+  };
+
+  saveCard = async (card: CardPayment) => {
+    if (!this.checkoutId) {
+      this.setPaymentStatus('failed');
+      return;
+    }
+
+    return this.handlePayment(this.checkoutId, {
+      payment_type: 'card',
+      card: {
+        name: card.name,
+        number: card.number,
+        expiry_month: card.expiryMonth,
+        expiry_year: card.expiryYear,
+        cvv: card.cvv,
+      },
+      mandate: {
+        type: 'recurrent',
+        user_agent: getUserAgent(),
+      },
+    });
+  };
+
+  reset = () => {
+    this.baseReset();
+
+    this.amount = null;
+    this.currency = null;
+    this.cardHolderName = null;
+  };
+}