@gmisoftware/react-native-pay 0.0.4

package/src/hooks/usePaymentCheckout.ts

@@ -0,0 +1,281 @@
+import { useState, useCallback, useMemo, useEffect } from 'react'
+import { NitroModules } from 'react-native-nitro-modules'
+import type { PaymentHandler } from '../specs/PaymentHandler.nitro'
+
+const HybridPaymentHandler =
+  NitroModules.createHybridObject<PaymentHandler>('PaymentHandler')
+import type {
+  PaymentRequest,
+  PaymentResult,
+  PaymentItem,
+  PayServiceStatus,
+  GooglePayEnvironment,
+} from '../types'
+import { createPaymentItem, calculateTotal } from '../utils'
+
+export interface UsePaymentCheckoutConfig {
+  merchantIdentifier: string
+  countryCode?: string
+  currencyCode?: string
+  supportedNetworks?: string[]
+  merchantCapabilities?: string[]
+  googlePayEnvironment?: GooglePayEnvironment
+  googlePayGateway?: string
+  googlePayGatewayMerchantId?: string
+}
+
+export interface UsePaymentCheckoutReturn {
+  // Payment availability
+  canMakePayments: boolean
+  canSetupCards: boolean
+  isCheckingStatus: boolean
+
+  // Cart management
+  items: PaymentItem[]
+  total: number
+  addItem: (label: string, amount: number, type?: 'final' | 'pending') => void
+  addItems: (
+    items: Array<{ label: string; amount: number; type?: 'final' | 'pending' }>
+  ) => void
+  removeItem: (index: number) => void
+  updateItem: (index: number, updates: Partial<PaymentItem>) => void
+  clearItems: () => void
+
+  // Payment processing
+  startPayment: () => Promise<PaymentResult | null>
+  isProcessing: boolean
+  result: PaymentResult | null
+  error: Error | null
+
+  // Utilities
+  reset: () => void
+  paymentRequest: PaymentRequest
+}
+
+/**
+ * All-in-one hook for payment checkout flow
+ *
+ * Handles:
+ * - Payment availability checking
+ * - Shopping cart management
+ * - Payment processing
+ * - State management
+ *
+ * @param config - Payment configuration
+ * @returns Complete payment checkout interface
+ *
+ * @example
+ * ```typescript
+ * function CheckoutScreen() {
+ *   const {
+ *     canMakePayments,
+ *     items,
+ *     total,
+ *     addItem,
+ *     addItems,
+ *     removeItem,
+ *     startPayment,
+ *     isProcessing,
+ *     error,
+ *   } = usePaymentCheckout({
+ *     merchantIdentifier: 'merchant.com.example',
+ *     currencyCode: 'USD',
+ *     countryCode: 'US',
+ *   })
+ *
+ *   // Add single item
+ *   const handleAddOne = () => addItem('Coffee', 4.99)
+ *
+ *   // Add multiple items at once
+ *   const handleAddCart = () => addItems([
+ *     { label: 'Coffee', amount: 4.99 },
+ *     { label: 'Sandwich', amount: 8.99 },
+ *     { label: 'Tax', amount: 1.20, type: 'final' }
+ *   ])
+ *
+ *   if (!canMakePayments) {
+ *     return <Text>Payment not available</Text>
+ *   }
+ *
+ *   return (
+ *     <>
+ *       <Button title="Add Coffee" onPress={handleAddOne} />
+ *       <Button title="Add Cart" onPress={handleAddCart} />
+ *       <Text>Total: ${total.toFixed(2)}</Text>
+ *       {isProcessing ? (
+ *         <ActivityIndicator />
+ *       ) : (
+ *         <ApplePayButton onPress={startPayment} />
+ *       )}
+ *       {error && <Text>Error: {error.message}</Text>}
+ *     </>
+ *   )
+ * }
+ * ```
+ */
+export function usePaymentCheckout(
+  config: UsePaymentCheckoutConfig
+): UsePaymentCheckoutReturn {
+  // Payment status state
+  const [status, setStatus] = useState<PayServiceStatus | null>(null)
+  const [isCheckingStatus, setIsCheckingStatus] = useState(true)
+
+  // Cart state
+  const [items, setItems] = useState<PaymentItem[]>([])
+
+  // Payment state
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [result, setResult] = useState<PaymentResult | null>(null)
+  const [error, setError] = useState<Error | null>(null)
+
+  // Check payment status on mount
+  useEffect(() => {
+    try {
+      const paymentStatus = HybridPaymentHandler.payServiceStatus()
+      setStatus(paymentStatus)
+    } catch (err) {
+      console.error('Failed to check payment status:', err)
+      setStatus({ canMakePayments: false, canSetupCards: false })
+    } finally {
+      setIsCheckingStatus(false)
+    }
+  }, [])
+
+  // Calculate total
+  const total = useMemo(() => calculateTotal(items), [items])
+
+  // Build payment request
+  const paymentRequest = useMemo<PaymentRequest>(() => {
+    const {
+      merchantIdentifier,
+      countryCode = 'US',
+      currencyCode = 'USD',
+      supportedNetworks = ['visa', 'mastercard', 'amex', 'discover'],
+      merchantCapabilities = ['3DS'],
+      googlePayEnvironment,
+      googlePayGateway,
+      googlePayGatewayMerchantId,
+    } = config
+
+    return {
+      merchantIdentifier,
+      countryCode,
+      currencyCode,
+      supportedNetworks,
+      merchantCapabilities,
+      paymentItems:
+        items.length > 0 ? items : [createPaymentItem('Total', 0, 'final')],
+      googlePayEnvironment,
+      googlePayGateway,
+      googlePayGatewayMerchantId,
+    }
+  }, [config, items])
+
+  // Cart operations
+  const addItem = useCallback(
+    (label: string, amount: number, type: 'final' | 'pending' = 'final') => {
+      const item = createPaymentItem(label, amount, type)
+      setItems((prev) => [...prev, item])
+    },
+    []
+  )
+
+  const addItems = useCallback(
+    (
+      itemsToAdd: Array<{
+        label: string
+        amount: number
+        type?: 'final' | 'pending'
+      }>
+    ) => {
+      const newItems = itemsToAdd.map((item) =>
+        createPaymentItem(item.label, item.amount, item.type || 'final')
+      )
+      setItems((prev) => [...prev, ...newItems])
+    },
+    []
+  )
+
+  const removeItem = useCallback((index: number) => {
+    setItems((prev) => prev.filter((_, i) => i !== index))
+  }, [])
+
+  const updateItem = useCallback(
+    (index: number, updates: Partial<PaymentItem>) => {
+      setItems((prev) =>
+        prev.map((item, i) => (i === index ? { ...item, ...updates } : item))
+      )
+    },
+    []
+  )
+
+  const clearItems = useCallback(() => {
+    setItems([])
+  }, [])
+
+  // Start payment
+  const startPayment = useCallback(async (): Promise<PaymentResult | null> => {
+    if (items.length === 0) {
+      const emptyCartError = new Error('Cart is empty')
+      setError(emptyCartError)
+      return null
+    }
+
+    setIsProcessing(true)
+    setResult(null)
+    setError(null)
+
+    try {
+      const paymentResult =
+        await HybridPaymentHandler.startPayment(paymentRequest)
+
+      setResult(paymentResult)
+
+      if (!paymentResult.success) {
+        setError(new Error(paymentResult.error || 'Payment failed'))
+      }
+
+      return paymentResult
+    } catch (err) {
+      const paymentError =
+        err instanceof Error ? err : new Error('Payment processing failed')
+      setError(paymentError)
+      return null
+    } finally {
+      setIsProcessing(false)
+    }
+  }, [items, paymentRequest])
+
+  // Reset all state
+  const reset = useCallback(() => {
+    setIsProcessing(false)
+    setResult(null)
+    setError(null)
+  }, [])
+
+  return {
+    // Status
+    canMakePayments: status?.canMakePayments ?? false,
+    canSetupCards: status?.canSetupCards ?? false,
+    isCheckingStatus,
+
+    // Cart
+    items,
+    total,
+    addItem,
+    addItems,
+    removeItem,
+    updateItem,
+    clearItems,
+
+    // Payment
+    startPayment,
+    isProcessing,
+    result,
+    error,
+
+    // Utilities
+    reset,
+    paymentRequest,
+  }
+}

package/src/index.ts

@@ -0,0 +1,32 @@
+import { NitroModules, getHostComponent } from 'react-native-nitro-modules'
+import type {
+  ApplePayButtonProps,
+  ApplePayButtonMethods,
+} from './specs/ApplePayButton.nitro'
+import type {
+  GooglePayButtonProps,
+  GooglePayButtonMethods,
+} from './specs/GooglePayButton.nitro'
+import type { PaymentHandler } from './specs/PaymentHandler.nitro'
+
+export const HybridPaymentHandler =
+  NitroModules.createHybridObject<PaymentHandler>('PaymentHandler')
+
+export type { PaymentHandler } from './specs/PaymentHandler.nitro'
+
+import ApplePayButtonConfig from '../nitrogen/generated/shared/json/ApplePayButtonConfig.json'
+import GooglePayButtonConfig from '../nitrogen/generated/shared/json/GooglePayButtonConfig.json'
+
+export const ApplePayButton = getHostComponent<
+  ApplePayButtonProps,
+  ApplePayButtonMethods
+>('ApplePayButton', () => ApplePayButtonConfig)
+
+export const GooglePayButton = getHostComponent<
+  GooglePayButtonProps,
+  GooglePayButtonMethods
+>('GooglePayButton', () => GooglePayButtonConfig)
+
+export * from './types'
+export * from './utils'
+export * from './hooks'

package/src/plugin/index.ts

@@ -0,0 +1,17 @@
+import type { ConfigPlugin } from 'expo/config-plugins'
+import type { ReactNativePayPluginProps } from './type'
+import { withApplePay } from './withApplePay'
+import { withGooglePay } from './withGooglePay'
+
+const withReactNativePay: ConfigPlugin<ReactNativePayPluginProps> = (
+  config,
+  props
+) => {
+  config = withGooglePay(config, props)
+
+  config = withApplePay(config, props)
+
+  return config
+}
+
+export default withReactNativePay

package/src/plugin/type.ts

@@ -0,0 +1,4 @@
+export interface ReactNativePayPluginProps {
+  merchantIdentifier?: string | string[]
+  enableGooglePay?: boolean
+}

package/src/plugin/withApplePay.ts

@@ -0,0 +1,44 @@
+import { withEntitlementsPlist, type ConfigPlugin } from 'expo/config-plugins'
+import type { ReactNativePayPluginProps } from './type'
+
+export function setApplePayEntitlement(
+  merchantIdentifiers: string | string[],
+  entitlements: Record<string, any>
+): Record<string, any> {
+  const key = 'com.apple.developer.in-app-payments'
+
+  const merchants: string[] = entitlements[key] ?? []
+
+  if (!Array.isArray(merchantIdentifiers)) {
+    merchantIdentifiers = [merchantIdentifiers]
+  }
+
+  for (const id of merchantIdentifiers) {
+    if (id && !merchants.includes(id)) {
+      merchants.push(id)
+    }
+  }
+
+  if (merchants.length) {
+    entitlements[key] = merchants
+  }
+  return entitlements
+}
+
+export const withApplePay: ConfigPlugin<ReactNativePayPluginProps> = (
+  expoConfig,
+  { merchantIdentifier }
+) => {
+  // If merchantIdentifier is not passed Apple Pay won't be initialize
+  if (!merchantIdentifier) {
+    return expoConfig
+  }
+
+  return withEntitlementsPlist(expoConfig, (config) => {
+    config.modResults = setApplePayEntitlement(
+      merchantIdentifier,
+      config.modResults
+    )
+    return config
+  })
+}

package/src/plugin/withGooglePay.ts

@@ -0,0 +1,41 @@
+import {
+  AndroidConfig,
+  withAndroidManifest,
+  type ConfigPlugin,
+} from 'expo/config-plugins'
+import type { ReactNativePayPluginProps } from './type'
+
+const {
+  addMetaDataItemToMainApplication,
+  getMainApplicationOrThrow,
+  removeMetaDataItemFromMainApplication,
+} = AndroidConfig.Manifest
+
+export const withGooglePay: ConfigPlugin<ReactNativePayPluginProps> = (
+  expoConfig,
+  { enableGooglePay = false }
+) => {
+  return withAndroidManifest(expoConfig, (config) => {
+    config.modResults = setGooglePayMetaData(enableGooglePay, config.modResults)
+    return config
+  })
+}
+
+export function setGooglePayMetaData(
+  enabled: boolean,
+  modResults: AndroidConfig.Manifest.AndroidManifest
+): AndroidConfig.Manifest.AndroidManifest {
+  const GOOGLE_PAY_META_NAME = 'com.google.android.gms.wallet.api.enabled'
+  const mainApplication = getMainApplicationOrThrow(modResults)
+  if (enabled) {
+    addMetaDataItemToMainApplication(
+      mainApplication,
+      GOOGLE_PAY_META_NAME,
+      'true'
+    )
+  } else {
+    removeMetaDataItemFromMainApplication(mainApplication, GOOGLE_PAY_META_NAME)
+  }
+
+  return modResults
+}

package/src/specs/ApplePayButton.nitro.ts

@@ -0,0 +1,37 @@
+import type {
+  HybridView,
+  HybridViewProps,
+  HybridViewMethods,
+} from 'react-native-nitro-modules'
+
+export type ApplePayButtonType =
+  | 'buy'
+  | 'setUp'
+  | 'book'
+  | 'donate'
+  | 'continue'
+  | 'reload'
+  | 'addMoney'
+  | 'topUp'
+  | 'order'
+  | 'rent'
+  | 'support'
+  | 'contribute'
+  | 'tip'
+export type ApplePayButtonStyle = 'white' | 'whiteOutline' | 'black'
+
+export interface ApplePayButtonProps extends HybridViewProps {
+  buttonType: ApplePayButtonType
+  buttonStyle: ApplePayButtonStyle
+  onPress?: () => void
+}
+
+export interface ApplePayButtonMethods extends HybridViewMethods {
+  // No additional methods needed for the button
+}
+
+export type ApplePayButton = HybridView<
+  ApplePayButtonProps,
+  ApplePayButtonMethods,
+  { ios: 'swift' }
+>

package/src/specs/GooglePayButton.nitro.ts

@@ -0,0 +1,34 @@
+import type {
+  HybridView,
+  HybridViewProps,
+  HybridViewMethods,
+} from 'react-native-nitro-modules'
+
+export type GooglePayButtonType =
+  | 'buy'
+  | 'book'
+  | 'checkout'
+  | 'donate'
+  | 'order'
+  | 'pay'
+  | 'subscribe'
+  | 'plain'
+
+export type GooglePayButtonTheme = 'dark' | 'light'
+
+export interface GooglePayButtonProps extends HybridViewProps {
+  buttonType: GooglePayButtonType
+  theme: GooglePayButtonTheme
+  radius?: number
+  onPress?: () => void
+}
+
+export interface GooglePayButtonMethods extends HybridViewMethods {
+  // No additional methods needed for the button
+}
+
+export type GooglePayButton = HybridView<
+  GooglePayButtonProps,
+  GooglePayButtonMethods,
+  { android: 'kotlin' }
+>

package/src/specs/PaymentHandler.nitro.ts

@@ -0,0 +1,13 @@
+import type { HybridObject } from 'react-native-nitro-modules'
+import type {
+  PayServiceStatus,
+  PaymentRequest,
+  PaymentResult,
+} from '../types/Payment'
+
+export interface PaymentHandler
+  extends HybridObject<{ ios: 'swift'; android: 'kotlin' }> {
+  payServiceStatus(): PayServiceStatus
+  startPayment(request: PaymentRequest): Promise<PaymentResult>
+  canMakePayments(usingNetworks: string[]): boolean
+}

package/src/types/Contact.ts

@@ -0,0 +1,58 @@
+/**
+ * Contact types based on CNContact from Contacts framework
+ * @see https://developer.apple.com/documentation/contacts/cncontact
+ */
+
+export type CNContactType = 'person' | 'organization'
+
+export interface CNPhoneNumber {
+  stringValue: string
+}
+
+export interface CNPostalAddress {
+  street?: string
+  city?: string
+  state?: string
+  postalCode?: string
+  country?: string
+  isoCountryCode?: string
+}
+
+export interface CNLabeledPhoneNumber {
+  label?: string
+  value: CNPhoneNumber
+}
+
+export interface CNLabeledEmailAddress {
+  label?: string
+  value: string
+}
+
+export interface CNLabeledPostalAddress {
+  label?: string
+  value: CNPostalAddress
+}
+
+export interface CNContact {
+  identifier: string
+  contactType: CNContactType
+  namePrefix: string
+  givenName: string
+  middleName: string
+  familyName: string
+  previousFamilyName: string
+  nameSuffix: string
+  nickname: string
+  organizationName: string
+  departmentName: string
+  jobTitle: string
+  phoneticGivenName: string
+  phoneticMiddleName: string
+  phoneticFamilyName: string
+  phoneticOrganizationName?: string // Available from iOS 10.0+
+  note: string
+  imageDataAvailable?: boolean // Available from iOS 9.0+
+  phoneNumbers: CNLabeledPhoneNumber[]
+  emailAddresses: CNLabeledEmailAddress[]
+  postalAddresses: CNLabeledPostalAddress[]
+}

package/src/types/Payment.ts

@@ -0,0 +1,104 @@
+/**
+ * Payment types based on PassKit framework
+ * @see https://developer.apple.com/documentation/passkit
+ */
+
+import type { CNContact } from './Contact'
+
+export type PaymentItemType = 'final' | 'pending'
+
+export type PaymentMethodType =
+  | 'unknown'
+  | 'debit'
+  | 'credit'
+  | 'prepaid'
+  | 'store'
+
+export type PaymentNetwork =
+  | 'visa'
+  | 'mastercard'
+  | 'amex'
+  | 'discover'
+  | 'jcb'
+  | 'maestro'
+  | 'electron'
+  | 'elo'
+  | 'idcredit'
+  | 'interac'
+  | 'privateLabel'
+
+export type PassActivationState =
+  | 'activated'
+  | 'requiresActivation'
+  | 'activating'
+  | 'suspended'
+  | 'deactivated'
+
+export type GooglePayEnvironment = 'TEST' | 'PRODUCTION'
+
+export interface PKPass {
+  passTypeIdentifier: string
+  serialNumber: string
+  organizationName?: string
+}
+
+export interface PKSecureElementPass extends PKPass {
+  primaryAccountIdentifier: string
+  primaryAccountNumberSuffix: string
+  deviceAccountIdentifier: string
+  deviceAccountNumberSuffix: string
+  passActivationState: PassActivationState
+  devicePassIdentifier?: string
+  pairedTerminalIdentifier?: string
+}
+
+export interface PaymentItem {
+  label: string
+  amount: number
+  type: PaymentItemType
+}
+
+export interface PaymentMethod {
+  displayName?: string
+  network?: PaymentNetwork
+  type: PaymentMethodType
+  secureElementPass?: PKSecureElementPass // Available from iOS 13.4+
+  billingAddress?: CNContact // Available from iOS 13.0+
+}
+
+export interface PaymentToken {
+  paymentMethod: PaymentMethod
+  transactionIdentifier: string
+  paymentData: string // Base64 encoded Data from PKPaymentToken
+}
+export interface PaymentRequest {
+  merchantIdentifier: string
+  countryCode: string
+  currencyCode: string
+  paymentItems: PaymentItem[]
+  merchantCapabilities: string[]
+  supportedNetworks: string[]
+  shippingType?: string
+  shippingMethods?: PaymentItem[]
+  billingContactRequired?: boolean
+  shippingContactRequired?: boolean
+  // Google Pay specific configuration (Android only)
+  googlePayEnvironment?: GooglePayEnvironment
+  googlePayGateway?: string
+  googlePayGatewayMerchantId?: string
+}
+
+export interface PaymentResult {
+  success: boolean
+  transactionId?: string
+  token?: PaymentToken
+  error?: string
+}
+
+export interface PayServiceStatus {
+  canMakePayments: boolean
+  canSetupCards: boolean
+}
+
+// Backward compatibility alias
+export type ApplePayStatus = PayServiceStatus

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './Contact'
+export * from './Payment'

package/src/utils/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Utility functions for react-native-pay
+ */
+
+export * from './paymentHelpers'