payment-kit 1.27.2 → 1.29.0

package/src/components/layout/admin.tsx

@@ -1,13 +1,36 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { PaymentProvider } from '@blocklet/payment-react';
 import Dashboard from '@blocklet/ui-react/lib/Dashboard';
 import { styled } from '@mui/system';
 import { useEffect } from 'react';
 
-import { Typography } from '@mui/material';
+import { Box, CircularProgress } from '@mui/material';
 import { useSessionContext } from '../../contexts/session';
 
+function LayoutLoading() {
+  return (
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <CircularProgress />
+    </Box>
+  );
+}
+
+// window.blocklet is bootstrapped synchronously in public/index.html (CF) but
+// the full payload is overlaid from /__blocklet__.js. Don't render children
+// (which may fire API requests on mount) until the critical fields are in
+// place — otherwise requests go out against a half-initialized config and
+// can cascade into auth failures / unintended redirects.
+function isBlockletReady() {
+  const b = (window as any).blocklet;
+  return !!(b && b.appPid && b.prefix);
+}
+
 const Root = styled(Dashboard)<{ padding: string }>`
   width: 100%;
   background-color: ${({ theme }) => theme.palette.background.default};
@@ -62,12 +85,11 @@ const Root = styled(Dashboard)<{ padding: string }>`
 `;
 
 export default function Layout(props: any) {
-  const { t } = useLocaleContext();
   const { session, connectApi, events } = useSessionContext();
 
   useEffect(() => {
     events.once('logout', () => {
-      window.location.href = '/';
+      window.location.href = window?.blocklet?.prefix || '/';
     });
   }, []);
 
@@ -78,6 +100,14 @@ export default function Layout(props: any) {
     }
   }, [session.initialized]);
 
+  // Show a loading state — not a "Redirecting..." text and not a blank page —
+  // while either window.blocklet or the session is still resolving. Admin
+  // pages fire authenticated API requests on mount, so children must not
+  // render until both are fully in place.
+  if (!isBlockletReady() || !session.initialized) {
+    return <LayoutLoading />;
+  }
+
   if (session.user) {
     return (
       <PaymentProvider session={session} connect={connectApi}>
@@ -86,5 +116,9 @@ export default function Layout(props: any) {
     );
   }
 
-  return <Typography>{t('common.redirecting')}</Typography>;
+  // Session initialized but not logged in: the effect above triggers a
+  // redirect-based login. Keep showing the loading state (instead of a
+  // "Redirecting..." text) so the user isn't confused when the actual
+  // navigation hasn't happened yet.
+  return <LayoutLoading />;
 }

package/src/components/layout/user-cf.tsx

@@ -0,0 +1,77 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { PaymentProvider } from '@blocklet/payment-react';
+import { useEffect } from 'react';
+import { Header } from '@blocklet/ui-react';
+import { Box, CircularProgress } from '@mui/material';
+import { useSessionContext } from '../../contexts/session';
+
+function LayoutLoading() {
+  return (
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <CircularProgress />
+    </Box>
+  );
+}
+
+// window.blocklet is bootstrapped synchronously in public/index.html but the
+// full payload is overlaid from /__blocklet__.js. Treat the layout as "not
+// ready" until the overlay has populated the fields the downstream components
+// (Header, PaymentProvider) rely on, so we never render children against a
+// half-initialized blocklet config.
+function isBlockletReady() {
+  const b = (window as any).blocklet;
+  return !!(b && b.appPid && b.prefix);
+}
+
+/**
+ * CF Workers layout for customer pages.
+ * Uses Dashboard component for consistent header + SessionUser dropdown.
+ * Adds "My Billing" to the user dropdown via sessionManagerProps.menu.
+ */
+export default function UserLayoutCF(props: any) {
+  const { session, connectApi } = useSessionContext();
+
+  useEffect(() => {
+    if (session.initialized && !session.user) {
+      session.login(() => {});
+    }
+  }, [session.initialized]);
+
+  // Show a loading state (not a blank page, not a redirect) while either
+  // window.blocklet or the session is still being resolved. Any child that
+  // fires API calls on mount (useRequest / useEffect) must not run until
+  // both are in place — otherwise the request goes out without the right
+  // auth cookies/headers and may cascade into a redirect.
+  if (!isBlockletReady() || !session.initialized) {
+    return <LayoutLoading />;
+  }
+
+  // Session initialized but not logged in: the effect above will trigger the
+  // DID Connect login modal. Keep showing the loading state instead of a
+  // blank screen so the user doesn't perceive it as "bounced to home".
+  if (!session.user) {
+    return <LayoutLoading />;
+  }
+
+  return (
+    <PaymentProvider session={session} connect={connectApi}>
+      <Header
+        meta={undefined}
+        addons={undefined}
+        sessionManagerProps={undefined}
+        homeLink={undefined}
+        theme={undefined}
+        hideNavMenu={undefined}
+        maxWidth={false}
+        sx={{ borderBottom: '1px solid', borderColor: 'divider' }}
+      />
+      <Box sx={{ flex: 1, maxWidth: 1200, mx: 'auto', px: 3, py: 3, width: '100%' }}>{props.children}</Box>
+    </PaymentProvider>
+  );
+}

package/src/components/payment-intent/actions.tsx

@@ -1,7 +1,8 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { ConfirmDialog, api, formatAmountPrecisionLimit, formatBNStr, formatError } from '@blocklet/payment-react';
+import { ConfirmDialog, api, formatAmountPrecisionLimit, formatError } from '@blocklet/payment-react';
 import type { TPaymentIntentExpanded } from '@blocklet/payment-types';
+import { fromUnitToToken } from '@ocap/util';
 import { useRequest, useSetState } from 'ahooks';
 import { useNavigate } from 'react-router-dom';
 import type { LiteralUnion } from 'type-fest';
@@ -21,6 +22,25 @@ import { useState } from 'react';
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
 
+/**
+ * Format the refundable amount the server returned (raw BN string) into a human-readable
+ * token string by **flooring** to `precision` decimal places — never rounding up.
+ *
+ * `formatBNStr` rounds (via toLocaleString / toFixed), which can produce a value whose
+ * `fromTokenToUnit` round-trip exceeds the original raw amount by sub-cent dust and gets
+ * rejected by the server with "refund amount exceeds the available amount". Flooring keeps
+ * the round-trip ≤ original. The trailing-zero trim mirrors `formatBNStr` so the input
+ * field looks identical for amounts that don't get truncated.
+ */
+function formatRefundableAmount(raw: string | undefined, decimals: number, precision: number = 6): string {
+  if (!raw) return '0';
+  const tokenAmount = fromUnitToToken(raw, decimals);
+  const [whole = '0', frac = ''] = tokenAmount.split('.');
+  if (precision <= 0) return whole;
+  const truncated = frac.substring(0, precision).replace(/0+$/, '');
+  return truncated ? `${whole}.${truncated}` : whole;
+}
+
 type Props = {
   data: TPaymentIntentExpanded;
   variant?: LiteralUnion<'compact' | 'normal', string>;
@@ -185,7 +205,7 @@ export function PaymentIntentActionsInner({ data, variant = 'compact', onChange
     },
     {
       onSuccess: (res: any) => {
-        const amount = formatBNStr(res?.amount, data.paymentCurrency.decimal);
+        const amount = formatRefundableAmount(res?.amount, data.paymentCurrency.decimal);
         setRefundMaxAmount(amount);
       },
       manual: true,
@@ -218,7 +238,7 @@ export function PaymentIntentActionsInner({ data, variant = 'compact', onChange
       handler: () => {
         runRefundAmountAsync().then((res) => {
           reset();
-          const curAmount = formatBNStr(res?.amount, data.paymentCurrency.decimal);
+          const curAmount = formatRefundableAmount(res?.amount, data.paymentCurrency.decimal);
           if (Number(curAmount) <= 0) {
             Toast.info(t('admin.paymentIntent.refundForm.empty'));
             return;

package/src/components/payment-method/app-store.tsx

@@ -0,0 +1,103 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { FormInput } from '@blocklet/payment-react';
+import { Stack, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+import { Controller, useFormContext } from 'react-hook-form';
+
+export default function AppStoreMethodForm({ checkDisabled }: { checkDisabled: (key: string) => boolean }) {
+  const { t } = useLocaleContext();
+  const { control } = useFormContext();
+
+  return (
+    <>
+      <FormInput
+        name="name"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.name.label')}
+        placeholder={t('admin.paymentMethod.name.tip')}
+        disabled={checkDisabled('name')}
+        inputProps={{ maxLength: 32 }}
+      />
+      <FormInput
+        name="description"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.description.label')}
+        placeholder={t('admin.paymentMethod.description.tip')}
+        inputProps={{ maxLength: 255 }}
+      />
+      <FormInput
+        name="settings.app_store.bundle_id"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.app_store.bundle_id.label')}
+        placeholder={t('admin.paymentMethod.app_store.bundle_id.tip')}
+        disabled={checkDisabled('settings.app_store.bundle_id')}
+      />
+
+      <Stack spacing={0.5}>
+        <Typography variant="body2">{t('admin.paymentMethod.app_store.environment.label')}</Typography>
+        <Controller
+          name="settings.app_store.environment"
+          control={control}
+          rules={{ required: true }}
+          render={({ field }) => (
+            <ToggleButtonGroup
+              {...field}
+              exclusive
+              disabled={checkDisabled('settings.app_store.environment')}
+              onChange={(_, value: string | null) => {
+                if (value !== null) field.onChange(value);
+              }}>
+              <ToggleButton value="production">
+                {t('admin.paymentMethod.app_store.environment.production')}
+              </ToggleButton>
+              <ToggleButton value="sandbox">{t('admin.paymentMethod.app_store.environment.sandbox')}</ToggleButton>
+            </ToggleButtonGroup>
+          )}
+        />
+        <Typography variant="caption" color="text.secondary">
+          {t('admin.paymentMethod.app_store.environment.tip')}
+        </Typography>
+      </Stack>
+
+      <FormInput
+        name="settings.app_store.shared_secret"
+        type="password"
+        label={t('admin.paymentMethod.app_store.shared_secret.label')}
+        placeholder={t('admin.paymentMethod.app_store.shared_secret.tip')}
+        disabled={checkDisabled('settings.app_store.shared_secret')}
+      />
+
+      <Typography variant="subtitle2" sx={{ mt: 2 }}>
+        {t('admin.paymentMethod.app_store.serverApi.heading')}
+      </Typography>
+      <Typography variant="caption" color="text.secondary" sx={{ mt: -1, display: 'block' }}>
+        {t('admin.paymentMethod.app_store.serverApi.tip')}
+      </Typography>
+      <FormInput
+        name="settings.app_store.issuer_id"
+        type="text"
+        label={t('admin.paymentMethod.app_store.issuer_id.label')}
+        placeholder={t('admin.paymentMethod.app_store.issuer_id.tip')}
+        disabled={checkDisabled('settings.app_store.issuer_id')}
+      />
+      <FormInput
+        name="settings.app_store.key_id"
+        type="text"
+        label={t('admin.paymentMethod.app_store.key_id.label')}
+        placeholder={t('admin.paymentMethod.app_store.key_id.tip')}
+        disabled={checkDisabled('settings.app_store.key_id')}
+      />
+      <FormInput
+        name="settings.app_store.private_key_pem"
+        type="text"
+        multiline
+        rows={5}
+        label={t('admin.paymentMethod.app_store.private_key_pem.label')}
+        placeholder={t('admin.paymentMethod.app_store.private_key_pem.tip')}
+        disabled={checkDisabled('settings.app_store.private_key_pem')}
+      />
+    </>
+  );
+}

package/src/components/payment-method/form.tsx

@@ -3,11 +3,13 @@ import { Stack, ToggleButton, ToggleButtonGroup, Typography } from '@mui/materia
 import { styled } from '@mui/system';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
+import AppStoreMethodForm from './app-store';
 import ArcBlockMethodForm from './arcblock';
+import BaseMethodForm from './base';
 import BitcoinMethodForm from './bitcoin';
 import EthereumMethodForm from './ethereum';
+import GooglePlayMethodForm from './google-play';
 import StripeMethodForm from './stripe';
-import BaseMethodForm from './base';
 
 export default function PaymentMethodForm({
   action = 'create',
@@ -47,6 +49,8 @@ export default function PaymentMethodForm({
             <ToggleButton value="stripe">Stripe</ToggleButton>
             <ToggleButton value="ethereum">Ethereum</ToggleButton>
             <ToggleButton value="base">Base</ToggleButton>
+            <ToggleButton value="google_play">Google Play</ToggleButton>
+            <ToggleButton value="app_store">App Store</ToggleButton>
             <ToggleButton value="bitcoin" disabled>
               Bitcoin
             </ToggleButton>
@@ -60,6 +64,8 @@ export default function PaymentMethodForm({
       {type === 'arcblock' && <ArcBlockMethodForm checkDisabled={checkDisabled} />}
       {type === 'ethereum' && <EthereumMethodForm checkDisabled={checkDisabled} />}
       {type === 'base' && <BaseMethodForm checkDisabled={checkDisabled} />}
+      {type === 'google_play' && <GooglePlayMethodForm checkDisabled={checkDisabled} />}
+      {type === 'app_store' && <AppStoreMethodForm checkDisabled={checkDisabled} />}
       {type === 'bitcoin' && <BitcoinMethodForm checkDisabled={checkDisabled} />}
     </Root>
   );

package/src/components/payment-method/google-play.tsx

@@ -0,0 +1,85 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { FormInput } from '@blocklet/payment-react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { Alert, Typography } from '@mui/material';
+
+export default function GooglePlayMethodForm({ checkDisabled }: { checkDisabled: (key: string) => boolean }) {
+  const { t } = useLocaleContext();
+  const { control } = useFormContext();
+  const serviceAccountJson = useWatch({ control, name: 'settings.google_play.service_account_json' }) as
+    | string
+    | undefined;
+
+  // Quick client-side JSON sanity check — the server re-validates and decrypts.
+  let parseError: string | null = null;
+  let clientEmail: string | null = null;
+  if (serviceAccountJson) {
+    try {
+      const parsed = JSON.parse(serviceAccountJson);
+      if (!parsed.client_email || !parsed.private_key) {
+        parseError = t('admin.paymentMethod.google_play.service_account_json.missingFields');
+      } else {
+        clientEmail = parsed.client_email;
+      }
+    } catch {
+      parseError = t('admin.paymentMethod.google_play.service_account_json.invalidJson');
+    }
+  }
+
+  return (
+    <>
+      <FormInput
+        name="name"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.name.label')}
+        placeholder={t('admin.paymentMethod.name.tip')}
+        disabled={checkDisabled('name')}
+        inputProps={{ maxLength: 32 }}
+      />
+      <FormInput
+        name="description"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.description.label')}
+        placeholder={t('admin.paymentMethod.description.tip')}
+        inputProps={{ maxLength: 255 }}
+      />
+      <FormInput
+        name="settings.google_play.package_name"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.google_play.package_name.label')}
+        placeholder={t('admin.paymentMethod.google_play.package_name.tip')}
+        disabled={checkDisabled('settings.google_play.package_name')}
+      />
+      <FormInput
+        name="settings.google_play.service_account_json"
+        type="text"
+        multiline
+        rows={6}
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.google_play.service_account_json.label')}
+        placeholder={t('admin.paymentMethod.google_play.service_account_json.tip')}
+        disabled={checkDisabled('settings.google_play.service_account_json')}
+      />
+      {parseError && (
+        <Alert severity="error" sx={{ mt: -1 }}>
+          {parseError}
+        </Alert>
+      )}
+      {clientEmail && (
+        <Typography variant="caption" color="text.secondary" sx={{ mt: -1, display: 'block' }}>
+          {t('admin.paymentMethod.google_play.service_account_json.detectedClient')}: {clientEmail}
+        </Typography>
+      )}
+      <FormInput
+        name="settings.google_play.pubsub_topic_name"
+        type="text"
+        label={t('admin.paymentMethod.google_play.pubsub_topic_name.label')}
+        placeholder={t('admin.paymentMethod.google_play.pubsub_topic_name.tip')}
+        disabled={checkDisabled('settings.google_play.pubsub_topic_name')}
+      />
+    </>
+  );
+}

package/src/components/safe-did-address.tsx

@@ -0,0 +1,75 @@
+import DidAddress from '@arcblock/ux/lib/DID';
+import { Typography } from '@mui/material';
+import { Component, type ReactNode } from 'react';
+
+/**
+ * Matches DIDs that @arcblock/did-motif can parse:
+ *   z-prefixed base58 DID (z1..., z2..., zNK...) — standard ArcBlock format
+ *   did:method:identifier — W3C DID format
+ */
+function isValidDid(did: unknown): did is string {
+  return typeof did === 'string' && /^(z[0-9a-zA-Z]{20,}|did:[a-z]+:[A-Za-z0-9]+)/.test(did);
+}
+
+interface ErrorBoundaryProps {
+  fallback: ReactNode;
+  children: ReactNode;
+}
+
+/**
+ * Inline error boundary — catches DIDParsingError (or any render error) from DidAddress
+ * and shows a fallback instead of crashing the whole page.
+ */
+class DidErrorBoundary extends Component<ErrorBoundaryProps, { hasError: boolean }> {
+  // eslint-disable-next-line react/state-in-constructor
+  override state = { hasError: false };
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  override componentDidCatch() {
+    // Swallow — DIDParsingError is non-fatal, we just show a fallback
+  }
+
+  override render() {
+    if (this.state.hasError) return this.props.fallback;
+    return this.props.children;
+  }
+}
+
+export interface SafeDidAddressProps {
+  did?: string | null;
+  [key: string]: any;
+}
+
+/**
+ * SafeDidAddress — drop-in replacement for `@arcblock/ux/lib/DID` that:
+ *   1. Shows an em-dash placeholder for empty/null DIDs
+ *   2. Pre-validates the DID format before rendering
+ *   3. Catches any render errors from did-motif via an error boundary
+ *
+ * Use this anywhere the backing data may have invalid/missing DIDs (e.g. migrated
+ * customer records with empty did fields).
+ */
+// eslint-disable-next-line react/require-default-props
+export default function SafeDidAddress({ did, ...rest }: SafeDidAddressProps) {
+  if (!did || !isValidDid(did)) {
+    return (
+      <Typography variant="body2" color="text.secondary" component="span">
+        {did || '—'}
+      </Typography>
+    );
+  }
+
+  return (
+    <DidErrorBoundary
+      fallback={
+        <Typography variant="body2" color="text.secondary" component="span">
+          {did}
+        </Typography>
+      }>
+      <DidAddress did={did} {...rest} />
+    </DidErrorBoundary>
+  );
+}

package/src/components/subscription/list.tsx

@@ -152,6 +152,26 @@ export default function SubscriptionList({
         },
       },
     },
+    {
+      label: t('admin.subscription.channel'),
+      name: 'channel',
+      options: {
+        filter: true,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TSubscriptionExpanded;
+          const channel = (item as any).channel || (item as any).paymentMethod?.type;
+          if (!channel) return null;
+          let color: 'primary' | 'secondary' | 'default' = 'default';
+          if (channel === 'google_play' || channel === 'app_store') color = 'primary';
+          else if (channel === 'stripe') color = 'secondary';
+          return (
+            <Link to={`/admin/billing/${item.id}`}>
+              <Status label={channel} color={color as any} />
+            </Link>
+          );
+        },
+      },
+    },
     {
       label: t('common.createdAt'),
       name: 'created_at',

package/src/libs/patch-user-card.ts

@@ -0,0 +1,25 @@
+// UserCard (@arcblock/ux) calls sdk.user.getUserPublicInfo per mount without
+// in-flight dedup. Pages that render many rows with the same DID fire N
+// concurrent requests before the first response warms sessionStorage.
+// Patch the bundled SDK singleton so concurrent calls with the same args
+// share one Promise.
+// Deep import into ux's nested js-sdk copy (intentional; that bundle exposes
+// the SDK singleton UserCard actually calls into — patching any other copy
+// of @blocklet/js-sdk doesn't affect UserCard).
+// eslint-disable-next-line import/extensions
+import { getBlockletSDK } from '@arcblock/ux/lib/node_modules/@blocklet/js-sdk/dist/index.js';
+
+type PublicInfoArgs = { did?: string; name?: string };
+
+const sdk = getBlockletSDK() as { user: { getUserPublicInfo: (args: PublicInfoArgs) => Promise<unknown> } };
+const original = sdk.user.getUserPublicInfo.bind(sdk.user);
+const inflight = new Map<string, Promise<unknown>>();
+
+sdk.user.getUserPublicInfo = (args: PublicInfoArgs) => {
+  const key = `${args?.did || ''}|${args?.name || ''}`;
+  const pending = inflight.get(key);
+  if (pending) return pending;
+  const promise = original(args).finally(() => inflight.delete(key));
+  inflight.set(key, promise);
+  return promise;
+};

package/src/libs/util.ts

@@ -14,8 +14,6 @@ import type {
   TProductExpanded,
   TSubscriptionExpanded,
 } from '@blocklet/payment-types';
-import { Hasher } from '@ocap/mcrypto';
-import { hexToNumber } from '@ocap/util';
 import { isEmpty, isObject } from 'lodash';
 import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
@@ -249,11 +247,11 @@ export function getCategoricalColors(specifier: string = '4e79a7f28e2ce1575976b7
 
 export function stringToColor(str: string) {
   const colors = getCategoricalColors();
-
-  // @ts-ignore
-  const hash = Hasher.SHA3.hash256(str).slice(-12);
-  // @ts-ignore
-  const index = Math.abs(hexToNumber(hash)) % colors.length;
+  let hash = 0;
+  for (let i = 0; i < str.length; i += 1) {
+    hash = (hash * 31 + str.charCodeAt(i)) | 0;
+  }
+  const index = Math.abs(hash) % colors.length;
   return colors[index];
 }
 

package/src/locales/en.tsx

@@ -1310,6 +1310,55 @@ export default flat({
           tip: 'Number of blocks required since transaction execution',
         },
       },
+      google_play: {
+        package_name: {
+          label: 'Package Name',
+          tip: 'e.g. com.example.app, configured in Play Console',
+        },
+        service_account_json: {
+          label: 'Service Account JSON',
+          tip: 'Paste the full service account credentials JSON downloaded from Google Cloud Console',
+          invalidJson: 'Not valid JSON',
+          missingFields: 'JSON is missing client_email or private_key',
+          detectedClient: 'Detected client',
+        },
+        pubsub_topic_name: {
+          label: 'Pub/Sub Topic (optional)',
+          tip: 'projects/<project-id>/topics/<topic-name>, for receiving RTDN',
+        },
+      },
+      app_store: {
+        bundle_id: {
+          label: 'Bundle ID',
+          tip: 'e.g. com.example.app, configured in App Store Connect',
+        },
+        environment: {
+          label: 'Environment',
+          tip: 'StoreKit 2 JWS environment must match this setting',
+          production: 'Production',
+          sandbox: 'Sandbox',
+        },
+        shared_secret: {
+          label: 'Shared Secret (for StoreKit 1)',
+          tip: 'App-Specific Shared Secret for legacy receipt verification. Not needed for StoreKit 2 JWS. Find it at App Store Connect → App Information → App-Specific Shared Secret',
+        },
+        serverApi: {
+          heading: 'Server API Credentials (optional)',
+          tip: 'Not required for StoreKit 2 JWS verification. Only needed when querying App Store Server API for subscription status. Provide all three or none.',
+        },
+        issuer_id: {
+          label: 'Issuer ID',
+          tip: 'App Store Connect API Issuer ID',
+        },
+        key_id: {
+          label: 'Key ID',
+          tip: 'App Store Connect API Key ID',
+        },
+        private_key_pem: {
+          label: 'Private Key (.p8 contents)',
+          tip: 'Paste the contents of the .p8 file downloaded from App Store Connect',
+        },
+      },
     },
     paymentCurrency: {
       name: 'Payment Currency',
@@ -1484,7 +1533,19 @@ export default flat({
       attention: 'Past due subscriptions',
       product: 'Product',
       collectionMethod: 'Billing',
+      channel: 'Channel',
       currentPeriod: 'Current Period',
+      iap: {
+        googlePlayTitle: 'Google Play Purchase',
+        appStoreTitle: 'App Store Purchase',
+        purchaseToken: 'Purchase Token',
+        orderId: 'Order ID',
+        productId: 'Product ID',
+        originalTransactionId: 'Original Transaction ID',
+        transactionId: 'Transaction ID',
+        expiryTime: 'Expires At',
+        environment: 'Environment',
+      },
       trialingPeriod: 'Trial Period',
       trialEnd: 'Trial ends {prefix} {date}',
       willEnd: 'Will end {prefix} {date}',
@@ -1605,6 +1666,8 @@ export default flat({
       email: 'Email',
       phone: 'Phone',
       invoicePrefix: 'Invoice Prefix',
+      googlePlayUuid: 'Google Play UUID',
+      appStoreUuid: 'App Store UUID',
       balance: 'Balance ({currency})',
       summary: {
         refund: 'Refunds',