@whop/elements-react-native 0.1.0

package/lib/module/elements/payment/declared-fields.js

@@ -0,0 +1,186 @@
+"use strict";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { TextElement, useBasisTheory } from '@basis-theory/react-native-elements';
+import { fieldLabel, fieldMatches, methodTokenizerKey } from "../../core/payments/detail.js";
+import { tokenizeSecureFields } from "../../core/payments/secure-fields.js";
+import { useT } from "../../i18n/index.js";
+import { alphaStep } from "../../theme/provider.js";
+import { Field, FieldShell, Stack, useFieldStyles } from "../../ui/primitives.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A method's `required_fields`, rendered generically from what the matrix publishes.
+ *
+ * A `secure: true` field renders as a Basis Theory hosted text element, so the raw value never
+ * exists in this JavaScript. At collect time every secure instance is tokenized into ONE token
+ * intent keyed by field name, and the category payload carries `{ token_intent }` — the shape the
+ * web element produces and the backend already reads.
+ */
+export function useDeclaredFields(entry, country) {
+  const fields = useMemo(() => entry?.required_fields ?? [], [entry]);
+  // A method's secure fields tokenize under ITS OWN config-block key, which is a different Basis
+  // Theory application from the card one — the card key cannot mint token intents at all.
+  //
+  // The client is NOT constructed here: most methods declare no secure field, and constructing
+  // Basis Theory with a missing key makes its SDK show a "Please enter a valid API key" toast to
+  // the buyer. `SecureTokenizer` below mounts only when a secure field and a key both exist, and
+  // hands the instance back through this ref.
+  const btRef = useRef(undefined);
+  const [values, setValues] = useState({});
+  const [showErrors, setShowErrors] = useState(false);
+  const [secureComplete, setSecureComplete] = useState({});
+  const secureRefs = useRef({});
+
+  // Declared fields belong to the METHOD, and this state is keyed by field NAME — so two methods
+  // that both declare `bank_account` shared everything: a value typed for one, and its secure
+  // completeness, carried into the other and reported it ready before the buyer touched it.
+  const entryKey = entry?.type;
+  useEffect(() => {
+    setValues({});
+    setShowErrors(false);
+    secureRefs.current = {};
+  }, [entryKey]);
+  const setValue = useCallback((name, value) => {
+    setValues(prev => prev[name] === value ? prev : {
+      ...prev,
+      [name]: value
+    });
+  }, []);
+  const errorFor = useCallback(field => {
+    if (field.secure) return undefined;
+    const value = values[field.name] ?? '';
+    if (!value.trim()) return 'required';
+    // `input_formats` is what a buyer may TYPE; `formats` is the stored electronic value. The
+    // typing tolerance wins where the matrix publishes it.
+    const patterns = field.input_formats ?? field.formats;
+    return fieldMatches(patterns, country, value) ? undefined : 'invalid';
+  }, [values, country]);
+  const complete = useMemo(() =>
+  // A MOUNTED tokenizer field is not a filled one. Keying off the ref meant completeness
+  // flipped true the moment the element attached and stayed true after the buyer cleared it,
+  // so the form reported itself ready to submit values that were never entered.
+  fields.every(field => field.secure ? secureComplete[`${entryKey ?? ''}:${field.name}`] === true : !errorFor(field)), [fields, errorFor, secureComplete, entryKey]);
+  const collect = useCallback(async () => {
+    const paymentMethod = {};
+    const billingExtra = {};
+    const secure = {};
+    for (const field of fields) {
+      if (field.secure) {
+        const instance = secureRefs.current[field.name];
+        if (instance) secure[field.name] = instance;
+        continue;
+      }
+      const value = (values[field.name] ?? '').trim();
+      if (field.kind === 'billing_details') billingExtra[field.name] = value;else paymentMethod[field.name] = value;
+    }
+    let secureTokenIntent;
+    if (Object.keys(secure).length > 0) {
+      const key = entry ? methodTokenizerKey(entry) : undefined;
+      if (!key) throw new Error('This payment method is missing its tokenizer key');
+      // The values live inside the hosted elements, so the SDK has to interpolate them. A raw
+      // REST post would serialize the element objects instead of what the buyer typed — that
+      // path exists only for the wallet sheets, whose payload really is plain data.
+      secureTokenIntent = await tokenizeSecureFields(btRef.current, secure, key);
+    }
+    return {
+      paymentMethod,
+      billingExtra,
+      secureTokenIntent
+    };
+  }, [fields, values, entry]);
+  return {
+    fields,
+    values,
+    setValue,
+    errorFor,
+    complete,
+    collect,
+    showErrors,
+    revealErrors: () => setShowErrors(true),
+    secureRefs,
+    tokenizerKey: fields.some(field => field.secure) && entry ? methodTokenizerKey(entry) : undefined,
+    btRef,
+    noteSecureComplete: (key, value) => setSecureComplete(previous => previous[key] === value ? previous : {
+      ...previous,
+      [key]: value
+    }),
+    secureKey: name => `${entryKey ?? ''}:${name}`
+  };
+}
+export function DeclaredFields({
+  state
+}) {
+  const t = useT();
+  if (state.fields.length === 0) return null;
+  return /*#__PURE__*/_jsxs(Stack, {
+    children: [state.tokenizerKey ? /*#__PURE__*/_jsx(SecureTokenizer, {
+      publicKey: state.tokenizerKey,
+      btRef: state.btRef
+    }) : null, state.fields.map(field => {
+      const label = fieldLabel(field.name);
+      const code = state.showErrors ? state.errorFor(field) : undefined;
+      const error = code === 'required' ? t('Required') : code === 'invalid' ? t("That doesn't look right") : undefined;
+      if (field.secure) {
+        return /*#__PURE__*/_jsx(SecureField, {
+          field: field,
+          label: label,
+          state: state
+        }, field.name);
+      }
+      return /*#__PURE__*/_jsx(Field, {
+        label: label,
+        accessibilityLabel: label,
+        value: state.values[field.name] ?? '',
+        onChangeText: value => state.setValue(field.name, value),
+        placeholder: field.placeholder,
+        error: error,
+        autoCapitalize: "characters",
+        autoCorrect: false
+      }, field.name);
+    })]
+  });
+}
+
+/** Constructs the Basis Theory client for a method that actually declares a secure field. */
+function SecureTokenizer({
+  publicKey,
+  btRef
+}) {
+  const {
+    bt
+  } = useBasisTheory(publicKey);
+  btRef.current = bt;
+  return null;
+}
+function SecureField({
+  field,
+  label,
+  state
+}) {
+  const s = useFieldStyles();
+  const [focused, setFocused] = useState(false);
+  const note = state.noteSecureComplete;
+  return /*#__PURE__*/_jsx(FieldShell, {
+    label: label,
+    focused: focused,
+    children: /*#__PURE__*/_jsx(TextElement, {
+      btRef: instance => {
+        state.secureRefs.current[field.name] = instance;
+        if (!instance) note(state.secureKey(field.name), false);
+      },
+      onChange: event => note(state.secureKey(field.name), event?.complete === true),
+      placeholder: field.placeholder,
+      placeholderTextColor: alphaStep(s.theme.gray, 10),
+      style: {
+        color: s.input.color,
+        fontSize: s.input.fontSize,
+        fontFamily: s.input.fontFamily,
+        height: s.theme.tokens.controlHeight - 2,
+        padding: 0
+      },
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false)
+    })
+  });
+}
+//# sourceMappingURL=declared-fields.js.map

package/lib/module/elements/payment/declared-fields.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useMemo","useRef","useState","TextElement","useBasisTheory","fieldLabel","fieldMatches","methodTokenizerKey","tokenizeSecureFields","useT","alphaStep","Field","FieldShell","Stack","useFieldStyles","jsx","_jsx","jsxs","_jsxs","useDeclaredFields","entry","country","fields","required_fields","btRef","undefined","values","setValues","showErrors","setShowErrors","secureComplete","setSecureComplete","secureRefs","entryKey","type","current","setValue","name","value","prev","errorFor","field","secure","trim","patterns","input_formats","formats","complete","every","collect","paymentMethod","billingExtra","instance","kind","secureTokenIntent","Object","keys","length","key","Error","revealErrors","tokenizerKey","some","noteSecureComplete","previous","secureKey","DeclaredFields","state","t","children","SecureTokenizer","publicKey","map","label","code","error","SecureField","accessibilityLabel","onChangeText","placeholder","autoCapitalize","autoCorrect","bt","s","focused","setFocused","note","onChange","event","placeholderTextColor","theme","gray","style","color","input","fontSize","fontFamily","height","tokens","controlHeight","padding","onFocus","onBlur"],"sourceRoot":"../../../../src","sources":["elements/payment/declared-fields.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/elements/payment/index.js

@@ -0,0 +1,448 @@
+"use strict";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import { detailTemplate, formatMinorAmount, methodBillingCountries, orderRank, presentMethod } from "../../core/payments/detail.js";
+import { PaymentsRefusalError } from "../../core/payments/refusals.js";
+import { mergeBillingWithCollected } from "../../core/payments/billing-merge.js";
+import { assertCardBilling, validateBillingEmail } from "../../core/payments/mint.js";
+import { useLocale, useT } from "../../i18n/index.js";
+import { usePaymentsState, usePaymentsStore } from "../../namespace.js";
+import { WALLET_TYPE_FOR_PLATFORM, WhopPlatformPay } from "../../native/index.js";
+import { alphaStep, step, useTheme } from "../../theme/provider.js";
+import { ElementFrame } from "../../ui/element-frame.js";
+import { ErrorFace, part, Skeleton, Stack } from "../../ui/primitives.js";
+import { PaymentMethodIcon } from "../../ui/payment-method-icon.js";
+import { CardElement } from "../card.js";
+import { DeclaredFields, useDeclaredFields } from "./declared-fields.js";
+import { mergeWalletContact } from "../../core/payments/wallet-contact.js";
+import { collectWallet, useWalletAvailability, WalletPayButton, walletRequestFor } from "./wallet.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Shows the payment methods offered for this charge and collects the selected one's required
+ * fields.
+ *
+ * The offered set is the matrix filtered by the same eight `presentMethod` gates the web element
+ * applies, from the same inputs. The surface is declared `direct_checkout` because an app owns its
+ * own presentation the way a first-party document does — and unlike an iframe it can hand a
+ * full-page step to the system browser, so `full_page`-only methods stay in the list.
+ */
+export function PaymentElement({
+  order,
+  style,
+  fallback,
+  onChange,
+  onReady,
+  onError
+}) {
+  const t = useT();
+  const locale = useLocale();
+  const theme = useTheme();
+  const store = usePaymentsStore();
+  const charge = usePaymentsState(s => s.charge);
+  const accountId = usePaymentsState(s => s.accountId);
+  const addressLive = usePaymentsState(s => s.addressLive);
+  // Reactive, like addressLive beside it. Read through store.getSnapshot() inside the walletRequest
+  // memo this went stale: the store's identity never changes, so clearing an email that had been
+  // present left requiresEmail false and the sheet stopped collecting one.
+  const buyerEmail = usePaymentsState(s => s.buyerEmail);
+  const options = store.getOptions();
+  const [entries, setEntries] = useState(null);
+  const [failure, setFailure] = useState(null);
+  const [selectedType, setSelectedType] = useState(undefined);
+  const currency = charge.configured ? charge.currency : undefined;
+  const amount = charge.configured ? charge.amount : undefined;
+  useEffect(() => {
+    if (!accountId || !currency || amount === undefined) return;
+    let alive = true;
+    setEntries(null);
+    store.client.paymentMethodTypes.list({
+      account_id: accountId,
+      currency,
+      amount,
+      surface: store.surface
+    }).then(page => alive && setEntries(page.data)).catch(err => alive && setFailure({
+      message: err.message,
+      code: 'PAYMENT_METHODS_FAILED'
+    }));
+    return () => {
+      alive = false;
+    };
+  }, [accountId, currency, amount, store]);
+  const walletEntry = useMemo(() => entries?.find(entry => entry.type === WALLET_TYPE_FOR_PLATFORM), [entries]);
+  const walletAvailable = useWalletAvailability(walletEntry);
+  const availability = useMemo(() => {
+    if (walletAvailable === undefined) return undefined;
+    return Platform.OS === 'ios' ? {
+      applePay: walletAvailable
+    } : {
+      googlePay: walletAvailable
+    };
+  }, [walletAvailable]);
+
+  // Declared ahead of `offers`, which filters on it. A `const` read from a closure that runs during
+  // the same render is a temporal dead zone, not a hoist: this threw
+  // "Cannot access 'billingCountry' before initialization" and the element painted no tiles at all.
+  const billingCountry = usePaymentsState(s => s.addressCollected?.address?.country);
+  const offers = useMemo(() => {
+    if (!entries || !charge.configured) return [];
+    const filtered = entries.filter(entry => presentMethod(entry, charge.currency, charge.amount, charge.setupFutureUsage, availability, charge.paymentMethodConfiguration, store.surface, billingCountry));
+    const ranking = order ?? options.order ?? [];
+    return filtered.map((entry, index) => ({
+      entry,
+      index
+    })).sort((a, b) => orderRank(a.entry.type, ranking) - orderRank(b.entry.type, ranking) || a.index - b.index).map(({
+      entry
+    }) => entry);
+  }, [entries, charge, availability, order, options.order, store.surface, billingCountry]);
+  const selected = offers.find(entry => entry.type === selectedType);
+  const template = selected ? detailTemplate(selected) : undefined;
+  const declared = useDeclaredFields(selected, billingCountry);
+  const [cardComplete, setCardComplete] = useState(false);
+  const [walletCollected, setWalletCollected] = useState(null);
+  const [walletError, setWalletError] = useState(null);
+  const [walletPresenting, setWalletPresenting] = useState(false);
+  const isWallet = template === 'wallet_sheet';
+  const isCard = selected?.category === 'card';
+  const complete = Boolean(selected) && (isWallet ? Boolean(walletCollected) : isCard ? cardComplete && declared.complete : declared.complete);
+
+  // A wallet payload is bound to the sheet that produced it, and the sheet was priced. Clearing on
+  // the method alone left a token authorized for the OLD amount: `complete` stays true off that
+  // stale payload, so the button is disabled and the buyer cannot re-authorize, while confirm
+  // submits the old authorization against the new price.
+  const walletBinding = `${selectedType ?? ''}|${charge.currency}|${charge.amount}|${options.applePayMerchantId ?? ''}|${options.googlePayMerchantName ?? ''}`;
+  useEffect(() => {
+    setWalletCollected(null);
+    setWalletError(null);
+  }, [walletBinding]);
+
+  // The first offer is selected once the list settles, so a single-method checkout needs no tap.
+  // A re-priced charge re-filters the matrix, and the selected method can drop out of it. Left
+  // alone the selection points at a type no tile renders: nothing looks selected and confirm
+  // refuses. Fall back to the new first offer.
+  useEffect(() => {
+    if (offers.length === 0) return;
+    if (selectedType && offers.some(entry => entry.type === selectedType)) return;
+    setSelectedType(offers[0].type);
+  }, [offers, selectedType]);
+
+  // The entry's per-currency country list is the method's billing-country constraint, and "*"
+  // anywhere in it means unrestricted. A mounted address element intersects it with the
+  // integrator's own allowedCountries, so a method that only serves a few countries narrows the
+  // picker instead of letting the buyer choose one it will refuse.
+  const methodCountries = useMemo(() => charge.configured ? methodBillingCountries(selected, charge.currency) : null, [selected, charge]);
+  // The controller's mirror of the selection: the confirm dispatcher reads it, and a mounted
+  // address element narrows its country selector from it.
+  useEffect(() => {
+    store.patch({
+      selectedType,
+      selectedCategory: selected?.category,
+      selectedTemplate: template,
+      selectedComplete: complete,
+      methodCountries
+    });
+  }, [store, selectedType, selected?.category, template, complete, methodCountries]);
+
+  // Unmount only, so the mirror never outlives the surface that owns it: a still-mounted address
+  // element would otherwise keep narrowing its picker to a method the buyer can no longer see.
+  useEffect(() => () => store.patch({
+    selectedType: '',
+    selectedCategory: undefined,
+    selectedTemplate: undefined,
+    selectedComplete: false,
+    methodCountries: null
+  }), [store]);
+  const latestChange = useRef(onChange);
+  latestChange.current = onChange;
+  useEffect(() => {
+    latestChange.current?.({
+      complete,
+      type: selected?.type,
+      supportsBuyerFee: selected?.supports_buyer_fee,
+      method: selected ? {
+        type: selected.type,
+        category: selected.category,
+        template: detailTemplate(selected),
+        display_name: selected.display_name
+      } : undefined
+    });
+  }, [complete, selected]);
+  const walletRequest = useMemo(() => {
+    if (!selected || !isWallet || !charge.configured) return null;
+    return walletRequestFor(selected, {
+      currency: charge.currency,
+      amount: charge.amount,
+      merchantName: options.googlePayMerchantName ?? 'Whop',
+      applePayMerchantId: options.applePayMerchantId,
+      requiresBillingAddress: !addressLive,
+      requiresEmail: !buyerEmail
+    });
+  }, [selected, isWallet, charge, options, addressLive, buyerEmail]);
+  const collect = useCallback(async input => {
+    if (!selected) {
+      throw new PaymentsRefusalError('NO_COLLECTION_SURFACE', 'No payment method is selected');
+    }
+    if (isWallet) {
+      if (!walletCollected) {
+        throw new PaymentsRefusalError('WALLET_UNAVAILABLE', 'Tap the wallet button to authorize the payment before confirming');
+      }
+      // The sheet is asked for an email and a billing address exactly when no element is mounted
+      // to supply them, so its answers must be folded in BEFORE validation. Validating first
+      // rejected a buyer who had just typed their email into Apple Pay.
+      return {
+        paymentMethod: walletCollected.paymentMethod,
+        billingDetails: validateBillingEmail(mergeWalletContact(input?.billingDetails, walletCollected.contact))
+      };
+    }
+    const billingDetails = validateBillingEmail(input?.billingDetails);
+    if (!declared.complete) {
+      declared.revealErrors();
+      throw new PaymentsRefusalError('NO_COLLECTION_SURFACE', 'Complete the required fields for this method');
+    }
+    const values = await declared.collect();
+    if (isCard) {
+      // The address element supplies the billing NAME, and createConfirmationToken merges it
+      // only after this returns. Asserting against the seeded bag therefore rejected the
+      // default checkout — an AddressElement and a PaymentElement with no explicit
+      // billingDetails — for a name the form had already collected.
+      const settled = store.getSnapshot();
+      const withAddress = settled.addressLive ? mergeBillingWithCollected(billingDetails, settled.addressCollected) ?? billingDetails : billingDetails;
+      assertCardBilling(withAddress);
+      // The card tile mounts its own CardElement, which registers under `card`. Reaching it by
+      // kind is required: `liveSurface()` prefers `payment`, which is this very surface.
+      const cardSurface = store.surfaceOf('card');
+      if (!cardSurface) {
+        throw new PaymentsRefusalError('NO_COLLECTION_SURFACE', 'The card fields are not ready');
+      }
+      const collected = await cardSurface.collect({
+        billingDetails: withAddress
+      });
+      return {
+        paymentMethod: {
+          ...collected.paymentMethod,
+          ...values.paymentMethod
+        },
+        billingDetails: collected.billingDetails,
+        billingExtra: values.billingExtra
+      };
+    }
+    const categoryPayload = {
+      ...values.paymentMethod
+    };
+    if (values.secureTokenIntent) categoryPayload.token_intent = values.secureTokenIntent;
+    return {
+      paymentMethod: {
+        type: selected.type,
+        category: selected.category,
+        [selected.category]: categoryPayload
+      },
+      billingDetails,
+      billingExtra: values.billingExtra
+    };
+  }, [selected, isWallet, isCard, walletCollected, declared, store]);
+
+  /**
+   * The sheet's own verdict settles at tokenization, not at confirm.
+   *
+   * Holding it open until the server answers needs the deferred-conclusion rail the composed
+   * checkout arms; a standalone payment element has no such rail on the web either, and its
+   * confirm is server-side and unobservable from here. A refused confirm therefore surfaces in the
+   * app's own UI rather than in the sheet.
+   */
+  const presentWallet = useCallback(async () => {
+    if (!selected || !walletRequest || walletPresenting) return;
+    setWalletError(null);
+    setWalletPresenting(true);
+    try {
+      setWalletCollected(await collectWallet(selected, walletRequest));
+      WhopPlatformPay.complete(true);
+    } catch (err) {
+      WhopPlatformPay.complete(false);
+      const refused = err instanceof PaymentsRefusalError && err.code === 'WALLET_UNAVAILABLE';
+      // A dismissal is an outcome, not a failure.
+      if (!refused) setWalletError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setWalletPresenting(false);
+    }
+  }, [selected, walletRequest, walletPresenting]);
+
+  // The payment element owns the selection, so it registers ahead of a bare card unit.
+  const latestCollect = useRef(collect);
+  latestCollect.current = collect;
+  useEffect(() => store.registerSurface({
+    kind: 'payment',
+    collect: input => latestCollect.current(input)
+  }), [store]);
+  const ready = entries !== null && (walletEntry === undefined || walletAvailable !== undefined);
+  return /*#__PURE__*/_jsx(ElementFrame, {
+    style: style,
+    fallback: fallback,
+    skeleton: /*#__PURE__*/_jsxs(Stack, {
+      children: [/*#__PURE__*/_jsx(Skeleton, {
+        height: 56
+      }), /*#__PURE__*/_jsx(Skeleton, {
+        height: 56
+      }), /*#__PURE__*/_jsx(Skeleton, {
+        height: 56
+      })]
+    }),
+    ready: ready,
+    error: failure,
+    onReady: onReady,
+    onError: onError,
+    children: offers.length === 0 && entries !== null ? /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: theme.tokens.spacing * 4,
+        borderRadius: theme.tokens.radius,
+        backgroundColor: alphaStep(theme.gray, 2)
+      },
+      children: /*#__PURE__*/_jsx(Text, {
+        style: {
+          color: step(theme.gray, 11),
+          fontSize: theme.tokens.fontSize
+        },
+        children: t('No payment methods are available')
+      })
+    }) : /*#__PURE__*/_jsx(Stack, {
+      children: offers.map(entry => {
+        const active = entry.type === selectedType;
+        return /*#__PURE__*/_jsxs(View, {
+          children: [/*#__PURE__*/_jsx(MethodTile, {
+            entry: entry,
+            active: active,
+            amountLabel: charge.configured ? formatMinorAmount(charge.amount, charge.currency, locale) : undefined,
+            onPress: () => setSelectedType(entry.type)
+          }), active ? /*#__PURE__*/_jsxs(View, {
+            style: [styles.detail, part(theme, 'whop-PaymentMethodDetail')],
+            children: [isCard ? /*#__PURE__*/_jsx(CardElement, {
+              onChange: payload => setCardComplete(payload.complete)
+            }) : null, /*#__PURE__*/_jsx(DeclaredFields, {
+              state: declared
+            }), isWallet && walletRequest ? /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(WalletPayButton, {
+                onPress: presentWallet,
+                disabled: walletPresenting || Boolean(walletCollected)
+              }), walletError ? /*#__PURE__*/_jsx(ErrorFace, {
+                message: walletError
+              }) : null]
+            }) : null]
+          }) : null]
+        }, entry.type);
+      })
+    })
+  });
+}
+function MethodTile({
+  entry,
+  active,
+  amountLabel,
+  onPress
+}) {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(Pressable, {
+    accessibilityRole: "radio",
+    accessibilityState: {
+      selected: active
+    },
+    accessibilityLabel: entry.display_name,
+    onPress: onPress,
+    style: ({
+      pressed
+    }) => [styles.tile, {
+      minHeight: theme.tokens.controlHeight + 12,
+      borderRadius: theme.tokens.radius,
+      borderWidth: theme.tokens.borderWidth,
+      borderColor: active ? step(theme.accent, 8) : alphaStep(theme.gray, 6),
+      backgroundColor: pressed ? alphaStep(theme.gray, 2) : step(theme.gray, 1),
+      paddingHorizontal: theme.tokens.spacing * 3
+    }, part(theme, 'whop-PaymentMethodTile'), active ? part(theme, 'whop-PaymentMethodRowSelected') : null],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.radio, {
+        borderColor: active ? step(theme.accent, 9) : alphaStep(theme.gray, 7)
+      }],
+      children: active ? /*#__PURE__*/_jsx(View, {
+        style: [styles.dot, {
+          backgroundColor: step(theme.accent, 9)
+        }]
+      }) : null
+    }), /*#__PURE__*/_jsx(PaymentMethodIcon, {
+      icons: entry.icons,
+      size: 20
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: [{
+        flexShrink: 1,
+        fontSize: theme.tokens.fontSize,
+        fontFamily: theme.tokens.fontFamily,
+        color: step(theme.gray, 12)
+      }, part(theme, 'whop-MethodTileLabel')],
+      children: entry.display_name
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.spacer
+    }), entry.category === 'card' && !active ? /*#__PURE__*/_jsx(BrandStrip, {
+      networks: entry.card?.networks
+    }) : null, amountLabel ? /*#__PURE__*/_jsx(Text, {
+      style: {
+        fontSize: theme.tokens.labelFontSize,
+        color: step(theme.gray, 11)
+      },
+      children: amountLabel
+    }) : null]
+  });
+}
+
+/** The card row's accepted-network art. API art only: an entry without networks renders nothing,
+ *  the same rule the card fields follow. Tiles overlap left-under-right with the first on top,
+ *  which is the web strip's stacking without its mask moat (React Native has no mask). */
+function BrandStrip({
+  networks
+}) {
+  const strip = (networks ?? []).slice(0, BRAND_STRIP_TILES);
+  if (strip.length === 0) return null;
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.row,
+    children: strip.map((network, index) => /*#__PURE__*/_jsx(View, {
+      style: {
+        marginLeft: index > 0 ? -8 : 0,
+        zIndex: strip.length - index
+      },
+      children: /*#__PURE__*/_jsx(PaymentMethodIcon, {
+        icons: network.icons,
+        size: 19
+      })
+    }, network.brand))
+  });
+}
+const BRAND_STRIP_TILES = 4;
+const styles = StyleSheet.create({
+  tile: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  spacer: {
+    flex: 1
+  },
+  radio: {
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    borderWidth: 1.5,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4
+  },
+  detail: {
+    paddingTop: 12,
+    gap: 12
+  }
+});
+//# sourceMappingURL=index.js.map