boxpay-checkout-reactnative-sdk 1.1.7-beta2 → 2.0.1

package/src/interface.ts

@@ -1,629 +1,52 @@
 export interface PaymentResultObject {
   status: string;
   transactionId: string;
+  inquiryToken: string
+}
+
+export enum SICheckboxState {
+  CHECKED_AND_DISABLED = "CHECKED_AND_DISABLED",
+  CHECKED_AND_ENABLED = "CHECKED_AND_ENABLED",
+  UNCHECKED_AND_ENABLED = "UNCHECKED_AND_ENABLED",
 }
 
 export enum ConfigurationOptions {
   ShowBoxpaySuccessScreen = 'SHOW_BOXPAY_SUCCESS_SCREEN',
+  ShowBoxpayFailedScreen = 'SHOW_BOXPAY_FAILED_SCREEN',
   EnableSandboxEnv = 'ENABLE_SANDBOX_ENV',
   ShowUPIQROnLoad = 'SHOW_UPI_QR_ON_LOAD',
-  ShowSICheckbox = 'SHOW_SI_CHECKBOX'
+  SICheckBoxState = 'SI_CHECKBOX_STATE'
 }
 
 export enum UIConfigurationOptions {
   FontFamily = 'FONT_FAMILY',
   CTABorderRadius = 'CTA_BORDER_RADIUS',
+  TextInputFields = 'TEXT_INPUT_FIELDS'
 }
 
-export interface FontConfiguration {
-  regular?: string;
-  medium?: string;
-  semiBold?: string;
-  bold?: string;
-  extraBold?: string
+// 👇 Each key has its own strict type
+export interface TextInputFields {
+  focusedTextInputBorderColor?: string;
+  unfocusedTextInputBorderColor?: string;
 }
 
-// 👇 Each key has its own strict type
+// Mirrors Android's UIConfiguration, keyed by the UIConfigurationOptions enum
 export interface UIConfiguration {
-  [UIConfigurationOptions.FontFamily]?: FontConfiguration;
+  [UIConfigurationOptions.FontFamily]?: string;
   [UIConfigurationOptions.CTABorderRadius]?: number;
+  [UIConfigurationOptions.TextInputFields]?: TextInputFields;
 }
 
 export interface BoxpayCheckoutProps {
   token: string;
-  configurationOptions?: Partial<Record<ConfigurationOptions, boolean>> | null;
-  uiConfiguration?: UIConfiguration | null;
-  onPaymentResult: (result: PaymentResultObject) => void;
+  configurationOptions?:
+  | Partial<Record<ConfigurationOptions, boolean | SICheckboxState | null>>
+  | null;
+  onPaymentResult?: (result: any) => void;
   shopperToken?: string | null;
+  uiConfiguration?: UIConfiguration | null;
 }
 
-export interface CheckoutDetails {
-  currencySymbol: string;
-  currencyCode : string,
-  amount: string;
-  token: string;
-  fontFamily : FontConfiguration,
-  ctaBorderRadius : number,
-  buttonColor: string;
-  buttonTextColor : string;
-  headerColor : string;
-  headerTextColor : 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,
-  isUpiQRMethodEnabled : boolean,
-  isCardMethodEnabled : boolean,
-  isWalletMethodEnabled : boolean,
-  isNetBankingMethodEnabled : boolean,
-  isEmiMethodEnabled : boolean,
-  isBnplMethodEnabled : boolean,
-  isUPIOtmIntentMethodEnabled : boolean,
-  isUPIOtmCollectMethodEnabled : boolean,
-  isUPIOtmQRMethodEnabled : boolean,
-  isOrderItemDetailsVisible : boolean,
-  isSICheckboxVisible : boolean,
-  isSubscriptionCheckout : boolean
-}
-
-interface AnalyticsResponse {
-  id : string
-}
-
-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;
-  completePhoneNumber: string | null;
-  phoneCode : string | null;
-  dob: string | null;
-  pan: string | null;
-  address1: string | null;
-  address2: string | null;
-  city: string | null;
-  state: string | null;
-  countryCode: string | null;
-  countryName : 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' | 'upiotm/intent';
-  upiAppDetails?: {
-    upiApp: string; // Or a more specific type for the UPI app identifier
-  };
-}
-
-interface CardTokenPayload {
-  type: 'card/token';
-  savedCard: {
-    instrumentRef: string;
-  };
-}
-
-interface UPIQRPayload {
-  type : 'upi/qr' | 'upiotm/qr'
-}
-
-interface UPICollectPayload {
-  type: 'upi/collect' | 'upiotm/collect';
-  upi?: {
-    instrumentRef?: string;
-    shopperVpa?: string;
-  };
-}
-
-export type InstrumentDetails =
-  | UPIIntentPayload
-  | CardTokenPayload
-  | UPICollectPayload
-  | UPIQRPayload
-
-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,
-  content : 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;
-  onOpenQr? : (qrImage : string) => void
-  onOpenUpiIntent?: (url: string) => void; 
-  setLoading: (loading: boolean) => void;
-}
-
-export interface SurChargeResponse {
-  amountBeforeSurcharge : {
-    amount : number,
-    currencyCode : string
-  },
-  appliedSurcharges : {
-    surchargeDetails : {
-      title : string,
-      merchantId : string,
-      surchargeCode : string,
-      applicableOn : string
-    },
-    calculatedSurchargeFee : number
-  }[],
-  finalAmountAfterSurcharge : {
-    amount : number,
-    currencyCode : string
-  }
-}
-
-export type FetchSurChargeResponse =
-| {
-    apiStatus: APIStatus.Success;
-    data: SurChargeResponse;
-  }
-| {
-    apiStatus: APIStatus.Failed;
-    data: ErrorResponse;
-  };
-
-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 AnalyticsApiResponse = 
-| {
-  apiStatus: APIStatus.Success;
-  data: AnalyticsResponse;
-}
-| {
-  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
-  isFromUPIIntentFlow : boolean
-}
-
-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,
-      amount : number
-    },
-    shopper : {
-      firstName : string | null,
-      lastName : string | null,
-      phoneNumber : string | null,
-      email : string | null,
-      uniqueReference : string,
-      deliveryAddress : DeliveryAddress | null,
-      dateOfBirth : string | null,
-      panNumber : string | null
-    },
-    subscriptionDetails : SubscriptionDetails | null,
-    order : OrderDetails | null
-  },
-  merchantDetails : {
-    checkoutTheme : {
-      primaryButtonColor : string,
-      buttonTextColor : string,
-      headerColor : string,
-      headerTextColor : string
-    }
-  },
-  sessionExpiryTimestamp : string,
-  status : string,
-  lastPaidAtTimestampLocale : 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
-}
-
-interface SubscriptionDetails {
-  type : string,
-  maxAmountLocaleFull : string
-}
-
-export enum AnalyticsEvents {
-  CHECKOUT_LOADED = "CHECKOUT_LOADED",
-  ADDRESS_UPDATED = "ADDRESS_UPDATED",
-  PAYMENT_CATEGORY_SELECTED = "PAYMENT_CATEGORY_SELECTED",
-  PAYMENT_METHOD_SELECTED = "PAYMENT_METHOD_SELECTED",
-  PAYMENT_INITIATED = "PAYMENT_INITIATED",
-  PAYMENT_INSTRUMENT_PROVIDED = "PAYMENT_INSTRUMENT_PROVIDED",
-  UPI_APP_NOT_FOUND = "UPI_APP_NOT_FOUND",
-  FAILED_TO_LAUNCH_UPI_INTENT = "FAILED_TO_LAUNCH_UPI_INTENT",
-  ERROR_GETTING_UPI_URL = "ERROR_GETTING_UPI_URL",
-  SDK_CRASH = "SDK_CRASH",
-  PAYMENT_RESULT_SCREEN_DISPLAYED = "PAYMENT_RESULT_SCREEN_DISPLAYED"
-}
-
-export interface CardScreenParams {
-  duration?: number;
-  bankName?: string;
-  bankUrl?: string;
-  offerCode?: string;
-  amount?: string; 
-  percent?: number; 
-  cardType?: string;
-  issuerBrand?: string;
-}
-
-export interface UPITimerScreenParams {
-  upiId : string
-}
-
-export interface AddressScreenParams {
-  isNewAddress : boolean
-}
-
-export interface CountryDetails {
-  fullName: string;
-  isdCode: string;
-  phoneNumberLength: number[];
-  threeLetterCode: string;
-}
-
-
-export interface GetInstantOffersResponse {
-  title : string | null,
-  description: string | null,
-  terms : string | null,
-  type : string | null,
-  code : string | null,
-  discount : OfferDiscount | null,
-  enabled : boolean | null,
-  visibleOnCheckout : boolean | null,
-  criteria : Criteria | null
-}
-
-export interface OfferDiscount{
-  percentage : number | null,
-  amount : number | null,
-  type : string | null,
-  maxAmount : number | null
-}
-
-export interface Criteria{
-  startDate : string | null,
-  endDate : string | null,
-  minMoney : MinMoney | null,
-  applicableTo : Applicable | null
-}
-
-export interface MinMoney {
-  amount : number | null ;
-  currencyCode : string | null
-}
-
-export interface Applicable {
-  paymentMethods : OfferPaymentMethod[] | null
-}
-
-export interface OfferPaymentMethod {
-  type : string | null;
-  issuer : string | null
-}
-
-export type GetInstantDiscountResponse = 
-| {
-  apiStatus: APIStatus.Success;
-  data: GetInstantOffersResponse[]
-}
-| {
-  apiStatus: APIStatus.Failed;
-  data: ErrorResponse;
-};
+export interface BoxpayElementsProps extends BoxpayCheckoutProps {
+  paymentMethodList: string[];   // ['UPI', 'CARDS', ...]
+}

package/src/native.ts

@@ -0,0 +1,72 @@
+import {
+  findNodeHandle,
+  NativeEventEmitter,
+  NativeModules,
+  requireNativeComponent,
+  UIManager,
+  type HostComponent,
+  type NativeSyntheticEvent,
+  type ViewProps,
+} from 'react-native';
+
+const { CrossPlatform } = NativeModules;
+
+export const startCheckout = (token: string, options: object = {}) =>
+  CrossPlatform.startCheckout(token, options);
+
+export const onPaymentResult = (cb: (r: any) => void) => {
+  const emitter = new NativeEventEmitter(CrossPlatform);
+  return emitter.addListener('BoxPayPaymentResult', cb);
+};
+
+interface BoxPayElementsConfig {
+  token: string;
+  isTestEnv?: boolean;
+  shopperToken?: string | null;
+  paymentMethodList?: string[];
+  fontFamily?: string;
+  ctaBorderRadius?: number;
+  focusedTextInputBorderColor?: string;
+  unfocusedTextInputBorderColor?: string;
+}
+
+interface BoxPayElementsNativeProps extends ViewProps {   // ViewProps gives it `style`
+  config: BoxPayElementsConfig;
+  onPayableChanged?: (e: NativeSyntheticEvent<{ payable: boolean }>) => void;
+}
+
+export const BoxPayElements: HostComponent<BoxPayElementsNativeProps> =
+  requireNativeComponent<BoxPayElementsNativeProps>('BoxPayElementsView');
+
+// UIManager.getViewManagerConfig is typed to return a loose `Object`,
+// so we cast to the shape RN actually returns at runtime (Commands map).
+interface ViewManagerConfig {
+  Commands?: Record<string, number>;
+}
+
+export const onDismiss = (cb: () => void) => {
+  const emitter = new NativeEventEmitter(CrossPlatform);
+  return emitter.addListener('BoxPayDismiss', cb);
+};
+
+export const payElements = (
+  ref: React.ElementRef<typeof BoxPayElements> | null
+) => {
+  const node = findNodeHandle(ref);
+  if (node == null) {
+    console.warn('BoxPayElements: unable to resolve native node handle');
+    return;
+  }
+
+  const config = UIManager.getViewManagerConfig(
+    'BoxPayElementsView'
+  ) as ViewManagerConfig;
+  const commandId = config?.Commands?.pay;
+
+  if (commandId == null) {
+    console.warn('BoxPayElements: "pay" command not found on native view manager');
+    return;
+  }
+
+  UIManager.dispatchViewManagerCommand(node, commandId, []);
+};