react-native-hyperswitch-dev-sdk 0.4.1

package/src/context/HyperElements.tsx

@@ -0,0 +1,81 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+import { PaymentSession } from '../types/definitions';
+import { Elements, HyperswitchSession } from '../types/elements';
+
+interface HyperElementsContext {
+  paymentSession: PaymentSession | null;
+  elements: Elements | null;
+  publishableKey: string | null;
+  sdkAuthorization: string | null;
+  loading: boolean;
+  error: Error | null;
+}
+
+const HyperElementsContext = createContext<HyperElementsContext | undefined>(undefined);
+
+HyperElementsContext.displayName = 'HyperElementsContext';
+
+export interface HyperElementsProps {
+  hyper: HyperswitchSession | Promise<HyperswitchSession> | null;
+  options: { sdkAuthorization: string };
+  children: ReactNode;
+}
+
+export function HyperElements({ hyper, options, children }: HyperElementsProps) {
+  const [paymentSession, setPaymentSession] = useState<PaymentSession | null>(null);
+  const [elements, setElements] = useState<Elements | null>(null);
+  const [publishableKey, setPublishableKey] = useState<string | null>(null);
+  const [sdkAuthorization, setSdkAuthorization] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (!hyper) return;
+
+    let cancelled = false;
+
+    (async () => {
+      try {
+        const session = await Promise.resolve(hyper);
+        const els = await session.elements({
+          sdkAuthorization: options.sdkAuthorization,
+        });
+
+        if (!cancelled) {
+          setPaymentSession({
+            ...els,
+          } as PaymentSession);
+          setElements(els);
+          setPublishableKey(session.publishableKey ?? null);
+          setSdkAuthorization(options.sdkAuthorization ?? null);
+          setLoading(false);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err : new Error(String(err)));
+          setLoading(false);
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [hyper, options.sdkAuthorization]);
+
+  return (
+    <HyperElementsContext.Provider
+      value={{ paymentSession, elements, publishableKey, sdkAuthorization, loading, error }}
+    >
+      {children}
+    </HyperElementsContext.Provider>
+  );
+}
+
+export function useHyperElementsContext(): HyperElementsContext {
+  const ctx = useContext(HyperElementsContext);
+  if (ctx === undefined) {
+    throw new Error('useHyperElementsContext must be used inside <HyperElements>');
+  }
+  return ctx;
+}

package/src/context/PaymentSession.ts

@@ -0,0 +1,121 @@
+import NativeHyperswitchModule from '../specs/NativeHyperswitchModule';
+import type {
+  HyperswitchConfiguration,
+  NativePaymentSheetPayload,
+  PaymentSession,
+  PaymentSessionConfiguration,
+} from '../types/definitions';
+import { buildPresentPaymentSheetPayload } from '../utils/LaunchOptions';
+import { getCustomerSavedPaymentMethods } from './SavedPaymentMethods';
+import type { PaymentResult } from '../types/paymentresult';
+import type { CustomerSavedPaymentMethodsSession } from '../types/savedPaymentMethods';
+import { isInitializing, isSheetPresented, setSheetPresented } from '../utils/InitializationState';
+
+interface NativeResponse {
+  status: string;
+  message: string;
+  data?: any;
+}
+
+export function parseNativeResponse(
+  raw: string | NativeResponse
+): NativeResponse {
+  if (typeof raw === 'object' && raw !== null) {
+    return raw as NativeResponse;
+  }
+  try {
+    return JSON.parse(raw as string) as NativeResponse;
+  } catch {
+    return { status: 'failed', message: String(raw) };
+  }
+}
+
+export function mapStatus(status: string): PaymentResult['type'] {
+  switch (status) {
+    case 'succeeded':
+    case 'completed':
+    case 'success':
+      return 'completed';
+    case 'cancelled':
+    case 'canceled':
+      return 'canceled';
+    case 'failed':
+    case 'error':
+    default:
+      return 'failed';
+  }
+}
+
+export function mapNativeResponseToPaymentResult(
+  raw: string | NativeResponse
+): PaymentResult {
+  const parsed = parseNativeResponse(raw);
+  return {
+    type: mapStatus(parsed.status),
+    message: parsed.message,
+  };
+}
+
+export async function presentPaymentSheetWithPayload(
+  payload: NativePaymentSheetPayload
+): Promise<PaymentResult> {
+  if (isInitializing()) {
+    return {
+      type: 'failed',
+      message: 'SDK is reloading. Please wait for initialisation to complete before presenting the payment sheet.',
+    };
+  }
+  if (isSheetPresented()) {
+    // A sheet is already open (e.g. a hot-reload fired while the sheet was visible).
+    // Silently skip so the existing sheet is not covered by a new one.
+    return {
+      type: 'canceled',
+      message: 'A payment sheet is already presented.',
+    };
+  }
+  setSheetPresented(true);
+  try {
+    const raw = await NativeHyperswitchModule.presentPaymentSheet({
+      hyperswitchConfig: payload.hyperswitchConfig,
+      paymentSessionConfig: payload.paymentSessionConfig,
+      configuration: payload.configuration,
+    });
+    return mapNativeResponseToPaymentResult(raw);
+  } finally {
+    setSheetPresented(false);
+  }
+}
+
+export async function updateIntent(
+  _intentResolver: () => Promise<PaymentSessionConfiguration>
+): Promise<void> {
+}
+
+export function createPaymentSession(
+  hyperswitchConfig: HyperswitchConfiguration,
+  paymentSessionConfig: PaymentSessionConfiguration
+): PaymentSession {
+  return {
+    async presentPaymentSheet(
+      configuration?: Record<string, unknown>
+    ): Promise<PaymentResult> {
+      const payload = buildPresentPaymentSheetPayload(
+        hyperswitchConfig,
+        paymentSessionConfig,
+        configuration
+      );
+      return presentPaymentSheetWithPayload(payload);
+    },
+
+    async getCustomerSavedPaymentMethods(
+      configuration?: Record<string, unknown>
+    ): Promise<CustomerSavedPaymentMethodsSession> {
+      return getCustomerSavedPaymentMethods(
+        hyperswitchConfig,
+        paymentSessionConfig,
+        configuration
+      );
+    },
+    updateIntent,
+  };
+}

package/src/context/SavedPaymentMethods.ts

@@ -0,0 +1,80 @@
+import NativeHyperswitchModule from '../specs/NativeHyperswitchModule';
+import {
+  HyperswitchConfiguration,
+  PaymentSessionConfiguration,
+} from '../types/definitions';
+import {
+  CustomerSavedPaymentMethodsSession,
+  CustomerLastUsedPaymentMethod,
+} from '../types/savedPaymentMethods';
+import { buildPresentPaymentSheetPayload } from '../utils/LaunchOptions';
+
+function parsePaymentMethod(raw: string): CustomerLastUsedPaymentMethod {
+  const parsed = JSON.parse(raw) as CustomerLastUsedPaymentMethod & {
+    billing?: string | object | null;
+  };
+  if (parsed.billing && typeof parsed.billing === 'string') {
+    try {
+      parsed.billing = JSON.parse(parsed.billing);
+    } catch {
+      parsed.billing = null;
+    }
+  }
+  return parsed as CustomerLastUsedPaymentMethod;
+}
+
+export function createCustomerSavedPaymentMethodsSession(): CustomerSavedPaymentMethodsSession {
+  return {
+    async getCustomerLastUsedPaymentMethodData(): Promise<CustomerLastUsedPaymentMethod | null> {
+      const raw =
+        await NativeHyperswitchModule.getCustomerLastUsedPaymentMethodData();
+      return parsePaymentMethod(raw);
+    },
+
+    async getCustomerDefaultSavedPaymentMethodData(): Promise<CustomerLastUsedPaymentMethod | null> {
+      const raw =
+        await NativeHyperswitchModule.getCustomerDefaultSavedPaymentMethodData();
+      return parsePaymentMethod(raw);
+    },
+
+    async getCustomerSavedPaymentMethodData(): Promise<CustomerLastUsedPaymentMethod | null> {
+      const raw =
+        await NativeHyperswitchModule.getCustomerSavedPaymentMethodData();
+      return parsePaymentMethod(raw);
+    },
+
+    async confirmWithCustomerLastUsedPaymentMethod(args?: {
+      id?: string;
+    }): Promise<any> {
+      const raw = await NativeHyperswitchModule
+        .confirmWithCustomerLastUsedPaymentMethod
+        // args?.id
+        ();
+      // return mapNativeResponseToPaymentResult(raw);
+    },
+
+    async confirmWithCustomerDefaultPaymentMethod(args?: {
+      id?: string;
+    }): Promise<any> {
+      const raw = await NativeHyperswitchModule
+        .confirmWithCustomerDefaultPaymentMethod
+        // args?.id
+        ();
+      // return mapNativeResponseToPaymentResult(raw);
+    },
+  };
+}
+
+export async function getCustomerSavedPaymentMethods(
+  hyperswitchConfig: HyperswitchConfiguration,
+  paymentSessionConfig: PaymentSessionConfiguration,
+  configuration?: Record<string, unknown>
+): Promise<CustomerSavedPaymentMethodsSession> {
+  const payload = buildPresentPaymentSheetPayload(
+    hyperswitchConfig,
+    paymentSessionConfig,
+    configuration
+  );
+  await NativeHyperswitchModule.getCustomerSavedPaymentMethods(payload);
+  return createCustomerSavedPaymentMethodsSession();
+}

package/src/context/WidgetRegistry.ts

@@ -0,0 +1,74 @@
+import {
+  confirmPayment as nativeConfirmPayment,
+  updateIntentInitForWidget,
+  updateIntentCompleteForWidget,
+} from '../modules/NativeHyperswitchSdk';
+import type { paymentResult } from '../modules/NativeHyperswitchSdk';
+
+const widgetHashMap: Record<string, number | undefined> = {};
+
+export function registerWidget(widgetId: string, nativeViewId: number): void {
+  widgetHashMap[widgetId] = nativeViewId;
+}
+
+export function getWidget(widgetId: string): number | undefined {
+  return widgetHashMap[widgetId];
+}
+
+export function unregisterWidget(widgetId: string): void {
+  delete widgetHashMap[widgetId];
+}
+
+export function confirmPayment(widgetId: string): Promise<paymentResult> {
+  const nativeId = widgetHashMap[widgetId];
+  if (nativeId !== undefined) {
+    return new Promise((resolve) => {
+      nativeConfirmPayment(nativeId, (result: paymentResult) => {
+        resolve({
+          status: result.status,
+          message: result.message,
+          type: result.type,
+        });
+      });
+    });
+  }
+  return Promise.resolve({
+    status: 'failed',
+    message: `Widget ${widgetId} not found or not mounted`,
+    type: undefined,
+  });
+}
+
+export function updateIntentInitForAllWidgets(): Promise<paymentResult[]> {
+  const promises = Object.values(widgetHashMap)
+    .filter((nativeId): nativeId is number => nativeId !== undefined)
+    .map((nativeId) => {
+      return new Promise<paymentResult>((resolve) => {
+        updateIntentInitForWidget(nativeId, (result: paymentResult) => {
+          resolve(result);
+        });
+      });
+    });
+
+  return Promise.all(promises);
+}
+
+export function updateIntentCompleteForAllWidgets(
+  sdkAuthorization: string
+): Promise<paymentResult[]> {
+  const promises = Object.values(widgetHashMap)
+    .filter((nativeId): nativeId is number => nativeId !== undefined)
+    .map((nativeId) => {
+      return new Promise<paymentResult>((resolve) => {
+        updateIntentCompleteForWidget(
+          nativeId,
+          sdkAuthorization,
+          (result: paymentResult) => {
+            resolve(result);
+          }
+        );
+      });
+    });
+
+  return Promise.all(promises);
+}

package/src/context/hooks.ts

@@ -0,0 +1,79 @@
+import { useCallback, useMemo } from 'react';
+import { useHyperElementsContext } from './HyperElements';
+import { PaymentSession, PaymentSessionConfiguration, PaymentElementHandle } from '../types/definitions';
+import { ElementsActions } from '../types/elements';
+import { CustomerSavedPaymentMethodsSession } from '../types/savedPaymentMethods';
+
+export function usePaymentSession(): PaymentSession | null {
+  const { paymentSession } = useHyperElementsContext();
+
+  const updateIntent = useCallback(
+    async (intentResolver: () => Promise<PaymentSessionConfiguration>): Promise<void> => {
+      if (!paymentSession) {
+        throw new Error('HyperElements is not initialized');
+      }
+
+      return paymentSession.updateIntent(intentResolver);
+    },
+    [paymentSession],
+  );
+
+  return useMemo(
+    () => (paymentSession ? { ...paymentSession, updateIntent } : paymentSession),
+    [paymentSession, updateIntent],
+  );
+}
+
+export function useElements(): ElementsActions {
+  const { elements } = useHyperElementsContext();
+
+  const confirmPayment = useCallback(
+    async (
+      paymentElement: { current: PaymentElementHandle | null } | string,
+      options?: { confirmParams?: Record<string, Object> },
+    ): Promise<PaymentResult> => {
+      if (!elements) {
+        throw new Error('HyperElements is not initialized');
+      }
+      if (elements.confirmPayment) {
+        return elements.confirmPayment(paymentElement, options);
+      }
+
+      if (typeof paymentElement === 'string') {
+        throw new Error('confirmPayment by widget id is not supported by this Hyper elements handle');
+      }
+
+      const ref = paymentElement.current;
+      if (!ref) {
+        throw new Error('PaymentElement reference is not mounted');
+      }
+      return ref.confirmPayment(options);
+    },
+    [elements],
+  );
+
+  const updateIntent = useCallback(
+    async (intentResolver: () => Promise<PaymentSessionConfiguration>): Promise<void> => {
+      if (!elements) {
+        throw new Error('HyperElements is not initialized');
+      }
+
+      return elements.updateIntent(intentResolver);
+    },
+    [elements],
+  );
+
+  const getCustomerSavedPaymentMethods = useCallback(async (): Promise<CustomerSavedPaymentMethodsSession> => {
+    if (!elements) {
+      throw new Error('HyperElements is not initialized');
+    }
+
+    return elements.getCustomerSavedPaymentMethods();
+  }, [elements]);
+
+  return {
+    getCustomerSavedPaymentMethods,
+    confirmPayment,
+    updateIntent,
+  };
+}

package/src/index.ts

@@ -0,0 +1,53 @@
+import type {
+  HyperswitchConfiguration,
+  PaymentSession,
+  PaymentSessionConfiguration,
+  HyperswitchSession
+} from './types/definitions';
+
+export type * from './types/definitions';
+export type * from './types/elements';
+export type * from './types/NativeModuleTypes';
+export type * from './types/PaymentSheetConfiguration'
+
+import NativeHyperswitchModule from './specs/NativeHyperswitchModule';
+import { createPaymentSession } from './context/PaymentSession';
+import { Elements } from './types/elements';
+import { createElements } from './context/Elements';
+import { setInitializing } from './utils/InitializationState';
+
+export function loadHyper(
+  config: HyperswitchConfiguration
+): Promise<HyperswitchSession> {
+  setInitializing(true);
+  return NativeHyperswitchModule.initialise(
+    config.publishableKey,
+    config.platformPublishableKey ?? '',
+    config.profileId ?? '',
+    config.environment ?? 'PROD',
+    config.customEndpoints ?? {}
+  ).then(() => {
+    setInitializing(false);
+    return {
+      publishableKey: config.publishableKey,
+      async initPaymentSession(
+        options: PaymentSessionConfiguration
+      ): Promise<PaymentSession> {
+        return createPaymentSession(config, options);
+      },
+      async elements(options: PaymentSessionConfiguration): Promise<Elements> {
+        return createElements(config, options);
+      },
+    }
+  }).catch((error) => {
+    setInitializing(false);
+    console.error('Error initializing Hyperswitch SDK:', error);
+    throw error;
+  });
+
+}
+
+
+export const Hyperswitch = {
+  init: loadHyper,
+};

package/src/modules/NativeHyperswitchSdk.ts

@@ -0,0 +1,155 @@
+import { NativeModules } from 'react-native';
+import type { options as PaymentSheetConfigurationOptions } from '../types/PaymentSheetConfiguration';
+
+export type initPaymentSessionParams = { sdkAuthorization?: string };
+
+export type initPaymentSessionResult = { error?: string };
+
+export type presentPaymentSheetParams = PaymentSheetConfigurationOptions;
+
+export type presentPaymentSheet = (
+  params: presentPaymentSheetParams
+) => Promise<string>;
+
+export type paymentResult = {
+  status: string;
+  message: string;
+  error?: string;
+  type?: string;
+};
+
+export type error = { code?: string; message?: string };
+
+export type presentPaymentSheetResult = {
+  error?: error;
+  paymentResult?: paymentResult;
+};
+
+export type cardDetails = {
+  expiry_year: string;
+  card_issuer: string;
+  expiry_month: string;
+  nick_name: string;
+  last4_digits: string;
+  card_holder_name: string;
+  card_network: string;
+  card_isin: string;
+  scheme: string;
+  issuer_country: string;
+  card_type: string;
+  saved_to_locker: boolean;
+};
+
+export type savedPaymentMethod = {
+  card?: cardDetails;
+  requires_cvv: boolean;
+  payment_method_str: string;
+  payment_method_type: string;
+  payment_experience: string[];
+  default_payment_method_set: boolean;
+  recurring_enabled: boolean;
+  payment_method_issuer: string;
+  last_used_at: string;
+  installment_payment_enabled: boolean;
+  payment_method_id: string;
+  customer_id: string;
+  payment_token: string;
+  created: string;
+};
+
+type ConfirmPaymentCallback = (result: paymentResult) => void;
+type ConfirmPaymentCVCCallback = (result: paymentResult) => void;
+
+type NativePaymentWidget = {
+  confirmPayment: (viewId: number, callback: ConfirmPaymentCallback) => void;
+  updateIntentInitForWidget: (
+    viewId: number,
+    callback: ConfirmPaymentCallback
+  ) => void;
+  updateIntentCompleteForWidget: (
+    viewId: number,
+    sdkAuthorization: string,
+    callback: ConfirmPaymentCallback
+  ) => void;
+  confirmPaymentCVC: (
+    viewId: number,
+    paymentToken: string,
+    paymentMethodId: string,
+    callback: ConfirmPaymentCVCCallback
+  ) => void;
+};
+
+const nativePaymentWidgetDict = NativeModules.NativePaymentWidget ?? {};
+
+function getFunctionFromModule<T>(key: string, defaultFn: T): T {
+  const fn = (nativePaymentWidgetDict as Record<string, unknown>)[key];
+  return typeof fn === 'function' ? (fn as T) : defaultFn;
+}
+
+const nativePaymentWidget: NativePaymentWidget = {
+  confirmPayment: getFunctionFromModule(
+    'confirmPayment',
+    (_viewId: number, _callback: ConfirmPaymentCallback) => {}
+  ),
+  updateIntentInitForWidget: getFunctionFromModule(
+    'updateIntentInitForWidget',
+    (_viewId: number, _callback: ConfirmPaymentCallback) => {}
+  ),
+  updateIntentCompleteForWidget: getFunctionFromModule(
+    'updateIntentCompleteForWidget',
+    (
+      _viewId: number,
+      _sdkAuthorization: string,
+      _callback: ConfirmPaymentCallback
+    ) => {}
+  ),
+  confirmPaymentCVC: getFunctionFromModule(
+    'confirmPaymentCVC',
+    (
+      _viewId: number,
+      _paymentToken: string,
+      _paymentMethodId: string,
+      _callback: ConfirmPaymentCVCCallback
+    ) => {}
+  ),
+};
+
+export function confirmPayment(
+  viewId: number,
+  callback: ConfirmPaymentCallback
+): void {
+  nativePaymentWidget.confirmPayment(viewId, callback);
+}
+
+export function updateIntentInitForWidget(
+  viewId: number,
+  callback: ConfirmPaymentCallback
+): void {
+  nativePaymentWidget.updateIntentInitForWidget(viewId, callback);
+}
+
+export function updateIntentCompleteForWidget(
+  viewId: number,
+  sdkAuthorization: string,
+  callback: ConfirmPaymentCallback
+): void {
+  nativePaymentWidget.updateIntentCompleteForWidget(
+    viewId,
+    sdkAuthorization,
+    callback
+  );
+}
+
+export function confirmPaymentCVC(
+  viewId: number,
+  paymentToken: string,
+  paymentMethodId: string,
+  callback: ConfirmPaymentCVCCallback
+): void {
+  nativePaymentWidget.confirmPaymentCVC(
+    viewId,
+    paymentToken,
+    paymentMethodId,
+    callback
+  );
+}

package/src/specs/ApplePayViewNativeComponent.ts

@@ -0,0 +1,11 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
+import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface NativeProps extends ViewProps {
+  buttonType?: string;
+  buttonStyle?: string;
+  cornerRadius?: Double;
+}
+
+export default codegenNativeComponent<NativeProps>('ApplePayView');

package/src/specs/NativeHyperHeadless.ts

@@ -0,0 +1,22 @@
+import type {TurboModule} from 'react-native';
+import {TurboModuleRegistry} from 'react-native';
+
+/**
+ * Codegen spec for the HyperHeadless TurboModule.
+ *
+ * Naming convention: Native<ModuleName>.ts — required by the RN codegen.
+ * number → Double on Android; Object → ReadableMap; Array<Object> → ReadableArray.
+ */
+export interface Spec extends TurboModule {
+  getPaymentSession(
+    rootTag: number,
+    defaultPaymentMethod: Object,
+    lastUsedPaymentMethod: Object,
+    allPaymentMethods: Array<Object>,
+    callback: (result: Object) => void,
+  ): void;
+
+  exitHeadless(rootTag: number, status: string): void;
+}
+
+export default TurboModuleRegistry.get<Spec>('HyperHeadless');