react-native-hyperswitch-dev-sdk 0.4.1

package/src/types/definitions.ts

@@ -0,0 +1,109 @@
+import type { PaymentResult } from './paymentresult';
+
+export interface OverrideEndpointConfiguration {
+  customBackendEndpoint?: string;
+  customLoggingEndpoint?: string;
+  customAssetEndpoint?: string;
+  customSDKConfigEndpoint?: string;
+  customAirborneEndpoint?: string;
+}
+
+export interface CommonEndpoint {
+  commonEndpoint: string;
+}
+
+export interface OverrideEndpoints {
+  overrideEndpoints: OverrideEndpointConfiguration;
+}
+
+export type HyperswitchEnvironment = 'PROD' | 'SANDBOX' | 'INTEG';
+
+export type ElementType = 'paymentElement' | 'cvcWidget';
+
+
+export interface HyperswitchConfiguration {
+  publishableKey: string;
+  platformPublishableKey?: string;
+  profileId?: string;
+  environment?: HyperswitchEnvironment;
+  customEndpoints?: CommonEndpoint | OverrideEndpoints;
+}
+
+export interface PaymentSessionConfiguration {
+  sdkAuthorization: string;
+}
+
+/**
+ * Full payload sent to the native SDK. It is assembled internally from the
+ * merchant-supplied configuration plus the SDK/payment-session metadata.
+ */
+export interface NativePaymentSheetPayload {
+  hyperswitchConfig: Record<string, unknown>;
+  paymentSessionConfig: { sdkAuthorization: string };
+  configuration: Record<string, unknown>;
+}
+
+import type { ComponentType } from 'react';
+import { CustomerSavedPaymentMethodsSession } from './savedPaymentMethods';
+import type { Elements } from './elements';
+
+
+
+
+
+export interface PaymentSession {
+  presentPaymentSheet(
+    configuration?: Record<string, unknown>
+  ): Promise<PaymentResult>;
+  getCustomerSavedPaymentMethods(
+    options?: any
+  ): Promise<CustomerSavedPaymentMethodsSession>;
+  updateIntent(
+    intentResolver: () => Promise<PaymentSessionConfiguration>
+  ): Promise<void>;
+}
+
+export interface PaymentElementHandle {
+  confirmPayment(options?: {
+    confirmParams?: Record<string, any>;
+  }): Promise<PaymentResult>;
+  collapse(): void;
+  focus(): void;
+  blur(): void;
+  clear(): void;
+  update(options: Record<string, any>): void;
+  destroy(): void;
+}
+
+export interface PaymentElement extends PaymentElementHandle {
+  Component?: ComponentType<any>;
+  mount(selector: string): void;
+  unmount(): void;
+  on(event: string, handler?: (data?: any) => void): { remove: () => void };
+  onPaymentResult(handler?: (data: PaymentResult) => void): {
+    remove: () => void;
+  };
+  onPaymentConfirmButtonClick(handler?: (data: any) => boolean): {
+    remove: () => void;
+  };
+}
+
+export interface CvcWidget {
+  Component?: ComponentType<any>;
+  mount(selector: string, options?: Record<string, any>): void;
+  unmount(): void;
+  destroy(): void;
+  on(
+    event: string,
+    handler?: (data?: any) => void
+  ): { remove: () => void } | null;
+}
+
+
+export interface HyperswitchSession {
+  publishableKey: string;
+  elements(options: PaymentSessionConfiguration): Promise<Elements>;
+  initPaymentSession(
+    options: PaymentSessionConfiguration
+  ): Promise<PaymentSession>;
+}

package/src/types/elements/index.ts

@@ -0,0 +1,33 @@
+import { PaymentResult } from "../paymentresult";
+import type {
+  PaymentElementHandle,
+  PaymentSessionConfiguration,
+} from "../definitions";
+import { CustomerSavedPaymentMethodsSession } from "../savedPaymentMethods";
+
+export interface Elements {
+  confirmPayment(
+    paymentElementRef: { current: PaymentElementHandle | null } | string,
+    options?: { confirmParams?: Record<string, any> }
+  ): Promise<PaymentResult>;
+  presentPaymentSheet(
+    configuration?: Record<string, unknown>
+  ): Promise<PaymentResult>;
+  updateIntent(
+    intentResolver: () => Promise<PaymentSessionConfiguration>
+  ): Promise<void>;
+  getCustomerSavedPaymentMethods(
+    options?: any
+  ): Promise<CustomerSavedPaymentMethodsSession>;
+}
+
+export interface ElementsActions {
+  confirmPayment: (
+    paymentElementRef: { current: PaymentElementHandle | null } | string,
+    options?: { confirmParams?: Record<string, any> }
+  ) => Promise<PaymentResult>;
+  updateIntent: (
+    intentResolver: () => Promise<PaymentSessionConfiguration>
+  ) => Promise<void>;
+  getCustomerSavedPaymentMethods(): Promise<CustomerSavedPaymentMethodsSession>;
+}

package/src/types/paymentresult/index.ts

@@ -0,0 +1,4 @@
+export interface PaymentResult {
+  type: 'completed' | 'canceled' | 'failed';
+  message?: string;
+}

package/src/types/savedPaymentMethods/index.ts

@@ -0,0 +1,74 @@
+import type { PaymentResult } from '../paymentresult';
+
+export interface SavedPaymentMethodsConfiguration {
+    hiddenPaymentMethods?: string[];
+}
+
+export interface CustomerLastUsedPaymentMethodCard {
+  scheme: string;
+  issuer_country: string;
+  last4_digits: string;
+  expiry_month: string;
+  expiry_year: string;
+  card_token: string | null;
+  card_holder_name: string;
+  card_fingerprint: string | null;
+  nick_name: string;
+  card_network: string;
+  card_isin: string;
+  card_issuer: string;
+  card_type: string;
+  saved_to_locker: boolean;
+}
+
+export interface CustomerPaymentMethodBillingAddress {
+  line1?: string;
+  line2?: string;
+  line3?: string;
+  city?: string;
+  state?: string;
+  country?: string;
+  first_name?: string;
+  last_name?: string;
+}
+
+export interface CustomerPaymentMethodBilling {
+  address?: CustomerPaymentMethodBillingAddress;
+  phone?: Record<string, unknown>;
+  email?: string;
+}
+
+export interface CustomerLastUsedPaymentMethod {
+  payment_token: string;
+  payment_method_id: string;
+  customer_id: string;
+  payment_method: string;
+  payment_method_type: string;
+  payment_method_issuer: string;
+  payment_method_issuer_code: string | null;
+  recurring_enabled: boolean;
+  installment_payment_enabled: boolean;
+  payment_experience: string[];
+  card: CustomerLastUsedPaymentMethodCard | null;
+  metadata: string | null;
+  created: string;
+  bank: string | null;
+  surcharge_details: string | null;
+  requires_cvv: boolean;
+  last_used_at: string;
+  default_payment_method_set: boolean;
+  billing: CustomerPaymentMethodBilling | null;
+  error?: any;
+}
+
+export interface CustomerSavedPaymentMethodsSession {
+  getCustomerLastUsedPaymentMethodData(): Promise<CustomerLastUsedPaymentMethod | null>;
+  getCustomerDefaultSavedPaymentMethodData(): Promise<CustomerLastUsedPaymentMethod | null>;
+  getCustomerSavedPaymentMethodData(): Promise<CustomerLastUsedPaymentMethod | null>;
+  confirmWithCustomerLastUsedPaymentMethod(args?: {
+    id?: string;
+  }): Promise<PaymentResult>;
+  confirmWithCustomerDefaultPaymentMethod?(args?: {
+    id?: string;
+  }): Promise<PaymentResult>;
+}

package/src/utils/EventValidator.ts

@@ -0,0 +1,39 @@
+const validEventStrings = [
+  'PAYMENT_METHOD_INFO_CARD',
+  'PAYMENT_METHOD_STATUS',
+  'FORM_STATUS',
+  'PAYMENT_METHOD_INFO_ADDRESS',
+  'PAYMENT_METHOD_INFO_BILLING_ADDRESS',
+  'CVC_STATUS',
+];
+
+export function getValidEventsString(): string {
+  return validEventStrings.join(', ');
+}
+
+export function validateSubscribedEventStrings(
+  subscribedEvents: string[] | undefined
+): string[] {
+  if (!subscribedEvents) {
+    return [];
+  }
+  return subscribedEvents.filter((event) => !validEventStrings.includes(event));
+}
+
+export type UnknownEventWarningPayload = {
+  message: string;
+  invalidEvents: string[];
+  validEvents: string[];
+};
+
+export function makeUnknownEventWarningPayload(
+  invalidEvents: string[]
+): UnknownEventWarningPayload {
+  const invalidEventsStr = invalidEvents.join(', ');
+  const validEventsStr = getValidEventsString();
+  return {
+    message: `Unknown event(s) subscribed: [${invalidEventsStr}]. Valid events are: ${validEventsStr}`,
+    invalidEvents,
+    validEvents: validEventStrings,
+  };
+}

package/src/utils/InitializationState.ts

@@ -0,0 +1,28 @@
+/**
+ * Tracks whether the Hyperswitch SDK is currently initialising (or re-initialising
+ * after a reload).  presentPaymentSheet should be blocked while this flag is true
+ * so the native SDK is not asked to open a sheet before it is ready.
+ *
+ * Also tracks whether a payment sheet is currently presented so that a hot-reload
+ * (or any other code path) cannot stack a second sheet on top of an open one.
+ */
+
+let _isInitializing = false;
+
+export function setInitializing(value: boolean): void {
+  _isInitializing = value;
+}
+
+export function isInitializing(): boolean {
+  return _isInitializing;
+}
+
+let _isSheetPresented = false;
+
+export function setSheetPresented(value: boolean): void {
+  _isSheetPresented = value;
+}
+
+export function isSheetPresented(): boolean {
+  return _isSheetPresented;
+}

package/src/utils/LaunchOptions.ts

@@ -0,0 +1,41 @@
+import type {
+  HyperswitchConfiguration,
+  NativePaymentSheetPayload,
+} from '../types/definitions';
+import type { PaymentSessionConfiguration } from '../types/definitions';
+import { PaymentResult } from '../types/paymentresult';
+
+function buildPresentPaymentSheetPayload(
+  hyperswitchConfig: HyperswitchConfiguration,
+  paymentSessionConfig: PaymentSessionConfiguration,
+  configuration: Record<string, unknown> = {},
+): NativePaymentSheetPayload {
+  // platformPublishableKey is internal to the RN bridge; it is not part of the
+  // merchant-facing hyperswitchConfig payload.
+  const { platformPublishableKey: _platformPublishableKey, ...restConfig } =
+    hyperswitchConfig;
+
+  return {
+    hyperswitchConfig: restConfig as Record<string, unknown>,
+    paymentSessionConfig: paymentSessionConfig,
+    configuration,
+  };
+}
+
+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 { buildPresentPaymentSheetPayload, mapStatus };

package/src/utils/NewArchUtils.ts

@@ -0,0 +1,18 @@
+declare global {
+  var __turboModuleProxy: unknown | undefined;
+  var nativeFabricUIManager: unknown | undefined;
+}
+
+export function isTurboModuleEnabled(): boolean {
+  return (
+    typeof global.__turboModuleProxy !== 'undefined' &&
+    global.__turboModuleProxy !== null
+  );
+}
+
+export function isFabricEnabled(): boolean {
+  return (
+    typeof global.nativeFabricUIManager !== 'undefined' &&
+    global.nativeFabricUIManager !== null
+  );
+}

package/src/utils/ReactNativeUtils.ts

@@ -0,0 +1,13 @@
+import { UIManager, findNodeHandle } from 'react-native';
+
+export function dispatchViewManagerCommand(
+  viewId: number,
+  commandId: number,
+  commandArgs: number[]
+): void {
+  UIManager.dispatchViewManagerCommand(viewId, commandId, commandArgs);
+}
+
+export function getFindNodeHandle(ref: unknown): number {
+  return findNodeHandle(ref as React.ElementRef<typeof UIManager>) ?? -1;
+}

package/src/views/CVCElement.tsx

@@ -0,0 +1,122 @@
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import type { ViewStyle } from 'react-native';
+import { registerWidget, unregisterWidget } from '../context/WidgetRegistry';
+import { getFindNodeHandle } from '../utils/ReactNativeUtils';
+import type {
+  paymentEventResult,
+  paymentResult,
+  paymentEventNative,
+} from '../types/NativeModuleTypes';
+import type { PaymentSheetConfiguration } from '../types/PaymentSheetConfiguration';
+import NativePaymentWidgetImpl from './NativePaymentWidgetImpl';
+
+type CVCElementProps = {
+  id?: string;
+  options?: PaymentSheetConfiguration;
+  onChange?: (event: paymentEventResult) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onPaymentResult?: (result: paymentResult) => void;
+  style?: ViewStyle;
+};
+
+function parsePaymentResult(result: string): paymentResult {
+  return JSON.parse(result);
+}
+
+export const CVCElementView = forwardRef<unknown, CVCElementProps>(
+  (props, ref) => {
+    const {
+      id,
+      options,
+      onChange,
+      onFocus,
+      onBlur,
+      onPaymentResult,
+      style,
+    } = props;
+    // const {paymentSessionConfig, hyperswitchConfig} = useHyperElementsContext();
+    const [viewId, setViewId] = useState<number | undefined>(undefined);
+    const viewRef = useRef<unknown>(null);
+
+    useEffect(() => {
+      let isMounted = true;
+      const findNodeHandle = (attempt: number) => {
+        if (!isMounted || viewId !== undefined) return;
+        if (viewRef.current != null) {
+          const nativeId = getFindNodeHandle(viewRef.current);
+          if (nativeId !== -1) {
+            setViewId(nativeId);
+          } else if (attempt < 20) {
+            setTimeout(() => findNodeHandle(attempt + 1), 100);
+          }
+        } else if (attempt < 20) {
+          setTimeout(() => findNodeHandle(attempt + 1), 100);
+        }
+      };
+      findNodeHandle(0);
+      return () => {
+        isMounted = false;
+      };
+    }, [viewId]);
+
+    useEffect(() => {
+      if (!id || viewId === undefined) return undefined;
+      registerWidget(id, viewId);
+      return () => unregisterWidget(id);
+    }, [id, viewId]);
+
+    const onPaymentEventInternal = (event: paymentEventNative) => {
+      onChange?.(event.nativeEvent);
+
+      if (event.nativeEvent.eventName === 'CVC_STATUS') {
+        try {
+          const outerDict = event.nativeEvent.payload as
+            | Record<string, unknown>
+            | undefined;
+          if (!outerDict) {
+            return;
+          }
+          const cvcStatus = outerDict.cvcStatus as
+            | Record<string, unknown>
+            | undefined;
+          if (!cvcStatus) {
+            return;
+          }
+          const isCvcFocused = Boolean(cvcStatus.isCvcFocused);
+          const isCvcBlur = Boolean(cvcStatus.isCvcBlur);
+          if (isCvcFocused) {
+            onFocus?.();
+          }
+          if (isCvcBlur) {
+            onBlur?.();
+          }
+        } catch {
+          // Ignore malformed native events
+        }
+      }
+    };
+
+    const onPaymentResultInternal = (event: {
+      nativeEvent: { result?: string };
+    }) => {
+      onPaymentResult?.(parsePaymentResult(event.nativeEvent.result ?? ''));
+    };
+
+    return (
+      <NativePaymentWidgetImpl
+        ref={viewRef}
+        widgetType="widgetPaymentSheet"
+        sdkAuthorization={paymentSessionConfig?.sdkAuthorization ?? ''}
+        onPaymentEvent={onPaymentEventInternal}
+        onPaymentResult={onPaymentResultInternal}
+        options={{
+          hyperswitchConfig,
+          paymentSessionConfig,
+          configuration: options,
+        }}
+        style={style}
+      />
+    );
+  }
+);

package/src/views/NativePaymentWidget.ts

@@ -0,0 +1,2 @@
+export { default as make } from './NativePaymentWidgetImpl';
+export type { nativePaymentWidgetType as props } from '../types/NativeModuleTypes';

package/src/views/NativePaymentWidgetImpl.ts

@@ -0,0 +1,16 @@
+import { requireNativeComponent } from 'react-native';
+import { isFabricEnabled } from '../utils/NewArchUtils';
+import type { nativePaymentWidgetType } from '../types/NativeModuleTypes';
+
+type NativePaymentWidgetComponent =
+  React.ComponentType<nativePaymentWidgetType>;
+
+const NativePaymentWidgetImpl: NativePaymentWidgetComponent =
+  isFabricEnabled()
+    ? (require('../specs/PaymentElementNativeComponent')
+        .default as NativePaymentWidgetComponent)
+    : (requireNativeComponent(
+        'NativePaymentWidget'
+      ) as NativePaymentWidgetComponent);
+
+export default NativePaymentWidgetImpl;

package/src/views/PaymentElement.tsx

@@ -0,0 +1,189 @@
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import type { ViewStyle } from 'react-native';
+import NativePaymentWidgetImpl from './NativePaymentWidgetImpl';
+import { registerWidget, unregisterWidget } from '../context/WidgetRegistry';
+import { confirmPayment as nativeConfirmPayment } from '../modules/NativeHyperswitchSdk';
+import type { paymentResult } from '../modules/NativeHyperswitchSdk';
+import type { PaymentSheetConfiguration } from '../types/PaymentSheetConfiguration';
+import {
+  dispatchViewManagerCommand,
+  getFindNodeHandle,
+} from '../utils/ReactNativeUtils';
+import {
+  makeUnknownEventWarningPayload,
+  validateSubscribedEventStrings,
+} from '../utils/EventValidator';
+import type {
+  paymentEventResult,
+  paymentEventNative,
+  nativeEvent,
+} from '../types/NativeModuleTypes';
+
+function parsePaymentResult(result: string): paymentResult {
+  return JSON.parse(result);
+}
+
+type PaymentWidgetRef = {
+  confirmPayment: () => Promise<paymentResult>;
+};
+
+type PaymentElementProps = {
+  widgetId: string;
+  options?: PaymentSheetConfiguration;
+  onPaymentResult: (result: paymentResult) => void;
+  // onPaymentConfirmButtonClick:() =>void;
+  onChange?: (event: paymentEventResult) => void;
+  onReady?: (event: string) => void;
+  style?: ViewStyle;
+};
+
+export const PaymentElementView = forwardRef<
+  PaymentWidgetRef,
+  PaymentElementProps
+>((props, ref) => {
+  const {
+    widgetId,
+    options,
+    onPaymentResult,
+    onChange,
+    style,
+  } = props;
+  const [viewId, setViewId] = useState<number | undefined>(undefined);
+  const viewRef = useRef<unknown>(null);
+  const isRegisteredRef = useRef(false);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const findNodeHandle = (attempt: number) => {
+      if (!isMounted || viewId !== undefined) {
+        return;
+      }
+      if (viewRef.current != null) {
+        const id = getFindNodeHandle(viewRef.current);
+        if (id !== -1) {
+          setViewId(id);
+        } else if (attempt < 20) {
+          setTimeout(() => findNodeHandle(attempt + 1), 100);
+        }
+      } else if (attempt < 20) {
+        setTimeout(() => findNodeHandle(attempt + 1), 100);
+      }
+    };
+
+    findNodeHandle(3);
+
+    return () => {
+      isMounted = false;
+    };
+  }, [viewId]);
+
+  useEffect(() => {
+    if (viewId !== undefined) {
+      registerWidget(widgetId, viewId);
+      isRegisteredRef.current = true;
+      return () => {
+        if (isRegisteredRef.current) {
+          unregisterWidget(widgetId);
+          isRegisteredRef.current = false;
+        }
+      };
+    }
+    return undefined;
+  }, [viewId, widgetId]);
+
+  useEffect(() => {
+    if (viewId !== undefined) {
+      dispatchViewManagerCommand(viewId, 1, []);
+    }
+  }, [viewId]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      confirmPayment: (): Promise<paymentResult> => {
+        if (viewRef.current == null) {
+          return Promise.resolve({
+            status: 'failed',
+            message: 'Widget not ready',
+            error: 'Widget not ready',
+            type: undefined,
+          });
+        }
+        const id = getFindNodeHandle(viewRef.current);
+        if (id === -1) {
+          return Promise.resolve({
+            status: 'failed',
+            message: 'Widget not ready',
+            error: 'Unable to find native view handle',
+            type: undefined,
+          });
+        }
+        return new Promise((resolve) => {
+          nativeConfirmPayment(id, (result: paymentResult) => {
+            resolve({
+              status: result.status,
+              message: result.message,
+              type: result.type,
+            });
+          });
+        });
+      },
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [viewId]
+  );
+
+  const warningEmitted = useRef(false);
+
+  useEffect(() => {
+    if (!options || !onChange || warningEmitted.current) {
+      return;
+    }
+    const subscribedEvents = options.subscribedEvents as string[] | undefined;
+
+    const invalidEvents = validateSubscribedEventStrings(subscribedEvents);
+    if (invalidEvents.length > 0) {
+      warningEmitted.current = true;
+      const warningPayload = makeUnknownEventWarningPayload(invalidEvents);
+      onChange({
+        eventName: 'UNKNOWN_EVENT_SUBSCRIBED',
+        payload: {
+          message: warningPayload.message,
+          invalidEvents: warningPayload.invalidEvents,
+          validEvents: warningPayload.validEvents,
+        },
+      });
+    }
+  }, [options, onChange]);
+
+  const onPaymentResultInternal = (event: nativeEvent) => {
+    onPaymentResult(parsePaymentResult(event.nativeEvent.result ?? ''));
+  };
+
+  const onPaymentEventInternal = (event: paymentEventNative) => {
+    onChange?.(event.nativeEvent);
+  };
+
+  return (
+    <NativePaymentWidgetImpl
+      ref={viewRef}
+      sdkAuthorization={paymentSessionConfig?.sdkAuthorization ?? ''}
+      widgetType="widgetPaymentSheet"
+      onPaymentEvent={onPaymentEventInternal}
+      onPaymentResult={onPaymentResultInternal}
+      options={{
+        hyperswitchConfig,
+        paymentSessionConfig,
+        configuration: options,
+      }}
+      style={style}
+    />
+  );
+});