framepayments-react-native 2.0.5 → 2.0.7

package/README.md

@@ -299,6 +299,86 @@ On non-Android platforms `Frame.presentGooglePay` rejects synchronously with a n
 
 ---
 
+### `Frame.setTheme(theme)` (iOS)
+
+Customizes colors, fonts, and corner radii on Frame's reusable components — checkout, cart, and the onboarding flow. Backed by `FrameTheme` introduced in Frame-iOS 2.1.2.
+
+Call once at app startup (after `Frame.initialize`). The theme applies to every subsequent `present*` call. Modals already on screen are not re-themed mid-flow. Pass `null` or `{}` to reset to defaults; pass a partial dict to override only specific tokens.
+
+```ts
+import Frame from 'framepayments-react-native';
+
+await Frame.setTheme({
+  colors: {
+    primaryButton: '#5B2DFF',
+    primaryButtonText: '#FFFFFF',
+    surface: '#0A0A0A',
+    textPrimary: '#FFFFFF',
+    error: '#E53935',
+  },
+  fonts: {
+    title: { name: 'Inter-Bold', size: 24 },
+    button: { name: 'Inter-SemiBold', size: 16 },
+  },
+  radii: { medium: 16 },
+});
+```
+
+**Android**: `setTheme()` resolves immediately and has no effect — `frame-android` does not yet have a matching theme API.
+
+#### Tokens
+
+**Colors** — hex strings (`#RGB`, `#RRGGBB`, or `#RRGGBBAA`, with or without leading `#`):
+
+| Key | Used by |
+|-----|---------|
+| `primaryButton` / `primaryButtonText` | Primary CTAs |
+| `secondaryButton` / `secondaryButtonText` | Secondary CTAs |
+| `disabledButton` / `disabledButtonStroke` / `disabledButtonText` | Disabled CTAs |
+| `surface` / `surfaceStroke` | Cards, sheets, input backgrounds |
+| `textPrimary` / `textSecondary` | Body and supporting text |
+| `error` | Validation messages |
+| `onboardingHeaderBackground` | Onboarding header bar |
+| `onboardingProgressFilledOnBrand` / `onboardingProgressEmptyOnBrand` | Onboarding progress indicator |
+
+**Fonts** — `{ name: string; size: number }` objects. `name` must match a PostScript font name registered in your app's `Info.plist` (`UIAppFonts`) and bundled as a resource. Use `name: 'system'` for the system font.
+
+| Key | Default | Used by |
+|-----|---------|---------|
+| `title` | `.title` | Page titles |
+| `heading` | 18pt semibold | Section headers |
+| `headline` | `.headline` | Card headlines |
+| `body` | `.body` | Body text |
+| `bodySmall` | 14pt | Smaller body |
+| `label` | `.subheadline` | Field labels |
+| `caption` | `.caption` | Captions, footnotes |
+| `button` | `.headline` | Button text |
+
+**Radii** — numbers (in points):
+
+| Key | Default | Used by |
+|-----|---------|---------|
+| `small` | 8 | Small chips |
+| `medium` | 10 | Buttons, inputs |
+| `large` | 16 | Cards, sheets |
+
+#### Custom fonts
+
+Custom fonts are passed through to SwiftUI's `Font.custom(name:size:)`. Two requirements on the host iOS app:
+
+1. Add the font file to your app's bundle (Xcode → Build Phases → Copy Bundle Resources).
+2. Register it in your app's `Info.plist`:
+   ```xml
+   <key>UIAppFonts</key>
+   <array>
+     <string>Inter-Bold.ttf</string>
+   </array>
+   ```
+
+If a font name doesn't resolve, iOS silently falls back to the system font.
+
+---
+
 ### Rendering wallet buttons
 
 Apple and Google both require their official button artwork (with light/dark variants) — custom-styled buttons can be rejected. Download the assets from [Apple's marketing page](https://developer.apple.com/apple-pay/marketing/) and [Google's brand guidelines page](https://developers.google.com/pay/api/android/guides/brand-guidelines), bundle them in your app, and pick a variant based on the active color scheme:

package/android/build.gradle

@@ -31,9 +31,9 @@ android {
 dependencies {
   implementation 'com.facebook.react:react-native:+'
   implementation "org.jetbrains.kotlin:kotlin-stdlib:2.1.0"
-  implementation 'com.framepayments:framesdk:2.0.2'
-  implementation 'com.framepayments:framesdk_ui:2.0.2'
-  implementation 'com.framepayments:framesdk_onboarding:2.0.2'
+  implementation 'com.framepayments:framesdk:2.0.4'
+  implementation 'com.framepayments:framesdk_ui:2.0.4'
+  implementation 'com.framepayments:framesdk_onboarding:2.0.4'
   // Required by FrameGooglePayButton (PaymentsClient, WalletConstants).
   // framesdk_ui declares this as `implementation`, so it is not exposed transitively.
   implementation 'com.google.android.gms:play-services-wallet:19.4.0'

package/android/src/main/java/com/framepayments/reactnativeframe/FrameOnboardingActivity.kt

@@ -18,10 +18,12 @@ class FrameOnboardingActivity : ComponentActivity() {
     val accountId = intent.getStringExtra(EXTRA_ACCOUNT_ID)
     val capabilitiesJson = intent.getStringExtra(EXTRA_CAPABILITIES_JSON) ?: "[]"
     val capabilities = parseCapabilities(capabilitiesJson)
+    val googlePayMerchantId = intent.getStringExtra(EXTRA_GOOGLE_PAY_MERCHANT_ID)
 
     val config = OnboardingConfig(
       accountId = accountId,
-      requiredCapabilities = capabilities
+      requiredCapabilities = capabilities,
+      googlePayMerchantId = googlePayMerchantId
     )
 
     setContent {
@@ -62,6 +64,7 @@ class FrameOnboardingActivity : ComponentActivity() {
   companion object {
     const val EXTRA_ACCOUNT_ID = "account_id"
     const val EXTRA_CAPABILITIES_JSON = "capabilities_json"
+    const val EXTRA_GOOGLE_PAY_MERCHANT_ID = "google_pay_merchant_id"
     const val EXTRA_PAYMENT_METHOD_ID = "payment_method_id"
     const val REQUEST_CODE = 9003
   }

package/android/src/main/java/com/framepayments/reactnativeframe/FrameSDKModule.kt

@@ -119,6 +119,7 @@ class FrameSDKModule(reactContext: ReactApplicationContext) :
   fun presentOnboarding(
     accountId: String?,
     capabilities: com.facebook.react.bridge.ReadableArray,
+    googlePayMerchantId: String?,
     promise: Promise
   ) {
     val activity = reactApplicationContext.currentActivity ?: run {
@@ -131,6 +132,7 @@ class FrameSDKModule(reactContext: ReactApplicationContext) :
       val intent = Intent(activity, FrameOnboardingActivity::class.java).apply {
         putExtra(FrameOnboardingActivity.EXTRA_ACCOUNT_ID, accountId)
         putExtra(FrameOnboardingActivity.EXTRA_CAPABILITIES_JSON, capabilitiesJson)
+        putExtra(FrameOnboardingActivity.EXTRA_GOOGLE_PAY_MERCHANT_ID, googlePayMerchantId)
       }
       activity.startActivityForResult(intent, FrameOnboardingActivity.REQUEST_CODE)
     }

package/ios/FrameRNTheme.swift

@@ -0,0 +1,119 @@
+//
+//  FrameRNTheme.swift
+//  FrameReactNative
+//
+//  Bridges JS theme dictionaries to Frame-iOS's FrameTheme and applies it to
+//  every SwiftUI root view we present. Read/written only on the main thread.
+//
+
+import Foundation
+import SwiftUI
+import Frame
+
+enum FrameRNTheme {
+  // Main-thread only: written by FrameSDKBridge.setTheme (dispatched to main),
+  // read by present* methods (already on main).
+  static var current: FrameTheme? = nil
+
+  static func resolved() -> FrameTheme { current ?? .default }
+
+  static func parse(_ dict: [String: Any]) -> FrameTheme {
+    var theme = FrameTheme.default
+
+    if let colorsDict = dict["colors"] as? [String: Any] {
+      applyColor(colorsDict, "primaryButton") { theme.colors.primaryButton = $0 }
+      applyColor(colorsDict, "primaryButtonText") { theme.colors.primaryButtonText = $0 }
+      applyColor(colorsDict, "secondaryButton") { theme.colors.secondaryButton = $0 }
+      applyColor(colorsDict, "secondaryButtonText") { theme.colors.secondaryButtonText = $0 }
+      applyColor(colorsDict, "disabledButton") { theme.colors.disabledButton = $0 }
+      applyColor(colorsDict, "disabledButtonStroke") { theme.colors.disabledButtonStroke = $0 }
+      applyColor(colorsDict, "disabledButtonText") { theme.colors.disabledButtonText = $0 }
+      applyColor(colorsDict, "surface") { theme.colors.surface = $0 }
+      applyColor(colorsDict, "surfaceStroke") { theme.colors.surfaceStroke = $0 }
+      applyColor(colorsDict, "textPrimary") { theme.colors.textPrimary = $0 }
+      applyColor(colorsDict, "textSecondary") { theme.colors.textSecondary = $0 }
+      applyColor(colorsDict, "error") { theme.colors.error = $0 }
+      applyColor(colorsDict, "onboardingHeaderBackground") { theme.colors.onboardingHeaderBackground = $0 }
+      applyColor(colorsDict, "onboardingProgressFilledOnBrand") { theme.colors.onboardingProgressFilledOnBrand = $0 }
+      applyColor(colorsDict, "onboardingProgressEmptyOnBrand") { theme.colors.onboardingProgressEmptyOnBrand = $0 }
+    }
+
+    if let fontsDict = dict["fonts"] as? [String: Any] {
+      applyFont(fontsDict, "title") { theme.fonts.title = $0 }
+      applyFont(fontsDict, "heading") { theme.fonts.heading = $0 }
+      applyFont(fontsDict, "headline") { theme.fonts.headline = $0 }
+      applyFont(fontsDict, "body") { theme.fonts.body = $0 }
+      applyFont(fontsDict, "bodySmall") { theme.fonts.bodySmall = $0 }
+      applyFont(fontsDict, "label") { theme.fonts.label = $0 }
+      applyFont(fontsDict, "caption") { theme.fonts.caption = $0 }
+      applyFont(fontsDict, "button") { theme.fonts.button = $0 }
+    }
+
+    if let radiiDict = dict["radii"] as? [String: Any] {
+      if let v = radiiDict["small"] as? Double { theme.radii.small = CGFloat(v) }
+      if let v = radiiDict["medium"] as? Double { theme.radii.medium = CGFloat(v) }
+      if let v = radiiDict["large"] as? Double { theme.radii.large = CGFloat(v) }
+    }
+
+    return theme
+  }
+
+  private static func applyColor(_ dict: [String: Any], _ key: String, _ set: (Color) -> Void) {
+    guard let hex = dict[key] as? String, let color = Color(rnHex: hex) else { return }
+    set(color)
+  }
+
+  private static func applyFont(_ dict: [String: Any], _ key: String, _ set: (Font) -> Void) {
+    guard let entry = dict[key] as? [String: Any],
+          let name = entry["name"] as? String,
+          let size = entry["size"] as? Double else { return }
+    if name.lowercased() == "system" {
+      set(.system(size: CGFloat(size)))
+    } else {
+      set(.custom(name, size: CGFloat(size)))
+    }
+  }
+}
+
+// Applies the supplied FrameTheme to a single root view. Captured at present
+// time so each UIHostingController has a stable, concrete rootView type.
+struct ThemedRoot<Content: View>: View {
+  let theme: FrameTheme
+  let content: Content
+
+  init(_ content: Content, theme: FrameTheme) {
+    self.content = content
+    self.theme = theme
+  }
+
+  var body: some View {
+    content.frameTheme(theme)
+  }
+}
+
+extension Color {
+  // Accepts "#RGB", "#RRGGBB", "#RRGGBBAA" with or without the leading '#'.
+  init?(rnHex hex: String) {
+    var s = hex.trimmingCharacters(in: .whitespacesAndNewlines)
+    if s.hasPrefix("#") { s.removeFirst() }
+    if s.count == 3 {
+      s = s.map { "\($0)\($0)" }.joined()
+    }
+    guard s.count == 6 || s.count == 8 else { return nil }
+    var v: UInt64 = 0
+    guard Scanner(string: s).scanHexInt64(&v) else { return nil }
+    let r, g, b, a: Double
+    if s.count == 6 {
+      r = Double((v >> 16) & 0xff) / 255
+      g = Double((v >>  8) & 0xff) / 255
+      b = Double( v        & 0xff) / 255
+      a = 1
+    } else {
+      r = Double((v >> 24) & 0xff) / 255
+      g = Double((v >> 16) & 0xff) / 255
+      b = Double((v >>  8) & 0xff) / 255
+      a = Double( v        & 0xff) / 255
+    }
+    self = Color(.sRGB, red: r, green: g, blue: b, opacity: a)
+  }
+}

package/ios/FrameSDKBridge.m

@@ -31,6 +31,10 @@ RCT_EXTERN_METHOD(initialize:(NSString *)secretKey
                   resolver:(RCTPromiseResolveBlock)resolve
                   rejecter:(RCTPromiseRejectBlock)reject)
 
+RCT_EXTERN_METHOD(setTheme:(NSDictionary *)theme
+                  resolver:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+
 RCT_EXTERN_METHOD(presentCheckout:(id)customerId
                   amount:(nonnull NSNumber *)amount
                   resolver:(RCTPromiseResolveBlock)resolve
@@ -76,6 +80,10 @@ RCT_EXTERN_METHOD(presentApplePay:(NSString *)ownerType
   [[[ObjCFrameSDKBridge alloc] init] initialize:secretKey publishableKey:publishableKey debugMode:debugMode resolver:resolve rejecter:reject];
 }
 
+- (void)setTheme:(NSDictionary *)theme resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject {
+  [[[ObjCFrameSDKBridge alloc] init] setTheme:theme resolver:resolve rejecter:reject];
+}
+
 - (void)presentCheckout:(id)customerId amount:(NSNumber *)amount resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject {
   dispatch_async(dispatch_get_main_queue(), ^{
     UIViewController *topVC = FrameGetTopViewController();

package/ios/FrameSDKBridge.swift

@@ -27,6 +27,15 @@ public class FrameSDKBridge: NSObject {
     }
   }
 
+  @objc public
+  func setTheme(_ theme: NSDictionary, resolver resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
+    DispatchQueue.main.async {
+      let dict = theme as? [String: Any] ?? [:]
+      FrameRNTheme.current = dict.isEmpty ? nil : FrameRNTheme.parse(dict)
+      resolve(nil)
+    }
+  }
+
   @objc public
   func presentCheckout(from viewController: UIViewController, customerId: String?, amount: Int, resolver resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
     presentCheckoutOnMain(from: viewController, customerId: customerId, amount: amount, resolve: resolve, reject: reject)
@@ -104,20 +113,23 @@ public class FrameSDKBridge: NSObject {
 
   private func presentCheckoutOnMain(from top: UIViewController, customerId: String?, amount: Int, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
     var hosting: CheckoutHostingController!
-    hosting = CheckoutHostingController(rootView: FrameCheckoutView(
-      customerId: customerId,
-      paymentAmount: amount,
-      checkoutCallback: { [weak hosting] chargeIntent in
-        hosting?.didComplete = true
-        top.dismiss(animated: true)
-        DispatchQueue.main.async {
-          if let dict = Self.encodeChargeIntent(chargeIntent) {
-            resolve(dict)
-          } else {
-            reject("ENCODE_ERROR", "Failed to encode charge intent", nil)
+    hosting = CheckoutHostingController(rootView: ThemedRoot(
+      FrameCheckoutView(
+        customerId: customerId,
+        paymentAmount: amount,
+        checkoutCallback: { [weak hosting] chargeIntent in
+          hosting?.didComplete = true
+          top.dismiss(animated: true)
+          DispatchQueue.main.async {
+            if let dict = Self.encodeChargeIntent(chargeIntent) {
+              resolve(dict)
+            } else {
+              reject("ENCODE_ERROR", "Failed to encode charge intent", nil)
+            }
           }
         }
-      }
+      ),
+      theme: FrameRNTheme.resolved()
     ))
     hosting.onCancel = {
       DispatchQueue.main.async {
@@ -174,7 +186,7 @@ public class FrameSDKBridge: NSObject {
       cartItems: cartItems,
       shippingAmountInCents: shippingAmountInCents
     )
-    let hosting = UIHostingController(rootView: cartView)
+    let hosting = UIHostingController(rootView: ThemedRoot(cartView, theme: FrameRNTheme.resolved()))
     hosting.modalPresentationStyle = UIModalPresentationStyle.pageSheet
     if let sheet = hosting.sheetPresentationController {
       sheet.detents = [UISheetPresentationController.Detent.large()]
@@ -188,17 +200,20 @@ public class FrameSDKBridge: NSObject {
   }
 
   private func presentOnboardingOnMain(from top: UIViewController, accountId: String?, capabilities: [FrameObjects.Capabilities], applePayMerchantId: String?, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
-    var hosting: OnboardingHostingController<OnboardingContainerView>!
+    var hosting: OnboardingHostingController<ThemedRoot<OnboardingContainerView>>!
     var delegate: OnboardingDismissDelegate!
     hosting = OnboardingHostingController(
-      rootView: OnboardingContainerView(
-        accountId: accountId,
-        requiredCapabilities: capabilities,
-        applePayMerchantId: applePayMerchantId,
-        onComplete: { [weak hosting] in
-          delegate?.finish(completed: true)
-          hosting?.dismiss(animated: true)
-        }
+      rootView: ThemedRoot(
+        OnboardingContainerView(
+          accountId: accountId,
+          requiredCapabilities: capabilities,
+          applePayMerchantId: applePayMerchantId,
+          onComplete: { [weak hosting] in
+            delegate?.finish(completed: true)
+            hosting?.dismiss(animated: true)
+          }
+        ),
+        theme: FrameRNTheme.resolved()
       )
     )
     // Embed in a UINavigationController so the outer sheet is a UIKit container,
@@ -227,7 +242,7 @@ public class FrameSDKBridge: NSObject {
 
 // MARK: - CheckoutHostingController
 
-private final class CheckoutHostingController: UIHostingController<FrameCheckoutView>, UIAdaptivePresentationControllerDelegate {
+private final class CheckoutHostingController: UIHostingController<ThemedRoot<FrameCheckoutView>>, UIAdaptivePresentationControllerDelegate {
   var didComplete = false
   var onCancel: (() -> Void)?
   private var cancelled = false

package/lib/index.d.ts

@@ -7,12 +7,12 @@
  * - Use presentApplePay / presentGooglePay to launch the platform wallet sheet from your own button UI.
  * - For API calls (customers, charge intents, refunds), use the framepayments (frame-node) package from JS.
  */
-import { initialize, presentCheckout, presentCart, presentOnboarding, presentApplePay, presentGooglePay } from './native';
-export { initialize, presentCheckout, presentCart, presentOnboarding, presentApplePay, presentGooglePay, } from './native';
-export type { FrameCartItem, ChargeIntent, ChargeIntentStatus, AuthorizationMode, FrameError, BillingAddress, PaymentCard, BankAccount, PaymentMethod, OnboardingCapability, OnboardingResult, OnboardingResultStatus, ApplePayOwner, PresentApplePayOptions, PresentGooglePayOptions, } from './types';
+import { initialize, presentCheckout, presentCart, presentOnboarding, presentApplePay, presentGooglePay, setTheme } from './native';
+export { initialize, presentCheckout, presentCart, presentOnboarding, presentApplePay, presentGooglePay, setTheme, } from './native';
+export type { FrameCartItem, ChargeIntent, ChargeIntentStatus, AuthorizationMode, FrameError, BillingAddress, PaymentCard, BankAccount, PaymentMethod, OnboardingCapability, OnboardingResult, OnboardingResultStatus, ApplePayOwner, PresentApplePayOptions, PresentGooglePayOptions, FrameTheme, FrameThemeColor, FrameThemeFont, FrameThemeColors, FrameThemeFonts, FrameThemeRadii, } from './types';
 export { ErrorCodes } from './errors';
 export type { FrameErrorShape, FrameErrorCode } from './errors';
-/** Default export for Frame.initialize(), Frame.presentCheckout(), Frame.presentCart(), Frame.presentOnboarding(), Frame.presentApplePay(), Frame.presentGooglePay() */
+/** Default export for Frame.initialize(), Frame.presentCheckout(), Frame.presentCart(), Frame.presentOnboarding(), Frame.presentApplePay(), Frame.presentGooglePay(), Frame.setTheme() */
 declare const _default: {
     initialize: typeof initialize;
     presentCheckout: typeof presentCheckout;
@@ -20,6 +20,7 @@ declare const _default: {
     presentOnboarding: typeof presentOnboarding;
     presentApplePay: typeof presentApplePay;
     presentGooglePay: typeof presentGooglePay;
+    setTheme: typeof setTheme;
 };
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EACL,UAAU,EACV,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EACjB,MAAM,UAAU,CAAC;AAElB,OAAO,EACL,UAAU,EACV,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,gBAAgB,GACjB,MAAM,UAAU,CAAC;AAClB,YAAY,EACV,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,UAAU,EACV,cAAc,EACd,WAAW,EACX,WAAW,EACX,aAAa,EACb,oBAAoB,EACpB,gBAAgB,EAChB,sBAAsB,EACtB,aAAa,EACb,sBAAsB,EACtB,uBAAuB,GACxB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEhE,wKAAwK;;;;;;;;;AACxK,wBAOE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EACL,UAAU,EACV,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,QAAQ,EACT,MAAM,UAAU,CAAC;AAElB,OAAO,EACL,UAAU,EACV,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,QAAQ,GACT,MAAM,UAAU,CAAC;AAClB,YAAY,EACV,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,UAAU,EACV,cAAc,EACd,WAAW,EACX,WAAW,EACX,aAAa,EACb,oBAAoB,EACpB,gBAAgB,EAChB,sBAAsB,EACtB,aAAa,EACb,sBAAsB,EACtB,uBAAuB,EACvB,UAAU,EACV,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,eAAe,GAChB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEhE,0LAA0L;;;;;;;;;;AAC1L,wBAQE"}

package/lib/index.js

@@ -7,10 +7,10 @@
  * - Use presentApplePay / presentGooglePay to launch the platform wallet sheet from your own button UI.
  * - For API calls (customers, charge intents, refunds), use the framepayments (frame-node) package from JS.
  */
-import { initialize, presentCheckout, presentCart, presentOnboarding, presentApplePay, presentGooglePay, } from './native';
-export { initialize, presentCheckout, presentCart, presentOnboarding, presentApplePay, presentGooglePay, } from './native';
+import { initialize, presentCheckout, presentCart, presentOnboarding, presentApplePay, presentGooglePay, setTheme, } from './native';
+export { initialize, presentCheckout, presentCart, presentOnboarding, presentApplePay, presentGooglePay, setTheme, } from './native';
 export { ErrorCodes } from './errors';
-/** Default export for Frame.initialize(), Frame.presentCheckout(), Frame.presentCart(), Frame.presentOnboarding(), Frame.presentApplePay(), Frame.presentGooglePay() */
+/** Default export for Frame.initialize(), Frame.presentCheckout(), Frame.presentCart(), Frame.presentOnboarding(), Frame.presentApplePay(), Frame.presentGooglePay(), Frame.setTheme() */
 export default {
     initialize,
     presentCheckout,
@@ -18,4 +18,5 @@ export default {
     presentOnboarding,
     presentApplePay,
     presentGooglePay,
+    setTheme,
 };

package/lib/native.d.ts

@@ -1,7 +1,7 @@
 /**
  * Native module bridge. Uses NativeModules for classic React Native bridge.
  */
-import type { ChargeIntent, FrameCartItem, OnboardingCapability, OnboardingResult, PresentApplePayOptions, PresentGooglePayOptions } from './types';
+import type { ChargeIntent, FrameCartItem, FrameTheme, OnboardingCapability, OnboardingResult, PresentApplePayOptions, PresentGooglePayOptions } from './types';
 export declare function initialize(options: {
     secretKey: string;
     publishableKey: string;
@@ -20,7 +20,17 @@ export declare function presentOnboarding(options: {
     accountId?: string | null;
     capabilities?: OnboardingCapability[];
     applePayMerchantId?: string | null;
+    googlePayMerchantId?: string | null;
 }): Promise<OnboardingResult>;
 export declare function presentApplePay(options: PresentApplePayOptions): Promise<ChargeIntent>;
 export declare function presentGooglePay(options: PresentGooglePayOptions): Promise<ChargeIntent>;
+/**
+ * Configure colors, fonts, and corner radii for Frame's reusable iOS
+ * components. Applied to every subsequent `present*` call; an in-flight modal
+ * is not re-themed mid-flow.
+ *
+ * Pass `null` or `{}` to reset to SDK defaults. Android is a no-op until
+ * frame-android ships a matching theme API.
+ */
+export declare function setTheme(theme: FrameTheme | null): Promise<void>;
 //# sourceMappingURL=native.d.ts.map

package/lib/native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"native.d.ts","sourceRoot":"","sources":["../src/native.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EACb,oBAAoB,EACpB,gBAAgB,EAChB,sBAAsB,EACtB,uBAAuB,EACxB,MAAM,SAAS,CAAC;AAmBjB,wBAAgB,UAAU,CAAC,OAAO,EAAE;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,OAAO,CAAC,IAAI,CAAC,CAgBhB;AAwBD,wBAAgB,eAAe,CAAC,OAAO,EAAE;IACvC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,OAAO,CAAC,YAAY,CAAC,CAKxB;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE;IACnC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,qBAAqB,EAAE,MAAM,CAAC;CAC/B,GAAG,OAAO,CAAC,YAAY,CAAC,CASxB;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACtC,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACpC,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAiB5B;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,sBAAsB,GAAG,OAAO,CAAC,YAAY,CAAC,CAoBtF;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,OAAO,CAAC,YAAY,CAAC,CAUxF"}
+{"version":3,"file":"native.d.ts","sourceRoot":"","sources":["../src/native.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EACb,UAAU,EACV,oBAAoB,EACpB,gBAAgB,EAChB,sBAAsB,EACtB,uBAAuB,EACxB,MAAM,SAAS,CAAC;AAmBjB,wBAAgB,UAAU,CAAC,OAAO,EAAE;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,OAAO,CAAC,IAAI,CAAC,CAgBhB;AAwBD,wBAAgB,eAAe,CAAC,OAAO,EAAE;IACvC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,OAAO,CAAC,YAAY,CAAC,CAKxB;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE;IACnC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,qBAAqB,EAAE,MAAM,CAAC;CAC/B,GAAG,OAAO,CAAC,YAAY,CAAC,CASxB;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACtC,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAkB5B;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,sBAAsB,GAAG,OAAO,CAAC,YAAY,CAAC,CAoBtF;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,OAAO,CAAC,YAAY,CAAC,CAUxF;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAMhE"}

package/lib/native.js

@@ -56,7 +56,7 @@ export function presentOnboarding(options) {
     if (Platform.OS === 'ios' && options.applePayMerchantId) {
         return wrapPromise(FrameSDK.presentOnboardingWithApplePay(options.accountId ?? null, options.capabilities ?? [], options.applePayMerchantId));
     }
-    return wrapPromise(FrameSDK.presentOnboarding(options.accountId ?? null, options.capabilities ?? []));
+    return wrapPromise(FrameSDK.presentOnboarding(options.accountId ?? null, options.capabilities ?? [], options.googlePayMerchantId ?? null));
 }
 export function presentApplePay(options) {
     guardInitialized();
@@ -75,3 +75,19 @@ export function presentGooglePay(options) {
     guardInitialized();
     return wrapPromise(FrameSDK.presentGooglePay(options.amountCents, options.customerId ?? null, options.currencyCode ?? 'USD', options.googlePayMerchantId ?? null));
 }
+/**
+ * Configure colors, fonts, and corner radii for Frame's reusable iOS
+ * components. Applied to every subsequent `present*` call; an in-flight modal
+ * is not re-themed mid-flow.
+ *
+ * Pass `null` or `{}` to reset to SDK defaults. Android is a no-op until
+ * frame-android ships a matching theme API.
+ */
+export function setTheme(theme) {
+    if (theme !== null && (typeof theme !== 'object' || Array.isArray(theme))) {
+        throw new Error('Frame.setTheme requires a theme object or null');
+    }
+    if (Platform.OS !== 'ios')
+        return Promise.resolve();
+    return wrapPromise(FrameSDK.setTheme(theme ?? {}));
+}

package/lib/types.d.ts

@@ -128,4 +128,59 @@ export interface PresentGooglePayOptions {
     /** Optional override for the Google Pay merchant ID. */
     googlePayMerchantId?: string;
 }
+/**
+ * Theming for Frame's reusable iOS components (checkout, cart, onboarding).
+ * iOS-only: on Android, Frame.setTheme() resolves immediately and has no effect
+ * until frame-android ships a matching theme API.
+ *
+ * Pass any subset — unspecified tokens fall back to SDK defaults.
+ */
+/** Hex color: '#RGB', '#RRGGBB', or '#RRGGBBAA' (with or without leading '#'). */
+export type FrameThemeColor = string;
+/**
+ * Custom font reference. `name` must be a PostScript font name registered in
+ * the host app's Info.plist `UIAppFonts` and bundled as a resource. Pass
+ * `name: 'system'` to use the system font at the given size.
+ */
+export interface FrameThemeFont {
+    name: string;
+    size: number;
+}
+export interface FrameThemeColors {
+    primaryButton?: FrameThemeColor;
+    primaryButtonText?: FrameThemeColor;
+    secondaryButton?: FrameThemeColor;
+    secondaryButtonText?: FrameThemeColor;
+    disabledButton?: FrameThemeColor;
+    disabledButtonStroke?: FrameThemeColor;
+    disabledButtonText?: FrameThemeColor;
+    surface?: FrameThemeColor;
+    surfaceStroke?: FrameThemeColor;
+    textPrimary?: FrameThemeColor;
+    textSecondary?: FrameThemeColor;
+    error?: FrameThemeColor;
+    onboardingHeaderBackground?: FrameThemeColor;
+    onboardingProgressFilledOnBrand?: FrameThemeColor;
+    onboardingProgressEmptyOnBrand?: FrameThemeColor;
+}
+export interface FrameThemeFonts {
+    title?: FrameThemeFont;
+    heading?: FrameThemeFont;
+    headline?: FrameThemeFont;
+    body?: FrameThemeFont;
+    bodySmall?: FrameThemeFont;
+    label?: FrameThemeFont;
+    caption?: FrameThemeFont;
+    button?: FrameThemeFont;
+}
+export interface FrameThemeRadii {
+    small?: number;
+    medium?: number;
+    large?: number;
+}
+export interface FrameTheme {
+    colors?: FrameThemeColors;
+    fonts?: FrameThemeFonts;
+    radii?: FrameThemeRadii;
+}
 //# sourceMappingURL=types.d.ts.map

package/lib/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,2CAA2C;AAC3C,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,kBAAkB,GAC1B,UAAU,GACV,UAAU,GACV,QAAQ,GACR,YAAY,GACZ,SAAS,GACT,UAAU,GACV,UAAU,GACV,WAAW,CAAC;AAEhB,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,QAAQ,CAAC;AAEvD,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,gEAAgE;AAChE,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,kBAAkB,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED,sFAAsF;AACtF,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,+DAA+D;AAC/D,MAAM,MAAM,oBAAoB,GAC5B,KAAK,GACL,aAAa,GACb,oBAAoB,GACpB,gBAAgB,GAChB,mBAAmB,GACnB,WAAW,GACX,cAAc,GACd,sBAAsB,GACtB,2BAA2B,GAC3B,mBAAmB,GACnB,sBAAsB,GACtB,gBAAgB,GAChB,kBAAkB,CAAC;AAEvB,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG,WAAW,CAAC;AAE/D,6CAA6C;AAC7C,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,sBAAsB,CAAC;IAC/B,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,8DAA8D;AAC9D,MAAM,MAAM,aAAa,GACrB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAChC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpC,yCAAyC;AACzC,MAAM,WAAW,sBAAsB;IACrC,+BAA+B;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,KAAK,EAAE,aAAa,CAAC;IACrB,wEAAwE;IACxE,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,0CAA0C;AAC1C,MAAM,WAAW,uBAAuB;IACtC,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,iFAAiF;IACjF,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wDAAwD;IACxD,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framepayments-react-native",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "React Native SDK for Frame Payments - modal checkout and cart, with API usage via frame-node.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/__tests__/native.test.ts

@@ -32,7 +32,7 @@ let presentCart: (opts: {
   items: Array<{ id: string; title: string; amountInCents: number; imageUrl: string }>;
   shippingAmountInCents: number;
 }) => Promise<unknown>;
-let presentOnboarding: (opts: { accountId?: string | null; capabilities?: string[]; applePayMerchantId?: string | null }) => Promise<unknown>;
+let presentOnboarding: (opts: { accountId?: string | null; capabilities?: string[]; applePayMerchantId?: string | null; googlePayMerchantId?: string | null }) => Promise<unknown>;
 
 beforeEach(() => {
   jest.resetModules();
@@ -148,14 +148,14 @@ describe('presentOnboarding', () => {
   it('calls native presentOnboarding with accountId and capabilities after initialize', async () => {
     await initialize({ secretKey: 'sk_xxx', publishableKey: 'pk_xxx' });
     const result = await presentOnboarding({ accountId: 'acct_1', capabilities: ['kyc', 'bank_account_verification'] });
-    expect(mockPresentOnboarding).toHaveBeenCalledWith('acct_1', ['kyc', 'bank_account_verification']);
+    expect(mockPresentOnboarding).toHaveBeenCalledWith('acct_1', ['kyc', 'bank_account_verification'], null);
     expect(result).toEqual({ status: 'completed', paymentMethodId: 'pm_1' });
   });
 
   it('passes null for accountId and empty array for capabilities when not provided', async () => {
     await initialize({ secretKey: 'sk_xxx', publishableKey: 'pk_xxx' });
     await presentOnboarding({});
-    expect(mockPresentOnboarding).toHaveBeenCalledWith(null, []);
+    expect(mockPresentOnboarding).toHaveBeenCalledWith(null, [], null);
   });
 
   it('routes to presentOnboardingWithApplePay on iOS when applePayMerchantId is set', async () => {
@@ -170,7 +170,14 @@ describe('presentOnboarding', () => {
     mockPlatform.OS = 'android';
     await initialize({ secretKey: 'sk_xxx', publishableKey: 'pk_xxx' });
     await presentOnboarding({ accountId: 'acct_1', capabilities: ['kyc'], applePayMerchantId: 'merchant.com.example' });
-    expect(mockPresentOnboarding).toHaveBeenCalledWith('acct_1', ['kyc']);
+    expect(mockPresentOnboarding).toHaveBeenCalledWith('acct_1', ['kyc'], null);
     expect(mockPresentOnboardingWithApplePay).not.toHaveBeenCalled();
   });
+
+  it('forwards googlePayMerchantId to native presentOnboarding on Android', async () => {
+    mockPlatform.OS = 'android';
+    await initialize({ secretKey: 'sk_xxx', publishableKey: 'pk_xxx' });
+    await presentOnboarding({ accountId: 'acct_1', capabilities: ['kyc'], googlePayMerchantId: 'BCR2DN4T...' });
+    expect(mockPresentOnboarding).toHaveBeenCalledWith('acct_1', ['kyc'], 'BCR2DN4T...');
+  });
 });

package/src/index.ts

@@ -15,6 +15,7 @@ import {
   presentOnboarding,
   presentApplePay,
   presentGooglePay,
+  setTheme,
 } from './native';
 
 export {
@@ -24,6 +25,7 @@ export {
   presentOnboarding,
   presentApplePay,
   presentGooglePay,
+  setTheme,
 } from './native';
 export type {
   FrameCartItem,
@@ -41,11 +43,17 @@ export type {
   ApplePayOwner,
   PresentApplePayOptions,
   PresentGooglePayOptions,
+  FrameTheme,
+  FrameThemeColor,
+  FrameThemeFont,
+  FrameThemeColors,
+  FrameThemeFonts,
+  FrameThemeRadii,
 } from './types';
 export { ErrorCodes } from './errors';
 export type { FrameErrorShape, FrameErrorCode } from './errors';
 
-/** Default export for Frame.initialize(), Frame.presentCheckout(), Frame.presentCart(), Frame.presentOnboarding(), Frame.presentApplePay(), Frame.presentGooglePay() */
+/** Default export for Frame.initialize(), Frame.presentCheckout(), Frame.presentCart(), Frame.presentOnboarding(), Frame.presentApplePay(), Frame.presentGooglePay(), Frame.setTheme() */
 export default {
   initialize,
   presentCheckout,
@@ -53,4 +61,5 @@ export default {
   presentOnboarding,
   presentApplePay,
   presentGooglePay,
+  setTheme,
 };

package/src/native.ts

@@ -6,6 +6,7 @@ import { NativeModules, Platform } from 'react-native';
 import type {
   ChargeIntent,
   FrameCartItem,
+  FrameTheme,
   OnboardingCapability,
   OnboardingResult,
   PresentApplePayOptions,
@@ -102,6 +103,7 @@ export function presentOnboarding(options: {
   accountId?: string | null;
   capabilities?: OnboardingCapability[];
   applePayMerchantId?: string | null;
+  googlePayMerchantId?: string | null;
 }): Promise<OnboardingResult> {
   guardInitialized();
   if (Platform.OS === 'ios' && options.applePayMerchantId) {
@@ -116,7 +118,8 @@ export function presentOnboarding(options: {
   return wrapPromise(
     FrameSDK.presentOnboarding(
       options.accountId ?? null,
-      options.capabilities ?? []
+      options.capabilities ?? [],
+      options.googlePayMerchantId ?? null
     )
   );
 }
@@ -154,3 +157,19 @@ export function presentGooglePay(options: PresentGooglePayOptions): Promise<Char
     )
   );
 }
+
+/**
+ * Configure colors, fonts, and corner radii for Frame's reusable iOS
+ * components. Applied to every subsequent `present*` call; an in-flight modal
+ * is not re-themed mid-flow.
+ *
+ * Pass `null` or `{}` to reset to SDK defaults. Android is a no-op until
+ * frame-android ships a matching theme API.
+ */
+export function setTheme(theme: FrameTheme | null): Promise<void> {
+  if (theme !== null && (typeof theme !== 'object' || Array.isArray(theme))) {
+    throw new Error('Frame.setTheme requires a theme object or null');
+  }
+  if (Platform.OS !== 'ios') return Promise.resolve();
+  return wrapPromise(FrameSDK.setTheme(theme ?? {}));
+}

package/src/types.ts

@@ -162,3 +162,65 @@ export interface PresentGooglePayOptions {
   /** Optional override for the Google Pay merchant ID. */
   googlePayMerchantId?: string;
 }
+
+/**
+ * Theming for Frame's reusable iOS components (checkout, cart, onboarding).
+ * iOS-only: on Android, Frame.setTheme() resolves immediately and has no effect
+ * until frame-android ships a matching theme API.
+ *
+ * Pass any subset — unspecified tokens fall back to SDK defaults.
+ */
+
+/** Hex color: '#RGB', '#RRGGBB', or '#RRGGBBAA' (with or without leading '#'). */
+export type FrameThemeColor = string;
+
+/**
+ * Custom font reference. `name` must be a PostScript font name registered in
+ * the host app's Info.plist `UIAppFonts` and bundled as a resource. Pass
+ * `name: 'system'` to use the system font at the given size.
+ */
+export interface FrameThemeFont {
+  name: string;
+  size: number;
+}
+
+export interface FrameThemeColors {
+  primaryButton?: FrameThemeColor;
+  primaryButtonText?: FrameThemeColor;
+  secondaryButton?: FrameThemeColor;
+  secondaryButtonText?: FrameThemeColor;
+  disabledButton?: FrameThemeColor;
+  disabledButtonStroke?: FrameThemeColor;
+  disabledButtonText?: FrameThemeColor;
+  surface?: FrameThemeColor;
+  surfaceStroke?: FrameThemeColor;
+  textPrimary?: FrameThemeColor;
+  textSecondary?: FrameThemeColor;
+  error?: FrameThemeColor;
+  onboardingHeaderBackground?: FrameThemeColor;
+  onboardingProgressFilledOnBrand?: FrameThemeColor;
+  onboardingProgressEmptyOnBrand?: FrameThemeColor;
+}
+
+export interface FrameThemeFonts {
+  title?: FrameThemeFont;
+  heading?: FrameThemeFont;
+  headline?: FrameThemeFont;
+  body?: FrameThemeFont;
+  bodySmall?: FrameThemeFont;
+  label?: FrameThemeFont;
+  caption?: FrameThemeFont;
+  button?: FrameThemeFont;
+}
+
+export interface FrameThemeRadii {
+  small?: number;
+  medium?: number;
+  large?: number;
+}
+
+export interface FrameTheme {
+  colors?: FrameThemeColors;
+  fonts?: FrameThemeFonts;
+  radii?: FrameThemeRadii;
+}