@stripe/stripe-react-native 0.64.0 → 0.64.1

package/lib/typescript/src/types/components/PaymentMethodMessagingElementComponent.d.ts

@@ -22,9 +22,24 @@ export declare enum PaymentMethodMessagingElementStyle {
     /** A light style */
     Light = "light"
 }
+export interface PaymentMethodMessagingElementFont {
+    /**
+     * The font used for the element text.
+     *
+     * On iOS, this should be the "PostScript name" found in Font Book after installing the font.
+     * On Android, this should be the name of the font file (containing only lowercase alphanumeric characters) in android/app/src/main/res/font
+     *
+     * @default The OS's system font
+     */
+    family?: string;
+    /** The font size for text in the element. This value is required to be greater than 0.
+     * @default The OS's default text size.
+     */
+    size?: number;
+}
 export interface PaymentMethodMessagingElementAppearance {
     /** Font settings for the element. */
-    font?: PaymentSheetTypes.FontConfig;
+    font?: PaymentMethodMessagingElementFont;
     /** The color used for the element text. */
     textColor?: PaymentSheetTypes.ThemedColor;
     /** The color used for the text that links to available BNPL plans. */

package/lib/typescript/src/types/components/PaymentMethodMessagingElementComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethodMessagingElementComponent.d.ts","sourceRoot":"","sources":["../../../../../src/types/components/PaymentMethodMessagingElementComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,KAAK,iBAAiB,MAAM,iBAAiB,CAAC;AAMrD;;GAEG;AACH,MAAM,MAAM,kCAAkC,GAC1C;IAAE,MAAM,EAAE,SAAS,CAAA;CAAE,GACrB;IAAE,MAAM,EAAE,QAAQ,CAAA;CAAE,GACpB;IAAE,MAAM,EAAE,YAAY,CAAA;CAAE,GACxB;IAAE,MAAM,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,KAAK,CAAA;CAAE,CAAC;AAEvC,qDAAqD;AACrD,oBAAY,kCAAkC;IAC5C,mBAAmB;IACnB,IAAI,SAAS;IACb,mBAAmB;IACnB,IAAI,SAAS;IACb,oBAAoB;IACpB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,uCAAuC;IACtD,qCAAqC;IACrC,IAAI,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC;IACpC,2CAA2C;IAC3C,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC;IAC1C,sEAAsE;IACtE,aAAa,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC;IAC9C,wDAAwD;IACxD,KAAK,CAAC,EAAE,kCAAkC,CAAC;CAC5C;AAED;;GAEG;AACH,MAAM,WAAW,0CAA0C;IACzD,sGAAsG;IACtG,MAAM,EAAE,MAAM,CAAC;IACf,kFAAkF;IAClF,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2HAA2H;IAC3H,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CACpC;AAED,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,CAAC;IACpD,MAAM,EAAE,kCAAkC,CAAC;CAC5C,CAAC,CAAC;AAEH,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,uCAAuC,CAAC;IACrD,aAAa,EAAE,0CAA0C,CAAC;IAC1D,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAAC;CAChD"}
+{"version":3,"file":"PaymentMethodMessagingElementComponent.d.ts","sourceRoot":"","sources":["../../../../../src/types/components/PaymentMethodMessagingElementComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,KAAK,iBAAiB,MAAM,iBAAiB,CAAC;AAMrD;;GAEG;AACH,MAAM,MAAM,kCAAkC,GAC1C;IAAE,MAAM,EAAE,SAAS,CAAA;CAAE,GACrB;IAAE,MAAM,EAAE,QAAQ,CAAA;CAAE,GACpB;IAAE,MAAM,EAAE,YAAY,CAAA;CAAE,GACxB;IAAE,MAAM,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,KAAK,CAAA;CAAE,CAAC;AAEvC,qDAAqD;AACrD,oBAAY,kCAAkC;IAC5C,mBAAmB;IACnB,IAAI,SAAS;IACb,mBAAmB;IACnB,IAAI,SAAS;IACb,oBAAoB;IACpB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,iCAAiC;IAChD;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,uCAAuC;IACtD,qCAAqC;IACrC,IAAI,CAAC,EAAE,iCAAiC,CAAC;IACzC,2CAA2C;IAC3C,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC;IAC1C,sEAAsE;IACtE,aAAa,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC;IAC9C,wDAAwD;IACxD,KAAK,CAAC,EAAE,kCAAkC,CAAC;CAC5C;AAED;;GAEG;AACH,MAAM,WAAW,0CAA0C;IACzD,sGAAsG;IACtG,MAAM,EAAE,MAAM,CAAC;IACf,kFAAkF;IAClF,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2HAA2H;IAC3H,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CACpC;AAED,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,CAAC;IACpD,MAAM,EAAE,kCAAkC,CAAC;CAC5C,CAAC,CAAC;AAEH,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,uCAAuC,CAAC;IACrD,aAAa,EAAE,0CAA0C,CAAC;IAC1D,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAAC;CAChD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stripe/stripe-react-native",
-  "version": "0.64.0",
+  "version": "0.64.1",
   "author": "Stripe",
   "description": "Stripe SDK for React Native",
   "main": "lib/commonjs/index",
@@ -19,7 +19,7 @@
     "update-pods": "cd example/ios && pod update Stripe StripeApplePay StripeFinancialConnections StripePayments StripePaymentSheet StripePaymentsUI StripeCore StripeUICore StripeCryptoOnramp",
     "bootstrap": "yarn example && yarn && yarn pods",
     "bootstrap-no-pods": "yarn example && yarn",
-    "docs": "yarn typedoc ./src/index.tsx --out ./docs/api-reference --tsconfig ./tsconfig.json --readme none --sort source-order",
+    "docs": "yarn typedoc ./src/index.tsx --out ./docs/api-reference --tsconfig ./tsconfig.json --readme none --sort source-order --excludeInternal",
     "run-example-ios": "cd example && yarn ios --simulator \"iPhone 16 Pro Max\"",
     "run-example-ios:release": "cd example && yarn build:ios && yarn ios --mode Release --simulator \"iPhone 16 Pro Max\" --no-packager",
     "run-example-android": "cd example && yarn android",
@@ -30,11 +30,15 @@
     "test:unit:android": "cd example/android && ./gradlew :stripe_stripe-react-native:testDebugUnitTest",
     "test-ios": "maestro test -e APP_ID=com.stripe.react.native",
     "test-android": "maestro test -e APP_ID=com.stripe.react.native",
-    "format:android:check": "cd android && ./gradlew spotlessCheck",
-    "format:android:write": "cd android && ./gradlew spotlessApply",
-    "lint:android": "cd android && ./gradlew :lint-rules:jar && cd ../example/android && RN_STRIPE_WARNINGS_AS_ERRORS=true ./gradlew :stripe_stripe-react-native:lint --rerun-tasks",
+    "format:android:check": "cd android && ./gradlew detekt",
+    "format:android:write": "cd android && ./gradlew detektFormat",
+    "lint:android": "cd android && ./gradlew detekt",
     "format:ios:check": "swiftlint ios --config .swiftlint.yml --strict",
-    "format:ios:write": "./scripts/format-changed-ios"
+    "format:ios:write": "./scripts/format-changed-ios",
+    "test:package-types": "attw --pack .",
+    "prepublishOnly": "echo \"\\nPlease use ./scripts/publish instead\\n\" && exit 1",
+    "api-extractor:update": "bob build && api-extractor run --local --verbose",
+    "api-extractor:check": "bob build && api-extractor run --verbose"
   },
   "files": [
     "src",
@@ -68,7 +72,9 @@
   },
   "homepage": "https://github.com/stripe/stripe-react-native/#readme",
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.17.0",
     "@expo/config-plugins": "^9.0.16",
+    "@microsoft/api-extractor": "^7.58.7",
     "@react-native/babel-preset": "^0.81.0",
     "@react-native/eslint-config": "^0.81.1",
     "@testing-library/react-hooks": "^8.0.1",
@@ -80,6 +86,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "husky": "^9.1.7",
     "jest": "^29.2.1",
+    "lint-staged": "^16.4.0",
     "prettier": "^3.5.2",
     "react": "19.1.0",
     "react-native": "^0.81.0",
@@ -172,6 +179,12 @@
       "typescript"
     ]
   },
+  "lint-staged": {
+    "*.{js,ts,tsx}": "eslint --ignore-path .gitignore",
+    "*.{ts,tsx}": "bash -c 'yarn typescript'",
+    "*.kt": "bash -c 'yarn format:android:write'",
+    "*.swift": "bash -c 'yarn format:ios:write'"
+  },
   "resolutions": {
     "simple-plist": "1.3.1"
   },
@@ -189,7 +202,8 @@
         "CardForm": "CardFormComponentView",
         "EmbeddedPaymentElementView": "EmbeddedPaymentElementViewComponentView",
         "NavigationBar": "NavigationBarComponentView",
-        "StripeContainer": "StripeContainerComponentView"
+        "StripeContainer": "StripeContainerComponentView",
+        "StripeCurrencySelectorElement": "StripeCurrencySelectorElementComponentView"
       }
     },
     "name": "rnstripe",

package/src/components/CurrencySelectorElement.tsx

@@ -0,0 +1,95 @@
+import React, { useCallback, useState } from 'react';
+import {
+  AccessibilityProps,
+  LayoutAnimation,
+  NativeSyntheticEvent,
+} from 'react-native';
+import type { Checkout } from '../types/Checkout';
+import NativeCurrencySelectorElement, {
+  type HeightChangeEvent,
+} from '../specs/NativeCurrencySelectorElement';
+
+/**
+ * Props for {@link CurrencySelectorElement}.
+ * @internal
+ */
+export interface CurrencySelectorElementProps extends AccessibilityProps {
+  /**
+   * The `Checkout` handle returned by `useCheckout`.
+   *
+   * The element reads currency options from this session and calls
+   * `selectCurrency` internally — you never call it yourself.
+   */
+  checkout: Checkout;
+
+  /**
+   * When `true`, the toggle is visible but does not respond to taps.
+   *
+   * Tip: pass `disabled={state?.status === 'loading'}` to freeze the
+   * selector while an unrelated mutation (e.g. applying a promo code)
+   * is in flight. The element also disables itself automatically
+   * during its own currency-selection network call.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+}
+
+/**
+ * A self-contained currency selector for Adaptive Pricing.
+ *
+ * Place this element on your cart or checkout page **near the total price**,
+ * above the Payment Element. It automatically:
+ *
+ * - Reads currency options from the `Checkout` session
+ * - Renders a two-option toggle with exchange rate disclosure
+ * - Calls `selectCurrency` when the customer taps an option
+ * - Collapses to zero height when Adaptive Pricing is unavailable
+ * - Displays inline errors on failed selections
+ *
+ * Session state updates automatically through `useCheckout` — no extra
+ * wiring needed to keep your cart totals in sync.
+ *
+ * @example
+ * ```tsx
+ * const { state, checkout } = useCheckout(clientSecret, {
+ *   adaptivePricing: { allowed: true },
+ * });
+ *
+ * return (
+ *   <ScrollView>
+ *     <CurrencySelectorElement checkout={checkout} />
+ *     <Text>{formatTotal(state?.session.totals?.total, state?.session.currency)}</Text>
+ *   </ScrollView>
+ * );
+ * ```
+ *
+ * @param props {@link CurrencySelectorElementProps}
+ * @category ReactComponents
+ * @internal
+ */
+export function CurrencySelectorElement({
+  checkout,
+  disabled = false,
+  ...a11yProps
+}: CurrencySelectorElementProps) {
+  const [height, setHeight] = useState<number>(0);
+
+  const handleHeightChange = useCallback(
+    (e: NativeSyntheticEvent<HeightChangeEvent>) => {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+      setHeight(e.nativeEvent.height);
+    },
+    []
+  );
+
+  return (
+    <NativeCurrencySelectorElement
+      sessionKey={checkout.sessionKey}
+      disabled={disabled}
+      style={{ width: '100%', height }}
+      onHeightChange={handleHeightChange}
+      {...a11yProps}
+    />
+  );
+}

package/src/components/PaymentMethodMessagingElement.tsx

@@ -0,0 +1,109 @@
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import {
+  AccessibilityProps,
+  HostComponent,
+  LayoutAnimation,
+} from 'react-native';
+import {
+  PaymentMethodMessagingElementAppearance,
+  PaymentMethodMessagingElementState,
+} from '../types/components/PaymentMethodMessagingElementComponent';
+import { PaymentMethodMessagingElementConfiguration } from '../types/components/PaymentMethodMessagingElementComponent';
+import NativePaymentMethodMessagingElement, {
+  NativeProps,
+} from '../specs/NativePaymentMethodMessagingElement';
+import { addListener } from '../events';
+
+export interface Props extends AccessibilityProps {
+  appearance?: PaymentMethodMessagingElementAppearance;
+  configuration: PaymentMethodMessagingElementConfiguration;
+  onStateChange?(event: PaymentMethodMessagingElementState): void;
+}
+
+/**
+ * This feature is in Public Preview. It may not be feature complete and have breaking changes as we develop and update functionality.
+ * Payment Method Messaging Element to display promotional information about available BNPL plans.
+ *
+ * @example
+ * ```tsx
+ * <PaymentMethodMessagingElement
+ *    appearance={{
+ *      style: Style.Dark,
+ *      textColor: '#FFFFFF',
+ *      infoIconColor: '#CCCCCC',
+ *      font: {
+ *        family: 'Courier',
+ *        size: 16,
+ *      },
+ *    }}
+ *    configuration={{
+ *      currencyCode: 'usd',
+ *      amount: 5000,
+ *      countryCode: 'US',
+ *    }}
+ *    onStateChange={(event) => {
+ *      console.log('PMME loaded with result:', event);
+ *    }
+ * />
+ * ```
+ * @param __namedParameters Props
+ * @returns JSX.Element
+ * @category ReactComponents
+ */
+export const PaymentMethodMessagingElement = forwardRef<any, Props>(
+  ({ appearance, configuration, onStateChange, ...props }) => {
+    const viewRef =
+      useRef<React.ComponentRef<HostComponent<NativeProps>>>(null);
+
+    const [height, setHeight] = useState<number | undefined>();
+
+    useEffect(() => {
+      // listen for height changes
+      const sub = addListener(
+        'paymentMethodMessagingElementDidUpdateHeight',
+        ({ height: h }) => {
+          LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+          setHeight(h);
+        }
+      );
+      return () => sub.remove();
+    });
+
+    useEffect(() => {
+      // listen for load complete
+      const sub = addListener(
+        'paymentMethodMessagingElementConfigureResult',
+        ({ status: s }) => {
+          let state: PaymentMethodMessagingElementState;
+
+          if (s === 'loaded') {
+            state = { status: 'loaded' };
+          } else if (s === 'loading') {
+            state = { status: 'loading' };
+          } else if (s === 'no_content') {
+            state = { status: 'no_content' };
+          } else {
+            state = {
+              status: 'failed',
+              error: new Error(
+                'Failed to configure payment method messaging element'
+              ),
+            };
+          }
+          onStateChange?.(state);
+        }
+      );
+      return () => sub.remove();
+    }, [onStateChange]);
+
+    return (
+      <NativePaymentMethodMessagingElement
+        appearance={appearance}
+        style={[{ width: '100%', height: height }]}
+        configuration={configuration}
+        {...props}
+        ref={viewRef}
+      />
+    );
+  }
+);

package/src/events.ts

@@ -66,6 +66,17 @@ type Events = {
   onCustomPaymentMethodConfirmHandlerCallback: EventEmitter<UnsafeObject<any>>;
   paymentMethodMessagingElementDidUpdateHeight: EventEmitter<UnsafeObject<any>>;
   paymentMethodMessagingElementConfigureResult: EventEmitter<UnsafeObject<any>>;
+  /**
+   * Fired by native every time a `Checkout` instance's state transitions —
+   * regardless of whether the mutation was JS-driven (e.g. `applyPromotionCode`
+   * via `useCheckout`) or native-driven (e.g. `CurrencySelectorElement`).
+   * `useCheckout` mirrors this into its `state` so the entire React tree
+   * stays in sync with the underlying native session.
+   */
+  checkoutSessionDidChangeState: EventEmitter<{
+    sessionKey: string;
+    state: UnsafeObject<any>;
+  }>;
 };
 
 export function addListener<EventT extends keyof Events>(

package/src/functions.ts

@@ -350,6 +350,33 @@ let financialConnectionsEventListener: EventSubscription | null = null;
 let paymentSheetCustomPaymentMethodConfirmCallback: EventSubscription | null =
   null;
 
+type NativeCheckoutSetupParams = Omit<
+  PaymentSheet.CheckoutSetupParams,
+  'checkout'
+> & {
+  checkout: {
+    sessionKey: string;
+  };
+};
+
+const toNativePaymentSheetSetupParams = (
+  params: PaymentSheet.SetupParams
+): PaymentSheet.SetupParams => {
+  if (!('checkout' in params)) {
+    return params;
+  }
+
+  const nativeCheckoutParams: NativeCheckoutSetupParams = {
+    ...params,
+    // The native side already owns the Checkout instance, so only pass its opaque session key.
+    checkout: {
+      sessionKey: params.checkout.sessionKey,
+    },
+  };
+
+  return nativeCheckoutParams as PaymentSheet.SetupParams;
+};
+
 export const initPaymentSheet = async (
   params: PaymentSheet.SetupParams
 ): Promise<InitPaymentSheetResult> => {
@@ -431,7 +458,9 @@ export const initPaymentSheet = async (
         `[@stripe/stripe-react-native] You have not provided the 'returnURL' field to 'initPaymentSheet', so payment methods that require redirects will not be shown in your iOS Payment Sheet. Visit https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=payment-sheet#react-native-set-up-return-url to learn more.`
       );
     }
-    result = await NativeStripeSdk.initPaymentSheet(params);
+    result = await NativeStripeSdk.initPaymentSheet(
+      toNativePaymentSheetSetupParams(params)
+    );
 
     if (result.error) {
       return {

package/src/hooks/useCheckout.tsx

@@ -0,0 +1,207 @@
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import NativeStripeSdk from '../specs/NativeStripeSdkModule';
+import type { Checkout } from '../types/Checkout';
+import { addListener } from '../events';
+
+/**
+ * Initializes a Stripe Checkout Session and returns a reactive handle.
+ *
+ * The session is fetched from Stripe when the hook mounts. `state` is `null`
+ * until the initial load completes, then transitions between `loaded` and
+ * `loading` as mutations are performed.
+ *
+ * Pass the returned `checkout` to `initPaymentSheet` to complete the purchase.
+ *
+ * @internal
+ */
+export function useCheckout(
+  clientSecret: string,
+  configuration?: Checkout.Configuration
+): {
+  /** The current loading state of the checkout session. `null` until the initial load completes. */
+  state: Checkout.State | null;
+  /** A handle to the session with methods for mutations. */
+  checkout: Checkout;
+  /** Set if the initial session load fails. Undefined otherwise. */
+  error?: Checkout.Error;
+} {
+  const [state, setState] = useState<Checkout.State | null>(null);
+  const [error, setError] = useState<Checkout.Error | undefined>(undefined);
+
+  // Ref so mutation callbacks don't need it as a dependency.
+  const sessionKeyRef = useRef<string | null>(null);
+
+  // Load session on mount / clientSecret change.
+  useEffect(() => {
+    let cancelled = false;
+    sessionKeyRef.current = null;
+    setState(null);
+    setError(undefined);
+
+    (async () => {
+      try {
+        const result = await NativeStripeSdk.initCheckoutSession(
+          clientSecret,
+          configuration ?? {}
+        );
+        if (cancelled) return;
+        sessionKeyRef.current = result.sessionKey;
+        setState(result.state);
+      } catch (e: any) {
+        if (cancelled) return;
+        setError({
+          code: e.code ?? 'Failed',
+          message: e.message ?? 'Failed to initialize checkout session',
+        });
+      }
+    })();
+
+    // Listen for state changes from native (e.g. currency selector taps)
+    // so we stay in sync even when mutations don't originate from JS.
+    const sub = addListener(
+      'checkoutSessionDidChangeState',
+      ({ sessionKey, state: nextState }) => {
+        if (sessionKey !== sessionKeyRef.current) return;
+        setState(nextState as Checkout.State);
+      }
+    );
+
+    // Ignore in-flight init if unmounted or clientSecret changed.
+    return () => {
+      cancelled = true;
+      sub.remove();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [clientSecret]);
+
+  // Sets `loading`, calls native, applies returned state. Reverts on error.
+  const withLoading = useCallback(
+    async (fn: (sessionKey: string) => Promise<Checkout.State>) => {
+      const key = sessionKeyRef.current;
+      if (!key) {
+        throw { code: 'Failed', message: 'Checkout session not initialized.' };
+      }
+
+      setState((prev) =>
+        prev ? { status: 'loading', session: prev.session } : prev
+      );
+
+      try {
+        const newState = await fn(key);
+        setState(newState);
+      } catch (e: any) {
+        setState((prev) =>
+          prev?.status === 'loading'
+            ? { status: 'loaded', session: prev.session }
+            : prev
+        );
+        throw e;
+      }
+    },
+    []
+  );
+
+  // Mutation methods. Each is memoized so `checkout` has a stable identity.
+  const updateShippingAddress = useCallback<Checkout['updateShippingAddress']>(
+    (address, name, phone) =>
+      withLoading((key) =>
+        NativeStripeSdk.checkoutUpdateShippingAddress(
+          key,
+          address,
+          name ?? null,
+          phone ?? null
+        )
+      ),
+    [withLoading]
+  );
+  const updateBillingAddress = useCallback<Checkout['updateBillingAddress']>(
+    (address, name, phone) =>
+      withLoading((key) =>
+        NativeStripeSdk.checkoutUpdateBillingAddress(
+          key,
+          address,
+          name ?? null,
+          phone ?? null
+        )
+      ),
+    [withLoading]
+  );
+  const applyPromotionCode = useCallback<Checkout['applyPromotionCode']>(
+    (code) =>
+      withLoading((key) =>
+        NativeStripeSdk.checkoutApplyPromotionCode(key, code)
+      ),
+    [withLoading]
+  );
+  const removePromotionCode = useCallback<Checkout['removePromotionCode']>(
+    () =>
+      withLoading((key) => NativeStripeSdk.checkoutRemovePromotionCode(key)),
+    [withLoading]
+  );
+  const updateLineItemQuantity = useCallback<
+    Checkout['updateLineItemQuantity']
+  >(
+    (lineItemId, quantity) =>
+      withLoading((key) =>
+        NativeStripeSdk.checkoutUpdateLineItemQuantity(
+          key,
+          lineItemId,
+          quantity
+        )
+      ),
+    [withLoading]
+  );
+  const selectShippingOption = useCallback<Checkout['selectShippingOption']>(
+    (id) =>
+      withLoading((key) =>
+        NativeStripeSdk.checkoutSelectShippingOption(key, id)
+      ),
+    [withLoading]
+  );
+  const updateTaxId = useCallback<Checkout['updateTaxId']>(
+    (type, value) =>
+      withLoading((key) =>
+        NativeStripeSdk.checkoutUpdateTaxId(key, type, value)
+      ),
+    [withLoading]
+  );
+  const refresh = useCallback<Checkout['refresh']>(
+    () => withLoading((key) => NativeStripeSdk.checkoutRefresh(key)),
+    [withLoading]
+  );
+
+  const checkout = useMemo<Checkout>(
+    () => ({
+      get sessionKey(): string {
+        if (!sessionKeyRef.current) {
+          throw new Error(
+            'Checkout session not initialized. Wait for `state.status === "loaded"` ' +
+              'before passing `checkout` to `useEmbeddedPaymentElement` or calling a ' +
+              'mutation method (e.g. `applyPromotionCode`).'
+          );
+        }
+        return sessionKeyRef.current;
+      },
+      updateShippingAddress,
+      updateBillingAddress,
+      applyPromotionCode,
+      removePromotionCode,
+      updateLineItemQuantity,
+      selectShippingOption,
+      updateTaxId,
+      refresh,
+    }),
+    [
+      updateShippingAddress,
+      updateBillingAddress,
+      applyPromotionCode,
+      removePromotionCode,
+      updateLineItemQuantity,
+      selectShippingOption,
+      updateTaxId,
+      refresh,
+    ]
+  );
+
+  return { state, checkout, error };
+}

package/src/hooks/useOnramp.tsx

@@ -1,4 +1,4 @@
-import { EventSubscription } from 'react-native';
+import { EventSubscription, Platform } from 'react-native';
 import NativeOnrampSdk from '../specs/NativeOnrampSdkModule';
 import { Onramp, OnrampError, StripeError } from '../types';
 import type { Address } from '../types';
@@ -6,10 +6,16 @@ import { useCallback } from 'react';
 import { addOnrampListener } from '../events';
 import { CryptoPaymentToken } from '../types/Onramp';
 
-function requireOnrampModule() {
+export function requireOnrampModule() {
   if (NativeOnrampSdk == null) {
     throw new Error(
-      "Onramp module is not available. On Android, add 'StripeSdk_includeOnramp=true' to gradle.properties."
+      Platform.select({
+        ios: "Onramp module is not available. Add 'stripe-react-native/Onramp' to your Podfile.",
+        android:
+          "Onramp module is not available. Add 'StripeSdk_includeOnramp=true' to gradle.properties.",
+        default:
+          "Onramp module is not available. Enable the Onramp pod on iOS and set 'StripeSdk_includeOnramp=true' on Android.",
+      }) ?? 'Onramp module is not available.'
     );
   }
   return NativeOnrampSdk;

package/src/index.tsx

@@ -36,6 +36,10 @@ export * from './types/EmbeddedPaymentElement';
 export * from './types/PaymentSheet';
 export * from './types/ConfirmationToken';
 
+export * from './types/components/PaymentMethodMessagingElementComponent';
+export type { Props as PaymentMethodMessagingElementProps } from './components/PaymentMethodMessagingElement';
+export { PaymentMethodMessagingElement } from './components/PaymentMethodMessagingElement';
+
 //connect components
 export {
   ConnectComponentsProvider,

package/src/specs/NativeCurrencySelectorElement.ts

@@ -0,0 +1,35 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type {
+  DirectEventHandler,
+  Double,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface HeightChangeEvent {
+  height: Double;
+}
+
+export interface NativeProps extends ViewProps {
+  /**
+   * Opaque key returned by `useCheckout`. The native side uses this to look
+   * up the matching `Checkout` instance and observe its state — there's no
+   * separate session-update event from this view, since `useCheckout`
+   * already subscribes to a single `checkoutSessionDidChangeState` channel
+   * that mirrors every native-driven mutation back into JS.
+   */
+  sessionKey: string;
+
+  /** When true, the toggle is visible but ignores user interaction. */
+  disabled?: WithDefault<boolean, false>;
+
+  /**
+   * Fired whenever the element's intrinsic height changes so the RN
+   * layout system can update the containing view.
+   */
+  onHeightChange?: DirectEventHandler<HeightChangeEvent>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'StripeCurrencySelectorElement'
+) as HostComponent<NativeProps>;