react-native-klarna-inapp-sdk 2.1.12 → 2.2.0

package/src/KlarnaPaymentView.tsx

@@ -0,0 +1,323 @@
+import React, { Component, type RefObject } from 'react';
+import type {
+  NativeMethods,
+  NativeSyntheticEvent,
+  ViewStyle,
+} from 'react-native';
+import RNKlarnaPaymentView, {
+  RNKlarnaPaymentViewCommands,
+  type RNKlarnaPaymentViewProps,
+} from './specs/KlarnaPaymentViewNativeComponent';
+
+export interface KlarnaPaymentViewProps {
+  style: ViewStyle;
+  readonly category: string;
+  readonly returnUrl: string;
+  readonly onInitialized: () => void;
+  readonly onLoaded: () => void;
+  readonly onLoadedPaymentReview: () => void;
+  readonly onAuthorized: (
+    approved: boolean,
+    authToken: string | null,
+    finalizeRequired: boolean | null
+  ) => void;
+  readonly onReauthorized: (
+    approved: boolean,
+    authToken: string | null
+  ) => void;
+  readonly onFinalized: (approved: boolean, authToken: string | null) => void;
+  readonly onError: (error: KlarnaPaymentsSDKError) => void;
+}
+
+interface KlarnaReactPaymentViewOldProps {
+  style: ViewStyle;
+  readonly category: string;
+  readonly returnUrl?: string;
+  readonly onInitialized?: (event: any) => void;
+  readonly onLoaded?: (event: any) => void;
+  readonly onLoadedPaymentReview?: (event: any) => void;
+  readonly onAuthorized?: (event: any) => void;
+  readonly onReauthorized?: (event: any) => void;
+  readonly onFinalized?: (event: any) => void;
+  readonly onError?: (event: any) => void;
+}
+
+type KlarnaPaymentViewPropsAny =
+  | KlarnaPaymentViewProps
+  | KlarnaReactPaymentViewOldProps;
+
+interface KlarnaPaymentViewState {
+  nativeViewHeight: number;
+}
+
+export class KlarnaPaymentView extends Component<
+  KlarnaPaymentViewPropsAny,
+  KlarnaPaymentViewState
+> {
+  paymentViewRef: RefObject<
+    Component<RNKlarnaPaymentViewProps> & Readonly<NativeMethods>
+  >;
+
+  constructor(props: KlarnaPaymentViewPropsAny) {
+    super(props);
+    this.state = {
+      nativeViewHeight: 0,
+    };
+    this.paymentViewRef = React.createRef();
+  }
+
+  render() {
+    return (
+      <RNKlarnaPaymentView
+        ref={this.paymentViewRef}
+        /* eslint-disable-next-line react-native/no-inline-styles */
+        style={{
+          width: '100%',
+          height: this.state.nativeViewHeight,
+        }}
+        category={this.props.category || ''}
+        returnUrl={this.props.returnUrl || ''}
+        onInitialized={(_event: NativeSyntheticEvent<any>) => {
+          if (this.props.onInitialized != null) {
+            /**
+             * if props is the old spec {@link KlarnaReactPaymentViewOldProps}
+             */
+            if (
+              typeof this.props.onInitialized === 'function' &&
+              this.props.onInitialized.length === 1
+            ) {
+              this.props.onInitialized(_event);
+            } else {
+              // @ts-ignore
+              this.props.onInitialized();
+            }
+          }
+        }}
+        onLoaded={(_event: NativeSyntheticEvent<any>) => {
+          if (this.props.onLoaded != null) {
+            /**
+             * if props is the old spec {@link KlarnaReactPaymentViewOldProps}
+             */
+            if (
+              typeof this.props.onLoaded === 'function' &&
+              this.props.onLoaded.length === 1
+            ) {
+              this.props.onLoaded(_event);
+            } else {
+              // @ts-ignore
+              this.props.onLoaded();
+            }
+          }
+        }}
+        onLoadedPaymentReview={(_event: NativeSyntheticEvent<any>) => {
+          if (this.props.onLoadedPaymentReview != null) {
+            /**
+             * if props is the old spec {@link KlarnaReactPaymentViewOldProps}
+             */
+            if (
+              typeof this.props.onLoadedPaymentReview === 'function' &&
+              this.props.onLoadedPaymentReview.length === 1
+            ) {
+              this.props.onLoadedPaymentReview(_event);
+            } else {
+              // @ts-ignore
+              this.props.onLoadedPaymentReview();
+            }
+          }
+        }}
+        onAuthorized={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly approved: boolean;
+              readonly authToken: string | null;
+              readonly finalizeRequired: boolean;
+            }>
+          >
+        ) => {
+          if (this.props.onAuthorized != null) {
+            /**
+             * if props is the old spec {@link KlarnaReactPaymentViewOldProps}
+             */
+            if (
+              typeof this.props.onAuthorized === 'function' &&
+              this.props.onAuthorized.length === 1
+            ) {
+              // @ts-ignore
+              this.props.onAuthorized(event);
+            } else {
+              this.props.onAuthorized(
+                event.nativeEvent.approved,
+                event.nativeEvent.authToken === ''
+                  ? null
+                  : event.nativeEvent.authToken,
+                event.nativeEvent.finalizeRequired
+              );
+            }
+          }
+        }}
+        onReauthorized={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly approved: boolean;
+              readonly authToken: string | null;
+            }>
+          >
+        ) => {
+          if (this.props.onReauthorized != null) {
+            /**
+             * if props is the old spec {@link KlarnaReactPaymentViewOldProps}
+             */
+            if (
+              typeof this.props.onReauthorized === 'function' &&
+              this.props.onReauthorized.length === 1
+            ) {
+              // @ts-ignore
+              this.props.onReauthorized(event);
+            } else {
+              this.props.onReauthorized(
+                event.nativeEvent.approved,
+                event.nativeEvent.authToken === ''
+                  ? null
+                  : event.nativeEvent.authToken
+              );
+            }
+          }
+        }}
+        onFinalized={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly approved: boolean;
+              readonly authToken: string | null;
+            }>
+          >
+        ) => {
+          if (this.props.onFinalized != null) {
+            /**
+             * if props is the old spec {@link KlarnaReactPaymentViewOldProps}
+             */
+            if (
+              typeof this.props.onFinalized === 'function' &&
+              this.props.onFinalized.length === 1
+            ) {
+              // @ts-ignore
+              this.props.onFinalized(event);
+            } else {
+              this.props.onFinalized(
+                event.nativeEvent.approved,
+                event.nativeEvent.authToken === ''
+                  ? null
+                  : event.nativeEvent.authToken
+              );
+            }
+          }
+        }}
+        onError={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly error: Readonly<{
+                readonly action: string;
+                readonly isFatal: boolean;
+                readonly message: string;
+                readonly name: string;
+                // readonly invalidFields: Array<string>;
+                readonly sessionId: string;
+              }>;
+            }>
+          >
+        ) => {
+          if (this.props.onError != null) {
+            /**
+             * if props is the old spec {@link KlarnaReactPaymentViewOldProps}
+             */
+            if (
+              typeof this.props.onAuthorized === 'function' &&
+              this.props.onAuthorized.length === 1
+            ) {
+              // @ts-ignore
+              this.props.onError(event);
+            } else {
+              this.props.onError(event.nativeEvent.error);
+            }
+          }
+        }}
+        onResized={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly height: string;
+            }>
+          >
+        ) => {
+          const newHeight = Number(event.nativeEvent.height);
+          if (newHeight !== this.state.nativeViewHeight) {
+            console.log('onResized', newHeight);
+            this.setState({ nativeViewHeight: newHeight });
+          }
+        }}
+      />
+    );
+  }
+
+  initialize = (clientToken: string, returnUrl: string | null = null) => {
+    const view = this.paymentViewRef.current;
+    if (view != null) {
+      RNKlarnaPaymentViewCommands.initialize(
+        view,
+        clientToken,
+        returnUrl || ''
+      );
+    }
+  };
+
+  load = (sessionData: string | null = null) => {
+    const view = this.paymentViewRef.current;
+    if (view != null) {
+      RNKlarnaPaymentViewCommands.load(view, sessionData || '');
+    }
+  };
+
+  loadPaymentReview = () => {
+    const view = this.paymentViewRef.current;
+    if (view != null) {
+      RNKlarnaPaymentViewCommands.loadPaymentReview(view);
+    }
+  };
+
+  authorize = (
+    autoFinalize: boolean | null = true,
+    sessionData: string | null = null
+  ) => {
+    const view = this.paymentViewRef.current;
+    if (view != null) {
+      RNKlarnaPaymentViewCommands.authorize(
+        view,
+        autoFinalize || true,
+        sessionData || ''
+      );
+    }
+  };
+
+  reauthorize = (sessionData: string | null = null) => {
+    const view = this.paymentViewRef.current;
+    if (view != null) {
+      RNKlarnaPaymentViewCommands.reauthorize(view, sessionData || '');
+    }
+  };
+
+  finalize = (sessionData: string | null = null) => {
+    const view = this.paymentViewRef.current;
+    if (view != null) {
+      RNKlarnaPaymentViewCommands.finalize(view, sessionData || '');
+    }
+  };
+}
+
+export interface KlarnaPaymentsSDKError {
+  readonly action: string;
+  readonly isFatal: boolean;
+  readonly message: string;
+  readonly name: string;
+  // readonly invalidFields: Array<string>;
+  readonly sessionId: string;
+}
+
+export default KlarnaPaymentView;

package/src/KlarnaStandaloneWebView.tsx

@@ -0,0 +1,217 @@
+import React, { Component, type RefObject } from 'react';
+import type {
+  NativeMethods,
+  NativeSyntheticEvent,
+  ViewStyle,
+} from 'react-native';
+import RNKlarnaStandaloneWebView, {
+  RNKlarnaStandaloneWebViewCommands,
+  type RNKlarnaStandaloneWebViewProps,
+} from './specs/KlarnaStandaloneWebViewNativeComponent';
+import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface KlarnaWebViewProps {
+  style?: ViewStyle;
+  readonly returnUrl: string;
+  readonly onLoadStart?: (
+    navigationEvent: KlarnaWebViewNavigationEvent
+  ) => void;
+  readonly onLoadEnd?: (navigationEvent: KlarnaWebViewNavigationEvent) => void;
+  readonly onError?: (navigationError: KlarnaWebViewError) => void;
+  readonly onLoadProgress?: (progressEvent: KlarnaWebViewProgressEvent) => void;
+  readonly onKlarnaMessage?: (
+    klarnaMessageEvent: KlarnaWebViewKlarnaMessageEvent
+  ) => void;
+  /* Android only */
+  readonly onRenderProcessGone?: (
+    renderProcessGoneEvent: KlarnaWebViewRenderProcessGoneEvent
+  ) => void;
+  /* End of Android only */
+}
+
+export class KlarnaStandaloneWebView extends Component<
+  KlarnaWebViewProps,
+  any
+> {
+  standaloneWebViewRef: RefObject<
+    Component<RNKlarnaStandaloneWebViewProps> & Readonly<NativeMethods>
+  >;
+
+  constructor(props: KlarnaWebViewProps) {
+    super(props);
+    this.standaloneWebViewRef = React.createRef();
+  }
+
+  render() {
+    return (
+      <RNKlarnaStandaloneWebView
+        ref={this.standaloneWebViewRef}
+        style={this.props.style}
+        returnUrl={this.props.returnUrl || ''}
+        onLoadStart={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly navigationEvent: Readonly<{
+                readonly url: string;
+                readonly loading: boolean;
+                readonly title: string;
+                readonly canGoBack: boolean;
+                readonly canGoForward: boolean;
+              }>;
+            }>
+          >
+        ) => {
+          if (this.props.onLoadStart != null) {
+            this.props.onLoadStart(event.nativeEvent.navigationEvent);
+          }
+        }}
+        onLoadEnd={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly navigationEvent: Readonly<{
+                readonly url: string;
+                readonly loading: boolean;
+                readonly title: string;
+                readonly canGoBack: boolean;
+                readonly canGoForward: boolean;
+              }>;
+            }>
+          >
+        ) => {
+          if (this.props.onLoadEnd != null) {
+            this.props.onLoadEnd(event.nativeEvent.navigationEvent);
+          }
+        }}
+        onError={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly error: Readonly<{
+                readonly url: string;
+                readonly loading: boolean;
+                readonly title: string;
+                readonly canGoBack: boolean;
+                readonly canGoForward: boolean;
+                readonly code: number;
+                readonly description: string;
+              }>;
+            }>
+          >
+        ) => {
+          if (this.props.onError != null) {
+            this.props.onError(event.nativeEvent.error);
+          }
+        }}
+        onLoadProgress={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly progressEvent: Readonly<{
+                readonly url: string;
+                readonly loading: boolean;
+                readonly title: string;
+                readonly canGoBack: boolean;
+                readonly canGoForward: boolean;
+                readonly progress: Double;
+              }>;
+            }>
+          >
+        ) => {
+          if (this.props.onLoadProgress != null) {
+            this.props.onLoadProgress(event.nativeEvent.progressEvent);
+          }
+        }}
+        onKlarnaMessage={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly klarnaMessageEvent: Readonly<{
+                readonly action: string;
+                // Dictionary is not support for events
+                // readonly params: { [key: string]: any };
+              }>;
+            }>
+          >
+        ) => {
+          if (this.props.onKlarnaMessage != null) {
+            this.props.onKlarnaMessage(event.nativeEvent.klarnaMessageEvent);
+          }
+        }}
+        onRenderProcessGone={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly renderProcessGoneEvent: Readonly<{
+                readonly didCrash: boolean;
+              }>;
+            }>
+          >
+        ) => {
+          if (this.props.onRenderProcessGone != null) {
+            this.props.onRenderProcessGone(
+              event.nativeEvent.renderProcessGoneEvent
+            );
+          }
+        }}
+      />
+    );
+  }
+
+  load = (url: string) => {
+    const view = this.standaloneWebViewRef.current;
+    if (view != null) {
+      RNKlarnaStandaloneWebViewCommands.load(view, url);
+    }
+  };
+
+  goForward = () => {
+    const view = this.standaloneWebViewRef.current;
+    if (view != null) {
+      RNKlarnaStandaloneWebViewCommands.goForward(view);
+    }
+  };
+
+  goBack = () => {
+    const view = this.standaloneWebViewRef.current;
+    if (view != null) {
+      RNKlarnaStandaloneWebViewCommands.goBack(view);
+    }
+  };
+
+  reload = () => {
+    const view = this.standaloneWebViewRef.current;
+    if (view != null) {
+      RNKlarnaStandaloneWebViewCommands.reload(view);
+    }
+  };
+}
+
+export interface KlarnaWebViewNativeEvent {
+  readonly url: string;
+  readonly loading: boolean;
+  readonly title: string;
+  readonly canGoBack: boolean;
+  readonly canGoForward: boolean;
+}
+
+export interface KlarnaWebViewNavigationEvent
+  extends KlarnaWebViewNativeEvent {}
+
+export interface KlarnaWebViewError extends KlarnaWebViewNativeEvent {
+  readonly code: number;
+  readonly description: string;
+}
+
+export interface KlarnaWebViewProgressEvent extends KlarnaWebViewNativeEvent {
+  readonly progress: number;
+}
+
+export interface KlarnaWebViewKlarnaMessageEvent {
+  readonly action: string;
+  // Dictionary is not supported for events
+  // readonly params: { [key: string]: any };
+  // TODO What is a KlarnaWebViewComponent?
+  // readonly component: KlarnaWebViewComponent;
+}
+
+export interface KlarnaWebViewRenderProcessGoneEvent {
+  readonly didCrash: boolean;
+}
+
+export default KlarnaStandaloneWebView;

package/src/index.tsx

@@ -0,0 +1,2 @@
+export * from './KlarnaPaymentView';
+export * from './KlarnaStandaloneWebView';

package/src/specs/KlarnaPaymentViewNativeComponent.ts

@@ -0,0 +1,99 @@
+import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
+import type { HostComponent } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+import React from 'react';
+
+export interface RNKlarnaPaymentViewProps extends ViewProps {
+  readonly category: string;
+  readonly returnUrl: string;
+  readonly onInitialized: DirectEventHandler<null>;
+  readonly onLoaded: DirectEventHandler<null>;
+  readonly onLoadedPaymentReview: DirectEventHandler<null>;
+  readonly onAuthorized: DirectEventHandler<
+    Readonly<{
+      readonly approved: boolean;
+      readonly authToken: string | null;
+      readonly finalizeRequired: boolean;
+    }>
+  >;
+  readonly onReauthorized: DirectEventHandler<
+    Readonly<{
+      readonly approved: boolean;
+      readonly authToken: string | null;
+    }>
+  >;
+  readonly onFinalized: DirectEventHandler<
+    Readonly<{
+      readonly approved: boolean;
+      readonly authToken: string | null;
+    }>
+  >;
+  readonly onError: DirectEventHandler<
+    Readonly<{
+      readonly error: Readonly<{
+        readonly action: string;
+        readonly isFatal: boolean;
+        readonly message: string;
+        readonly name: string;
+        // not supported yet https://github.com/facebook/react-native/issues/36817#issuecomment-1697107218
+        // readonly invalidFields: Array<string>;
+        readonly sessionId: string;
+      }>;
+    }>
+  >;
+  readonly onResized: DirectEventHandler<
+    Readonly<{
+      // number not supported for events
+      readonly height: string;
+    }>
+  >;
+}
+
+type KlarnaPaymentViewNativeComponentType =
+  HostComponent<RNKlarnaPaymentViewProps>;
+
+interface RNKlarnaPaymentViewNativeCommands {
+  initialize: (
+    viewRef: React.ElementRef<KlarnaPaymentViewNativeComponentType>,
+    clientToken: string,
+    returnUrl: string | null
+  ) => void;
+  load: (
+    viewRef: React.ElementRef<KlarnaPaymentViewNativeComponentType>,
+    sessionData: string | null
+  ) => void;
+  loadPaymentReview: (
+    viewRef: React.ElementRef<KlarnaPaymentViewNativeComponentType>
+  ) => void;
+  authorize: (
+    viewRef: React.ElementRef<KlarnaPaymentViewNativeComponentType>,
+    autoFinalize: boolean,
+    sessionData: string | null
+  ) => void;
+  reauthorize: (
+    viewRef: React.ElementRef<KlarnaPaymentViewNativeComponentType>,
+    sessionData: string | null
+  ) => void;
+  finalize: (
+    viewRef: React.ElementRef<KlarnaPaymentViewNativeComponentType>,
+    sessionData: string | null
+  ) => void;
+}
+
+export const RNKlarnaPaymentViewCommands: RNKlarnaPaymentViewNativeCommands =
+  codegenNativeCommands<RNKlarnaPaymentViewNativeCommands>({
+    supportedCommands: [
+      'initialize',
+      'load',
+      'loadPaymentReview',
+      'authorize',
+      'reauthorize',
+      'finalize',
+    ],
+  });
+
+export default codegenNativeComponent<RNKlarnaPaymentViewProps>(
+  'RNKlarnaPaymentView'
+) as KlarnaPaymentViewNativeComponentType;