diff --git a/src/AdyenCheckoutContext.tsx b/src/AdyenCheckoutContext.tsx index 038bc6a5..1c9ae722 100644 --- a/src/AdyenCheckoutContext.tsx +++ b/src/AdyenCheckoutContext.tsx @@ -23,6 +23,8 @@ import { SessionResponse, PaymentMethodData, PaymentDetailsData, + StoredPaymentMethod, + SubmitModel, } from './core/types'; import { Configuration } from './core/configurations/Configuration'; import { checkPaymentMethodsResponse, checkConfiguration } from './core/utils'; @@ -36,6 +38,7 @@ import { isRemovesStoredPaymentComponent, RemovesStoredPayment, } from './wrappers/RemoveStoredPaymentComponentWrapper'; +import { AddressLookupItem } from './core/configurations/AddressLookup'; /** * Returns AdyenCheckout context. This context allows you to initiate payment with Drop-in or any payment method available in `paymentMethods` collection. @@ -79,7 +82,7 @@ type AdyenCheckoutProps = { */ onSubmit?: ( data: PaymentMethodData, - component: AdyenComponent, + component: AdyenActionComponent, extra?: any ) => void; /** @@ -137,7 +140,7 @@ const AdyenCheckout: React.FC = ({ ( configuration: Configuration, data: any, - nativeComponent: AdyenComponent, + nativeComponent: AdyenActionComponent, extra: any ) => { const payload = { @@ -150,17 +153,17 @@ const AdyenCheckout: React.FC = ({ ); const removeEventListeners = useCallback(() => { - subscriptions.current.forEach((s) => s.remove()); + subscriptions.current.forEach((s: EmitterSubscription) => s.remove()); }, [subscriptions]); const startEventListeners = useCallback( ( configuration: Configuration, - nativeComponent: AdyenComponent & NativeModule + nativeComponent: AdyenActionComponent & NativeModule ) => { const eventEmitter = new NativeEventEmitter(nativeComponent); subscriptions.current = [ - eventEmitter.addListener(Event.onSubmit, (response) => + eventEmitter.addListener(Event.onSubmit, (response: SubmitModel) => submitPayment( configuration, response.paymentData, @@ -175,60 +178,59 @@ const AdyenCheckout: React.FC = ({ if (nativeComponent.events.includes(Event.onComplete)) { subscriptions.current.push( - eventEmitter.addListener(Event.onComplete, (data) => + eventEmitter.addListener(Event.onComplete, (data: any) => onComplete?.(data, nativeComponent) ) ); } if (isActionComponent(nativeComponent)) { + const nativeModule = nativeComponent as unknown as AdyenActionComponent; subscriptions.current.push( - eventEmitter.addListener(Event.onAdditionalDetails, (data) => - onAdditionalDetails?.( - data, - nativeComponent as unknown as AdyenActionComponent - ) + eventEmitter.addListener( + Event.onAdditionalDetails, + (data: PaymentDetailsData) => + onAdditionalDetails?.(data, nativeModule) ) ); } if (isRemovesStoredPaymentComponent(nativeComponent)) { - console.debug('Subcribing for onDisableStoredPaymentMethod'); + const nativeModule = nativeComponent as unknown as RemovesStoredPayment; subscriptions.current.push( - eventEmitter.addListener(Event.onDisableStoredPaymentMethod, (data) => - configuration.dropin?.onDisableStoredPaymentMethod?.( - data, - () => { - ( - nativeComponent as unknown as RemovesStoredPayment - ).removeStored(true); - }, - () => { - ( - nativeComponent as unknown as RemovesStoredPayment - ).removeStored(false); - } - ) + eventEmitter.addListener( + Event.onDisableStoredPaymentMethod, + (data: StoredPaymentMethod) => + configuration.dropin?.onDisableStoredPaymentMethod?.( + data, + () => { + nativeModule.removeStored(true); + }, + () => { + nativeModule.removeStored(false); + } + ) ) ); } if (isAddressLooker(nativeComponent)) { + const nativeModule = nativeComponent as unknown as AddressLookup; subscriptions.current.push( - eventEmitter.addListener(Event.onAddressUpdate, async (prompt) => { - configuration.card?.onUpdateAddress?.( - prompt, - nativeComponent as unknown as AddressLookup - ); - }) + eventEmitter.addListener( + Event.onAddressUpdate, + async (prompt: string) => { + configuration.card?.onUpdateAddress?.(prompt, nativeModule); + } + ) ); subscriptions.current.push( - eventEmitter.addListener(Event.onAddressConfirm, (address) => { - configuration.card?.onConfirmAddress?.( - address, - nativeComponent as unknown as AddressLookup - ); - }) + eventEmitter.addListener( + Event.onAddressConfirm, + (address: AddressLookupItem) => { + configuration.card?.onConfirmAddress?.(address, nativeModule); + } + ) ); } }, diff --git a/src/core/types.ts b/src/core/types.ts index 0c9c35e0..a2004fcb 100644 --- a/src/core/types.ts +++ b/src/core/types.ts @@ -240,3 +240,8 @@ export interface AdyenError { message: string; errorCode: string; } + +export interface SubmitModel { + paymentData: PaymentMethodData; + extra?: any; +} \ No newline at end of file diff --git a/src/wrappers/getWrapper.tsx b/src/wrappers/getWrapper.tsx index dba10b43..58542b3b 100644 --- a/src/wrappers/getWrapper.tsx +++ b/src/wrappers/getWrapper.tsx @@ -10,9 +10,8 @@ import { UNSUPPORTED_PAYMENT_METHOD_ERROR, } from '../core/constants'; import { PaymentMethod, PaymentMethodsResponse } from '../core/types'; -import { ComponentWrapper } from './ComponentWrapper'; import { ActionHandlingComponentWrapper } from './ActionHandlingComponentWrapper'; -import { AdyenComponent } from '../core/AdyenNativeModules'; +import { AdyenActionComponent } from '../core/AdyenNativeModules'; import { AdyenDropIn } from '../modules/DropInModule'; import { AdyenInstant } from '../modules/AdyenInstant'; import { AdyenApplePay } from '../modules/AdyenApplePay'; @@ -26,7 +25,7 @@ export function getWrapper( typeName: string, paymentMethods: PaymentMethodsResponse ): { - nativeComponent: AdyenComponent & NativeModule; + nativeComponent: AdyenActionComponent & NativeModule; paymentMethod?: PaymentMethod; } { switch (typeName) { @@ -41,7 +40,7 @@ export function getWrapper( }; case 'applepay': return { - nativeComponent: new ComponentWrapper({ + nativeComponent: new ActionHandlingComponentWrapper({ nativeModule: AdyenApplePay, }), }; @@ -65,7 +64,7 @@ export function getWrapper( throw new Error(UNSUPPORTED_PAYMENT_METHOD_ERROR + typeName); } - let nativeComponent: AdyenComponent & NativeModule; + let nativeComponent: AdyenActionComponent & NativeModule; if (ADDRESS_COMPONENTS.includes(typeName)) { nativeComponent = new DropInComponentWrapper({ nativeModule: AdyenDropIn,