@stripe/stripe-react-native 0.44.0 → 0.45.0

package/src/components/CardForm.tsx

@@ -1,4 +1,3 @@
-import type { CardFormView, CardBrand } from '../types';
 import React, {
   forwardRef,
   useCallback,
@@ -9,21 +8,17 @@ import React, {
 import {
   AccessibilityProps,
   NativeSyntheticEvent,
-  requireNativeComponent,
-  UIManager,
   StyleProp,
-  findNodeHandle,
   ViewStyle,
 } from 'react-native';
+import NativeCardForm, { Commands } from '../specs/NativeCardForm';
 import {
   currentlyFocusedInput,
   focusInput,
   registerInput,
   unregisterInput,
 } from '../helpers';
-
-const CardFormNative =
-  requireNativeComponent<CardFormView.NativeProps>('CardForm');
+import type { CardBrand, CardFormView } from '../types';
 
 /**
  *  Card Form Component Props
@@ -80,11 +75,11 @@ export const CardForm = forwardRef<CardFormView.Methods, Props>(
     {
       onFormComplete,
       cardStyle,
-      // postalCodeEnabled = true,
-      // onFocus,
-      // onBlur,
       placeholders,
       defaultValues,
+      autofocus,
+      dangerouslyGetFullCardDetails,
+      disabled,
       ...props
     },
     ref
@@ -92,8 +87,8 @@ export const CardForm = forwardRef<CardFormView.Methods, Props>(
     const inputRef = useRef<any>(null);
 
     const onFormCompleteHandler = useCallback(
-      (event: NativeSyntheticEvent<CardFormView.Details>) => {
-        const card = event.nativeEvent;
+      (event: NativeSyntheticEvent<{ card: CardFormView.Details }>) => {
+        const card = event.nativeEvent.card;
 
         const data: CardFormView.Details = {
           last4: card.last4,
@@ -120,19 +115,11 @@ export const CardForm = forwardRef<CardFormView.Methods, Props>(
     );
 
     const focus = () => {
-      UIManager.dispatchViewManagerCommand(
-        findNodeHandle(inputRef.current),
-        'focus' as any,
-        []
-      );
+      Commands.focus(inputRef.current);
     };
 
     const blur = () => {
-      UIManager.dispatchViewManagerCommand(
-        findNodeHandle(inputRef.current),
-        'blur' as any,
-        []
-      );
+      Commands.blur(inputRef.current);
     };
 
     useImperativeHandle(ref, () => ({
@@ -145,9 +132,6 @@ export const CardForm = forwardRef<CardFormView.Methods, Props>(
         const { focusedField } = event.nativeEvent;
         if (focusedField) {
           focusInput(inputRef.current);
-          // onFocus?.(focusedField);
-        } else {
-          // onBlur?.();
         }
       },
       []
@@ -168,7 +152,7 @@ export const CardForm = forwardRef<CardFormView.Methods, Props>(
     }, [inputRef]);
 
     return (
-      <CardFormNative
+      <NativeCardForm
         ref={inputRef}
         onFormComplete={onFormCompleteHandler}
         cardStyle={{
@@ -182,8 +166,6 @@ export const CardForm = forwardRef<CardFormView.Methods, Props>(
           textColor: cardStyle?.textColor,
           textErrorColor: cardStyle?.textErrorColor,
           fontFamily: cardStyle?.fontFamily,
-          // disabledBackgroundColor: cardStyle?.disabledBackgroundColor,
-          // type: cardStyle?.type,
         }}
         placeholders={{
           number: placeholders?.number,
@@ -195,7 +177,10 @@ export const CardForm = forwardRef<CardFormView.Methods, Props>(
           ...(defaultValues ?? {}),
         }}
         onFocusChange={onFocusHandler}
-        // postalCodeEnabled={postalCodeEnabled}
+        autofocus={autofocus ?? false}
+        dangerouslyGetFullCardDetails={dangerouslyGetFullCardDetails ?? false}
+        disabled={disabled ?? false}
+        postalCodeEnabled
         {...props}
       />
     );

package/src/components/CustomerSheet.tsx

@@ -1,32 +1,30 @@
 import React from 'react';
-import {
-  NativeEventEmitter,
-  NativeModules,
-  EmitterSubscription,
-} from 'react-native';
-import NativeStripeSdk from '../NativeStripeSdk';
+import { EventSubscription } from 'react-native';
+import NativeStripeSdk from '../specs/NativeStripeSdkModule';
 import type {
   CustomerSheetInitParams,
   CustomerSheetPresentParams,
   CustomerSheetResult,
-  CustomerSheetError,
-  StripeError,
   CustomerAdapter,
+  StripeError,
+  CustomerSheetError,
 } from '../types';
+import { addListener } from '../events';
 
-const eventEmitter = new NativeEventEmitter(NativeModules.StripeSdk);
-let fetchPaymentMethodsCallback: EmitterSubscription | null = null;
-let attachPaymentMethodCallback: EmitterSubscription | null = null;
-let detachPaymentMethodCallback: EmitterSubscription | null = null;
-let setSelectedPaymentOptionCallback: EmitterSubscription | null = null;
-let fetchSelectedPaymentOptionCallback: EmitterSubscription | null = null;
-let setupIntentClientSecretForCustomerAttachCallback: EmitterSubscription | null =
+let fetchPaymentMethodsCallback: EventSubscription | null = null;
+let attachPaymentMethodCallback: EventSubscription | null = null;
+let detachPaymentMethodCallback: EventSubscription | null = null;
+let setSelectedPaymentOptionCallback: EventSubscription | null = null;
+let fetchSelectedPaymentOptionCallback: EventSubscription | null = null;
+let setupIntentClientSecretForCustomerAttachCallback: EventSubscription | null =
   null;
 
 /** Initialize an instance of Customer Sheet with your desired configuration. */
 const initialize = async (
   params: CustomerSheetInitParams
-): Promise<{ error?: StripeError<CustomerSheetError> }> => {
+): Promise<{
+  error?: StripeError<CustomerSheetError>;
+}> => {
   let customerAdapterOverrides = {};
   if (params.customerAdapter) {
     customerAdapterOverrides = configureCustomerAdapterEventListeners(
@@ -55,7 +53,7 @@ const configureCustomerAdapterEventListeners = (
 ): { [Property in keyof CustomerAdapter]: boolean } => {
   if (customerAdapter.fetchPaymentMethods) {
     fetchPaymentMethodsCallback?.remove();
-    fetchPaymentMethodsCallback = eventEmitter.addListener(
+    fetchPaymentMethodsCallback = addListener(
       'onCustomerAdapterFetchPaymentMethodsCallback',
       async () => {
         if (customerAdapter.fetchPaymentMethods) {
@@ -74,9 +72,9 @@ const configureCustomerAdapterEventListeners = (
 
   if (customerAdapter.attachPaymentMethod) {
     attachPaymentMethodCallback?.remove();
-    attachPaymentMethodCallback = eventEmitter.addListener(
+    attachPaymentMethodCallback = addListener(
       'onCustomerAdapterAttachPaymentMethodCallback',
-      async ({ paymentMethodId }: { paymentMethodId: string }) => {
+      async ({ paymentMethodId }) => {
         if (customerAdapter.attachPaymentMethod) {
           const paymentMethod =
             await customerAdapter.attachPaymentMethod(paymentMethodId);
@@ -94,9 +92,9 @@ const configureCustomerAdapterEventListeners = (
 
   if (customerAdapter.detachPaymentMethod) {
     detachPaymentMethodCallback?.remove();
-    detachPaymentMethodCallback = eventEmitter.addListener(
+    detachPaymentMethodCallback = addListener(
       'onCustomerAdapterDetachPaymentMethodCallback',
-      async ({ paymentMethodId }: { paymentMethodId: string }) => {
+      async ({ paymentMethodId }) => {
         if (customerAdapter.detachPaymentMethod) {
           const paymentMethod =
             await customerAdapter.detachPaymentMethod(paymentMethodId);
@@ -114,9 +112,9 @@ const configureCustomerAdapterEventListeners = (
 
   if (customerAdapter.setSelectedPaymentOption) {
     setSelectedPaymentOptionCallback?.remove();
-    setSelectedPaymentOptionCallback = eventEmitter.addListener(
+    setSelectedPaymentOptionCallback = addListener(
       'onCustomerAdapterSetSelectedPaymentOptionCallback',
-      async ({ paymentOption }: { paymentOption: string }) => {
+      async ({ paymentOption }) => {
         if (customerAdapter.setSelectedPaymentOption) {
           await customerAdapter.setSelectedPaymentOption(paymentOption);
           await NativeStripeSdk.customerAdapterSetSelectedPaymentOptionCallback();
@@ -131,7 +129,7 @@ const configureCustomerAdapterEventListeners = (
 
   if (customerAdapter.fetchSelectedPaymentOption) {
     fetchSelectedPaymentOptionCallback?.remove();
-    fetchSelectedPaymentOptionCallback = eventEmitter.addListener(
+    fetchSelectedPaymentOptionCallback = addListener(
       'onCustomerAdapterFetchSelectedPaymentOptionCallback',
       async () => {
         if (customerAdapter.fetchSelectedPaymentOption) {
@@ -151,7 +149,7 @@ const configureCustomerAdapterEventListeners = (
 
   if (customerAdapter.setupIntentClientSecretForCustomerAttach) {
     setupIntentClientSecretForCustomerAttachCallback?.remove();
-    setupIntentClientSecretForCustomerAttachCallback = eventEmitter.addListener(
+    setupIntentClientSecretForCustomerAttachCallback = addListener(
       'onCustomerAdapterSetupIntentClientSecretForCustomerAttachCallback',
       async () => {
         if (customerAdapter.setupIntentClientSecretForCustomerAttach) {

package/src/components/PlatformPayButton.tsx

@@ -8,15 +8,15 @@ import {
   Platform,
   NativeSyntheticEvent,
 } from 'react-native';
-import NativeStripeSdk from '../NativeStripeSdk';
+import NativeStripeSdk from '../specs/NativeStripeSdkModule';
 import {
   ButtonType,
   ButtonStyle,
   ShippingMethod,
   ShippingContact,
 } from '../types/PlatformPay';
-import GooglePayButtonNative from './GooglePayButtonNative';
-import ApplePayButtonNative from './ApplePayButtonNative';
+import NativeApplePayButton from '../specs/NativeApplePayButton';
+import NativeGooglePayButton from '../specs/NativeGooglePayButton';
 
 /**
  *  PlatformPayButton Component Props
@@ -149,11 +149,11 @@ export function PlatformPayButton({
       style={[disabled ? styles.disabled : styles.notDisabled, style]}
     >
       {Platform.OS === 'ios' ? (
-        <ApplePayButtonNative
+        <NativeApplePayButton
           type={type}
           buttonStyle={appearance}
           borderRadius={borderRadius}
-          disabled={disabled}
+          disabled={disabled ?? false}
           onShippingMethodSelectedAction={shippingMethodCallback}
           onShippingContactSelectedAction={shippingContactCallback}
           onCouponCodeEnteredAction={couponCodeCallback}
@@ -162,7 +162,7 @@ export function PlatformPayButton({
           {...props}
         />
       ) : (
-        <GooglePayButtonNative
+        <NativeGooglePayButton
           type={type}
           appearance={appearance}
           borderRadius={borderRadius}

package/src/components/StripeContainer.tsx

@@ -1,14 +1,7 @@
 import React from 'react';
 
-import {
-  requireNativeComponent,
-  StyleProp,
-  StyleSheet,
-  ViewStyle,
-  View,
-} from 'react-native';
-
-const StripeContainerNative = requireNativeComponent<any>('StripeContainer');
+import { StyleProp, StyleSheet, ViewStyle, View } from 'react-native';
+import NativeStripeContainer from '../specs/NativeStripeContainer';
 
 /**
  *  Stripe Container Component Props
@@ -31,14 +24,14 @@ export function StripeContainer({
   children,
 }: Props) {
   return (
-    <StripeContainerNative
-      keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+    <NativeStripeContainer
+      keyboardShouldPersistTaps={keyboardShouldPersistTaps ?? true}
       style={styles.container}
     >
       <View style={styles.container} accessible={false}>
         {children}
       </View>
-    </StripeContainerNative>
+    </NativeStripeContainer>
   );
 }
 

package/src/components/StripeProvider.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 
-import NativeStripeSdk from '../NativeStripeSdk';
+import NativeStripeSdk from '../specs/NativeStripeSdkModule';
 import { isAndroid, shouldAttributeExpo } from '../helpers';
 import type { AppInfo, InitStripeParams, InitialiseParams } from '../types';
 import pjson from '../../package.json';

package/src/events.ts

@@ -0,0 +1,49 @@
+/**
+ * Compatibility helper to use new arch events if available and fallback
+ * to NativeEventEmitter or DeviceEventEmitter.
+ *
+ * Can be removed once we no longer need to support the old arch and use
+ * the methods on NativeStripeSdkModule directly.
+ */
+
+import {
+  DeviceEventEmitter,
+  EventSubscription,
+  NativeEventEmitter,
+  Platform,
+} from 'react-native';
+import NativeStripeSdkModule from './specs/NativeStripeSdkModule';
+
+const compatEventEmitter =
+  // On new arch we use native module events. On old arch this doesn't exist
+  // so use NativeEventEmitter on iOS and DeviceEventEmitter on Android.
+  NativeStripeSdkModule.onConfirmHandlerCallback == null
+    ? Platform.OS === 'ios'
+      ? new NativeEventEmitter(NativeStripeSdkModule as any)
+      : DeviceEventEmitter
+    : null;
+
+type Events =
+  | 'onConfirmHandlerCallback'
+  | 'onFinancialConnectionsEvent'
+  | 'onOrderTrackingCallback'
+  | 'onCustomerAdapterFetchPaymentMethodsCallback'
+  | 'onCustomerAdapterAttachPaymentMethodCallback'
+  | 'onCustomerAdapterDetachPaymentMethodCallback'
+  | 'onCustomerAdapterSetSelectedPaymentOptionCallback'
+  | 'onCustomerAdapterFetchSelectedPaymentOptionCallback'
+  | 'onCustomerAdapterSetupIntentClientSecretForCustomerAttachCallback'
+  | 'embeddedPaymentElementFormSheetConfirmComplete'
+  | 'embeddedPaymentElementDidUpdatePaymentOption'
+  | 'embeddedPaymentElementDidUpdateHeight'
+  | 'embeddedPaymentElementLoadingFailed';
+
+export function addListener<EventT extends Events>(
+  event: EventT,
+  handler: Parameters<(typeof NativeStripeSdkModule)[EventT]>[0]
+): EventSubscription {
+  if (compatEventEmitter != null) {
+    return compatEventEmitter.addListener(event, handler);
+  }
+  return NativeStripeSdkModule[event](handler as any);
+}

package/src/functions.ts

@@ -1,6 +1,6 @@
 import { createError } from './helpers';
 import { MissingRoutingNumber } from './types/Errors';
-import NativeStripeSdk from './NativeStripeSdk';
+import NativeStripeSdk from './specs/NativeStripeSdkModule';
 import type {
   PlatformPayError,
   ConfirmPaymentResult,
@@ -32,14 +32,10 @@ import type {
   FinancialConnections,
   PlatformPay,
 } from './types';
-import {
-  Platform,
-  NativeEventEmitter,
-  NativeModules,
-  EmitterSubscription,
-} from 'react-native';
+import { Platform, EventSubscription } from 'react-native';
 import type { CollectFinancialConnectionsAccountsParams } from './types/FinancialConnections';
 import type { CollectBankAccountTokenParams } from './types/PaymentMethod';
+import { addListener } from './events';
 
 export const createPaymentMethod = async (
   params: PaymentMethod.CreateParams,
@@ -353,10 +349,9 @@ export const verifyMicrodepositsForSetup = async (
   }
 };
 
-const eventEmitter = new NativeEventEmitter(NativeModules.StripeSdk);
-let confirmHandlerCallback: EmitterSubscription | null = null;
-let orderTrackingCallbackListener: EmitterSubscription | null = null;
-let financialConnectionsEventListener: EmitterSubscription | null = null;
+let confirmHandlerCallback: EventSubscription | null = null;
+let orderTrackingCallbackListener: EventSubscription | null = null;
+let financialConnectionsEventListener: EventSubscription | null = null;
 
 export const initPaymentSheet = async (
   params: PaymentSheet.SetupParams
@@ -365,15 +360,9 @@ export const initPaymentSheet = async (
   const confirmHandler = params?.intentConfiguration?.confirmHandler;
   if (confirmHandler) {
     confirmHandlerCallback?.remove();
-    confirmHandlerCallback = eventEmitter.addListener(
+    confirmHandlerCallback = addListener(
       'onConfirmHandlerCallback',
-      ({
-        paymentMethod,
-        shouldSavePaymentMethod,
-      }: {
-        paymentMethod: PaymentMethod.Result;
-        shouldSavePaymentMethod: boolean;
-      }) => {
+      ({ paymentMethod, shouldSavePaymentMethod }) => {
         confirmHandler(
           paymentMethod,
           shouldSavePaymentMethod,
@@ -386,7 +375,7 @@ export const initPaymentSheet = async (
   const orderTrackingCallback = params?.applePay?.setOrderTracking;
   if (orderTrackingCallback) {
     orderTrackingCallbackListener?.remove();
-    orderTrackingCallbackListener = eventEmitter.addListener(
+    orderTrackingCallbackListener = addListener(
       'onOrderTrackingCallback',
       () => {
         orderTrackingCallback(NativeStripeSdk.configureOrderTracking);
@@ -471,7 +460,7 @@ export const collectBankAccountForPayment = async (
   financialConnectionsEventListener?.remove();
 
   if (params.onEvent) {
-    financialConnectionsEventListener = eventEmitter.addListener(
+    financialConnectionsEventListener = addListener(
       'onFinancialConnectionsEvent',
       params.onEvent
     );
@@ -509,7 +498,7 @@ export const collectBankAccountForSetup = async (
   financialConnectionsEventListener?.remove();
 
   if (params.onEvent) {
-    financialConnectionsEventListener = eventEmitter.addListener(
+    financialConnectionsEventListener = addListener(
       'onFinancialConnectionsEvent',
       params.onEvent
     );
@@ -554,7 +543,7 @@ export const collectBankAccountToken = async (
   financialConnectionsEventListener?.remove();
 
   if (params.onEvent) {
-    financialConnectionsEventListener = eventEmitter.addListener(
+    financialConnectionsEventListener = addListener(
       'onFinancialConnectionsEvent',
       params.onEvent
     );
@@ -597,7 +586,7 @@ export const collectFinancialConnectionsAccounts = async (
   financialConnectionsEventListener?.remove();
 
   if (params.onEvent) {
-    financialConnectionsEventListener = eventEmitter.addListener(
+    financialConnectionsEventListener = addListener(
       'onFinancialConnectionsEvent',
       params.onEvent
     );

package/src/hooks/useFinancialConnectionsSheet.tsx

@@ -1,7 +1,7 @@
 import { useState, useCallback } from 'react';
 import { useStripe } from './useStripe';
-import type { CollectFinancialConnectionsAccountsParams } from 'src/types/FinancialConnections';
-import type { CollectBankAccountTokenParams } from 'src/types/PaymentMethod';
+import type { CollectFinancialConnectionsAccountsParams } from '../types/FinancialConnections';
+import type { CollectBankAccountTokenParams } from '../types/PaymentMethod';
 
 /**
  * React hook for accessing functions on the Financial Connections sheet.

package/src/hooks/useStripe.tsx

@@ -60,8 +60,8 @@ import {
   updatePlatformPaySheet,
   openPlatformPaySetup,
 } from '../functions';
-import type { CollectBankAccountTokenParams } from 'src/types/PaymentMethod';
-import type { CollectFinancialConnectionsAccountsParams } from 'src/types/FinancialConnections';
+import type { CollectBankAccountTokenParams } from '../types/PaymentMethod';
+import type { CollectFinancialConnectionsAccountsParams } from '../types/FinancialConnections';
 
 /**
  * useStripe hook

package/src/index.tsx

@@ -30,3 +30,6 @@ export * from './types/index';
 
 export * from './components/CustomerSheet';
 export type { Props as CustomerSheetProps } from './components/CustomerSheet';
+
+export * from './types/EmbeddedPaymentElement';
+export * from './types/PaymentSheet';

package/src/specs/NativeAddToWalletButton.ts

@@ -0,0 +1,40 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import type {
+  DirectEventHandler,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type {
+  CardActionError,
+  GooglePayCardToken,
+  StripeError,
+} from '../types';
+import type { UnsafeMixed, ImageSource } from './utils';
+
+type AddToWalletButtonCompleteEvent = Readonly<{
+  error: UnsafeMixed<StripeError<CardActionError>> | null;
+}>;
+
+type CardDetails = Readonly<{
+  primaryAccountIdentifier: string | null;
+  name: string;
+  description: string;
+  lastFour?: string;
+  brand?: string;
+}>;
+
+export interface NativeProps extends ViewProps {
+  iOSButtonStyle?: WithDefault<string, 'onDarkBackground'>;
+  androidAssetSource: ImageSource;
+  testEnv?: boolean;
+  cardDetails: UnsafeMixed<CardDetails>;
+  token?: UnsafeMixed<GooglePayCardToken> | null;
+  ephemeralKey: UnsafeMixed<object>;
+  onCompleteAction?: DirectEventHandler<AddToWalletButtonCompleteEvent>;
+}
+
+type ComponentType = HostComponent<NativeProps>;
+
+export default codegenNativeComponent<NativeProps>(
+  'AddToWalletButton'
+) as ComponentType;

package/src/specs/NativeAddressSheet.ts

@@ -0,0 +1,50 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import type {
+  DirectEventHandler,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type {
+  AddressDetails,
+  AddressSheetError,
+  PaymentSheet,
+  StripeError,
+} from '../types';
+import type { UnsafeMixed } from './utils';
+
+type CollectAddressResult = Required<AddressDetails>;
+
+type AddressSheetErrorEvent = Readonly<{
+  error: UnsafeMixed<StripeError<AddressSheetError>>;
+}>;
+
+type AdditionalFields = Readonly<{
+  phoneNumber?: string;
+  checkboxLabel?: string;
+}>;
+
+type OnSubmitActionEvent = Readonly<{
+  result: UnsafeMixed<CollectAddressResult>;
+}>;
+
+export interface NativeProps extends ViewProps {
+  visible: boolean;
+  presentationStyle?: WithDefault<string, 'popover'>;
+  animationStyle?: WithDefault<string, 'slide'>;
+  appearance?: UnsafeMixed<PaymentSheet.AppearanceParams>;
+  defaultValues?: UnsafeMixed<AddressDetails>;
+  additionalFields?: UnsafeMixed<AdditionalFields>;
+  allowedCountries?: Array<string>;
+  autocompleteCountries?: Array<string>;
+  primaryButtonTitle?: string;
+  sheetTitle?: string;
+  googlePlacesApiKey?: string;
+  onSubmitAction: DirectEventHandler<OnSubmitActionEvent>;
+  onErrorAction: DirectEventHandler<AddressSheetErrorEvent>;
+}
+
+type ComponentType = HostComponent<NativeProps>;
+
+export default codegenNativeComponent<NativeProps>(
+  'AddressSheetView'
+) as ComponentType;

package/src/specs/NativeApplePayButton.ts

@@ -0,0 +1,40 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import type {
+  DirectEventHandler,
+  Int32,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import { ShippingContact, ShippingMethod } from '../types/PlatformPay';
+import { UnsafeMixed } from './utils';
+
+type OnShippingMethodSelectedActionEvent = {
+  shippingMethod: UnsafeMixed<ShippingMethod>;
+};
+
+type OnShippingContactSelectedActionEvent = {
+  shippingContact: UnsafeMixed<ShippingContact>;
+};
+
+type OnCouponCodeEnteredActionEvent = {
+  couponCode: string;
+};
+
+type OnOrderTrackingActionEvent = {};
+
+export interface NativeProps extends ViewProps {
+  disabled: boolean;
+  type: Int32;
+  buttonStyle: Int32;
+  borderRadius?: WithDefault<Int32, 4>;
+  onShippingMethodSelectedAction?: DirectEventHandler<OnShippingMethodSelectedActionEvent>;
+  onShippingContactSelectedAction?: DirectEventHandler<OnShippingContactSelectedActionEvent>;
+  onCouponCodeEnteredAction?: DirectEventHandler<OnCouponCodeEnteredActionEvent>;
+  onOrderTrackingAction?: DirectEventHandler<OnOrderTrackingActionEvent>;
+}
+
+type ComponentType = HostComponent<NativeProps>;
+
+export default codegenNativeComponent<NativeProps>(
+  'ApplePayButton'
+) as ComponentType;

package/src/specs/NativeAuBECSDebitForm.ts

@@ -0,0 +1,24 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { AuBECSDebitFormComponent } from '../types';
+import type { UnsafeMixed } from './utils';
+
+type FormDetailsEvent = Readonly<{
+  accountNumber: string;
+  bsbNumber: string;
+  email: string;
+  name: string;
+}>;
+
+export interface NativeProps extends ViewProps {
+  companyName: string;
+  onCompleteAction: DirectEventHandler<FormDetailsEvent>;
+  formStyle?: UnsafeMixed<AuBECSDebitFormComponent.Styles>;
+}
+
+type ComponentType = HostComponent<NativeProps>;
+
+export default codegenNativeComponent<NativeProps>(
+  'AuBECSDebitForm'
+) as ComponentType;