@onramper/onramper-react-native 1.2.0 → 1.2.2-1

package/nitrogen/generated/shared/c++/views/HybridOnramperCheckoutButtonComponent.cpp

@@ -36,6 +36,16 @@ namespace margelo::nitro::onramper::views {
         throw std::runtime_error(std::string("OnramperCheckoutButton.intentHandle: ") + exc.what());
       }
     }()),
+    onContentHeightChange([&]() -> CachedProp<std::optional<std::function<void(double /* height */)>>> {
+      try {
+        const react::RawValue* rawValue = rawProps.at("onContentHeightChange", nullptr, nullptr);
+        if (rawValue == nullptr) return sourceProps.onContentHeightChange;
+        const auto& [runtime, value] = (std::pair<jsi::Runtime*, jsi::Value>)*rawValue;
+        return CachedProp<std::optional<std::function<void(double /* height */)>>>::fromRawValue(*runtime, value.asObject(*runtime).getProperty(*runtime, PropNameIDCache::get(*runtime, "f")), sourceProps.onContentHeightChange);
+      } catch (const std::exception& exc) {
+        throw std::runtime_error(std::string("OnramperCheckoutButton.onContentHeightChange: ") + exc.what());
+      }
+    }()),
     hybridRef([&]() -> CachedProp<std::optional<std::function<void(const std::shared_ptr<HybridOnramperCheckoutButtonSpec>& /* ref */)>>> {
       try {
         const react::RawValue* rawValue = rawProps.at("hybridRef", nullptr, nullptr);
@@ -50,6 +60,7 @@ namespace margelo::nitro::onramper::views {
   bool HybridOnramperCheckoutButtonProps::filterObjectKeys(const std::string& propName) {
     switch (hashString(propName)) {
       case hashString("intentHandle"): return true;
+      case hashString("onContentHeightChange"): return true;
       case hashString("hybridRef"): return true;
       default: return false;
     }

package/nitrogen/generated/shared/c++/views/HybridOnramperCheckoutButtonComponent.hpp

@@ -17,10 +17,10 @@
 #include <react/renderer/components/view/ViewProps.h>
 
 #include <string>
-#include <memory>
-#include "HybridOnramperCheckoutButtonSpec.hpp"
 #include <functional>
 #include <optional>
+#include <memory>
+#include "HybridOnramperCheckoutButtonSpec.hpp"
 
 namespace margelo::nitro::onramper::views {
 
@@ -43,6 +43,7 @@ namespace margelo::nitro::onramper::views {
 
   public:
     CachedProp<std::string> intentHandle;
+    CachedProp<std::optional<std::function<void(double /* height */)>>> onContentHeightChange;
     CachedProp<std::optional<std::function<void(const std::shared_ptr<HybridOnramperCheckoutButtonSpec>& /* ref */)>>> hybridRef;
 
   private:

package/nitrogen/generated/shared/json/OnramperCheckoutButtonConfig.json

@@ -5,6 +5,7 @@
   "directEventTypes": {},
   "validAttributes": {
     "intentHandle": true,
+    "onContentHeightChange": true,
     "hybridRef": true
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onramper/onramper-react-native",
-  "version": "1.2.0",
+  "version": "1.2.2-1",
   "description": "React Native wrapper for the Onramper iOS SDK",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",
@@ -64,7 +64,7 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/onramper/onramper-react-native#readme",
   "onramperSDK": {
-    "checksum": "2d0f28702120326e5ebb191cb2a812b11bf58a9672fcde8cf1762182e96e932b"
+    "checksum": "754184c10a736e1db3292b592ca634ddbaa61dd01540b60610df4aa73a61de9a"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -76,12 +76,14 @@
     "@expo/config-plugins": "^10.0.0",
     "@types/jest": "^29.5.14",
     "@types/react": "~19.2.0",
+    "@types/react-test-renderer": "^19.3.0",
     "jest": "^29.7.0",
     "nitrogen": "^0.35.9",
     "react": "19.2.3",
     "react-native": "0.85.3",
     "react-native-builder-bob": "^0.43.0",
     "react-native-nitro-modules": "^0.35.9",
+    "react-test-renderer": "^19.2.3",
     "ts-jest": "^29.4.10",
     "typescript": "~5.8.3"
   },

package/src/CheckoutButton.ts

@@ -0,0 +1,28 @@
+import { createElement, useMemo, useState } from 'react';
+import { callback } from 'react-native-nitro-modules';
+
+import { OnramperCheckoutButtonView } from './OnramperCheckoutButtonView';
+
+// Height of the bare Buy button. Used until native reports the measured content
+// height so the first frame isn't collapsed.
+export const CHECKOUT_BUTTON_FALLBACK_HEIGHT = 56;
+
+export interface CheckoutButtonProps {
+  intentHandle: string;
+}
+
+/**
+ * Sizes the native checkout button to its SwiftUI content. The content grows when
+ * the SDK shows ToS text under the Buy button (which can change after mount), and
+ * Yoga can't measure a SwiftUI view — so native reports the height and it is
+ * applied here as an explicit `height`.
+ */
+export function CheckoutButton({ intentHandle }: CheckoutButtonProps) {
+  const [height, setHeight] = useState<number | null>(null);
+  const onContentHeightChange = useMemo(() => callback((h: number) => setHeight(Math.ceil(h))), []);
+  return createElement(OnramperCheckoutButtonView, {
+    intentHandle,
+    onContentHeightChange,
+    style: { width: '100%', height: height ?? CHECKOUT_BUTTON_FALLBACK_HEIGHT },
+  });
+}

package/src/OnramperClient.ts

@@ -1,6 +1,6 @@
 import { type ReactElement, createElement } from 'react';
 
-import { OnramperCheckoutButtonView } from './OnramperCheckoutButtonView';
+import { CheckoutButton } from './CheckoutButton';
 import { createOnramperNative } from './OnramperNative';
 import { OnramperError } from './errors';
 import type { CheckoutEvent, EventName, EventPayload } from './events';
@@ -30,12 +30,14 @@ export interface GetCheckoutRequirementsResult {
 export class OnramperClient {
   state: OnramperState = { kind: 'idle' };
   lastError: OnramperError | null = null;
+  currentTransactionId: string | null = null;
 
   // Each client owns its own native instance (and thus its own SDK client).
   private readonly native = createOnramperNative();
 
   private readonly stateListeners = new Set<(state: OnramperState) => void>();
   private readonly eventListeners = new Set<(event: CheckoutEvent) => void>();
+  private readonly transactionIdListeners = new Set<(transactionId: string | null) => void>();
 
   // Resolved when the constructor-issued configure() completes. Public methods
   // that need the native client await this first.
@@ -50,12 +52,23 @@ export class OnramperClient {
       for (const fn of this.stateListeners) fn(s);
     });
 
-    // Single native checkout-event callback → fan out to listeners.
+    // Single native checkout-event callback → keep the transaction ID mirror
+    // synchronized at finalization, then fan out to checkout listeners.
     this.native.setEventListener((json) => {
       const e = JSON.parse(json) as CheckoutEvent;
+      if (e.type === 'checkoutFinalized') {
+        this.updateCurrentTransactionId(e.response.onramperTransactionId);
+      }
       for (const fn of this.eventListeners) fn(e);
     });
 
+    this.native.setTransactionIdListener((transactionId) => {
+      // The SDK transiently publishes nil while re-preparing after the payment
+      // sheet is dismissed. The finalized transaction ID remains durable across
+      // that attempt change; only explicit reset()/signOut() clear the JS mirror.
+      if (transactionId !== undefined) this.updateCurrentTransactionId(transactionId);
+    });
+
     // The SDK calls this when its session expires; return fresh credentials.
     // Nitro stores the async callback natively and awaits it directly — no
     // event round-trip needed.
@@ -82,6 +95,19 @@ export class OnramperClient {
     this.configured.catch(() => undefined);
   }
 
+  private updateCurrentTransactionId(next: string | null): void {
+    if (next === this.currentTransactionId) return;
+
+    this.currentTransactionId = next;
+    for (const fn of [...this.transactionIdListeners]) {
+      try {
+        fn(next);
+      } catch (error: unknown) {
+        console.error('Onramper transaction ID listener threw:', error);
+      }
+    }
+  }
+
   async initialize(creds: SessionCredentials): Promise<void> {
     try {
       await this.configured;
@@ -95,6 +121,7 @@ export class OnramperClient {
     try {
       await this.configured;
       await this.native.reset();
+      this.updateCurrentTransactionId(null);
     } catch (e: unknown) {
       throw OnramperError.from(e);
     }
@@ -110,6 +137,7 @@ export class OnramperClient {
     try {
       await this.configured;
       await this.native.signOut();
+      this.updateCurrentTransactionId(null);
     } catch (e: unknown) {
       throw OnramperError.from(e);
     }
@@ -143,10 +171,7 @@ export class OnramperClient {
         JSON.stringify(buttonStyle),
       );
       const quote = JSON.parse(result.quoteJson) as QuoteResponse;
-      const button = createElement(OnramperCheckoutButtonView, {
-        intentHandle: result.intentHandle,
-        style: { width: '100%', minHeight: 56 },
-      });
+      const button = createElement(CheckoutButton, { intentHandle: result.intentHandle });
       return { button, quote };
     } catch (e: unknown) {
       throw OnramperError.from(e);
@@ -166,6 +191,14 @@ export class OnramperClient {
     };
   }
 
+  /** Subscribe to the durable Onramper transaction ID. Successful reset/signOut publish null. */
+  addTransactionIdListener(fn: (transactionId: string | null) => void): () => void {
+    this.transactionIdListeners.add(fn);
+    return () => {
+      this.transactionIdListeners.delete(fn);
+    };
+  }
+
   /** Subscribe to a specific checkout event. Returns an unsubscribe function. */
   addEventListener<K extends EventName>(name: K, fn: (e: EventPayload<K>) => void): () => void {
     const wrapper = (e: CheckoutEvent) => {
@@ -181,6 +214,7 @@ export class OnramperClient {
   destroy(): void {
     this.stateListeners.clear();
     this.eventListeners.clear();
+    this.transactionIdListeners.clear();
     this.native.dispose();
   }
 }

package/src/generated/OnramperCheckoutButtonConfig.json

@@ -5,6 +5,7 @@
   "directEventTypes": {},
   "validAttributes": {
     "intentHandle": true,
+    "onContentHeightChange": true,
     "hybridRef": true
   }
 }

package/src/specs/OnramperCheckoutButton.nitro.ts

@@ -5,6 +5,12 @@ import type { HybridView, HybridViewMethods, HybridViewProps } from 'react-nativ
 // UIHostingController. iOS-only (Android is a platformUnsupported stub).
 export interface OnramperCheckoutButtonProps extends HybridViewProps {
   intentHandle: string;
+  /**
+   * Called with the hosted SwiftUI content's height (points) whenever it changes —
+   * e.g. when ToS text appears under the Buy button. React Native can't measure
+   * the SwiftUI content itself, so the JS wrapper applies this as `height`.
+   */
+  onContentHeightChange?: (height: number) => void;
 }
 
 export interface OnramperCheckoutButtonMethods extends HybridViewMethods {}

package/src/specs/OnramperNitro.nitro.ts

@@ -52,6 +52,8 @@ export interface OnramperNitro extends HybridObject<{ ios: 'swift' }> {
   // Single native callback per stream; the JS wrapper fans out to multiple listeners.
   setStateListener(onState: (stateJson: string) => void): void;
   setEventListener(onEvent: (eventJson: string) => void): void;
+  // Mirrors OnramperSDK.$currentTransactionId. `undefined` represents native nil.
+  setTransactionIdListener(onTransactionId: (transactionId: string | undefined) => void): void;
 
   // The SDK's sessionExpirationHandler, as a stored async callback that returns
   // fresh credentials. Replaces the Expo-era onSessionExpired/provide/fail dance.

package/src/types.ts

@@ -115,6 +115,8 @@ export interface HeadlessCheckoutData {
 
 export interface CheckoutFinalizeResponse {
   headlessCheckoutId: string;
+  /** Durable Onramper transaction identifier for support, reconciliation, and status lookups. */
+  onramperTransactionId: string;
   headlessCheckoutData: HeadlessCheckoutData;
 }