react-native-klarna-inapp-sdk 2.4.10 → 2.5.1

package/src/KlarnaExpressCheckoutView.tsx

@@ -0,0 +1,169 @@
+import React, { Component, type RefObject } from 'react';
+import type {
+  NativeMethods,
+  NativeSyntheticEvent,
+  ViewStyle,
+} from 'react-native';
+import type { KlarnaMobileSDKError } from './types/common/KlarnaMobileSDKError';
+import type { KlarnaEnvironment } from './types/common/KlarnaEnvironment';
+import type { KlarnaRegion } from './types/common/KlarnaRegion';
+import type { KlarnaExpressCheckoutSessionOptions } from './types/common/KlarnaExpressCheckoutSessionOptions';
+import type { KlarnaButtonTheme } from './types/button/KlarnaButtonTheme';
+import type { KlarnaButtonShape } from './types/button/KlarnaButtonShape';
+import type { KlarnaButtonStyle } from './types/button/KlarnaButtonStyle';
+import RNKlarnaExpressCheckoutView, {
+  type RNKlarnaExpressCheckoutViewProps,
+} from './specs/KlarnaExpressCheckoutViewNativeComponent';
+
+export interface KlarnaExpressCheckoutAuthorizationResponse {
+  readonly showForm: boolean;
+  readonly approved: boolean;
+  readonly finalizedRequired: boolean;
+  readonly clientToken: string;
+  readonly authorizationToken: string;
+  readonly sessionId: string;
+  readonly collectedShippingAddress: string;
+  readonly merchantReference1: string;
+  readonly merchantReference2: string;
+}
+
+export interface KlarnaExpressCheckoutViewProps {
+  style?: ViewStyle;
+  // Session
+  readonly sessionOptions: KlarnaExpressCheckoutSessionOptions;
+  // Required
+  readonly locale: string;
+  readonly environment: KlarnaEnvironment;
+  readonly region: KlarnaRegion;
+  readonly returnUrl: string;
+  // Style
+  readonly theme?: KlarnaButtonTheme;
+  readonly shape?: KlarnaButtonShape;
+  readonly buttonStyle?: KlarnaButtonStyle;
+  // Optional
+  readonly autoFinalize?: boolean;
+  readonly collectShippingAddress?: boolean;
+  readonly sessionData?: string;
+  // Callbacks
+  readonly onAuthorized?: (
+    response: KlarnaExpressCheckoutAuthorizationResponse
+  ) => void;
+  readonly onError?: (error: KlarnaMobileSDKError) => void;
+}
+
+interface KlarnaExpressCheckoutViewState {
+  nativeViewHeight: number;
+}
+
+const normalizeSessionData = (sessionData?: string): string => {
+  if (sessionData?.trim()) {
+    return sessionData;
+  }
+  return '';
+};
+
+export class KlarnaExpressCheckoutView extends Component<
+  KlarnaExpressCheckoutViewProps,
+  KlarnaExpressCheckoutViewState
+> {
+  viewRef: RefObject<
+    Component<RNKlarnaExpressCheckoutViewProps> & Readonly<NativeMethods>
+  >;
+
+  constructor(props: KlarnaExpressCheckoutViewProps) {
+    super(props);
+    this.state = {
+      nativeViewHeight: 0,
+    };
+    this.viewRef = React.createRef();
+  }
+
+  render() {
+    return (
+      <RNKlarnaExpressCheckoutView
+        ref={this.viewRef}
+        /* eslint-disable-next-line react-native/no-inline-styles */
+        style={{
+          width: '100%',
+          height:
+            this.state.nativeViewHeight > 0 ? this.state.nativeViewHeight : 48,
+          ...this.props.style,
+        }}
+        sessionType={
+          'clientId' in this.props.sessionOptions ? 'clientId' : 'clientToken'
+        }
+        clientId={
+          'clientId' in this.props.sessionOptions
+            ? this.props.sessionOptions.clientId
+            : ''
+        }
+        clientToken={
+          'clientToken' in this.props.sessionOptions
+            ? this.props.sessionOptions.clientToken
+            : ''
+        }
+        locale={this.props.locale}
+        environment={this.props.environment}
+        region={this.props.region}
+        returnUrl={this.props.returnUrl}
+        theme={this.props.theme ?? ''}
+        shape={this.props.shape ?? ''}
+        buttonStyle={this.props.buttonStyle ?? ''}
+        autoFinalize={this.props.autoFinalize ?? true}
+        collectShippingAddress={this.props.collectShippingAddress ?? false}
+        sessionData={normalizeSessionData(this.props.sessionData)}
+        onAuthorized={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly authorizationResponse: Readonly<{
+                readonly showForm: boolean;
+                readonly approved: boolean;
+                readonly finalizedRequired: boolean;
+                readonly clientToken: string;
+                readonly authorizationToken: string;
+                readonly sessionId: string;
+                readonly collectedShippingAddress: string;
+                readonly merchantReference1: string;
+                readonly merchantReference2: string;
+              }>;
+            }>
+          >
+        ) => {
+          this.props.onAuthorized?.(event.nativeEvent.authorizationResponse);
+        }}
+        onError={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly error: Readonly<{
+                readonly isFatal: boolean;
+                readonly message: string;
+                readonly name: string;
+              }>;
+            }>
+          >
+        ) => {
+          const mobileSdkError: KlarnaMobileSDKError = {
+            isFatal: event.nativeEvent.error.isFatal,
+            message: event.nativeEvent.error.message,
+            name: event.nativeEvent.error.name,
+          };
+          this.props.onError?.(mobileSdkError);
+        }}
+        onResized={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly height: string;
+            }>
+          >
+        ) => {
+          const newHeight = Number(event.nativeEvent.height);
+          if (newHeight !== this.state.nativeViewHeight) {
+            this.setState({ nativeViewHeight: newHeight });
+          }
+        }}
+      />
+    );
+  }
+}
+
+export default KlarnaExpressCheckoutView;

package/src/KlarnaOSMView.tsx

@@ -0,0 +1,157 @@
+import React, { Component, type RefObject } from 'react';
+import {
+  type NativeMethods,
+  type NativeSyntheticEvent,
+  StyleSheet,
+  type ViewStyle,
+} from 'react-native';
+import type { KlarnaMobileSDKError } from './types/common/KlarnaMobileSDKError';
+import type { KlarnaOSMPlacementKey } from './types/common/KlarnaOSMPlacementKey';
+import { KlarnaEnvironment } from './types/common/KlarnaEnvironment';
+import { KlarnaRegion } from './types/common/KlarnaRegion';
+import { KlarnaTheme } from './types/common/KlarnaTheme';
+import RNKlarnaOSMView, {
+  Commands as RNKlarnaOSMViewCommands,
+  type RNKlarnaOSMViewProps,
+} from './specs/KlarnaOSMViewNativeComponent';
+
+export interface KlarnaOSMViewProps {
+  style?: ViewStyle;
+  readonly clientId: string;
+  readonly placementKey: KlarnaOSMPlacementKey;
+  readonly locale: string;
+  readonly purchaseAmount: string;
+  readonly environment: KlarnaEnvironment;
+  readonly region: KlarnaRegion;
+  readonly theme?: KlarnaTheme;
+  readonly backgroundColor?: string;
+  readonly textColor?: string;
+  readonly returnUrl?: string;
+  readonly onError?: (error: KlarnaMobileSDKError) => void;
+}
+
+interface KlarnaOSMViewState {
+  nativeViewHeight: number;
+}
+
+export class KlarnaOSMView extends Component<
+  KlarnaOSMViewProps,
+  KlarnaOSMViewState
+> {
+  private osmViewRef: RefObject<
+    Component<RNKlarnaOSMViewProps> & Readonly<NativeMethods>
+  >;
+  private isOSMViewReady = false;
+  private hasError = false;
+
+  constructor(props: KlarnaOSMViewProps) {
+    super(props);
+    this.state = {
+      nativeViewHeight: 0,
+    };
+    this.osmViewRef = React.createRef();
+  }
+
+  componentDidUpdate(prevProps: KlarnaOSMViewProps) {
+    if (
+      this.isOSMViewReady &&
+      (prevProps.clientId !== this.props.clientId ||
+        prevProps.placementKey !== this.props.placementKey ||
+        prevProps.locale !== this.props.locale ||
+        prevProps.purchaseAmount !== this.props.purchaseAmount ||
+        prevProps.environment !== this.props.environment ||
+        prevProps.region !== this.props.region ||
+        prevProps.theme !== this.props.theme ||
+        prevProps.backgroundColor !== this.props.backgroundColor ||
+        prevProps.textColor !== this.props.textColor)
+    ) {
+      this.renderNative();
+    }
+  }
+
+  componentWillUnmount() {
+    this.isOSMViewReady = false;
+  }
+
+  render() {
+    return (
+      <RNKlarnaOSMView
+        ref={this.osmViewRef}
+        style={[
+          styles.container,
+          this.props.style,
+          { height: this.state.nativeViewHeight },
+        ]}
+        clientId={this.props.clientId}
+        placementKey={this.props.placementKey}
+        locale={this.props.locale}
+        purchaseAmount={this.props.purchaseAmount}
+        environment={this.props.environment}
+        region={this.props.region}
+        theme={this.props.theme ?? KlarnaTheme.Automatic}
+        backgroundColor={this.props.backgroundColor ?? ''}
+        textColor={this.props.textColor ?? ''}
+        returnUrl={this.props.returnUrl ?? ''}
+        onError={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly error: Readonly<{
+                readonly isFatal: boolean;
+                readonly message: string;
+                readonly name: string;
+              }>;
+            }>
+          >
+        ) => {
+          const mobileSdkError: KlarnaMobileSDKError = {
+            isFatal: event.nativeEvent.error.isFatal,
+            message: event.nativeEvent.error.message,
+            name: event.nativeEvent.error.name,
+          };
+          this.hasError = true;
+          this.setState({ nativeViewHeight: 0 });
+          this.props.onError?.(mobileSdkError);
+        }}
+        onResized={(
+          event: NativeSyntheticEvent<
+            Readonly<{
+              readonly height: string;
+            }>
+          >
+        ) => {
+          if (this.hasError) {
+            return;
+          }
+          const newHeight = Number(event.nativeEvent.height);
+          if (
+            !Number.isNaN(newHeight) &&
+            newHeight !== this.state.nativeViewHeight
+          ) {
+            this.setState({ nativeViewHeight: newHeight });
+          }
+        }}
+        onOSMViewReady={() => {
+          this.isOSMViewReady = true;
+          setTimeout(() => this.renderNative(), 0);
+        }}
+      />
+    );
+  }
+
+  private renderNative = () => {
+    this.hasError = false;
+    const view = this.osmViewRef.current;
+    if (view != null) {
+      RNKlarnaOSMViewCommands.render(view);
+    }
+  };
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    overflow: 'hidden',
+  },
+});
+
+export default KlarnaOSMView;

package/src/KlarnaStandaloneWebView.tsx

@@ -201,8 +201,7 @@ interface KlarnaWebViewNativeEvent {
   readonly canGoForward: boolean;
 }
 
-export interface KlarnaWebViewNavigationEvent
-  extends KlarnaWebViewNativeEvent {}
+export interface KlarnaWebViewNavigationEvent extends KlarnaWebViewNativeEvent {}
 
 export interface KlarnaWebViewError extends KlarnaWebViewNativeEvent {
   readonly code: number;

package/src/index.tsx

@@ -2,3 +2,14 @@ export * from './KlarnaPaymentView';
 export * from './KlarnaStandaloneWebView';
 export * from './KlarnaCheckoutView';
 export * from './KlarnaSignInSDK';
+export * from './KlarnaExpressCheckoutView';
+export * from './types/common/KlarnaEnvironment';
+export * from './types/common/KlarnaRegion';
+export * from './types/common/KlarnaExpressCheckoutSessionOptions';
+export * from './types/button/KlarnaButtonTheme';
+export * from './types/button/KlarnaButtonShape';
+export * from './types/button/KlarnaButtonStyle';
+export * from './KlarnaOSMView';
+export * from './types/common/KlarnaTheme';
+export { KlarnaEnvironment } from './types/common/KlarnaEnvironment';
+export { KlarnaRegion } from './types/common/KlarnaRegion';

package/src/specs/KlarnaExpressCheckoutViewNativeComponent.ts

@@ -0,0 +1,66 @@
+import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
+import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+import type { HostComponent } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface RNKlarnaExpressCheckoutViewProps extends ViewProps {
+  // Session configuration
+  readonly sessionType: string;
+  readonly clientId: string;
+  readonly clientToken: string;
+
+  // Required configuration
+  readonly locale: string;
+  readonly environment: string;
+  readonly region: string;
+  readonly returnUrl: string;
+
+  // Style props
+  readonly theme: string;
+  readonly shape: string;
+  readonly buttonStyle: string;
+
+  // Optional configuration
+  readonly autoFinalize: boolean;
+  readonly collectShippingAddress: boolean;
+  readonly sessionData: string;
+
+  // Events
+  readonly onAuthorized: DirectEventHandler<
+    Readonly<{
+      readonly authorizationResponse: Readonly<{
+        readonly showForm: boolean;
+        readonly approved: boolean;
+        readonly finalizedRequired: boolean;
+        readonly clientToken: string;
+        readonly authorizationToken: string;
+        readonly sessionId: string;
+        readonly collectedShippingAddress: string;
+        readonly merchantReference1: string;
+        readonly merchantReference2: string;
+      }>;
+    }>
+  >;
+  readonly onError: DirectEventHandler<
+    Readonly<{
+      readonly error: Readonly<{
+        readonly isFatal: boolean;
+        readonly message: string;
+        readonly name: string;
+      }>;
+    }>
+  >;
+  readonly onResized: DirectEventHandler<
+    Readonly<{
+      // number not supported for events
+      readonly height: string;
+    }>
+  >;
+}
+
+type KlarnaExpressCheckoutViewNativeComponentType =
+  HostComponent<RNKlarnaExpressCheckoutViewProps>;
+
+export default codegenNativeComponent<RNKlarnaExpressCheckoutViewProps>(
+  'RNKlarnaExpressCheckoutView'
+) as KlarnaExpressCheckoutViewNativeComponentType;

package/src/specs/KlarnaOSMViewNativeComponent.ts

@@ -0,0 +1,50 @@
+import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
+import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+import type { HostComponent } from 'react-native';
+import React from 'react';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export interface RNKlarnaOSMViewProps extends ViewProps {
+  readonly clientId: string;
+  readonly placementKey: string;
+  readonly locale: string;
+  readonly purchaseAmount: string;
+  readonly environment: string;
+  readonly region: string;
+  readonly theme: string;
+  readonly backgroundColor: string;
+  readonly textColor: string;
+  readonly returnUrl?: string;
+  readonly onError: DirectEventHandler<
+    Readonly<{
+      readonly error: Readonly<{
+        readonly isFatal: boolean;
+        readonly message: string;
+        readonly name: string;
+      }>;
+    }>
+  >;
+  readonly onResized: DirectEventHandler<
+    Readonly<{
+      // number not supported for events
+      readonly height: string;
+    }>
+  >;
+  readonly onOSMViewReady?: DirectEventHandler<{}>;
+}
+
+type KlarnaOSMViewNativeComponentType = HostComponent<RNKlarnaOSMViewProps>;
+
+interface RNKlarnaOSMViewNativeCommands {
+  render: (viewRef: React.ElementRef<KlarnaOSMViewNativeComponentType>) => void;
+}
+
+export const Commands: RNKlarnaOSMViewNativeCommands =
+  codegenNativeCommands<RNKlarnaOSMViewNativeCommands>({
+    supportedCommands: ['render'],
+  });
+
+export default codegenNativeComponent<RNKlarnaOSMViewProps>(
+  'RNKlarnaOSMView'
+) as KlarnaOSMViewNativeComponentType;

package/src/specs/NativeKlarnaSignIn.ts

@@ -1,6 +1,6 @@
 import type { TurboModule } from 'react-native';
 import { TurboModuleRegistry } from 'react-native';
-import type { KlarnaProductEvent } from 'src/types/common/KlarnaProductEvent';
+import { KlarnaProductEvent } from '../types/common/KlarnaProductEvent';
 
 export interface Spec extends TurboModule {
   init(

package/src/types/button/KlarnaButtonShape.ts

@@ -0,0 +1,5 @@
+export enum KlarnaButtonShape {
+  RoundedRect = 'roundedRect',
+  Pill = 'pill',
+  Rectangle = 'rectangle',
+}

package/src/types/button/KlarnaButtonStyle.ts

@@ -0,0 +1,4 @@
+export enum KlarnaButtonStyle {
+  Filled = 'filled',
+  Outlined = 'outlined',
+}

package/src/types/button/KlarnaButtonTheme.ts

@@ -0,0 +1,5 @@
+export enum KlarnaButtonTheme {
+  Light = 'light',
+  Dark = 'dark',
+  Auto = 'auto',
+}

package/src/types/common/KlarnaExpressCheckoutSessionOptions.ts

@@ -0,0 +1,13 @@
+export namespace KlarnaExpressCheckoutSessionOptions {
+  export interface ClientSideSession {
+    readonly clientId: string;
+  }
+
+  export interface ServerSideSession {
+    readonly clientToken: string;
+  }
+}
+
+export type KlarnaExpressCheckoutSessionOptions =
+  | KlarnaExpressCheckoutSessionOptions.ClientSideSession
+  | KlarnaExpressCheckoutSessionOptions.ServerSideSession;

package/src/types/common/KlarnaOSMPlacementKey.ts

@@ -0,0 +1,3 @@
+export type KlarnaOSMPlacementKey =
+  | 'credit-promotion-auto-size'
+  | 'credit-promotion-badge';

package/src/types/common/KlarnaTheme.ts

@@ -0,0 +1,5 @@
+export enum KlarnaTheme {
+  Light = 'light',
+  Dark = 'dark',
+  Automatic = 'automatic',
+}