applepay-rn 0.0.1

package/src/ApplePayView.tsx

@@ -0,0 +1,118 @@
+import React, { useRef, useCallback } from 'react';
+import {
+  Platform,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import NativeApplePayView from './NativeApplePayView';
+import type { ApplePayConfiguration } from './types';
+
+export interface TapApplePayProps {
+  configuration: ApplePayConfiguration;
+  style?: StyleProp<ViewStyle>;
+  onReady?: () => void;
+  onClick?: () => void;
+  onSuccess?: (data: string) => void;
+  onChargeCreated?: (data: string) => void;
+  onOrderCreated?: (data: string) => void;
+  onCancel?: () => void;
+  onError?: (error: string) => void;
+  onMerchantValidation?: (data: string) => void;
+}
+
+export function TapApplePay({
+  configuration,
+  style,
+  onReady,
+  onClick,
+  onSuccess,
+  onChargeCreated,
+  onOrderCreated,
+  onCancel,
+  onError,
+  onMerchantValidation,
+}: Readonly<TapApplePayProps>): React.ReactElement | null {
+  const inProgress = useRef(false);
+
+  const handleReady = useCallback(() => {
+    onReady?.();
+  }, [onReady]);
+
+  const handleClick = useCallback(
+    (_event: { nativeEvent: object }) => {
+      if (inProgress.current) return;
+      inProgress.current = true;
+      onClick?.();
+    },
+    [onClick]
+  );
+
+  const handleSuccess = useCallback(
+    (event: { nativeEvent: { data: string } }) => {
+      inProgress.current = false;
+      onSuccess?.(event.nativeEvent.data);
+    },
+    [onSuccess]
+  );
+
+  const handleChargeCreated = useCallback(
+    (event: { nativeEvent: { data: string } }) => {
+      onChargeCreated?.(event.nativeEvent.data);
+    },
+    [onChargeCreated]
+  );
+
+  const handleOrderCreated = useCallback(
+    (event: { nativeEvent: { data: string } }) => {
+      onOrderCreated?.(event.nativeEvent.data);
+    },
+    [onOrderCreated]
+  );
+
+  const handleCancel = useCallback(
+    (_event: { nativeEvent: object }) => {
+      inProgress.current = false;
+      onCancel?.();
+    },
+    [onCancel]
+  );
+
+  const handleError = useCallback(
+    (event: { nativeEvent: { error: string } }) => {
+      inProgress.current = false;
+      onError?.(event.nativeEvent.error);
+    },
+    [onError]
+  );
+
+  const handleMerchantValidation = useCallback(
+    (event: { nativeEvent: { data: string } }) => {
+      onMerchantValidation?.(event.nativeEvent.data);
+    },
+    [onMerchantValidation]
+  );
+
+  if (Platform.OS !== 'ios') {
+    return null;
+  }
+
+  return (
+    <NativeApplePayView
+      style={[style, styles.minHeight]}
+      configuration={JSON.stringify(configuration)}
+      onApplePayReady={handleReady}
+      onApplePayClick={handleClick}
+      onApplePaySuccess={handleSuccess}
+      onApplePayChargeCreated={handleChargeCreated}
+      onApplePayOrderCreated={handleOrderCreated}
+      onApplePayCancel={handleCancel}
+      onApplePayError={handleError}
+      onApplePayMerchantValidation={handleMerchantValidation}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  minHeight: { minHeight: 48 },
+});

package/src/NativeApplePayView.ts

@@ -0,0 +1,20 @@
+import type { ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+// @ts-ignore – no .d.ts for this path; codegen requires this exact import
+import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface NativeApplePayViewProps extends ViewProps {
+  configuration: string;
+  onApplePayReady?: DirectEventHandler<Readonly<{}>>;
+  onApplePayClick?: DirectEventHandler<Readonly<{}>>;
+  onApplePaySuccess?: DirectEventHandler<Readonly<{ data: string }>>;
+  onApplePayChargeCreated?: DirectEventHandler<Readonly<{ data: string }>>;
+  onApplePayOrderCreated?: DirectEventHandler<Readonly<{ data: string }>>;
+  onApplePayCancel?: DirectEventHandler<Readonly<{}>>;
+  onApplePayError?: DirectEventHandler<Readonly<{ error: string }>>;
+  onApplePayMerchantValidation?: DirectEventHandler<Readonly<{ data: string }>>;
+}
+
+export default codegenNativeComponent<NativeApplePayViewProps>(
+  'NativeApplePayView'
+);

package/src/index.tsx

@@ -0,0 +1,16 @@
+export { TapApplePay } from './ApplePayView';
+export type { TapApplePayProps } from './ApplePayView';
+export type {
+  ApplePayConfiguration,
+  ApplePayMerchant,
+  ApplePayCustomer,
+  ApplePayContact,
+  ApplePayPhone,
+  ApplePayName,
+  ApplePayInterface,
+  ApplePayAcceptance,
+  ApplePayTransaction,
+  ApplePayShippingMethod,
+  ApplePayItem,
+  ApplePayFeatures,
+} from './types';

package/src/types.ts

@@ -0,0 +1,91 @@
+export interface ApplePayPhone {
+  countryCode: string;
+  number: string;
+}
+
+export interface ApplePayContact {
+  email?: string;
+  phone?: ApplePayPhone;
+}
+
+export interface ApplePayName {
+  lang: string;
+  first: string;
+  last: string;
+  middle?: string;
+}
+
+export interface ApplePayCustomer {
+  id?: string;
+  name?: ApplePayName[];
+  contact?: ApplePayContact;
+}
+
+export interface ApplePayMerchant {
+  id?: string;
+  identifier?: string;
+}
+
+export interface ApplePayInterface {
+  locale?: 'en' | 'ar';
+  theme?: 'dark' | 'light';
+  edges?: 'curved' | 'straight';
+  type?: 'book' | 'buy' | 'check-out' | 'pay' | 'plain' | 'subscribe';
+}
+
+export interface ApplePayShippingMethod {
+  label: string;
+  detail: string;
+  amount: string;
+  identifier: string;
+}
+
+export interface ApplePayItem {
+  type?: 'final' | 'pending';
+  label: string;
+  amount: string;
+  paymentTiming?: 'immediate' | 'recurring' | 'deferred' | 'automaticReload';
+}
+
+export interface ApplePayTransaction {
+  amount: string;
+  currency: string;
+  couponCode?: string;
+  shipping?: ApplePayShippingMethod[];
+  items?: ApplePayItem[];
+}
+
+export interface ApplePayAcceptance {
+  supportedBrands?: (
+    | 'amex'
+    | 'mada'
+    | 'masterCard'
+    | 'visa'
+    | 'chinaUnionPay'
+    | 'discover'
+    | 'electron'
+    | 'jcb'
+    | 'maestro'
+  )[];
+  supportedCards?: ('credit' | 'debit')[];
+  supportedRegions?: ('LOCAL' | 'REGIONAL' | 'GLOBAL')[];
+  supportedCountries?: string[];
+}
+
+export interface ApplePayFeatures {
+  supportsCouponCode?: boolean;
+  shippingContactFields?: ('name' | 'phone' | 'email')[];
+}
+
+export interface ApplePayConfiguration {
+  /** Tap Payments public key */
+  publicKey: string;
+  /** Type of token to generate */
+  scope: 'AppleToken' | 'TapToken';
+  merchant: ApplePayMerchant;
+  customer: ApplePayCustomer;
+  interface?: ApplePayInterface;
+  acceptance?: ApplePayAcceptance;
+  transaction?: ApplePayTransaction;
+  features?: ApplePayFeatures;
+}