@whop/elements-react-native 0.1.0

package/README.md

@@ -0,0 +1,179 @@
+# @whop/elements-react-native
+
+Native React Native components for collecting payments with Whop.
+
+No WebViews. The elements are real React Native views, card fields are PCI-isolated by Basis
+Theory's React Native SDK, and the pieces that only the platform can do — the Apple Pay and Google
+Pay sheets, their branded buttons, and the system browser a 3DS step opens in — are Swift and Kotlin
+behind React Native Codegen.
+
+```tsx
+import {
+  WhopElements, Payments, PaymentElement, AddressElement, EmailElement, BrandingElement,
+} from '@whop/elements-react-native';
+
+<WhopElements environment="production">
+  <Payments ref={payments} accountId="biz_…" plan="plan_…">
+    <EmailElement />
+    <AddressElement />
+    <PaymentElement onChange={(e) => setReady(e.complete)} />
+    <BrandingElement />
+  </Payments>
+</WhopElements>;
+
+const { confirmationToken } = await payments.current.createConfirmationToken();
+```
+
+Confirm the token server-side, then hand any pending step to
+`payments.current.handleNextAction({ clientSecret })`.
+
+## Requirements
+
+| | |
+| --- | --- |
+| React Native | `>= 0.87`, New Architecture on |
+| iOS | 15.1+, **Swift Package Manager** — this package ships no podspec |
+| Android | minSdk 24, compileSdk 37 |
+| Peers | `react` and `react-native` only — no native peer dependencies |
+
+## Elements
+
+| Component | What it collects |
+| --- | --- |
+| `<PaymentElement />` | The offered payment methods and the selected one's required fields |
+| `<AddressElement />` | A postal address, in the selected country's own format |
+| `<CardElement />` | Card number, expiry, and security code, prearranged |
+| `<CardFields>` + `<CardNumberElement />` `<CardExpiryElement />` `<CardCvcElement />` | The same three fields, placed individually |
+| `<EmailElement />` | The buyer's email |
+| `<TaxIdElement />` | A business tax registration |
+| `<BrandingElement />` | Whop's merchant-of-record notice |
+
+`<BrandingElement />` is required beside a payment surface: Whop is the merchant of record on these
+sales, so `createConfirmationToken` refuses with `BRANDING_NOT_MOUNTED` without it.
+
+`<AddressElement />` autocompletes by default from the **platform geocoder**, `MKLocalSearchCompleter`
+on iOS and `android.location.Geocoder` on Android, so it needs no API key, no account, no location
+permission and no extra dependency. Android resolves a complete address rather than predicting from a
+fragment, so expect fewer and coarser suggestions there. A geocoder with no matches shows nothing and
+the buyer types the address by hand, which is where they started: autocomplete never blocks a
+checkout. Pass `autocomplete={false}` to turn it off.
+
+## `<Payments>`
+
+| Prop | |
+| --- | --- |
+| `accountId` | The Whop company the sale belongs to |
+| `plan` | The plan being sold, which resolves the currency, amount and offered methods. Pass `currency` and `amount` instead for an ad-hoc charge |
+| `returnUrl` | Where the issuer returns after a redirect or 3DS step. Must be **https** and hosted by you, because the API refuses anything else, so a custom app scheme will not work. You do not register a deep link: `handleNextAction` polls the payment to rest and closes the browser itself |
+| `applePayMerchantId` | Overrides the merchant identifier from the account's own Apple Pay registration. The Apple Pay tile is hidden only when neither exists |
+| `googlePayMerchantName` | The name shown in the Google Pay sheet, defaulting to `Whop`. Google Pay needs nothing else from you |
+| `order` | The method tile order, with Stripe's `paymentMethodOrder` semantics |
+
+## Appearance
+
+One object, applied live — mounted elements restyle in place.
+
+```tsx
+<WhopElements
+  appearance={{
+    theme: { appearance: 'dark', accentColor: 'blue' },
+    tokens: { radius: 12 },
+    parts: { 'whop-CardNumberField': { borderWidth: 2 } },
+  }}
+>
+```
+
+`theme` is identical to the web elements'. The two deltas are deliberate, because React Native has
+no CSS:
+
+- `tokens` replaces `variables` — a closed, typed map of **numbers**, not `"8px"` strings.
+- `parts` replaces `classes` — the **same** `whop-*` part names, with React Native style objects
+  instead of CSS declarations. Flat per-part overrides: no cascade, no pseudo-classes.
+
+Passing `variables` or `classes` throws by name rather than being silently ignored.
+
+An unset `theme.appearance` follows the device's colour scheme.
+
+## Example app
+
+```bash
+cd example
+pnpm install
+pnpm run setup     # generates ios/ and android/, converts iOS to SwiftPM
+pnpm run ios       # or: pnpm run android
+```
+
+Set your `accountId` and `plan` in `example/src/config.ts` first. It runs against
+`production` by default — switch `environment` to `sandbox` there to point at the sandbox API.
+
+`ios/` and `android/` are generated by `pnpm run setup` from the official React Native app template
+rather than committed: they are several hundred files that belong to a React Native version, and
+regenerating is how the example follows a version bump instead of drifting from it. The script also
+converts the project to Swift Package Manager without ever invoking `pod` — it strips CocoaPods out
+of the `.pbxproj` directly, because `react-native spm add --deintegrate` shells out to it.
+
+One deliberate leftover: `ios/Podfile` stays as a pod-free stub. The React Native CLI locates the
+iOS project by finding a Podfile, and `react-native spm` reads that location, so deleting it makes
+`project.ios` resolve to `null` and the SPM setup fail. The example has three
+screens: a realistic **Checkout**, a **Gallery** of each element with live prop controls, and
+**Theming** applied to a live form.
+
+The example is its own pnpm install root. React Native's `settings.gradle` does
+`includeBuild("../node_modules/@react-native/gradle-plugin")`, which pnpm's isolated linker does not
+expose, so `example/.npmrc` sets `node-linker=hoisted` — scoped there so the rest of the monorepo
+stays isolated.
+
+## Native layer
+
+Three units, all generated from `src/specs/` by React Native Codegen:
+
+| Unit | Kind | iOS | Android |
+| --- | --- | --- | --- |
+| `WhopAuthSession` | Turbo Module | `ASWebAuthenticationSession` | Chrome Custom Tabs |
+| `WhopPlatformPay` | Turbo Module | `PKPaymentAuthorizationController` | `PaymentsClient` |
+| `WhopPayButton` | Fabric Component | `PKPaymentButton` | `PayButton` |
+
+A redirect or 3DS step opens in the **system browser**, out of process — not a WebView the app can
+read or script. `handleNextAction` then polls the payment to rest, because the API accepts only
+https or loopback return URLs and a custom-scheme deep link back into the app is refused.
+
+React Native cannot express a Fabric component or a Turbo Module in pure Swift: both need an
+Objective-C++ class the C++ renderer can see. Nobody writes it here. `scripts/codegen-shims.mjs`
+emits it from the same specs Codegen reads, into the gitignored `ios/generated/`, during `prepare`.
+Every line a human writes on iOS is Swift and on Android is Kotlin.
+
+The SDK has **no native peer dependencies**, deliberately: under Swift Package Manager, one peer
+that ships no `Package.swift` makes the whole app unbuildable, and most of the React Native
+ecosystem does not ship one yet. That is why the branding wordmark is drawn with plain views rather
+than `react-native-svg`.
+
+## Not in this release
+
+Absent entirely rather than half-present, so nothing renders that cannot work: saved payment
+methods, the email code sign-in, installment tiers, ledger-balance payment, and the post-confirm
+instruction panes.
+
+## Development
+
+```bash
+pnpm install
+pnpm build          # emits ios/generated, then module + typescript targets
+pnpm test
+pnpm check-types
+pnpm theme          # regenerate src/theme/scales.generated.ts from frosted-ui's stylesheet
+pnpm mirror         # which files here mirror the web elements changed on this branch
+pnpm check-swift    # typecheck the Swift against the iOS SDK, no app build
+```
+
+Nothing in `ios/Sources` imports React, so the whole Swift implementation typechecks standalone —
+a wrong PassKit or AuthenticationServices symbol surfaces in seconds rather than one at a time
+inside an Xcode build.
+
+`pnpm mirror` answers the question a web author cannot otherwise ask, which files here implement the
+same behaviour as the web elements they just changed. `scripts/mirror.mjs` derives the ported files
+from their own headers and keeps an explicit table for the element components; `pnpm mirror:validate`
+fails if either side of a pair has moved. Add a row when you add an element.
+
+`src/core/` is ported verbatim from `frontend/apps/web/src/elements/`. Each file names its source in
+a header, and the address engine's own test suite is ported with it, so the port is proved against
+the same assertions the web elements pass.

package/android/build.gradle

@@ -0,0 +1,64 @@
+buildscript {
+  ext.WhopElements = [
+    kotlinVersion: "2.2.0",
+    minSdkVersion: 24,
+    compileSdkVersion: 37,
+    buildToolsVersion: "37.0.0",
+    ndkVersion: "27.1.12297006",
+  ]
+
+  ext.getExtOrDefault = { prop ->
+    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : WhopElements[prop]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:9.0.0"
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+apply plugin: "com.facebook.react"
+
+android {
+  namespace "com.whop.elements"
+  compileSdkVersion getExtOrDefault("compileSdkVersion")
+  buildToolsVersion getExtOrDefault("buildToolsVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrDefault("minSdkVersion")
+    consumerProguardFiles "consumer-rules.pro"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_17
+    targetCompatibility JavaVersion.VERSION_17
+  }
+
+  kotlinOptions {
+    jvmTarget = "17"
+  }
+
+  sourceSets {
+    main {
+      java.srcDirs += "src/main/java"
+    }
+  }
+}
+
+repositories {
+  google()
+  mavenCentral()
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation "androidx.browser:browser:1.8.0"
+  implementation "com.google.android.gms:play-services-wallet:19.4.0"
+}

package/android/consumer-rules.pro

@@ -0,0 +1,3 @@
+# Codegen looks these up reflectively, and R8 has no reference to them from Kotlin.
+-keep class com.whop.elements.** { *; }
+-keep class com.facebook.react.viewmanagers.WhopPayButton** { *; }

package/android/gradle.properties

@@ -0,0 +1,5 @@
+# AGP 9 defaults the built-in Kotlin plugin and the new DSL on; react-native's gradle plugin
+# is not compatible with either yet, and the 0.87 app template carries the same two opt-outs.
+android.builtInKotlin=false
+android.newDsl=false
+android.useAndroidX=true

package/android/src/main/java/com/whop/elements/WhopAddressSuggestionsModule.kt

@@ -0,0 +1,102 @@
+package com.whop.elements
+
+import android.location.Address
+import android.location.Geocoder
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.annotations.ReactModule
+import java.util.concurrent.Executors
+import org.json.JSONArray
+import org.json.JSONObject
+
+/**
+ * Street suggestions, through the platform geocoder.
+ *
+ * `android.location.Geocoder` rather than the Google Places SDK: Places adds ~8 MB of dex that R8
+ * cannot shrink, merges ACCESS_FINE_LOCATION and three more permissions into every consuming app,
+ * and holds its API key in one process-global that the host app and this SDK would silently
+ * overwrite for each other. Geocoder is in the framework — no dependency, no key, no permission,
+ * no manifest entry, and nothing for a consumer to provision.
+ *
+ * Unlike MapKit, one geocode already returns full components for every candidate, so `resolve`
+ * reads the row this module cached rather than making a second call. The two-step shape is kept
+ * because the spec is shared with iOS, where it is not optional.
+ */
+@ReactModule(name = WhopAddressSuggestionsModule.NAME)
+class WhopAddressSuggestionsModule(reactContext: ReactApplicationContext) :
+  NativeWhopAddressSuggestionsSpec(reactContext) {
+
+  private val executor = Executors.newSingleThreadExecutor()
+
+  /** Content-keyed like the iOS port, so a resolve that lands after a newer query still finds its row. */
+  private val cache = object : LinkedHashMap<String, Address>(16, 0.75f, true) {
+    override fun removeEldestEntry(eldest: MutableMap.MutableEntry<String, Address>?): Boolean = size > CACHE_LIMIT
+  }
+
+  /** Not every device ships a geocoder backend, and a device without one answers nothing forever. */
+  override fun isAvailable(): Boolean = Geocoder.isPresent()
+
+  override fun suggest(query: String?, promise: Promise) {
+    val trimmed = query?.trim().orEmpty()
+    if (trimmed.length < MIN_QUERY_LENGTH) {
+      promise.resolve(EMPTY)
+      return
+    }
+    executor.execute {
+      // The blocking overload deliberately: the GeocodeListener form is API 33+, this module ships
+      // to minSdk 24, and one code path off the main thread beats two guarded by a version check.
+      @Suppress("DEPRECATION")
+      val results = runCatching { Geocoder(reactApplicationContext).getFromLocationName(trimmed, RESULT_LIMIT) }
+        .getOrNull()
+        .orEmpty()
+
+      val rows = JSONArray()
+      for (address in results) {
+        val label = label(address) ?: continue
+        synchronized(cache) { cache[label] = address }
+        rows.put(JSONObject().put("id", label).put("label", label))
+      }
+      promise.resolve(rows.toString())
+    }
+  }
+
+  override fun details(suggestionId: String?, promise: Promise) {
+    val address = suggestionId?.let { key -> synchronized(cache) { cache[key] } }
+    if (address == null) {
+      promise.resolve(EMPTY_OBJECT)
+      return
+    }
+    promise.resolve(components(address).toString())
+  }
+
+  /** The one-line form Geocoder already formats, falling back to the components it did return. */
+  private fun label(address: Address): String? {
+    val line = runCatching { address.getAddressLine(0) }.getOrNull()
+    if (!line.isNullOrBlank()) return line
+    val parts = listOfNotNull(
+      listOfNotNull(address.subThoroughfare, address.thoroughfare).joinToString(" ").ifBlank { null },
+      address.locality,
+      address.adminArea,
+    )
+    return parts.joinToString(", ").ifBlank { null }
+  }
+
+  /** Raw components only. `line1` composition is per-country and lives on the JS side. */
+  private fun components(address: Address): JSONObject =
+    JSONObject()
+      .put("streetNumber", address.subThoroughfare.orEmpty())
+      .put("street", address.thoroughfare.orEmpty())
+      .put("city", address.locality.orEmpty())
+      .put("state", address.adminArea.orEmpty())
+      .put("postalCode", address.postalCode.orEmpty())
+      .put("country", address.countryCode?.uppercase().orEmpty())
+
+  companion object {
+    const val NAME = "WhopAddressSuggestions"
+    private const val MIN_QUERY_LENGTH = 3
+    private const val RESULT_LIMIT = 5
+    private const val CACHE_LIMIT = 100
+    private const val EMPTY = "[]"
+    private const val EMPTY_OBJECT = "{}"
+  }
+}

package/android/src/main/java/com/whop/elements/WhopAuthSessionModule.kt

@@ -0,0 +1,126 @@
+package com.whop.elements
+
+import android.app.Activity
+import android.content.Intent
+import android.net.Uri
+import androidx.browser.customtabs.CustomTabsIntent
+import com.facebook.react.bridge.ActivityEventListener
+import com.facebook.react.bridge.LifecycleEventListener
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.annotations.ReactModule
+
+/**
+ * The redirect and 3DS surface.
+ *
+ * A Custom Tab is Chrome rendering the page in its own process, so the host app can neither read the
+ * issuer's 3DS challenge nor script it. That is the difference between this and the `WebView` +
+ * `javaScriptEnabled` pattern, and it is the whole reason this module exists.
+ */
+@ReactModule(name = WhopAuthSessionModule.NAME)
+class WhopAuthSessionModule(reactContext: ReactApplicationContext) :
+  NativeWhopAuthSessionSpec(reactContext), ActivityEventListener, LifecycleEventListener {
+
+  private var pending: Promise? = null
+  private var browserTookOver = false
+
+  init {
+    reactContext.addActivityEventListener(this)
+    reactContext.addLifecycleEventListener(this)
+  }
+
+  override fun getName(): String = NAME
+
+  override fun isAvailable(): Boolean = true
+
+  override fun present(url: String?, callbackScheme: String?, prefersEphemeral: Boolean, promise: Promise) {
+    val target = url?.let(Uri::parse)
+    if (target == null || !target.scheme.equals("https", ignoreCase = true)) {
+      promise.reject("INVALID_URL", "whop elements: an https URL is required")
+      return
+    }
+    val activity: Activity? = reactApplicationContext.currentActivity
+    if (activity == null) {
+      promise.reject("NO_ACTIVITY", "whop elements: no activity is attached")
+      return
+    }
+
+    settle(null)
+    pending = promise
+    browserTookOver = false
+
+    val intent = CustomTabsIntent.Builder()
+      .setShowTitle(true)
+      .setUrlBarHidingEnabled(true)
+      .build()
+    if (prefersEphemeral) {
+      intent.intent.putExtra("com.android.browser.incognito", true)
+    }
+    intent.intent.addFlags(Intent.FLAG_ACTIVITY_NO_HISTORY)
+    runCatching { intent.launchUrl(activity, target) }
+      .onFailure {
+        pending = null
+        promise.reject("BROWSER_UNAVAILABLE", "whop elements: no browser could present the page")
+      }
+  }
+
+  /**
+   * A Custom Tab cannot be closed programmatically the way ASWebAuthenticationSession can, so
+   * settling the promise alone left the buyer looking at the return URL in Chrome while the app's
+   * result screen sat hidden behind it. The tab is an activity in this task, so relaunching the
+   * host activity on top of it pops it — REORDER_TO_FRONT alone would not, since the tab is above
+   * us and CLEAR_TOP is what removes it.
+   */
+  override fun dismiss() {
+    settle(null)
+    val activity = reactApplicationContext.currentActivity ?: return
+    activity.startActivity(
+      Intent(activity, activity.javaClass).addFlags(
+        Intent.FLAG_ACTIVITY_REORDER_TO_FRONT or
+          Intent.FLAG_ACTIVITY_CLEAR_TOP or
+          Intent.FLAG_ACTIVITY_SINGLE_TOP,
+      ),
+    )
+  }
+
+  /**
+   * A Custom Tab has no completion callback: the app simply comes back to the foreground. So the
+   * signal is a PAUSE followed by a RESUME — launching the tab pauses this activity, and coming
+   * back resumes it. Counting resumes instead would never settle, because the launch produces no
+   * resume of its own to skip.
+   *
+   * Resolving null is correct: a dismissal is an outcome, not a failure, and handleNextAction's
+   * poll is the authority on what actually happened to the payment. A completed redirect arrives
+   * as `onNewIntent` first and settles with the URL.
+   */
+  override fun onHostResume() {
+    if (pending == null || !browserTookOver) return
+    settle(null)
+  }
+
+  override fun onHostPause() {
+    if (pending != null) browserTookOver = true
+  }
+
+  override fun onHostDestroy() {
+    settle(null)
+  }
+
+  override fun onNewIntent(intent: Intent) {
+    val data = intent.data ?: return
+    settle(data.toString())
+  }
+
+  override fun onActivityResult(activity: Activity, requestCode: Int, resultCode: Int, data: Intent?) = Unit
+
+  private fun settle(value: String?) {
+    val promise = pending ?: return
+    pending = null
+    browserTookOver = false
+    promise.resolve(value)
+  }
+
+  companion object {
+    const val NAME = "WhopAuthSession"
+  }
+}

package/android/src/main/java/com/whop/elements/WhopElementsPackage.kt

@@ -0,0 +1,39 @@
+package com.whop.elements
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfo
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.ViewManager
+
+class WhopElementsPackage : BaseReactPackage() {
+
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? =
+    when (name) {
+      WhopAuthSessionModule.NAME -> WhopAuthSessionModule(reactContext)
+      WhopPlatformPayModule.NAME -> WhopPlatformPayModule(reactContext)
+      WhopAddressSuggestionsModule.NAME -> WhopAddressSuggestionsModule(reactContext)
+      else -> null
+    }
+
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> =
+    listOf(WhopPayButtonManager())
+
+  override fun getReactModuleInfoProvider(): ReactModuleInfoProvider = ReactModuleInfoProvider {
+    listOf(
+      WhopAuthSessionModule.NAME,
+      WhopPlatformPayModule.NAME,
+      WhopAddressSuggestionsModule.NAME,
+    ).associateWith { name ->
+      ReactModuleInfo(
+        name,
+        name,
+        false,
+        false,
+        false,
+        true,
+      )
+    }
+  }
+}

package/android/src/main/java/com/whop/elements/WhopPayButtonManager.kt

@@ -0,0 +1,74 @@
+package com.whop.elements
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.common.UIManagerType
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.WhopPayButtonManagerDelegate
+import com.facebook.react.viewmanagers.WhopPayButtonManagerInterface
+
+/**
+ * Google Pay's brand guidelines require the supplied control rather than a drawn imitation, which is
+ * why this is the one element surface that is a native view on Android.
+ *
+ * The interface and delegate this implements are Codegen output from
+ * `src/specs/WhopPayButtonNativeComponent.ts` — nothing here is hand-written Java.
+ */
+@ReactModule(name = WhopPayButtonManager.NAME)
+class WhopPayButtonManager :
+  SimpleViewManager<WhopPayButtonView>(), WhopPayButtonManagerInterface<WhopPayButtonView> {
+
+  private val delegate: ViewManagerDelegate<WhopPayButtonView> = WhopPayButtonManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<WhopPayButtonView> = delegate
+
+  override fun getName(): String = NAME
+
+  public override fun createViewInstance(context: ThemedReactContext): WhopPayButtonView {
+    val button = WhopPayButtonView(context)
+    button.setOnPressListener {
+      val dispatcher = UIManagerHelper.getEventDispatcher(context, UIManagerType.FABRIC)
+      // Never dispatch a Fabric event from inside a layout or composition pass.
+      button.post {
+        dispatcher?.dispatchEvent(
+          WhopPayButtonPressEvent(UIManagerHelper.getSurfaceId(context), button.id),
+        )
+      }
+    }
+    return button
+  }
+
+  /** A direct event reaches JS only if the manager maps its native name to the prop that receives
+   *  it. Without this the press is dispatched and silently dropped. */
+  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> =
+    mutableMapOf(
+      WhopPayButtonPressEvent.EVENT_NAME to mutableMapOf("registrationName" to "onPayPress"),
+    )
+
+  @ReactProp(name = "variant")
+  override fun setVariant(view: WhopPayButtonView?, value: String?) {
+    view?.setVariant(value)
+  }
+
+  @ReactProp(name = "buttonAppearance")
+  override fun setButtonAppearance(view: WhopPayButtonView?, value: String?) {
+    view?.setButtonAppearance(value)
+  }
+
+  @ReactProp(name = "cornerRadius")
+  override fun setCornerRadius(view: WhopPayButtonView?, value: Double) {
+    view?.setCornerRadius(value)
+  }
+
+  @ReactProp(name = "disabled")
+  override fun setDisabled(view: WhopPayButtonView?, value: Boolean) {
+    view?.setDisabledState(value)
+  }
+
+  companion object {
+    const val NAME = "WhopPayButton"
+  }
+}

package/android/src/main/java/com/whop/elements/WhopPayButtonPressEvent.kt

@@ -0,0 +1,17 @@
+package com.whop.elements
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+class WhopPayButtonPressEvent(surfaceId: Int, viewId: Int) :
+  Event<WhopPayButtonPressEvent>(surfaceId, viewId) {
+
+  override fun getEventName(): String = EVENT_NAME
+
+  override fun getEventData(): WritableMap = Arguments.createMap()
+
+  companion object {
+    const val EVENT_NAME = "topPayPress"
+  }
+}