boxpay-checkout-reactnative-sdk 1.0.0-beta2

package/src/interface.ts

@@ -0,0 +1,440 @@
+export interface PaymentResult {
+  status: string;
+  transactionId: string;
+}
+
+export enum ConfigurationOptions {
+  ShowBoxpaySuccessScreen = 'SHOW_BOXPAY_SUCCESS_SCREEN',
+  EnableSandboxEnv = 'ENABLE_SANDBOX_ENV',
+}
+
+export interface BoxpayCheckoutProps {
+  token: string;
+  configurationOptions?: Partial<Record<ConfigurationOptions, boolean>>;
+  onPaymentResult: (result: PaymentResult) => void;
+  shopperToken?: string | null;
+}
+
+export interface CheckoutDetails {
+  currencySymbol: string;
+  amount: string;
+  token: string;
+  brandColor: string;
+  env: string;
+  itemsLength: number;
+  errorMessage: string;
+  shopperToken: string | null;
+  isSuccessScreenVisible: boolean;
+  isShippingAddressEnabled: boolean;
+  isShippingAddressEditable: boolean;
+  isFullNameEnabled: boolean;
+  isFullNameEditable: boolean;
+  isEmailEnabled: boolean;
+  isEmailEditable: boolean;
+  isPhoneEnabled: boolean;
+  isPhoneEditable: boolean;
+  isPanEnabled: boolean;
+  isPanEditable: boolean;
+  isDOBEnabled: boolean;
+  isDOBEditable: boolean;
+  isUpiIntentMethodEnabled : boolean,
+  isUpiCollectMethodEnabled : boolean,
+  isCardMethodEnabled : boolean,
+  isWalletMethodEnabled : boolean,
+  isNetBankingMethodEnabled : boolean,
+  isEmiMethodEnabled : boolean,
+  isBnplMethodEnabled : boolean
+}
+
+export interface CardType {
+  cardType: string; // Restricting values
+  banks: Bank[];
+}
+
+export interface Bank {
+  iconUrl: string;
+  name: string;
+  percent: number;
+  noCostApplied: boolean;
+  lowCostApplied: boolean;
+  emiList: Emi[];
+  cardLessEmiValue: string;
+  issuerBrand?: string;
+}
+
+export interface ChooseEmiModel {
+  cards: CardType[];
+}
+
+export interface Emi {
+  duration: number;
+  percent: number;
+  amount: string;
+  totalAmount: string;
+  discount?: string;
+  interestCharged?: string;
+  noCostApplied: boolean;
+  lowCostApplied: boolean;
+  processingFee: string;
+  code?: string;
+  netAmount?: string;
+}
+
+export interface PaymentClass {
+  type: string;
+  id: string;
+  displayName: string;
+  displayValue: string;
+  iconUrl: string;
+  instrumentTypeValue: string;
+  isLastUsed?: boolean | null;
+  isSelected: boolean;
+}
+
+export interface UserData {
+  firstName: string | null;
+  lastName: string | null;
+  email: string | null;
+  phone: string | null;
+  dob: string | null;
+  pan: string | null;
+  address1: string | null;
+  address2: string | null;
+  city: string | null;
+  state: string | null;
+  country: string | null;
+  pincode: string | null;
+  labelType: string | null;
+  labelName: string | null;
+  uniqueId: string | null;
+}
+
+export interface DeliveryAddress {
+  address1: string | null;
+  address2: string | null;
+  city: string | null;
+  state: string | null;
+  postalCode: string | null;
+  countryCode: string | null;
+  labelName: string | null;
+  labelType: string | null;
+}
+
+interface UPIIntentPayload {
+  type: 'upi/intent';
+  upiAppDetails?: {
+    upiApp: string; // Or a more specific type for the UPI app identifier
+  };
+}
+
+interface CardTokenPayload {
+  type: 'card/token';
+  savedCard: {
+    instrumentRef: string;
+  };
+}
+
+interface UPICollectPayload {
+  type: 'upi/collect';
+  upi?: {
+    instrumentRef?: string;
+    shopperVpa?: string;
+  };
+}
+
+export type InstrumentDetails =
+  | UPIIntentPayload
+  | CardTokenPayload
+  | UPICollectPayload;
+
+export interface PaymentMethod {
+  id: string;
+  type: string;
+  brand: string;
+  title: string;
+  logoUrl: string;
+  instrumentTypeValue: string;
+  emiMethod?: {
+    brand: string;
+    issuer: string;
+    duration: number;
+    effectiveInterestRate: number;
+    merchantBorneInterestRate: number;
+    issuerTitle: string;
+    netAmountLocaleFull: string;
+    totalAmountLocaleFull: string;
+    emiAmountLocaleFull: string;
+    merchantBorneInterestAmountLocaleFull: string;
+    bankChargedInterestAmountLocaleFull: string;
+    interestChargedAmountLocaleFull: string;
+    cardlessEmiProviderTitle: string;
+    cardlessEmiProviderValue: string;
+    applicableOffer: {
+      code: string;
+      discount: {
+        percentage: number;
+        type: string;
+      };
+    };
+    processingFee: {
+      amountLocaleFull: string;
+    };
+  };
+}
+
+export interface RecommendedInstruments {
+  type: string;
+  brand: string;
+  instrumentRef: string;
+  displayValue: string;
+  logoUrl: string;
+  cardNickName: string;
+}
+
+export interface OrderItem {
+  id: string;
+  itemName: string;
+  quantity: number;
+  imageUrl: string;
+  amountWithoutTaxLocaleFull: string;
+  description : string | null,
+}
+
+export interface ErrorResponse {
+  status: {
+    reasonCode: string;
+    reason: string;
+  };
+}
+
+export interface FetchStatusResponse {
+  status : string,
+  transactionId : string,
+  reasonCode : string,
+  reason : string,
+  transactionTimestampLocale : string
+}
+
+export interface PaymentMethodPostResponse {
+  transactionId : string,
+  transactionTimestampLocale : string,
+  status : {
+    status : string,
+    reason : string,
+    reasonCode : string
+  },
+  actions : [PaymentActions]
+}
+
+interface PaymentActions {
+  method : string,
+  url : string,
+  type : string,
+  htmlPageString : string
+}
+
+export interface FetchCardDetails {
+  paymentMethod : {
+    id : string,
+    type : string,
+    brand : string,
+    issuer : string,
+    classification : string
+  }
+  methodEnabled : boolean,
+  issuerName : string | null,
+  issuerTitle : string | null
+}
+
+export interface HandlePaymentOptions {
+  response: PaymentExecutedPostResponse;
+  upiId?: string;
+  checkoutDetailsErrorMessage: string;
+  onSetStatus: (status: string) => void;
+  onSetTransactionId: (txnId: string) => void;
+  onSetPaymentUrl: (url: string) => void;
+  onSetPaymentHtml: (html: string) => void;
+  onSetFailedMessage: (message: string) => void;
+  onShowFailedModal: () => void;
+  onShowSuccessModal: (timestamp: string) => void;
+  onShowSessionExpiredModal: () => void;
+  onNavigateToTimer?: (upiId: string) => void;
+  onOpenUpiIntent?: (url: string) => void; 
+  setLoading: (loading: boolean) => void;
+}
+
+export type PaymentExecutedPostResponse =
+| {
+    apiStatus: APIStatus.Success;
+    data: PaymentMethodPostResponse;
+  }
+| {
+    apiStatus: APIStatus.Failed;
+    data: ErrorResponse;
+  };
+
+export type FetchStatusApiResponse = 
+| {
+  apiStatus: APIStatus.Success;
+  data: FetchStatusResponse;
+}
+| {
+  apiStatus: APIStatus.Failed;
+  data: ErrorResponse;
+};
+
+export type PaymentMethodFetchResponse = 
+| {
+  apiStatus: APIStatus.Success;
+  data: PaymentMethod[];
+}
+| {
+  apiStatus: APIStatus.Failed;
+  data: ErrorResponse;
+};
+
+export type SavedInstrumentFetchResponse = 
+| {
+  apiStatus: APIStatus.Success;
+  data: RecommendedInstruments[];
+}
+| {
+  apiStatus: APIStatus.Failed;
+  data: ErrorResponse;
+};
+
+
+export type FetchCardDetailsResponse = 
+| {
+  apiStatus: APIStatus.Success;
+  data: FetchCardDetails
+}
+| {
+  apiStatus: APIStatus.Failed;
+  data: ErrorResponse;
+};
+
+export type DeleteSavedAddressResponse = 
+| {
+  apiStatus: APIStatus.Success;
+  data: FetchSavedAddress
+}
+| {
+  apiStatus: APIStatus.Failed;
+  data: ErrorResponse;
+};
+
+export type FetchSavedAddressResponse = 
+| {
+  apiStatus: APIStatus.Success;
+  data: FetchSavedAddress[]
+}
+| {
+  apiStatus: APIStatus.Failed;
+  data: ErrorResponse;
+};
+
+export type FetchSessionDetailsResponse = 
+| {
+  apiStatus : APIStatus.Success,
+  data : SessionDetails
+}
+| {
+  apiStatus : APIStatus.Failed,
+  data : ErrorResponse
+}
+
+export interface HandleFetchStatusOptions {
+  response: FetchStatusApiResponse;
+  checkoutDetailsErrorMessage: string;
+  onSetStatus: (status: string) => void;
+  onSetTransactionId: (txnId: string) => void;
+  onSetFailedMessage: (message: string) => void;
+  onShowFailedModal: () => void;
+  onShowSuccessModal: (timestamp: string) => void;
+  onShowSessionExpiredModal: () => void;
+  setLoading?: (loading: boolean) => void;
+  stopBackgroundApiTask? : () => void
+}
+
+export enum TransactionStatus {
+  RequiresAction = 'REQUIRESACTION',
+  Failed = 'FAILED',
+  Rejected = 'REJECTED',
+  Approved = 'APPROVED',
+  Success = 'SUCCESS',
+  Paid = 'PAID',
+  Expired = 'EXPIRED',
+}
+
+export enum APIStatus {
+  Success = 'SUCCESS',
+  Failed = 'FAILED',
+}
+
+export interface FetchSavedAddress {
+  address1 : string,
+  address2 : string | null,
+  city : string,
+  state : string,
+  countryCode : string,
+  postalCode : string,
+  shopperRef : string,
+  addressRef : string,
+  labelType : string,
+  labelName : string | null,
+  name : string,
+  email : string,
+  phoneNumber : string
+}
+
+export interface SessionDetails {
+  configs : {
+    paymentMethods : PaymentMethod[],
+    enabledFields : EnabledFields[]
+  },
+  paymentDetails : {
+    context : {
+      countryCode : string,
+      localeCode : string,
+    },
+    money : {
+      amountLocaleFull : string,
+      currencySymbol : string,
+      currencyCode : string
+    },
+    shopper : {
+      firstName : string | null,
+      lastName : string | null,
+      phoneNumber : string | null,
+      email : string | null,
+      uniqueReference : string,
+      deliveryAddress : DeliveryAddress | null,
+      dateOfBirth : string | null,
+      panNumber : string | null
+    },
+    order : OrderDetails | null
+  },
+  merchantDetails : {
+    checkoutTheme : {
+      primaryButtonColor : string,
+      buttonTextColor : string
+    }
+  },
+  sessionExpiryTimestamp : string,
+  status : string,
+  lastPaidAtTimestamp : string,
+  lastTransactionId : string
+}
+
+interface EnabledFields {
+  field : string,
+  editable : boolean,
+  mandatory : boolean
+}
+interface OrderDetails {
+  shippingAmountLocaleFull : string | null,
+  taxAmountLocaleFull : string | null,
+  originalAmountLocaleFull : string | null,
+  items : OrderItem[] | null
+}

package/src/navigation.ts

@@ -0,0 +1,46 @@
+import { router } from 'expo-router';
+
+
+export const navigateToEmiScreen = () => {
+    router.push({
+        pathname: '/sdk/screens/emiScreen',
+    });
+};
+
+export const navigateToUpiTimerModal = (upiId: string) => {
+    router.push({
+      pathname: '/sdk/screens/upiTimerScreen',
+      params: {
+        upiId: upiId,
+      },
+    });
+};
+export const navigateToCardScreen = () => {
+    router.push({
+      pathname: '/sdk/screens/cardScreen',
+    });
+};
+
+export const navigateToWalletScreen = () => {
+    router.push({
+        pathname: '/sdk/screens/walletsScreen',
+    });
+};
+
+export const navigateToNetBankingScreen = () => {
+    router.push({
+        pathname: '/sdk/screens/netBankingScreen',
+    });
+};
+
+export const navigateToBNPLScreen = () => {
+    router.push({
+      pathname: '/sdk/screens/bnplScreen',
+    });
+};
+
+export const navigateToAddressScreen = () => {
+    router.push({
+      pathname: '/sdk/screens/addressScreen',
+    });
+};

package/src/postRequest/cardPostRequest.ts

@@ -0,0 +1,99 @@
+import Constants from 'expo-constants';
+import axios from 'axios';
+import { userDataHandler } from '../sharedContext/userdataHandler';
+import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import type { PaymentExecutedPostResponse, DeliveryAddress } from '../interface';
+import { getDeviceDetails } from '../utils/listAndObjectUtils';
+import { APIStatus } from '../interface';
+
+const cardPostRequest = async (
+  cardNumber: string,
+  expiryDate: string,
+  cvv: string,
+  holderName: string,
+  cardNickName: string,
+  isCheckboxClicked: boolean
+) : Promise<PaymentExecutedPostResponse> => {
+  const { userData } = userDataHandler;
+  const { checkoutDetails } = checkoutDetailsHandler;
+  const deviceDetails = getDeviceDetails()
+
+  const formatExpiry = (input: string) => {
+    const [month, year] = input.split('/');
+    return `20${year}-${month}`;
+  };
+  const isDeliveryAddressEmpty = (address: DeliveryAddress): boolean => {
+    return Object.values(address).every(
+      (value) => value === null || value === undefined || value === ''
+    );
+  };
+
+  const deliveryAddress = {
+    address1: userData.address1,
+    address2: userData.address2,
+    city: userData.city,
+    state: userData.state,
+    countryCode: userData.country,
+    postalCode: userData.pincode,
+    labelType: userData.labelType,
+    labelName: userData.labelName,
+  };
+  const requestBody = {
+    browserData: {
+      screenHeight:
+        Constants.platform?.ios?.screenHeight ||
+        Constants.platform?.android?.screenHeight ||
+        0,
+      screenWidth:
+        Constants.platform?.ios?.screenWidth ||
+        Constants.platform?.android?.screenWidth ||
+        0,
+      acceptHeader: 'application/json',
+      userAgentHeader: 'Expo App',
+      browserLanguage: 'en_US',
+      ipAddress: 'null',
+      colorDepth: 24,
+      javaEnabled: true,
+      timeZoneOffSet: new Date().getTimezoneOffset(),
+      packageId: Constants.manifest?.id || 'com.boxpay.checkout.sdk',
+    },
+    instrumentDetails: {
+      type: 'card/plain',
+      card: {
+        number: cardNumber.replace(/ /g, ''),
+        expiry: formatExpiry(expiryDate),
+        cvc: cvv,
+        holderName: holderName,
+        ...(checkoutDetails.shopperToken && isCheckboxClicked
+          ? { nickName: cardNickName }
+          : {}),
+      },
+      ...(checkoutDetails.shopperToken && isCheckboxClicked
+        ? { saveInstrument: true }
+        : {}),
+    },
+    shopper: {
+      email: userData.email,
+      firstName: userData.firstName,
+      gender: null,
+      lastName: userData.lastName,
+      phoneNumber: userData.phone,
+      uniqueReference: userData.uniqueId,
+      dateOfBirth: userData.dob,
+      panNumber: userData.pan,
+      deliveryAddress: isDeliveryAddressEmpty(deliveryAddress)
+        ? null
+        : deliveryAddress,
+    },
+    deviceDetails: deviceDetails,
+  };
+
+  try {
+    const response = await axios.post("/", requestBody);
+    return {apiStatus : APIStatus.Success, data : response.data};
+  } catch (error) {
+    return { apiStatus : APIStatus.Failed , data : {status: { reasonCode: 'API_FAILED', reason: `${error}` }} };
+  }
+};
+
+export default cardPostRequest;

package/src/postRequest/deleteSavedAddress.ts

@@ -0,0 +1,16 @@
+import axios from 'axios';
+import { APIStatus, type DeleteSavedAddressResponse } from '../interface';
+import { userDataHandler } from '../sharedContext/userdataHandler';
+
+const deleteSavedAddress = async (addressRef : string) : Promise<DeleteSavedAddressResponse>=> {
+    const { userData } = userDataHandler;
+    const API_URL = `/shoppers/${userData.uniqueId}/addresses/${addressRef}`;
+    try {
+    const response = await axios.delete(API_URL);
+    return {apiStatus : APIStatus.Success, data : response.data}
+    } catch (error) {
+    return {apiStatus : APIStatus.Failed, data : { status: { reasonCode: 'API_FAILED', reason: `${error}` } }};
+    }
+};
+
+export default deleteSavedAddress;

package/src/postRequest/emiPostRequest.ts

@@ -0,0 +1,121 @@
+import Constants from 'expo-constants';
+import axios from 'axios';
+import { userDataHandler } from '../sharedContext/userdataHandler';
+import type { PaymentExecutedPostResponse, DeliveryAddress } from '../interface';
+import { getDeviceDetails } from '../utils/listAndObjectUtils';
+import { APIStatus } from '../interface';
+
+interface EmiPostPayload {
+  cardNumber?: string;
+  expiryDate?: string;
+  cvv?: string;
+  holderName?: string;
+  cardType?: string;
+  offerCode?: string;
+  duration?: string;
+}
+
+const emiPostRequest = async (
+  {
+    cardNumber,
+    expiryDate,
+    cvv,
+    holderName,
+    cardType,
+    offerCode,
+    duration
+  } : EmiPostPayload
+) : Promise<PaymentExecutedPostResponse> => {
+  const { userData } = userDataHandler;
+  const deviceDetails = getDeviceDetails()
+  const formatExpiry = (input: string) => {
+    const [month, year] = input.split('/');
+    return `20${year}-${month}`;
+  };
+  const instrumentType = cardType
+    ? cardType.includes('Credit')
+      ? 'emi/cc'
+      : 'emi/dc'
+    : 'emi/cardless';
+
+  const instrumentDetails = cardType
+    ? {
+        type: instrumentType,
+        card: {
+          number: cardNumber?.replace(/ /g, ''),
+          expiry: formatExpiry(expiryDate ?? ""),
+          cvc: cvv,
+          holderName: holderName,
+        },
+        emi: {
+          duration: duration,
+        },
+      }
+    : {
+        type: 'emi/cardless',
+        emi: {
+          provider: duration,
+        },
+      };
+
+  const isDeliveryAddressEmpty = (address: DeliveryAddress): boolean => {
+    return Object.values(address).every(
+      (value) => value === null || value === undefined || value === ''
+    );
+  };
+
+  const deliveryAddress = {
+    address1: userData.address1,
+    address2: userData.address2,
+    city: userData.city,
+    state: userData.state,
+    countryCode: userData.country,
+    postalCode: userData.pincode,
+    labelType: userData.labelType,
+    labelName: userData.labelName,
+  };
+  const requestBody = {
+    browserData: {
+      screenHeight:
+        Constants.platform?.ios?.screenHeight ||
+        Constants.platform?.android?.screenHeight ||
+        0,
+      screenWidth:
+        Constants.platform?.ios?.screenWidth ||
+        Constants.platform?.android?.screenWidth ||
+        0,
+      acceptHeader: 'application/json',
+      userAgentHeader: 'Expo App',
+      browserLanguage: 'en_US',
+      ipAddress: 'null',
+      colorDepth: 24,
+      javaEnabled: true,
+      timeZoneOffSet: new Date().getTimezoneOffset(),
+      packageId: Constants.manifest?.id || 'com.boxpay.checkout.sdk',
+    },
+    instrumentDetails: instrumentDetails,
+    ...(offerCode?.trim() !== '' && { offers: [offerCode] }),
+    shopper: {
+      email: userData.email,
+      firstName: userData.firstName,
+      gender: null,
+      lastName: userData.lastName,
+      phoneNumber: userData.phone,
+      uniqueReference: userData.uniqueId,
+      dateOfBirth: userData.dob,
+      panNumber: userData.pan,
+      deliveryAddress: isDeliveryAddressEmpty(deliveryAddress)
+        ? null
+        : deliveryAddress,
+    },
+    deviceDetails: deviceDetails,
+  };
+  try {
+    const response = await axios.post("/", requestBody);
+    return {apiStatus : APIStatus.Success, data : response.data};
+  } catch (error) {
+    return { apiStatus : APIStatus.Failed, data : {status: { reasonCode: 'API_FAILED', reason: `${error}` }} };
+  }
+};
+
+export default emiPostRequest;