react-native-klarna-inapp-sdk 2.2.5 → 2.3.0

package/README.md

@@ -8,8 +8,9 @@
 
 This library wraps Klarna Mobile SDK and exposes its functionality as React Native components. It
 currently has the following components:
-- `KlarnaPaymentView` to integrate Klarna Payments,
-- `KlarnaStandaloneWebView` to integrate Klarna Standalone WebView.
+- `KlarnaPaymentView` to integrate Klarna Payments
+- `KlarnaStandaloneWebView` to integrate Klarna Standalone WebView
+- `KlarnaCheckoutView` to integrate Klarna Checkout
 
 This repository also includes a test application that you can use to see how it works.
 

package/android/build.gradle

@@ -110,16 +110,16 @@ dependencies {
 
     implementation 'com.klarna.mobile:sdk:2.6.17'
 
-    testImplementation "junit:junit:4.13"
-    testImplementation 'androidx.test:core:1.2.0'
-    testImplementation "org.robolectric:robolectric:4.3"
-    testImplementation "org.mockito:mockito-core:3.3.3"
-    testImplementation "org.mockito:mockito-inline:2.19.0"
-    testImplementation "org.powermock:powermock-core:2.0.7"
-    testImplementation "org.powermock:powermock-api-mockito2:2.0.7"
-    testImplementation "org.powermock:powermock-module-junit4:2.0.7"
-    testImplementation "org.powermock:powermock-module-junit4-rule:2.0.7"
-    testImplementation "org.powermock:powermock-classloading-xstream:2.0.7"
+    testImplementation "junit:junit:4.13.2"
+    testImplementation 'androidx.test:core:1.5.0'
+    testImplementation "org.robolectric:robolectric:4.11.1"
+    testImplementation "org.mockito:mockito-core:2.28.2"
+    testImplementation "org.mockito:mockito-inline:2.28.2"
+    testImplementation "org.powermock:powermock-core:2.0.9"
+    testImplementation "org.powermock:powermock-api-mockito2:2.0.9"
+    testImplementation "org.powermock:powermock-module-junit4:2.0.9"
+    testImplementation "org.powermock:powermock-module-junit4-rule:2.0.9"
+    testImplementation "org.powermock:powermock-classloading-xstream:2.0.9"
 }
 
 // removed from the docs but we can keep it

package/android/src/main/java/com/klarna/mobile/sdk/reactnative/KlarnaMobileSDKPackage.java

@@ -8,6 +8,7 @@ import com.facebook.react.ReactPackage;
 import com.facebook.react.bridge.NativeModule;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.uimanager.ViewManager;
+import com.klarna.mobile.sdk.reactnative.checkout.KlarnaCheckoutViewManager;
 import com.klarna.mobile.sdk.reactnative.payments.KlarnaPaymentViewManager;
 import com.klarna.mobile.sdk.reactnative.standalonewebview.KlarnaStandaloneWebViewManager;
 
@@ -27,7 +28,8 @@ public class KlarnaMobileSDKPackage implements ReactPackage {
     public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
         return List.of(
                 new KlarnaPaymentViewManager(reactContext),
-                new KlarnaStandaloneWebViewManager(reactContext, (Application) reactContext.getApplicationContext())
+                new KlarnaStandaloneWebViewManager(reactContext, (Application) reactContext.getApplicationContext()),
+                new KlarnaCheckoutViewManager(reactContext)
         );
     }
 }

package/android/src/main/java/com/klarna/mobile/sdk/reactnative/checkout/KlarnaCheckoutViewEventHandler.java

@@ -0,0 +1,32 @@
+package com.klarna.mobile.sdk.reactnative.checkout;
+
+import androidx.annotation.NonNull;
+
+import com.klarna.mobile.sdk.KlarnaMobileSDKError;
+import com.klarna.mobile.sdk.api.KlarnaEventHandler;
+import com.klarna.mobile.sdk.api.KlarnaProductEvent;
+import com.klarna.mobile.sdk.api.checkout.KlarnaCheckoutView;
+import com.klarna.mobile.sdk.api.component.KlarnaComponent;
+
+public class KlarnaCheckoutViewEventHandler implements KlarnaEventHandler {
+
+    private final KlarnaCheckoutViewEventSender klarnaCheckoutViewEventSender;
+
+    public KlarnaCheckoutViewEventHandler(KlarnaCheckoutViewEventSender klarnaCheckoutViewEventSender) {
+        this.klarnaCheckoutViewEventSender = klarnaCheckoutViewEventSender;
+    }
+
+    @Override
+    public void onEvent(@NonNull KlarnaComponent klarnaComponent, @NonNull KlarnaProductEvent klarnaProductEvent) {
+        if (klarnaComponent instanceof KlarnaCheckoutView) {
+            klarnaCheckoutViewEventSender.sendKlarnaProductEvent((KlarnaCheckoutView) klarnaComponent, klarnaProductEvent);
+        }
+    }
+
+    @Override
+    public void onError(@NonNull KlarnaComponent klarnaComponent, @NonNull KlarnaMobileSDKError klarnaMobileSDKError) {
+        if (klarnaComponent instanceof KlarnaCheckoutView) {
+            klarnaCheckoutViewEventSender.sendKlarnaMobileSDKError((KlarnaCheckoutView) klarnaComponent, klarnaMobileSDKError);
+        }
+    }
+}

package/android/src/main/java/com/klarna/mobile/sdk/reactnative/checkout/KlarnaCheckoutViewEventSender.java

@@ -0,0 +1,56 @@
+package com.klarna.mobile.sdk.reactnative.checkout;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.events.EventDispatcher;
+import com.klarna.mobile.sdk.KlarnaMobileSDKError;
+import com.klarna.mobile.sdk.api.KlarnaProductEvent;
+import com.klarna.mobile.sdk.api.checkout.KlarnaCheckoutView;
+import com.klarna.mobile.sdk.reactnative.common.event.ComponentEvent;
+import com.klarna.mobile.sdk.reactnative.common.event.ComponentEventSender;
+import com.klarna.mobile.sdk.reactnative.common.event.KlarnaEventHandlerEventsUtil;
+import com.klarna.mobile.sdk.reactnative.common.ui.ResizeObserverWrapperView;
+import com.klarna.mobile.sdk.reactnative.common.util.ArgumentsUtil;
+
+import java.lang.ref.WeakReference;
+import java.util.Arrays;
+import java.util.Collection;
+import java.util.HashMap;
+import java.util.Map;
+
+public class KlarnaCheckoutViewEventSender extends ComponentEventSender<ResizeObserverWrapperView<KlarnaCheckoutView>> {
+
+    private static final String EVENT_NAME_ON_RESIZED = "onResized";
+
+    KlarnaCheckoutViewEventSender(@NonNull final Map<WeakReference<ResizeObserverWrapperView<KlarnaCheckoutView>>, EventDispatcher> viewToDispatcher) {
+        super(viewToDispatcher);
+    }
+
+    @Override
+    public Collection<String> getCallbackEventNames() {
+        return Arrays.asList(
+                KlarnaEventHandlerEventsUtil.EVENT_NAME_ON_EVENT,
+                KlarnaEventHandlerEventsUtil.EVENT_NAME_ON_ERROR,
+                EVENT_NAME_ON_RESIZED
+        );
+    }
+
+    public void sendKlarnaProductEvent(@Nullable KlarnaCheckoutView view, @NonNull KlarnaProductEvent klarnaProductEvent) {
+        KlarnaEventHandlerEventsUtil.sendKlarnaProductEvent(this, view, klarnaProductEvent);
+    }
+
+    public void sendKlarnaMobileSDKError(@Nullable KlarnaCheckoutView view, @NonNull KlarnaMobileSDKError klarnaMobileSDKError) {
+        KlarnaEventHandlerEventsUtil.sendKlarnaMobileSDKError(this, view, klarnaMobileSDKError);
+    }
+
+    public void sendOnResizedEvent(@Nullable KlarnaCheckoutView view, int height) {
+        WritableMap params = ArgumentsUtil.createMap(
+                new HashMap<String, Object>() {{
+                    put("height", String.valueOf(height));
+                }}
+        );
+        postEventForView(view, EVENT_NAME_ON_RESIZED, params);
+    }
+}

package/android/src/main/java/com/klarna/mobile/sdk/reactnative/checkout/KlarnaCheckoutViewManager.java

@@ -0,0 +1,147 @@
+package com.klarna.mobile.sdk.reactnative.checkout;
+
+import android.os.Handler;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.UIManagerHelper;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.uimanager.events.EventDispatcher;
+import com.klarna.mobile.sdk.api.KlarnaLoggingLevel;
+import com.klarna.mobile.sdk.api.checkout.KlarnaCheckoutView;
+import com.klarna.mobile.sdk.reactnative.common.WebViewResizeObserver;
+import com.klarna.mobile.sdk.reactnative.common.ui.ResizeObserverWrapperView;
+import com.klarna.mobile.sdk.reactnative.spec.RNKlarnaCheckoutViewSpec;
+
+import java.lang.ref.WeakReference;
+import java.util.HashMap;
+import java.util.Map;
+import java.util.Objects;
+
+public class KlarnaCheckoutViewManager extends RNKlarnaCheckoutViewSpec<ResizeObserverWrapperView<KlarnaCheckoutView>> {
+
+    public static final String KLARNA_CHECKOUT_VIEW_REACT_CLASS = "RNKlarnaCheckoutView";
+
+    // Commands that can be triggered from RN
+    public static final String COMMAND_SET_SNIPPET = "setSnippet";
+    public static final String COMMAND_SUSPEND = "suspend";
+    public static final String COMMAND_RESUME = "resume";
+
+    private final ReactApplicationContext reactAppContext;
+
+    /**
+     * Store a map of views to event dispatchers so we send up events via the right views.
+     */
+    private final Map<WeakReference<ResizeObserverWrapperView<KlarnaCheckoutView>>, EventDispatcher> viewToDispatcher;
+
+    private final KlarnaCheckoutViewEventSender eventSender;
+    private final KlarnaCheckoutViewEventHandler eventHandler;
+
+    public KlarnaCheckoutViewManager(ReactApplicationContext reactApplicationContext) {
+        super();
+        this.viewToDispatcher = new HashMap<>();
+        this.reactAppContext = reactApplicationContext;
+        this.eventSender = new KlarnaCheckoutViewEventSender(viewToDispatcher);
+        this.eventHandler = new KlarnaCheckoutViewEventHandler(eventSender);
+    }
+
+    @NonNull
+    @Override
+    public String getName() {
+        return KLARNA_CHECKOUT_VIEW_REACT_CLASS;
+    }
+
+    @NonNull
+    @Override
+    protected ResizeObserverWrapperView<KlarnaCheckoutView> createViewInstance(@NonNull ThemedReactContext themedReactContext) {
+        KlarnaCheckoutView klarnaCheckoutView = new KlarnaCheckoutView(reactAppContext.getCurrentActivity(), null, 0, eventHandler);
+        klarnaCheckoutView.setLoggingLevel(KlarnaLoggingLevel.Verbose);
+        ResizeObserverWrapperView<KlarnaCheckoutView> view = new ResizeObserverWrapperView<>(reactAppContext, null, klarnaCheckoutView);
+
+        // Each view has its own event dispatcher.
+        EventDispatcher eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag((ReactContext) view.getContext(), view.getId());
+        viewToDispatcher.put(new WeakReference<>(view), eventDispatcher);
+
+        view.initiateWebViewResizeObserver(WebViewResizeObserver.TargetElement.CHECKOUT_CONTAINER, (resizeObserverWrapperView, newHeight) -> {
+            if (resizeObserverWrapperView == null) {
+                return;
+            }
+            if (eventDispatcher == null) {
+                return;
+            }
+            eventSender.sendOnResizedEvent(resizeObserverWrapperView.getView(), newHeight);
+        });
+        view.addInterfaceToWebView();
+
+        return view;
+    }
+
+    /**
+     * Exposes direct event types that will be accessible as prop "callbacks" from RN.
+     * <p>
+     * Structure must follow:
+     * { "<eventName>": {"registrationName": "<eventName>"} }
+     */
+    @Nullable
+    @Override
+    public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
+        return eventSender.getExportedCustomDirectEventTypeConstants();
+    }
+
+    /**
+     * Handles commands received from RN to a specific view.
+     *
+     * @param root      view receiving the command
+     * @param commandId identifier of the command
+     * @param args      array of command arguments
+     */
+    @Override
+    public void receiveCommand(@NonNull ResizeObserverWrapperView<KlarnaCheckoutView> root, String commandId, @Nullable ReadableArray args) {
+        switch (commandId) {
+            case COMMAND_SET_SNIPPET:
+                setSnippet(root, args != null ? args.getString(0) : null);
+                break;
+            case COMMAND_SUSPEND:
+                suspend(root);
+                break;
+            case COMMAND_RESUME:
+                resume(root);
+                break;
+        }
+    }
+
+    @ReactProp(name = "returnUrl")
+    @Override
+    public void setReturnUrl(ResizeObserverWrapperView<KlarnaCheckoutView> view, @Nullable String value) {
+        KlarnaCheckoutView checkoutView = view.getView();
+        if (checkoutView != null) {
+            if (!Objects.equals(value, checkoutView.getReturnURL())) {
+                checkoutView.setReturnURL(value);
+            }
+        }
+    }
+
+    @Override
+    public void setSnippet(ResizeObserverWrapperView<KlarnaCheckoutView> view, String snippet) {
+        view.getView().setSnippet(snippet);
+        view.addInterfaceToWebView();
+        // Delay the injection of the resize observer to ensure the web view is ready
+        final Handler handler = new Handler();
+        handler.postDelayed(view::injectListenerToWebView, 500);
+    }
+
+    @Override
+    public void suspend(ResizeObserverWrapperView<KlarnaCheckoutView> view) {
+        view.getView().suspend();
+    }
+
+    @Override
+    public void resume(ResizeObserverWrapperView<KlarnaCheckoutView> view) {
+        view.getView().resume();
+    }
+}

package/android/src/main/java/com/klarna/mobile/sdk/reactnative/common/WebViewResizeObserver.java

@@ -15,11 +15,18 @@ public class WebViewResizeObserver {
         void onResized(int value);
     }
 
+    public enum TargetElement {
+        PAYMENT_CONTAINER,
+        CHECKOUT_CONTAINER
+    }
+
     private static final String JS_INTERFACE_NAME = "NativeResizeObserver";
     private final WeakReference<WebViewResizeObserverCallback> callback;
+    private final TargetElement targetElement;
 
-    public WebViewResizeObserver(WebViewResizeObserverCallback callback) {
+    public WebViewResizeObserver(WebViewResizeObserverCallback callback, TargetElement targetElement) {
         this.callback = new WeakReference<>(callback);
+        this.targetElement = targetElement;
     }
 
     public void addInterface(WebView webView) {
@@ -78,23 +85,56 @@ public class WebViewResizeObserver {
     }
 
     private String initScript() {
-        return "const container = document.querySelector('#payment-container');\n" +
-                "const resizeObserver = new ResizeObserver((entries) => {\n" +
-                "    for (let entry of entries) {\n" +
-                "        console.log('New dimensions found: ', entry);\n" +
-                "        if (entry.contentRect) {\n" +
-                "            const height = entry.contentRect.height;\n" +
-                "            const listener = window.NativeResizeObserver;\n" +
-                "            if (listener != null) {\n" +
-                "                listener.onResized(height);\n" +
-                "            }\n" +
-                "        }\n" +
-                "    }\n" +
-                "    console.log('Container size changed');\n" +
-                "});\n" +
-                "if (container != null) {\n" +
-                "    resizeObserver.observe(container);\n" +
-                "}\n" +
-                "console.log('Resize observer initialized');";
+        StringBuilder scriptBuilder = new StringBuilder();
+        switch (targetElement) {
+            case PAYMENT_CONTAINER:
+                scriptBuilder.append("console.log('Resize observer injection started');\n");
+                scriptBuilder.append("const container = document.querySelector('#payment-container');\n");
+                scriptBuilder.append("console.log('Resize observer container selected: ', container);\n");
+                scriptBuilder.append("const resizeObserver = new ResizeObserver((entries) => {\n" +
+                        "    console.log('Container size changed.', entries);\n" +
+                        "    for (let entry of entries) {\n" +
+                        "        console.log('New dimensions found: ', entry);\n" +
+                        "        if (entry.contentRect) {\n" +
+                        "            const height = entry.contentRect.height;\n" +
+                        "            const listener = window.NativeResizeObserver;\n" +
+                        "            if (listener != null) {\n" +
+                        "                listener.onResized(height);\n" +
+                        "                console.log('Container size sent to native: ', height);\n" +
+                        "            }\n" +
+                        "        }\n" +
+                        "    }\n" +
+                        "});\n");
+                scriptBuilder.append("console.log('Resize observer initialized.');\n");
+                scriptBuilder.append("if (container != null) {\n" +
+                        "    resizeObserver.observe(container);\n" +
+                        "    console.log('Resize observer set to component.');\n" +
+                        "}\n");
+                scriptBuilder.append("console.log('Resize observer injection finished.');");
+                break;
+            case CHECKOUT_CONTAINER:
+                scriptBuilder.append("const kcoIframe = document.getElementById('klarna-checkout-iframe')\n");
+                scriptBuilder.append("window.addEventListener('message', (message) => {\n" +
+                        "                if (message.source !== kcoIframe && message.data) {\n" +
+                        "                    try {\n" +
+                        "                        const data = JSON.parse(message.data)\n" +
+                        "                        if (data.event === 'frame:checkout:resize') {\n" +
+                        "                            const listener = window.NativeResizeObserver;\n" +
+                        "                            if (listener != null) {\n" +
+                        "                                const height = data.args[0];" +
+                        "                                listener.onResized(height);\n" +
+                        "                                console.log('Container size sent to native: ', height);\n" +
+                        "                            } else {\n" +
+                        "                                console.log('listener is null!')\n" +
+                        "                            }\n" +
+                        "                        }\n" +
+                        "                    } catch (error) {\n" +
+                        "                        console.log('Could not parse message.data', message);\n" +
+                        "                    }\n" +
+                        "                 }\n" +
+                        "             });\n");
+                break;
+        }
+        return scriptBuilder.toString();
     }
 }

package/android/src/main/java/com/klarna/mobile/sdk/reactnative/common/event/ComponentEvent.java

@@ -0,0 +1,37 @@
+package com.klarna.mobile.sdk.reactnative.common.event;
+
+import androidx.annotation.IdRes;
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.events.Event;
+
+public class ComponentEvent extends Event<ComponentEvent> {
+    @NonNull
+    private final String eventName;
+
+    @Nullable
+    private final WritableMap additionalParams;
+
+    public ComponentEvent(@IdRes int viewId, @NonNull String eventName, @Nullable WritableMap additionalParams) {
+        super(viewId);
+        this.eventName = eventName;
+        this.additionalParams = additionalParams;
+    }
+
+    @Override
+    public String getEventName() {
+        return eventName;
+    }
+
+    @Nullable
+    @Override
+    protected WritableMap getEventData() {
+        if (additionalParams != null) {
+            return additionalParams;
+        }
+        return Arguments.createMap();
+    }
+}

package/android/src/main/java/com/klarna/mobile/sdk/reactnative/common/event/ComponentEventSender.java

@@ -0,0 +1,78 @@
+package com.klarna.mobile.sdk.reactnative.common.event;
+
+import android.view.View;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.UIManagerHelper;
+import com.facebook.react.uimanager.events.EventDispatcher;
+import com.klarna.mobile.sdk.reactnative.common.ui.WrapperView;
+
+import java.lang.ref.WeakReference;
+import java.util.Collection;
+import java.util.Map;
+
+public abstract class ComponentEventSender<T extends View> {
+    private final Map<WeakReference<T>, EventDispatcher> viewToDispatcher;
+
+    protected ComponentEventSender(@NonNull final Map<WeakReference<T>, EventDispatcher> viewToDispatcher) {
+        this.viewToDispatcher = viewToDispatcher;
+    }
+
+    protected void postEvent(@Nullable EventDispatcher eventDispatcher, @NonNull ComponentEvent event) {
+        if (eventDispatcher != null) {
+            eventDispatcher.dispatchEvent(event);
+        }
+    }
+
+    protected ComponentEvent createEvent(@Nullable View view, @NonNull String eventName, @Nullable WritableMap params) {
+        T viewReference = getView(view);
+        if (viewReference == null) {
+            return null;
+        }
+        return new ComponentEvent(viewReference.getId(), eventName, params);
+    }
+
+    protected void postEventForView(@Nullable View view, @NonNull String eventName, @Nullable WritableMap params) {
+        T viewReference = getView(view);
+        if (viewReference != null) {
+            EventDispatcher eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag((ReactContext) viewReference.getContext(), viewReference.getId());
+            postEvent(eventDispatcher, createEvent(viewReference, eventName, params));
+        }
+    }
+
+    @Nullable
+    private T getView(@Nullable View view) {
+        if (view == null) {
+            return null;
+        }
+        for (WeakReference<T> reference : viewToDispatcher.keySet()) {
+            T viewReference = reference.get();
+            if (viewReference != null && viewReference == view) {
+                return viewReference;
+            }
+            if (viewReference instanceof WrapperView) {
+                View wrappedView = ((WrapperView) viewReference).getView();
+                if (wrappedView == view) {
+                    return viewReference;
+                }
+            }
+        }
+        return null;
+    }
+
+    public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
+        MapBuilder.Builder<String, Object> builder = MapBuilder.builder();
+        Collection<String> eventNames = getCallbackEventNames();
+        for (String eventName : eventNames) {
+            builder.put(eventName, MapBuilder.of("registrationName", eventName));
+        }
+        return builder.build();
+    }
+
+    public abstract Collection<String> getCallbackEventNames();
+}

package/android/src/main/java/com/klarna/mobile/sdk/reactnative/common/event/KlarnaEventHandlerEventsUtil.java

@@ -0,0 +1,53 @@
+package com.klarna.mobile.sdk.reactnative.common.event;
+
+import android.view.View;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.bridge.WritableMap;
+import com.klarna.mobile.sdk.KlarnaMobileSDKError;
+import com.klarna.mobile.sdk.api.KlarnaProductEvent;
+import com.klarna.mobile.sdk.reactnative.common.util.ArgumentsUtil;
+import com.klarna.mobile.sdk.reactnative.common.util.ParserUtil;
+
+import java.util.HashMap;
+
+public class KlarnaEventHandlerEventsUtil {
+
+    public static final String EVENT_NAME_ON_EVENT = "onEvent";
+    public static final String EVENT_NAME_ON_ERROR = "onError";
+
+    private static final String PARAM_NAME_ACTION = "action";
+    private static final String PARAM_NAME_PARAMS = "params";
+    private static final String PARAM_NAME_IS_FATAL = "isFatal";
+    private static final String PARAM_NAME_MESSAGE = "message";
+    private static final String PARAM_NAME_NAME = "name";
+    private static final String PARAM_NAME_PRODUCT_EVENT = "productEvent";
+
+    public static <T extends View> void sendKlarnaProductEvent(@NonNull ComponentEventSender<T> componentEventSender, @Nullable View view, @NonNull KlarnaProductEvent klarnaProductEvent) {
+        String stringifiedParams = ParserUtil.toJson(klarnaProductEvent.getParams());
+        String paramsJson = stringifiedParams == null ? "{}" : stringifiedParams;
+        ReadableMap eventMap = ArgumentsUtil.createMap(new HashMap<String, Object>() {{
+            put(PARAM_NAME_ACTION, klarnaProductEvent.getAction());
+            put(PARAM_NAME_PARAMS, paramsJson);
+        }});
+        WritableMap params = ArgumentsUtil.createMap(new HashMap<String, Object>() {{
+            put(PARAM_NAME_PRODUCT_EVENT, eventMap);
+        }});
+        componentEventSender.postEventForView(view, EVENT_NAME_ON_EVENT, params);
+    }
+
+    public static <T extends View> void sendKlarnaMobileSDKError(@NonNull ComponentEventSender<T> componentEventSender, @Nullable View view, @NonNull KlarnaMobileSDKError klarnaMobileSDKError) {
+        ReadableMap eventMap = ArgumentsUtil.createMap(new HashMap<String, Object>() {{
+            put(PARAM_NAME_NAME, klarnaMobileSDKError.getName());
+            put(PARAM_NAME_MESSAGE, klarnaMobileSDKError.getMessage());
+            put(PARAM_NAME_IS_FATAL, klarnaMobileSDKError.isFatal());
+        }});
+        WritableMap params = ArgumentsUtil.createMap(new HashMap<String, Object>() {{
+            put(PARAM_NAME_PRODUCT_EVENT, eventMap);
+        }});
+        componentEventSender.postEventForView(view, EVENT_NAME_ON_EVENT, params);
+    }
+}

package/android/src/main/java/com/klarna/mobile/sdk/reactnative/common/ui/ResizeObserverWrapperView.java

@@ -0,0 +1,79 @@
+package com.klarna.mobile.sdk.reactnative.common.ui;
+
+import android.content.Context;
+import android.util.AttributeSet;
+import android.view.View;
+import android.view.ViewGroup;
+import android.webkit.WebView;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.klarna.mobile.sdk.reactnative.common.WebViewResizeObserver;
+
+import java.lang.ref.WeakReference;
+
+public class ResizeObserverWrapperView<T extends ViewGroup> extends WrapperView<T> {
+
+    public interface OnResizedListener<T extends ViewGroup> {
+        void onResized(ResizeObserverWrapperView<T> resizeObserverWrapperView, int newHeight);
+    }
+
+    private WebViewResizeObserver webViewResizeObserver;
+    private WebViewResizeObserver.WebViewResizeObserverCallback webViewResizeObserverCallback;
+    private OnResizedListener<T> onResizedListener;
+
+    public ResizeObserverWrapperView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
+        super(context, attrs, defStyleAttr);
+    }
+
+    public ResizeObserverWrapperView(ReactApplicationContext context, AttributeSet attrs, T view) {
+        super(context, attrs, view);
+    }
+
+    public void initiateWebViewResizeObserver(WebViewResizeObserver.TargetElement targetElement, OnResizedListener<T> onResizedListener) {
+        this.onResizedListener = onResizedListener;
+        this.webViewResizeObserverCallback = new WebViewResizeObserver.WebViewResizeObserverCallback() {
+
+            private final WeakReference<OnResizedListener<T>> onResizedListenerWeakReference = new WeakReference<>(ResizeObserverWrapperView.this.onResizedListener);
+
+            @Override
+            public void onResized(int value) {
+                OnResizedListener<T> listener = onResizedListenerWeakReference.get();
+                if (listener != null) {
+                    listener.onResized(ResizeObserverWrapperView.this, value);
+                }
+            }
+        };
+        this.webViewResizeObserver = new WebViewResizeObserver(webViewResizeObserverCallback, targetElement);
+    }
+
+    public void addInterfaceToWebView() {
+        WebView webView = findWebView(getView());
+        if (webView != null && webViewResizeObserver != null) {
+            webViewResizeObserver.addInterface(webView);
+        }
+    }
+
+    public void injectListenerToWebView() {
+        WebView webView = findWebView(getView());
+        if (webView != null && webViewResizeObserver != null) {
+            webViewResizeObserver.injectListener(webView);
+        }
+    }
+
+    private WebView findWebView(T view) {
+        if (view == null) {
+            return null;
+        }
+        for (int i = 0; i < view.getChildCount(); i++) {
+            View child = view.getChildAt(i);
+
+            if (child instanceof WebView) {
+                return (WebView) child;
+            }
+        }
+        return null;
+    }
+}