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

package/README.md

@@ -12,7 +12,8 @@ currently has the following components:
 - `KlarnaStandaloneWebView` to integrate Klarna Standalone WebView
 - `KlarnaCheckoutView` to integrate Klarna Checkout
 - `KlarnaSignInSDK` to integrate Klarna Sign In
-
+- `KlarnaOSMView` to integrate Klarna On-site Messaging
+- `KlarnaExpressCheckoutView` to integrate Klarna Express Checkout
 This repository also includes a test application that you can use to see how it works.
 
 ### SDK for Other Platforms

package/android/build.gradle

@@ -114,7 +114,9 @@ dependencies {
     implementation "org.jetbrains.kotlin:kotlin-reflect:${getExtOrDefault('kotlinVersion')}"
     implementation 'org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.3'
 
-    implementation 'com.klarna.mobile:sdk:2.9.1'
+    implementation 'com.klarna.mobile:sdk:2.11.1'
+    // Required: KlarnaExpressCheckoutButton extends ConstraintLayout.
+    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
 
     testImplementation "junit:junit:4.13.2"
     testImplementation 'androidx.test:core:1.5.0'

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

@@ -9,6 +9,8 @@ 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.spec.RNKlarnaSignInModuleSpec;
+import com.klarna.mobile.sdk.reactnative.expresscheckout.KlarnaExpressCheckoutViewManager;
+import com.klarna.mobile.sdk.reactnative.osm.KlarnaOSMViewManager;
 import com.klarna.mobile.sdk.reactnative.standalonewebview.KlarnaStandaloneWebViewManager;
 
 import java.util.List;
@@ -27,7 +29,9 @@ public class KlarnaMobileSDKPackage implements ReactPackage {
         return List.of(
                 new KlarnaPaymentViewManager(reactContext),
                 new KlarnaStandaloneWebViewManager(reactContext),
-                new KlarnaCheckoutViewManager(reactContext)
+                new KlarnaCheckoutViewManager(),
+                new KlarnaExpressCheckoutViewManager(),
+                new KlarnaOSMViewManager()
         );
     }
 }

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

@@ -33,7 +33,6 @@ public class KlarnaCheckoutViewManager extends RNKlarnaCheckoutViewSpec<ResizeOb
     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.
      */
@@ -47,10 +46,9 @@ public class KlarnaCheckoutViewManager extends RNKlarnaCheckoutViewSpec<ResizeOb
     private final Handler handler = new Handler(Looper.getMainLooper());
     private Runnable javascriptInterfaceInjectionRunnable;
 
-    public KlarnaCheckoutViewManager(ReactApplicationContext reactApplicationContext) {
+    public KlarnaCheckoutViewManager() {
         super();
         viewToDispatcher = new WeakHashMap<>();
-        reactAppContext = reactApplicationContext;
         eventSender = new KlarnaCheckoutViewEventSender(viewToDispatcher);
         eventHandler = new KlarnaCheckoutViewEventHandler(eventSender, klarnaCheckoutView -> {
             ResizeObserverWrapperView<KlarnaCheckoutView> resizeObserverWrapperView =
@@ -74,11 +72,7 @@ public class KlarnaCheckoutViewManager extends RNKlarnaCheckoutViewSpec<ResizeOb
                     return;
                 }
 
-                boolean shouldRetry = false;
-
-                if (klarnaCheckoutView.getHeight() == 0) {
-                    shouldRetry = true;
-                }
+                boolean shouldRetry = klarnaCheckoutView.getHeight() == 0;
 
                 if (klarnaCheckoutView.getChildAt(0) instanceof WebView) {
                     WebView internalWebView = (WebView) klarnaCheckoutView.getChildAt(0);
@@ -104,8 +98,8 @@ public class KlarnaCheckoutViewManager extends RNKlarnaCheckoutViewSpec<ResizeOb
     @NonNull
     @Override
     protected ResizeObserverWrapperView<KlarnaCheckoutView> createViewInstance(@NonNull ThemedReactContext themedReactContext) {
-        KlarnaCheckoutView klarnaCheckoutView = new KlarnaCheckoutView(reactAppContext.getCurrentActivity(), null, 0, eventHandler);
-        ResizeObserverWrapperView<KlarnaCheckoutView> view = new ResizeObserverWrapperView<>(reactAppContext, null, klarnaCheckoutView);
+        KlarnaCheckoutView klarnaCheckoutView = new KlarnaCheckoutView(themedReactContext.getCurrentActivity(), null, 0, eventHandler);
+        ResizeObserverWrapperView<KlarnaCheckoutView> view = new ResizeObserverWrapperView<>(themedReactContext, null, klarnaCheckoutView);
 
         checkoutViewToResizeObserverWrapperMap.put(klarnaCheckoutView, view);
 

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

@@ -140,6 +140,34 @@ public class WebViewResizeObserver {
                         "             });\n");
                 break;
         }
+        scriptBuilder.append("console.log('Resize observer container selected: ', container);\n" +
+                "const containerHeight = container.offsetHeight;\n" +
+                "console.log('Container height: ', containerHeight);\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" +
+                "            } else {\n" +
+                "                console.error('Native resize observer not found.');\n" +
+                "            }\n" +
+                "        } else {\n" +
+                "            console.error('Content rect not found.');\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.');");
+
         return scriptBuilder.toString();
     }
 }

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

@@ -28,6 +28,7 @@ public abstract class ComponentEventSender<T extends View> {
         }
     }
 
+    @Nullable
     protected ComponentEvent createEvent(@Nullable View view, @NonNull String eventName, @Nullable WritableMap params) {
         T viewReference = getView(view);
         if (viewReference == null) {
@@ -40,7 +41,10 @@ public abstract class ComponentEventSender<T extends View> {
         T viewReference = getView(view);
         if (viewReference != null) {
             EventDispatcher eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag((ReactContext) viewReference.getContext(), viewReference.getId());
-            postEvent(eventDispatcher, createEvent(viewReference, eventName, params));
+            ComponentEvent event = createEvent(viewReference, eventName, params);
+            if (event != null) {
+                postEvent(eventDispatcher, event);
+            }
         }
     }
 

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

@@ -12,7 +12,7 @@ import android.webkit.WebView;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 
-import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContext;
 import com.klarna.mobile.sdk.reactnative.common.WebViewResizeObserver;
 
 import java.lang.ref.WeakReference;
@@ -32,7 +32,7 @@ public class ResizeObserverWrapperView<T extends ViewGroup> extends WrapperView<
         super(context, attrs, defStyleAttr);
     }
 
-    public ResizeObserverWrapperView(ReactApplicationContext context, AttributeSet attrs, T view) {
+    public ResizeObserverWrapperView(ReactContext context, AttributeSet attrs, T view) {
         super(context, attrs, view);
     }
 

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

@@ -9,7 +9,7 @@ import android.widget.FrameLayout;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 
-import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContext;
 
 public class WrapperView<T extends View> extends FrameLayout {
 
@@ -19,7 +19,7 @@ public class WrapperView<T extends View> extends FrameLayout {
         super(context, attrs, defStyleAttr);
     }
 
-    public WrapperView(ReactApplicationContext context, AttributeSet attrs, T view) {
+    public WrapperView(ReactContext context, AttributeSet attrs, T view) {
         super(context, attrs);
         this.view = view;
         ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);

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

@@ -0,0 +1,39 @@
+package com.klarna.mobile.sdk.reactnative.common.ui;
+
+import android.view.View;
+import android.view.ViewGroup;
+
+import androidx.annotation.NonNull;
+
+/**
+ * Shared layout helper for native child views hosted inside React Native's Yoga layout engine.
+ *
+ * <p>Yoga suppresses {@code requestLayout()} from native child views, so SDK-provided views
+ * (e.g. KlarnaExpressCheckoutButton, KlarnaOSMView) won't measure or layout correctly without
+ * a manual pass. Both the Express Checkout and OSM view managers use this helper to perform
+ * that manual measure+layout.
+ */
+public final class YogaLayoutHelper {
+
+    private YogaLayoutHelper() {
+    }
+
+    /**
+     * Measures and lays out a child view to fill the wrapper's width while using its own
+     * intrinsic height.
+     *
+     * @param wrapper the parent container whose width determines the child's width
+     * @param child   the native child view to measure and lay out
+     */
+    public static void measureAndLayout(@NonNull ViewGroup wrapper, @NonNull View child) {
+        int width = wrapper.getMeasuredWidth();
+        if (width <= 0) {
+            return;
+        }
+        child.measure(
+                View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
+                View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
+        );
+        child.layout(0, 0, width, child.getMeasuredHeight());
+    }
+}

package/android/src/main/java/com/klarna/mobile/sdk/reactnative/expresscheckout/KlarnaExpressCheckoutViewCallback.kt

@@ -0,0 +1,30 @@
+package com.klarna.mobile.sdk.reactnative.expresscheckout
+
+import com.klarna.mobile.sdk.api.expresscheckout.KlarnaExpressCheckoutButton
+import com.klarna.mobile.sdk.api.expresscheckout.KlarnaExpressCheckoutButtonAuthorizationResponse
+import com.klarna.mobile.sdk.api.expresscheckout.KlarnaExpressCheckoutButtonCallback
+import com.klarna.mobile.sdk.api.expresscheckout.KlarnaExpressCheckoutError
+import android.widget.FrameLayout
+
+/**
+ * Implements the SDK's callback interface and forwards events to the React Native event sender.
+ */
+internal class KlarnaExpressCheckoutViewCallback(
+    private val containerView: FrameLayout,
+    private val eventSender: KlarnaExpressCheckoutViewEventSender
+) : KlarnaExpressCheckoutButtonCallback {
+
+    override fun onAuthorized(
+        view: KlarnaExpressCheckoutButton,
+        response: KlarnaExpressCheckoutButtonAuthorizationResponse
+    ) {
+        eventSender.sendOnAuthorizedEvent(containerView, response)
+    }
+
+    override fun onError(
+        view: KlarnaExpressCheckoutButton,
+        error: KlarnaExpressCheckoutError
+    ) {
+        eventSender.sendKlarnaExpressCheckoutError(containerView, error)
+    }
+}

package/android/src/main/java/com/klarna/mobile/sdk/reactnative/expresscheckout/KlarnaExpressCheckoutViewEventSender.kt

@@ -0,0 +1,80 @@
+package com.klarna.mobile.sdk.reactnative.expresscheckout
+
+import com.facebook.react.uimanager.events.EventDispatcher
+import com.klarna.mobile.sdk.api.expresscheckout.KlarnaExpressCheckoutButtonAuthorizationResponse
+import com.klarna.mobile.sdk.api.expresscheckout.KlarnaExpressCheckoutError
+import com.klarna.mobile.sdk.reactnative.common.event.ComponentEventSender
+import android.widget.FrameLayout
+import com.klarna.mobile.sdk.reactnative.common.util.ArgumentsUtil
+
+internal class KlarnaExpressCheckoutViewEventSender(
+    viewToDispatcher: Map<FrameLayout, EventDispatcher>
+) : ComponentEventSender<FrameLayout>(viewToDispatcher) {
+
+    override fun getCallbackEventNames(): Collection<String> = listOf(
+        EVENT_NAME_ON_AUTHORIZED,
+        EVENT_NAME_ON_ERROR,
+        EVENT_NAME_ON_RESIZED
+    )
+
+    fun sendOnAuthorizedEvent(
+        view: FrameLayout,
+        response: KlarnaExpressCheckoutButtonAuthorizationResponse
+    ) {
+        val responseMap = mapOf<String, Any>(
+            "showForm" to response.showForm,
+            "approved" to response.approved,
+            "finalizedRequired" to response.finalizeRequired,
+            "clientToken" to (response.clientToken ?: ""),
+            "authorizationToken" to (response.authorizationToken ?: ""),
+            "sessionId" to (response.sessionId ?: ""),
+            "collectedShippingAddress" to (response.collectedShippingAddress ?: ""),
+            "merchantReference1" to (response.merchantReference1 ?: ""),
+            "merchantReference2" to (response.merchantReference2 ?: "")
+        )
+        val authorizationResponseMap = ArgumentsUtil.createMap(responseMap)
+        val params = ArgumentsUtil.createMap(
+            mapOf<String, Any>("authorizationResponse" to authorizationResponseMap)
+        )
+        postEventForView(view, EVENT_NAME_ON_AUTHORIZED, params)
+    }
+
+    fun sendKlarnaExpressCheckoutError(
+        view: FrameLayout,
+        error: KlarnaExpressCheckoutError
+    ) {
+        sendKlarnaExpressCheckoutError(view, error.name, error.message, error.isFatal)
+    }
+
+    fun sendKlarnaExpressCheckoutError(
+        view: FrameLayout,
+        name: String,
+        message: String,
+        isFatal: Boolean
+    ) {
+        val errorMap = ArgumentsUtil.createMap(
+            mapOf<String, Any>(
+                "name" to name,
+                "message" to message,
+                "isFatal" to isFatal
+            )
+        )
+        val params = ArgumentsUtil.createMap(
+            mapOf<String, Any>("error" to errorMap)
+        )
+        postEventForView(view, EVENT_NAME_ON_ERROR, params)
+    }
+
+    fun sendOnResizedEvent(view: FrameLayout, height: Int) {
+        val params = ArgumentsUtil.createMap(
+            mapOf<String, Any>("height" to height.toString())
+        )
+        postEventForView(view, EVENT_NAME_ON_RESIZED, params)
+    }
+
+    companion object {
+        private const val EVENT_NAME_ON_AUTHORIZED = "onAuthorized"
+        private const val EVENT_NAME_ON_ERROR = "onError"
+        private const val EVENT_NAME_ON_RESIZED = "onResized"
+    }
+}