From edd90cf0c0e93270b2caf9ac675481370c3b1acb Mon Sep 17 00:00:00 2001 From: a16i <151609257+a16i@users.noreply.github.com> Date: Tue, 28 Jul 2026 12:21:19 -0700 Subject: [PATCH 1/6] add generic hosted payment flow --- packages/sdk/src/common/api.test.ts | 99 ++++++-- packages/sdk/src/common/api.ts | 39 +++ packages/sdk/src/web/api/index.ts | 4 + packages/sdk/src/web/api/navTree.test.ts | 59 +++++ packages/sdk/src/web/api/navTree.ts | 77 ++++++ .../sdk/src/web/components/DaimoModal.tsx | 81 +++--- .../sdk/src/web/components/ExchangePage.tsx | 61 ----- .../components/ExternalPaymentFlowPage.tsx | 75 ++++++ .../web/components/ExternalPaymentPage.tsx | 19 ++ .../src/web/components/SelectAmountPage.tsx | 26 +- packages/sdk/src/web/hooks/locales/en.ts | 6 +- packages/sdk/src/web/hooks/locales/es.ts | 4 + packages/sdk/src/web/hooks/locales/ja.ts | 6 +- packages/sdk/src/web/hooks/locales/ko.ts | 6 +- packages/sdk/src/web/hooks/locales/pt.ts | 6 +- packages/sdk/src/web/hooks/locales/zh.ts | 6 +- packages/sdk/src/web/hooks/navEvent.ts | 11 +- packages/sdk/src/web/hooks/types.ts | 16 +- packages/sdk/src/web/hooks/useSessionNav.ts | 233 ++++++++++++------ 19 files changed, 614 insertions(+), 220 deletions(-) create mode 100644 packages/sdk/src/web/api/navTree.test.ts delete mode 100644 packages/sdk/src/web/components/ExchangePage.tsx create mode 100644 packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx diff --git a/packages/sdk/src/common/api.test.ts b/packages/sdk/src/common/api.test.ts index 79011aff..f13f4efe 100644 --- a/packages/sdk/src/common/api.test.ts +++ b/packages/sdk/src/common/api.test.ts @@ -3,22 +3,89 @@ import { describe, expect, test } from "vitest"; import { zCreatePaymentMethodRequest } from "./api.js"; describe("zCreatePaymentMethodRequest", () => { - test("accepts BinanceUSDC and BinanceUSDT exchange ids", () => { - for (const exchangeId of ["BinanceUSDC", "BinanceUSDT"] as const) { - expect( - zCreatePaymentMethodRequest.parse({ - clientSecret: "secret", - paymentMethod: { - type: "exchange", - exchangeId, - amountUsd: 10, + test("accepts canonical USD exchange requests", () => { + expect( + zCreatePaymentMethodRequest.parse({ + clientSecret: "secret", + paymentMethod: { + type: "exchange", + exchangeId: "Coinbase", + amountUsd: 10, + }, + }).paymentMethod, + ).toEqual({ + type: "exchange", + exchangeId: "Coinbase", + amountUsd: 10, + }); + }); + + test("accepts backend-defined hosted methods and source currencies", () => { + expect( + zCreatePaymentMethodRequest.parse({ + clientSecret: "secret", + paymentMethod: { + type: "hosted", + hostedPaymentMethodId: "FutureHostedMethod", + countryCode: "DE", + sourceAmount: { + units: "10.50", + currency: "EUR", + }, + }, + }).paymentMethod, + ).toEqual({ + type: "hosted", + hostedPaymentMethodId: "FutureHostedMethod", + countryCode: "DE", + sourceAmount: { + units: "10.50", + currency: "EUR", + }, + }); + }); + + test("rejects malformed source amounts without encoding provider policy", () => { + expect(() => + zCreatePaymentMethodRequest.parse({ + clientSecret: "secret", + paymentMethod: { + type: "hosted", + hostedPaymentMethodId: "FutureHostedMethod", + countryCode: "DE", + sourceAmount: { + units: "0", + currency: "EUR", + }, + }, + }), + ).toThrow(); + expect(() => + zCreatePaymentMethodRequest.parse({ + clientSecret: "secret", + paymentMethod: { + type: "hosted", + hostedPaymentMethodId: "FutureHostedMethod", + countryCode: "DE", + sourceAmount: { + units: "10.00", + currency: "eur", }, - }).paymentMethod, - ).toEqual({ - type: "exchange", - exchangeId, - amountUsd: 10, - }); - } + }, + }), + ).toThrow(); + }); + + test("keeps hosted methods out of the exchange enum", () => { + expect(() => + zCreatePaymentMethodRequest.parse({ + clientSecret: "secret", + paymentMethod: { + type: "exchange", + exchangeId: "Revolut", + amountUsd: 10, + }, + }), + ).toThrow(); }); }); diff --git a/packages/sdk/src/common/api.ts b/packages/sdk/src/common/api.ts index f6652fc7..34677d2b 100644 --- a/packages/sdk/src/common/api.ts +++ b/packages/sdk/src/common/api.ts @@ -6,6 +6,10 @@ import { zAddress, zSolanaAddress } from "./primitives.js"; import type { SessionPublicInfo } from "./session.js"; const zPlatform = z.enum(["ios", "android", "other", "desktop", "mobile"]); +const zPositiveDecimalUnits = z + .string() + .max(100) + .regex(/^(?:[1-9]\d*(?:\.\d+)?|0\.\d*[1-9]\d*)$/); export const zExchangeId = z.enum([ "Coinbase", @@ -41,6 +45,18 @@ export const zCreatePaymentMethodRequest = z.object({ amountUsd: z.number().positive(), platform: zPlatform.optional(), }), + z.object({ + type: z.literal("hosted"), + /** Opaque method ID supplied by the backend navigation tree. */ + hostedPaymentMethodId: z.string().min(1), + /** ISO-3166 alpha-2 country selected in the backend navigation tree. */ + countryCode: z.string().regex(/^[A-Z]{2}$/), + sourceAmount: z.object({ + units: zPositiveDecimalUnits, + currency: z.string().regex(/^[A-Z]{3}$/), + }), + platform: zPlatform.optional(), + }), z.object({ type: z.literal("stripe"), amountUsd: z.number().positive(), @@ -121,6 +137,17 @@ export type CreatePaymentMethodResponse = { /** Invoice expiry time (unix seconds). Present for Lightning invoices. */ expiresAt?: number; }; + /** Hosted-payment details, present for a generic external handoff. */ + hosted?: { + /** URL where the user completes the hosted payment. */ + url: string; + /** Message to display while waiting for the payment. */ + waitingMessage: string; + /** Hosted link expiry time (unix seconds), when supplied by the backend. */ + expiresAt?: number; + /** Provider-neutral estimate for quoted hosted payments. */ + quote?: HostedPaymentQuote; + }; /** Fiat payment details, present when payment method is fiat. */ fiat?: { /** Hosted URL where the user completes KYC and the selected fiat flow. */ @@ -143,6 +170,18 @@ export type CreatePaymentMethodResponse = { }; }; +export type HostedPaymentQuote = { + sourceAmountUnits: string; + sourceCurrency: string; + estimatedDestinationUnits: string; + destinationCurrency: string; + fees: { + kind: "service" | "network" | "partner"; + amountUnits: string; + currency: string; + }[]; +}; + export type CheckSessionResponse = { /** Current session state. */ session: SessionPublicInfo; diff --git a/packages/sdk/src/web/api/index.ts b/packages/sdk/src/web/api/index.ts index b8237518..9cfd39f0 100644 --- a/packages/sdk/src/web/api/index.ts +++ b/packages/sdk/src/web/api/index.ts @@ -10,6 +10,9 @@ export type { NavNodeDeeplink, NavNodeDepositAddress, NavNodeExchange, + NavExternalPaymentNode, + NavExternalHandoff, + NavNodeHostedPayment, NavNodeFiat, NavNodeKycRequirement, NavNodeKycRequirementDisplayItem, @@ -17,6 +20,7 @@ export type { NavNodeKycRequirementItem, NavNodeKycRequirementKind, NavNodeTronDeposit, + NavSourceAmount, SessionNavInfo, SessionWithNav, } from "./navTree.js"; diff --git a/packages/sdk/src/web/api/navTree.test.ts b/packages/sdk/src/web/api/navTree.test.ts new file mode 100644 index 00000000..fa7ea476 --- /dev/null +++ b/packages/sdk/src/web/api/navTree.test.ts @@ -0,0 +1,59 @@ +import { describe, expect, test } from "vitest"; + +import { + getNavExternalHandoff, + getNavSourceAmount, + type NavNodeExchange, + type NavNodeHostedPayment, +} from "./navTree.js"; + +describe("external payment nav policy", () => { + test("uses backend-provided amount and handoff descriptors", () => { + const node: NavNodeHostedPayment = { + type: "HostedPayment", + id: "HostedPayment-FutureHostedMethod", + title: "Future hosted method", + hostedPaymentMethodId: "FutureHostedMethod", + countryCode: "JP", + sourceAmount: { + currency: "JPY", + currencySymbol: "¥", + decimals: 0, + minimum: 100, + maximum: 10000, + }, + externalHandoff: { + desktopBehavior: "popup", + popupName: "future-hosted-method", + }, + }; + + expect(getNavSourceAmount(node)).toEqual(node.sourceAmount); + expect(getNavExternalHandoff(node)).toEqual(node.externalHandoff); + }); + + test("falls back to legacy USD nav fields without provider checks", () => { + const node: NavNodeExchange = { + type: "Exchange", + id: "Exchange-Coinbase", + title: "Coinbase", + exchangeId: "Coinbase", + requiredUsd: 10, + minimumUsd: 1, + maximumUsd: 100, + }; + + expect(getNavSourceAmount(node)).toEqual({ + currency: "USD", + currencySymbol: "$", + decimals: 2, + required: 10, + minimum: 1, + maximum: 100, + }); + expect(getNavExternalHandoff(node)).toEqual({ + desktopBehavior: "qr", + placeholderDensity: "short", + }); + }); +}); diff --git a/packages/sdk/src/web/api/navTree.ts b/packages/sdk/src/web/api/navTree.ts index 626fbb0c..ef25a6a4 100644 --- a/packages/sdk/src/web/api/navTree.ts +++ b/packages/sdk/src/web/api/navTree.ts @@ -89,23 +89,99 @@ export type NavNodeDeeplink = NavNodeCommon & { pageIcon?: string; }; +export type NavSourceAmount = { + /** ISO 4217 source currency selected by the backend. */ + currency: string; + /** Presentation symbol selected by the backend, for example "$" or "€". */ + currencySymbol: string; + /** Decimal places submitted to the backend. */ + decimals: number; + required?: number; + minimum: number; + maximum: number; +}; + +export type NavExternalHandoff = { + desktopBehavior: "popup" | "qr"; + popupName?: string; + placeholderDensity?: "short" | "medium" | "long"; +}; + export type NavNodeExchange = NavNodeCommon & { type: "Exchange"; exchangeId: ExchangeId; icon?: string; + /** Backend-owned amount and currency policy. Optional for old servers. */ + sourceAmount?: NavSourceAmount; + /** Backend-owned external handoff presentation. Optional for old servers. */ + externalHandoff?: NavExternalHandoff; + /** @deprecated Use sourceAmount.required. */ requiredUsd?: number; + /** @deprecated Use sourceAmount.minimum. */ minimumUsd: number; + /** @deprecated Use sourceAmount.maximum. */ maximumUsd: number; }; export type NavNodeCashApp = NavNodeCommon & { type: "CashApp"; icon?: string; + /** Backend-owned amount and currency policy. Optional for old servers. */ + sourceAmount?: NavSourceAmount; + /** Backend-owned external handoff presentation. Optional for old servers. */ + externalHandoff?: NavExternalHandoff; requiredUsd?: number; minimumUsd: number; maximumUsd: number; }; +/** + * Generic hosted redirect. The SDK renders the interaction without knowing + * which provider owns the method ID. + */ +export type NavNodeHostedPayment = NavNodeCommon & { + type: "HostedPayment"; + hostedPaymentMethodId: string; + /** ISO-3166 alpha-2 country to echo when initiating this hosted payment. */ + countryCode: string; + icon?: string; + sourceAmount: NavSourceAmount; + externalHandoff: NavExternalHandoff; +}; + +export type NavExternalPaymentNode = + | NavNodeExchange + | NavNodeCashApp + | NavNodeHostedPayment; + +/** Compatibility fallback for nav trees produced by pre-sourceAmount servers. */ +export function getNavSourceAmount( + node: NavExternalPaymentNode, +): NavSourceAmount { + if (node.type === "HostedPayment") return node.sourceAmount; + if (node.sourceAmount != null) return node.sourceAmount; + return { + currency: "USD", + currencySymbol: "$", + decimals: 2, + required: node.requiredUsd, + minimum: node.minimumUsd, + maximum: node.maximumUsd, + }; +} + +/** Compatibility fallback for nav trees produced by pre-handoff servers. */ +export function getNavExternalHandoff( + node: NavExternalPaymentNode, +): NavExternalHandoff { + if (node.type === "HostedPayment") return node.externalHandoff; + if (node.externalHandoff != null) return node.externalHandoff; + return { + desktopBehavior: "qr", + placeholderDensity: "short", + }; +} + export type NavNodeStripe = NavNodeCommon & { type: "Stripe"; icon?: string; @@ -144,6 +220,7 @@ export type NavNode = | NavNodeDeeplink | NavNodeExchange | NavNodeCashApp + | NavNodeHostedPayment | NavNodeStripe | NavNodeTronDeposit | NavNodeConnectedWallet diff --git a/packages/sdk/src/web/components/DaimoModal.tsx b/packages/sdk/src/web/components/DaimoModal.tsx index b4c26235..1471cdd9 100644 --- a/packages/sdk/src/web/components/DaimoModal.tsx +++ b/packages/sdk/src/web/components/DaimoModal.tsx @@ -16,14 +16,14 @@ import type { NavLocationOption, RecreateSessionWithNavResponse, } from "../api/index.js"; +import { getNavSourceAmount } from "../api/navTree.js"; import type { + NavExternalPaymentNode, NavNode, - NavNodeCashApp, NavNodeChooseOption, NavNodeConnectedWallet, NavNodeDeeplink, NavNodeDepositAddress, - NavNodeExchange, NavNodeStripe, NavNodeTronDeposit, SessionWithNav, @@ -64,7 +64,7 @@ import { ChooseWalletPage } from "./ChooseWalletPage.js"; import { ConfirmationPage } from "./ConfirmationPage.js"; import { EmbeddedContainer, ModalContainer } from "./containers.js"; import { DeeplinkPage } from "./DeeplinkPage.js"; -import { ExchangePage } from "./ExchangePage.js"; +import { ExternalPaymentFlowPage } from "./ExternalPaymentFlowPage.js"; import { ExpiredPage } from "./ExpiredPage.js"; import { AccountPaymentInstructionsPage } from "./account/AccountBankDetailsPage.js"; import { AccountInstitutionPickerPage } from "./account/AccountBankPickerPage.js"; @@ -105,8 +105,6 @@ import { QRCode } from "./QRCode.js"; import { WaitingDepositAddressPage } from "./WaitingDepositAddressPage.js"; import { WalletAmountPage } from "./WalletAmountPage.js"; -type ExchangeLikeNode = NavNodeExchange | NavNodeCashApp; - export type DaimoModalLocalizationProps = { /** Override country used to localize auto payment-method sessions. */ countryCode?: DaimoCountryCode; @@ -818,8 +816,8 @@ function renderEntry( return renderWaitingDeposit(entry, ctx); case "waiting-tron": return renderWaitingTron(entry, ctx); - case "exchange-page": - return renderExchangePage(entry, ctx); + case "external-payment": + return renderExternalPayment(entry, ctx); case "stripe-onramp": return renderStripeOnramp(entry, ctx); case "wallet-choose-chain": @@ -1101,8 +1099,8 @@ function renderSelectAmount( return ( ); } - if (entry.flowType === "exchange") { - const exchangeNode = node as NavNodeExchange; - return ( - - ); - } - if (entry.flowType === "cashapp") { - const cashAppNode = node as NavNodeCashApp; + if ( + entry.flowType === "exchange" || + entry.flowType === "cashapp" || + entry.flowType === "hosted" + ) { + if ( + node.type !== "Exchange" && + node.type !== "CashApp" && + node.type !== "HostedPayment" + ) { + return null; + } + const sourceAmount = getNavSourceAmount(node); return ( ); return ( - void; - onRetry?: () => void; - baseUrl: string; -}; - -export function ExchangePage({ - node, - platform, - exchangeUrl, - waitingMessage, - isLoading, - onBack, - baseUrl, -}: ExchangePageProps) { - const exchangeId = node.type === "CashApp" ? "CashApp" : node.exchangeId; - const desktopBehavior = - exchangeId === "Coinbase" || exchangeId === "MtPelerin" ? "popup" : "qr"; - const usesDesktopQR = isDesktop(platform) && desktopBehavior === "qr"; - - const isBinanceExchange = - exchangeId === "Binance" || - exchangeId === "BinanceUSDC" || - exchangeId === "BinanceUSDT"; - const placeholderDensity = isBinanceExchange - ? ("medium" as const) - : ("short" as const); - - return ( - - ); -} diff --git a/packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx b/packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx new file mode 100644 index 00000000..1622e537 --- /dev/null +++ b/packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx @@ -0,0 +1,75 @@ +import type { HostedPaymentQuote } from "../../common/api.js"; +import { getNavExternalHandoff } from "../api/navTree.js"; +import type { NavExternalPaymentNode } from "../api/navTree.js"; + +import { t } from "../hooks/locale.js"; +import { isDesktop, type DaimoPlatform } from "../platform.js"; +import { ExternalPaymentPage } from "./ExternalPaymentPage.js"; + +type ExternalPaymentFlowPageProps = { + node: NavExternalPaymentNode; + platform: DaimoPlatform; + paymentUrl?: string; + waitingMessage?: string; + expiresAt?: number; + quote?: HostedPaymentQuote; + isLoading?: boolean; + onBack: () => void; + onRetry?: () => void; + baseUrl: string; +}; + +export function ExternalPaymentFlowPage({ + node, + platform, + paymentUrl, + waitingMessage, + quote, + isLoading, + onBack, + baseUrl, +}: ExternalPaymentFlowPageProps) { + const handoff = getNavExternalHandoff(node); + const { desktopBehavior } = handoff; + const usesDesktopQR = isDesktop(platform) && desktopBehavior === "qr"; + + return ( + ({ + label: + fee.kind === "service" + ? t.serviceFee + : fee.kind === "network" + ? t.networkFee + : t.partnerFee, + value: `${fee.amountUnits} ${fee.currency}`, + })), + ] + } + /> + ); +} diff --git a/packages/sdk/src/web/components/ExternalPaymentPage.tsx b/packages/sdk/src/web/components/ExternalPaymentPage.tsx index 4f2ae847..2b491014 100644 --- a/packages/sdk/src/web/components/ExternalPaymentPage.tsx +++ b/packages/sdk/src/web/components/ExternalPaymentPage.tsx @@ -29,6 +29,7 @@ type ExternalPaymentPageProps = { popupName?: string; popupFeatures?: string; placeholderDensity?: QRDensity; + details?: { label: string; value: string }[]; /** Called with the opened window (null when blocked by the browser). */ onOpened?: (popup: Window | null) => void; }; @@ -50,6 +51,7 @@ export function ExternalPaymentPage({ popupName, popupFeatures = DEFAULT_POPUP_FEATURES, placeholderDensity, + details, onOpened, }: ExternalPaymentPageProps) { const desktop = isDesktop(platform); @@ -111,6 +113,23 @@ export function ExternalPaymentPage({ {message}

)} + {details != null && details.length > 0 && ( +
+ {details.map((detail) => ( +
+
+ {detail.label} +
+
+ {detail.value} +
+
+ ))} +
+ )} {!showQR && ( void; - onContinue: (amountUsd: number) => void; + onContinue: (amount: number) => void; isLoading?: boolean; error?: string | null; baseUrl: string; @@ -30,8 +32,9 @@ type SelectAmountPageProps = { export function SelectAmountPage({ node, - minimumUsd, - maximumUsd, + minimum, + maximum, + currencySymbol, tokenSuffix, chainId, onBack, @@ -40,11 +43,7 @@ export function SelectAmountPage({ error, baseUrl, }: SelectAmountPageProps) { - const { - amount: amountUsd, - isValid, - handleChange, - } = useAmountInput(minimumUsd, maximumUsd); + const { amount, isValid, handleChange } = useAmountInput(minimum, maximum); // Create pseudo-token for display if tokenSuffix is USDC or USDT and chainId is provided const selectedToken = @@ -95,8 +94,9 @@ export function SelectAmountPage({ {/* Amount input */}
@@ -110,7 +110,7 @@ export function SelectAmountPage({ )} isValid && !isLoading && onContinue(amountUsd)} + onClick={() => isValid && !isLoading && onContinue(amount)} disabled={!isValid || isLoading} className="daimo-max-w-none" > diff --git a/packages/sdk/src/web/hooks/locales/en.ts b/packages/sdk/src/web/hooks/locales/en.ts index 0f94c98f..69b96005 100644 --- a/packages/sdk/src/web/hooks/locales/en.ts +++ b/packages/sdk/src/web/hooks/locales/en.ts @@ -23,11 +23,15 @@ export const en = { mobileWallets: "Mobile Wallets", scanWithPhone: "Scan with your phone to open wallet", - // ExchangePage + // ExternalPaymentFlowPage continueTo: "Continue to", toCompleteYourDeposit: "to complete your deposit", open: "Open", refreshInvoice: "Refresh", + estimatedOutput: "Estimated output", + serviceFee: "Service fee", + networkFee: "Network fee", + partnerFee: "Partner fee", // SelectAmountPage selectAmount: "Select Amount", diff --git a/packages/sdk/src/web/hooks/locales/es.ts b/packages/sdk/src/web/hooks/locales/es.ts index 3837869b..25748cd1 100644 --- a/packages/sdk/src/web/hooks/locales/es.ts +++ b/packages/sdk/src/web/hooks/locales/es.ts @@ -23,6 +23,10 @@ export const es: typeof en = { toCompleteYourDeposit: "para completar tu depósito", open: "Abrir", refreshInvoice: "Actualizar", + estimatedOutput: "Importe estimado", + serviceFee: "Comisión de servicio", + networkFee: "Comisión de red", + partnerFee: "Comisión del socio", selectAmount: "Seleccionar monto", loading: "Cargando", continue: "Continuar", diff --git a/packages/sdk/src/web/hooks/locales/ja.ts b/packages/sdk/src/web/hooks/locales/ja.ts index a7f7ae7d..707e407e 100644 --- a/packages/sdk/src/web/hooks/locales/ja.ts +++ b/packages/sdk/src/web/hooks/locales/ja.ts @@ -25,11 +25,15 @@ export const ja: typeof en = { mobileWallets: "モバイルウォレット", scanWithPhone: "スマートフォンでスキャンしてウォレットを開く", - // ExchangePage + // ExternalPaymentFlowPage continueTo: "", toCompleteYourDeposit: "で入金を完了してください", open: "開く", refreshInvoice: "更新", + estimatedOutput: "受取額（見込み）", + serviceFee: "サービス手数料", + networkFee: "ネットワーク手数料", + partnerFee: "パートナー手数料", // SelectAmountPage selectAmount: "金額を選択", diff --git a/packages/sdk/src/web/hooks/locales/ko.ts b/packages/sdk/src/web/hooks/locales/ko.ts index af802543..d0fe0f76 100644 --- a/packages/sdk/src/web/hooks/locales/ko.ts +++ b/packages/sdk/src/web/hooks/locales/ko.ts @@ -25,11 +25,15 @@ export const ko: typeof en = { mobileWallets: "모바일 지갑", scanWithPhone: "휴대폰으로 스캔하여 지갑 열기", - // ExchangePage + // ExternalPaymentFlowPage continueTo: "", toCompleteYourDeposit: "에서 입금을 완료하세요", open: "열기", refreshInvoice: "새로고침", + estimatedOutput: "예상 수령액", + serviceFee: "서비스 수수료", + networkFee: "네트워크 수수료", + partnerFee: "파트너 수수료", // SelectAmountPage selectAmount: "금액 선택", diff --git a/packages/sdk/src/web/hooks/locales/pt.ts b/packages/sdk/src/web/hooks/locales/pt.ts index 522861fd..df37f1a9 100644 --- a/packages/sdk/src/web/hooks/locales/pt.ts +++ b/packages/sdk/src/web/hooks/locales/pt.ts @@ -25,11 +25,15 @@ export const pt: typeof en = { mobileWallets: "Carteiras móveis", scanWithPhone: "Escaneie com seu telefone para abrir a carteira", - // ExchangePage + // ExternalPaymentFlowPage continueTo: "Continuar para", toCompleteYourDeposit: "para concluir seu depósito", open: "Abrir", refreshInvoice: "Atualizar", + estimatedOutput: "Valor estimado", + serviceFee: "Taxa de serviço", + networkFee: "Taxa de rede", + partnerFee: "Taxa do parceiro", // SelectAmountPage selectAmount: "Selecionar valor", diff --git a/packages/sdk/src/web/hooks/locales/zh.ts b/packages/sdk/src/web/hooks/locales/zh.ts index 8e5a2a9d..89fd0bc8 100644 --- a/packages/sdk/src/web/hooks/locales/zh.ts +++ b/packages/sdk/src/web/hooks/locales/zh.ts @@ -25,11 +25,15 @@ export const zh: typeof en = { mobileWallets: "移动钱包", scanWithPhone: "用手机扫码打开钱包", - // ExchangePage + // ExternalPaymentFlowPage continueTo: "前往", toCompleteYourDeposit: "以完成充值", open: "打开", refreshInvoice: "刷新", + estimatedOutput: "预计到账金额", + serviceFee: "服务费", + networkFee: "网络费", + partnerFee: "合作伙伴费用", // SelectAmountPage selectAmount: "选择金额", diff --git a/packages/sdk/src/web/hooks/navEvent.ts b/packages/sdk/src/web/hooks/navEvent.ts index 20178ff3..d2f224a9 100644 --- a/packages/sdk/src/web/hooks/navEvent.ts +++ b/packages/sdk/src/web/hooks/navEvent.ts @@ -17,11 +17,16 @@ export type NavEventAction = | { action: "nav_select"; targetNodeId: string; targetNodeType: NavNodeType } | { action: "nav_back" } | { action: "nav_deeplink"; url: string } - | { action: "flow_amount_continue"; amountUsd: number } + | ({ + action: "flow_amount_continue"; + } & ( + | { amountUsd: number } + | { sourceAmountUnits: string; sourceCurrency: string } + )) | { action: "flow_refresh" } | { - action: "flow_exchange_url"; - exchangeId: string; + action: "flow_external_payment"; + paymentMethodId: string; success: boolean; url?: string; error?: string; diff --git a/packages/sdk/src/web/hooks/types.ts b/packages/sdk/src/web/hooks/types.ts index 39b9af9b..e38de008 100644 --- a/packages/sdk/src/web/hooks/types.ts +++ b/packages/sdk/src/web/hooks/types.ts @@ -4,6 +4,7 @@ import type { AccountRail, DepositPaymentInteraction, } from "../../common/account.js"; +import type { HostedPaymentQuote } from "../../common/api.js"; import type { NavNode, SessionWithNav } from "../api/navTree.js"; import type { WalletPaymentOption } from "../api/walletTypes.js"; @@ -26,7 +27,13 @@ export type NavEntry = | { type: "select-amount"; nodeId: string; - flowType: "deposit" | "tron" | "exchange" | "cashapp" | "stripe"; + flowType: + | "deposit" + | "tron" + | "exchange" + | "cashapp" + | "hosted" + | "stripe"; autoNav?: boolean; } | { @@ -49,12 +56,13 @@ export type NavEntry = autoNav?: boolean; } | { - type: "exchange-page"; + type: "external-payment"; nodeId: string; - amountUsd: number; - exchangeUrl?: string; + sourceAmount: number; + paymentUrl?: string; waitingMessage?: string; expiresAt?: number; + quote?: HostedPaymentQuote; error?: string; autoNav?: boolean; } diff --git a/packages/sdk/src/web/hooks/useSessionNav.ts b/packages/sdk/src/web/hooks/useSessionNav.ts index ba8c61ee..d22a7cd6 100644 --- a/packages/sdk/src/web/hooks/useSessionNav.ts +++ b/packages/sdk/src/web/hooks/useSessionNav.ts @@ -11,17 +11,20 @@ import type { AccountDepositStatus, AccountRail, } from "../../common/account.js"; -import type { ExchangeId } from "../../common/api.js"; +import type { + CreatePaymentMethodRequest, + ExchangeId, +} from "../../common/api.js"; import type { AccountAuthConfig, DaimoCountryCode, RecreateSessionWithNavResponse, } from "../api/index.js"; +import { getNavSourceAmount } from "../api/navTree.js"; import type { + NavExternalPaymentNode, NavNode, - NavNodeCashApp, NavNodeChooseOption, - NavNodeExchange, NavNodeFiat, NavNodeStripe, NavNodeTronDeposit, @@ -54,7 +57,6 @@ import type { InjectedWallet } from "./useInjectedWallets.js"; import { isUserRejection, type WalletFlowResult } from "./useWalletFlow.js"; type NodeContext = { nodeId: string | null; nodeType: NavNodeType | null }; -type ExchangeNode = NavNodeExchange | NavNodeCashApp; type SessionNavResult = { stack: NavEntry[]; @@ -65,7 +67,7 @@ type SessionNavResult = { handleNavigate: (nodeId: string, options?: { autoNav?: boolean }) => void; handleBack: () => void; handleReset: () => void; - handleAmountContinue: (amountUsd: number) => void; + handleAmountContinue: (amount: number) => void; handleRetry: () => void; handleRefresh: () => Promise; handleAccountSessionRecreate: (depositAmount: string) => Promise; @@ -86,8 +88,14 @@ type SessionNavResult = { handleAccountLogout: () => void; }; -function isExchangeNode(node: NavNode | null): node is ExchangeNode { - return node?.type === "Exchange" || node?.type === "CashApp"; +function isExternalPaymentNode( + node: NavNode | null, +): node is NavExternalPaymentNode { + return ( + node?.type === "Exchange" || + node?.type === "CashApp" || + node?.type === "HostedPayment" + ); } function isStripeNode(node: NavNode | null): node is NavNodeStripe { @@ -98,14 +106,34 @@ function isTrustTronNode(node: NavNode | null): node is NavNodeTronDeposit { return node?.type === "TronDeposit" && node.id === "Trust-Tron"; } -function getExchangeSelection(node: ExchangeNode): { - exchangeId: ExchangeId; - nodeType: "Exchange" | "CashApp"; -} { +function getExternalPaymentSelection(node: NavExternalPaymentNode): + | { + kind: "exchange"; + exchangeId: ExchangeId; + nodeType: "Exchange" | "CashApp"; + } + | { + kind: "hosted"; + hostedPaymentMethodId: string; + countryCode: string; + nodeType: "HostedPayment"; + } { + if (node.type === "HostedPayment") { + return { + kind: "hosted", + hostedPaymentMethodId: node.hostedPaymentMethodId, + countryCode: node.countryCode, + nodeType: "HostedPayment", + }; + } if (node.type === "CashApp") { - return { exchangeId: "CashApp", nodeType: "CashApp" }; + return { kind: "exchange", exchangeId: "CashApp", nodeType: "CashApp" }; } - return { exchangeId: node.exchangeId, nodeType: "Exchange" }; + return { + kind: "exchange", + exchangeId: node.exchangeId, + nodeType: "Exchange", + }; } function replacePendingAccountEntry( @@ -265,65 +293,91 @@ export function useSessionNav( ], ); - const fetchExchangeUrl = useCallback( - async ( - nodeId: string, - exchangeId: ExchangeId, - amountUsd: number, - nodeType: "Exchange" | "CashApp", - ) => { + const fetchExternalPayment = useCallback( + async (nodeId: string, node: NavExternalPaymentNode, amount: number) => { + const selection = getExternalPaymentSelection(node); + const sourceAmount = getNavSourceAmount(node); + const paymentMethod: CreatePaymentMethodRequest["paymentMethod"] = + selection.kind === "hosted" + ? { + type: "hosted", + hostedPaymentMethodId: selection.hostedPaymentMethodId, + countryCode: selection.countryCode, + sourceAmount: { + units: amount.toFixed(sourceAmount.decimals), + currency: sourceAmount.currency, + }, + platform: effectivePlatform, + } + : { + type: "exchange", + exchangeId: selection.exchangeId, + amountUsd: amount, + platform: effectivePlatform, + }; try { const result = await client.sessions.paymentMethods.create( session.sessionId, { clientSecret: session.clientSecret, - paymentMethod: { - type: "exchange", - exchangeId, - amountUsd, - platform: effectivePlatform, - }, + paymentMethod, }, ); - if (!result.exchange) return; + const payment = + selection.kind === "hosted" ? result.hosted : result.exchange; + if (payment == null) { + throw new Error("external payment details not returned"); + } + const paymentMethodId = + selection.kind === "hosted" + ? selection.hostedPaymentMethodId + : selection.exchangeId; logNavEvent(session.sessionId, session.clientSecret, { nodeId, - nodeType, - action: "flow_exchange_url", - exchangeId, + nodeType: selection.nodeType, + action: "flow_external_payment", + paymentMethodId, success: true, - url: result.exchange.url, + url: payment.url, }); setStack((prev) => { const top = prev[prev.length - 1]; - if (top?.type !== "exchange-page" || top.nodeId !== nodeId) + if (top?.type !== "external-payment" || top.nodeId !== nodeId) return prev; return [ ...prev.slice(0, -1), { ...top, - exchangeUrl: result.exchange!.url, - waitingMessage: result.exchange!.waitingMessage, - expiresAt: result.exchange!.expiresAt, + paymentUrl: payment.url, + waitingMessage: payment.waitingMessage, + expiresAt: payment.expiresAt, + quote: + selection.kind === "hosted" ? result.hosted?.quote : undefined, error: undefined, }, ]; }); } catch (error) { - console.error("failed to get exchange url:", error); + console.error("failed to create external payment:", error); const errorMsg = - error instanceof Error ? error.message : "failed to get exchange url"; + error instanceof Error + ? error.message + : "failed to create external payment"; + const paymentMethodId = + selection.kind === "hosted" + ? selection.hostedPaymentMethodId + : selection.exchangeId; logNavEvent(session.sessionId, session.clientSecret, { nodeId, - nodeType, - action: "flow_exchange_url", - exchangeId, + nodeType: selection.nodeType, + action: "flow_external_payment", + paymentMethodId, success: false, error: errorMsg, }); setStack((prev) => { const top = prev[prev.length - 1]; - if (top?.type !== "exchange-page" || top.nodeId !== nodeId) + if (top?.type !== "external-payment" || top.nodeId !== nodeId) return prev; return [...prev.slice(0, -1), { ...top, error: errorMsg }]; }); @@ -712,15 +766,19 @@ export function useSessionNav( return; } - if (isExchangeNode(targetNode)) { - const { exchangeId, nodeType } = getExchangeSelection(targetNode); - const requiredUsd = targetNode.requiredUsd ?? 0; - if (requiredUsd > 0) { + if (isExternalPaymentNode(targetNode)) { + const required = getNavSourceAmount(targetNode).required ?? 0; + if (required > 0) { setStack((prev) => [ ...prev, - { type: "exchange-page", nodeId, amountUsd: requiredUsd, autoNav }, + { + type: "external-payment", + nodeId, + sourceAmount: required, + autoNav, + }, ]); - fetchExchangeUrl(nodeId, exchangeId, requiredUsd, nodeType); + fetchExternalPayment(nodeId, targetNode, required); return; } setStack((prev) => [ @@ -728,7 +786,12 @@ export function useSessionNav( { type: "select-amount", nodeId, - flowType: targetNode.type === "CashApp" ? "cashapp" : "exchange", + flowType: + targetNode.type === "CashApp" + ? "cashapp" + : targetNode.type === "HostedPayment" + ? "hosted" + : "exchange", autoNav, }, ]); @@ -766,7 +829,7 @@ export function useSessionNav( session.sessionId, getNodeCtx, fetchTronAddress, - fetchExchangeUrl, + fetchExternalPayment, fetchStripeOnramp, handleAccountNavigate, enableFiatPopup, @@ -813,9 +876,22 @@ export function useSessionNav( // ─── Flow handlers ────────────────────────────────────────────────────── const handleAmountContinue = useCallback( - (amountUsd: number) => { + (amount: number) => { if (!topEntry || topEntry.type !== "select-amount") return; const { nodeId, flowType } = topEntry; + const selectedNode = findNode(nodeId, session.navTree); + const amountContext = + (flowType === "exchange" || + flowType === "cashapp" || + flowType === "hosted") && + isExternalPaymentNode(selectedNode) + ? { + sourceAmountUnits: amount.toFixed( + getNavSourceAmount(selectedNode).decimals, + ), + sourceCurrency: getNavSourceAmount(selectedNode).currency, + } + : { amountUsd: amount }; logNavEvent(session.sessionId, session.clientSecret, { nodeId, @@ -826,41 +902,44 @@ export function useSessionNav( ? "TronDeposit" : flowType === "cashapp" ? "CashApp" - : flowType === "stripe" - ? "Stripe" - : "Exchange", + : flowType === "hosted" + ? "HostedPayment" + : flowType === "stripe" + ? "Stripe" + : "Exchange", action: "flow_amount_continue", - amountUsd, + ...amountContext, }); if (flowType === "deposit") { setStack((prev) => [ ...prev, - { type: "waiting-deposit", nodeId, amountUsd }, + { type: "waiting-deposit", nodeId, amountUsd: amount }, ]); } else if (flowType === "tron") { setStack((prev) => [ ...prev, - { type: "waiting-tron", nodeId, amountUsd }, + { type: "waiting-tron", nodeId, amountUsd: amount }, ]); - fetchTronAddress(nodeId, amountUsd); - } else if (flowType === "exchange" || flowType === "cashapp") { - const node = findNode(nodeId, session.navTree); - if (!isExchangeNode(node)) return; - const { exchangeId, nodeType } = getExchangeSelection(node); + fetchTronAddress(nodeId, amount); + } else if ( + flowType === "exchange" || + flowType === "cashapp" || + flowType === "hosted" + ) { + if (!isExternalPaymentNode(selectedNode)) return; setStack((prev) => [ ...prev, - { type: "exchange-page", nodeId, amountUsd }, + { type: "external-payment", nodeId, sourceAmount: amount }, ]); - fetchExchangeUrl(nodeId, exchangeId, amountUsd, nodeType); + fetchExternalPayment(nodeId, selectedNode, amount); } else if (flowType === "stripe") { - const node = findNode(nodeId, session.navTree); - if (!isStripeNode(node)) return; + if (!isStripeNode(selectedNode)) return; setStack((prev) => [ ...prev, - { type: "stripe-onramp", nodeId, amountUsd }, + { type: "stripe-onramp", nodeId, amountUsd: amount }, ]); - fetchStripeOnramp(nodeId, amountUsd); + fetchStripeOnramp(nodeId, amount); } }, [ @@ -868,7 +947,7 @@ export function useSessionNav( session.sessionId, session.navTree, fetchTronAddress, - fetchExchangeUrl, + fetchExternalPayment, fetchStripeOnramp, ], ); @@ -940,29 +1019,23 @@ export function useSessionNav( return; } - if (topEntry.type === "exchange-page") { + if (topEntry.type === "external-payment") { const node = findNode(topEntry.nodeId, session.navTree); - if (!isExchangeNode(node)) return; - const { exchangeId, nodeType } = getExchangeSelection(node); + if (!isExternalPaymentNode(node)) return; setStack((prev) => { const top = prev[prev.length - 1]; - if (top?.type !== "exchange-page") return prev; + if (top?.type !== "external-payment") return prev; return [ ...prev.slice(0, -1), { ...top, - exchangeUrl: undefined, + paymentUrl: undefined, expiresAt: undefined, error: undefined, }, ]; }); - fetchExchangeUrl( - topEntry.nodeId, - exchangeId, - topEntry.amountUsd, - nodeType, - ); + fetchExternalPayment(topEntry.nodeId, node, topEntry.sourceAmount); return; } @@ -987,7 +1060,7 @@ export function useSessionNav( topEntry, session.navTree, fetchTronAddress, - fetchExchangeUrl, + fetchExternalPayment, fetchStripeOnramp, doWalletSend, ]); From 755877b7b306cc6c18496510fd581b3cae8ed525 Mon Sep 17 00:00:00 2001 From: a16i <151609257+a16i@users.noreply.github.com> Date: Tue, 28 Jul 2026 12:37:34 -0700 Subject: [PATCH 2/6] unify external payment abstractions --- packages/sdk/src/common/api.ts | 31 +++++++++++-------- packages/sdk/src/web/api/navTree.test.ts | 14 +++++++++ packages/sdk/src/web/api/navTree.ts | 16 ++++++++++ .../sdk/src/web/components/DaimoModal.tsx | 1 + .../components/ExternalPaymentFlowPage.tsx | 4 +-- .../src/web/components/SelectAmountPage.tsx | 4 +++ packages/sdk/src/web/components/shared.tsx | 15 ++++++--- packages/sdk/src/web/hooks/types.ts | 4 +-- packages/sdk/src/web/hooks/useSessionNav.ts | 29 +++++++++++------ 9 files changed, 86 insertions(+), 32 deletions(-) diff --git a/packages/sdk/src/common/api.ts b/packages/sdk/src/common/api.ts index 34677d2b..be6797d2 100644 --- a/packages/sdk/src/common/api.ts +++ b/packages/sdk/src/common/api.ts @@ -128,7 +128,10 @@ export type CreatePaymentMethodResponse = { /** Base64-encoded Solana transaction for the user to sign. */ serializedTx: string; }; - /** Exchange-specific payment details, present when payment method is Exchange. */ + /** + * @deprecated Use externalPayment. Retained for compatibility with servers + * and clients that predate the provider-neutral external payment contract. + */ exchange?: { /** Deeplink URL for the exchange. */ url: string; @@ -137,17 +140,8 @@ export type CreatePaymentMethodResponse = { /** Invoice expiry time (unix seconds). Present for Lightning invoices. */ expiresAt?: number; }; - /** Hosted-payment details, present for a generic external handoff. */ - hosted?: { - /** URL where the user completes the hosted payment. */ - url: string; - /** Message to display while waiting for the payment. */ - waitingMessage: string; - /** Hosted link expiry time (unix seconds), when supplied by the backend. */ - expiresAt?: number; - /** Provider-neutral estimate for quoted hosted payments. */ - quote?: HostedPaymentQuote; - }; + /** Provider-neutral details for any external payment handoff. */ + externalPayment?: ExternalPayment; /** Fiat payment details, present when payment method is fiat. */ fiat?: { /** Hosted URL where the user completes KYC and the selected fiat flow. */ @@ -170,7 +164,18 @@ export type CreatePaymentMethodResponse = { }; }; -export type HostedPaymentQuote = { +export type ExternalPayment = { + /** URL where the user completes the external payment. */ + url: string; + /** Message to display while waiting for the payment. */ + waitingMessage: string; + /** Link expiry time (unix seconds), when supplied by the backend. */ + expiresAt?: number; + /** Optional estimate for quoted external payments. */ + quote?: ExternalPaymentQuote; +}; + +export type ExternalPaymentQuote = { sourceAmountUnits: string; sourceCurrency: string; estimatedDestinationUnits: string; diff --git a/packages/sdk/src/web/api/navTree.test.ts b/packages/sdk/src/web/api/navTree.test.ts index fa7ea476..1ad730fd 100644 --- a/packages/sdk/src/web/api/navTree.test.ts +++ b/packages/sdk/src/web/api/navTree.test.ts @@ -1,6 +1,7 @@ import { describe, expect, test } from "vitest"; import { + formatNavSourceAmountUnits, getNavExternalHandoff, getNavSourceAmount, type NavNodeExchange, @@ -30,6 +31,19 @@ describe("external payment nav policy", () => { expect(getNavSourceAmount(node)).toEqual(node.sourceAmount); expect(getNavExternalHandoff(node)).toEqual(node.externalHandoff); + expect(formatNavSourceAmountUnits(125, node.sourceAmount)).toBe("125"); + }); + + test("rejects invalid backend amount precision", () => { + expect(() => + formatNavSourceAmountUnits(10, { + currency: "EUR", + currencySymbol: "€", + decimals: 21, + minimum: 1, + maximum: 100, + }), + ).toThrow("invalid external payment amount"); }); test("falls back to legacy USD nav fields without provider checks", () => { diff --git a/packages/sdk/src/web/api/navTree.ts b/packages/sdk/src/web/api/navTree.ts index ef25a6a4..b7d6b96a 100644 --- a/packages/sdk/src/web/api/navTree.ts +++ b/packages/sdk/src/web/api/navTree.ts @@ -182,6 +182,22 @@ export function getNavExternalHandoff( }; } +/** Format an amount exactly as required by the backend-owned source policy. */ +export function formatNavSourceAmountUnits( + amount: number, + sourceAmount: NavSourceAmount, +): string { + if ( + !Number.isFinite(amount) || + !Number.isInteger(sourceAmount.decimals) || + sourceAmount.decimals < 0 || + sourceAmount.decimals > 20 + ) { + throw new Error("invalid external payment amount"); + } + return amount.toFixed(sourceAmount.decimals); +} + export type NavNodeStripe = NavNodeCommon & { type: "Stripe"; icon?: string; diff --git a/packages/sdk/src/web/components/DaimoModal.tsx b/packages/sdk/src/web/components/DaimoModal.tsx index 1471cdd9..168d8f30 100644 --- a/packages/sdk/src/web/components/DaimoModal.tsx +++ b/packages/sdk/src/web/components/DaimoModal.tsx @@ -1142,6 +1142,7 @@ function renderSelectAmount( node={{ icon: node.icon, title: node.title }} minimum={sourceAmount.minimum} maximum={sourceAmount.maximum} + decimals={sourceAmount.decimals} currencySymbol={sourceAmount.currencySymbol} onBack={ctx.canGoBack ? ctx.onBack : undefined} onContinue={ctx.onAmountContinue} diff --git a/packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx b/packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx index 1622e537..527bedd0 100644 --- a/packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx +++ b/packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx @@ -1,4 +1,4 @@ -import type { HostedPaymentQuote } from "../../common/api.js"; +import type { ExternalPaymentQuote } from "../../common/api.js"; import { getNavExternalHandoff } from "../api/navTree.js"; import type { NavExternalPaymentNode } from "../api/navTree.js"; @@ -12,7 +12,7 @@ type ExternalPaymentFlowPageProps = { paymentUrl?: string; waitingMessage?: string; expiresAt?: number; - quote?: HostedPaymentQuote; + quote?: ExternalPaymentQuote; isLoading?: boolean; onBack: () => void; onRetry?: () => void; diff --git a/packages/sdk/src/web/components/SelectAmountPage.tsx b/packages/sdk/src/web/components/SelectAmountPage.tsx index 457e02cf..4278c6b4 100644 --- a/packages/sdk/src/web/components/SelectAmountPage.tsx +++ b/packages/sdk/src/web/components/SelectAmountPage.tsx @@ -16,6 +16,8 @@ type SelectAmountPageProps = { node: NavNodeDepositAddress | { icon?: string; title: string }; minimum: number; maximum: number; + /** Maximum source-currency decimal places. Defaults to 2. */ + decimals?: number; /** Fiat currency symbol shown before the amount. Defaults to USD. */ currencySymbol?: string; /** Token suffix for display (e.g., "USDC", "USDT") */ @@ -34,6 +36,7 @@ export function SelectAmountPage({ node, minimum, maximum, + decimals, currencySymbol, tokenSuffix, chainId, @@ -96,6 +99,7 @@ export function SelectAmountPage({ ) => { const value = parseDisplayAmount(e.target.value); - if (!isValidAmountInput(value, 2)) return; + if (!isValidAmountInput(value, decimals)) return; setInputValue(value); const newAmount = parseFloat(value) || 0; @@ -164,18 +167,20 @@ export function AmountInput({ }; const displayValue = formatAmountInput(inputValue); - const placeholder = formatAmountInput("0.00"); + const placeholder = formatAmountInput( + decimals === 0 ? "0" : `0.${"0".repeat(decimals)}`, + ); const inputWidth = displayValue.length === 0 ? "3.55ch" : `${Math.min(displayValue.length - (displayValue.match(/\./g) || []).length * 0.55, 12)}ch`; const label = showMinWarning - ? `${t.minimum} ${currencySymbol}${formatFixedAmount(minimum)}` + ? `${t.minimum} ${currencySymbol}${formatFixedAmount(minimum, decimals)}` : showMaxWarning - ? `${t.maximum} ${currencySymbol}${formatFixedAmount(maximum)}` + ? `${t.maximum} ${currencySymbol}${formatFixedAmount(maximum, decimals)}` : (defaultLabel ?? - `${t.minimum} ${currencySymbol}${formatFixedAmount(minimum)}`); + `${t.minimum} ${currencySymbol}${formatFixedAmount(minimum, decimals)}`); const labelClass = showMinWarning || showMaxWarning diff --git a/packages/sdk/src/web/hooks/types.ts b/packages/sdk/src/web/hooks/types.ts index e38de008..1cd477d6 100644 --- a/packages/sdk/src/web/hooks/types.ts +++ b/packages/sdk/src/web/hooks/types.ts @@ -4,7 +4,7 @@ import type { AccountRail, DepositPaymentInteraction, } from "../../common/account.js"; -import type { HostedPaymentQuote } from "../../common/api.js"; +import type { ExternalPaymentQuote } from "../../common/api.js"; import type { NavNode, SessionWithNav } from "../api/navTree.js"; import type { WalletPaymentOption } from "../api/walletTypes.js"; @@ -62,7 +62,7 @@ export type NavEntry = paymentUrl?: string; waitingMessage?: string; expiresAt?: number; - quote?: HostedPaymentQuote; + quote?: ExternalPaymentQuote; error?: string; autoNav?: boolean; } diff --git a/packages/sdk/src/web/hooks/useSessionNav.ts b/packages/sdk/src/web/hooks/useSessionNav.ts index d22a7cd6..06d78437 100644 --- a/packages/sdk/src/web/hooks/useSessionNav.ts +++ b/packages/sdk/src/web/hooks/useSessionNav.ts @@ -20,7 +20,10 @@ import type { DaimoCountryCode, RecreateSessionWithNavResponse, } from "../api/index.js"; -import { getNavSourceAmount } from "../api/navTree.js"; +import { + formatNavSourceAmountUnits, + getNavSourceAmount, +} from "../api/navTree.js"; import type { NavExternalPaymentNode, NavNode, @@ -297,6 +300,10 @@ export function useSessionNav( async (nodeId: string, node: NavExternalPaymentNode, amount: number) => { const selection = getExternalPaymentSelection(node); const sourceAmount = getNavSourceAmount(node); + const sourceAmountUnits = formatNavSourceAmountUnits( + amount, + sourceAmount, + ); const paymentMethod: CreatePaymentMethodRequest["paymentMethod"] = selection.kind === "hosted" ? { @@ -304,7 +311,7 @@ export function useSessionNav( hostedPaymentMethodId: selection.hostedPaymentMethodId, countryCode: selection.countryCode, sourceAmount: { - units: amount.toFixed(sourceAmount.decimals), + units: sourceAmountUnits, currency: sourceAmount.currency, }, platform: effectivePlatform, @@ -323,8 +330,7 @@ export function useSessionNav( paymentMethod, }, ); - const payment = - selection.kind === "hosted" ? result.hosted : result.exchange; + const payment = result.externalPayment ?? result.exchange; if (payment == null) { throw new Error("external payment details not returned"); } @@ -351,8 +357,7 @@ export function useSessionNav( paymentUrl: payment.url, waitingMessage: payment.waitingMessage, expiresAt: payment.expiresAt, - quote: - selection.kind === "hosted" ? result.hosted?.quote : undefined, + quote: result.externalPayment?.quote, error: undefined, }, ]; @@ -880,16 +885,20 @@ export function useSessionNav( if (!topEntry || topEntry.type !== "select-amount") return; const { nodeId, flowType } = topEntry; const selectedNode = findNode(nodeId, session.navTree); + const selectedSourceAmount = isExternalPaymentNode(selectedNode) + ? getNavSourceAmount(selectedNode) + : null; const amountContext = (flowType === "exchange" || flowType === "cashapp" || flowType === "hosted") && - isExternalPaymentNode(selectedNode) + selectedSourceAmount != null ? { - sourceAmountUnits: amount.toFixed( - getNavSourceAmount(selectedNode).decimals, + sourceAmountUnits: formatNavSourceAmountUnits( + amount, + selectedSourceAmount, ), - sourceCurrency: getNavSourceAmount(selectedNode).currency, + sourceCurrency: selectedSourceAmount.currency, } : { amountUsd: amount }; From 446c19d24e16cf8979cc533db004c3cbb8123038 Mon Sep 17 00:00:00 2001 From: a16i <151609257+a16i@users.noreply.github.com> Date: Tue, 28 Jul 2026 12:49:09 -0700 Subject: [PATCH 3/6] tighten external payment handoff compatibility --- packages/sdk/src/web/api/navTree.test.ts | 32 +++++++++++++++++-- packages/sdk/src/web/api/navTree.ts | 25 ++++++++++++--- .../components/ExternalPaymentFlowPage.tsx | 2 +- 3 files changed, 51 insertions(+), 8 deletions(-) diff --git a/packages/sdk/src/web/api/navTree.test.ts b/packages/sdk/src/web/api/navTree.test.ts index 1ad730fd..250ebeb4 100644 --- a/packages/sdk/src/web/api/navTree.test.ts +++ b/packages/sdk/src/web/api/navTree.test.ts @@ -46,7 +46,7 @@ describe("external payment nav policy", () => { ).toThrow("invalid external payment amount"); }); - test("falls back to legacy USD nav fields without provider checks", () => { + test("falls back to legacy USD nav fields", () => { const node: NavNodeExchange = { type: "Exchange", id: "Exchange-Coinbase", @@ -66,8 +66,34 @@ describe("external payment nav policy", () => { maximum: 100, }); expect(getNavExternalHandoff(node)).toEqual({ - desktopBehavior: "qr", - placeholderDensity: "short", + desktopBehavior: "popup", + legacyQrPlaceholderDensity: "short", }); }); + + test.each([ + ["Coinbase", "popup", "short"], + ["MtPelerin", "popup", "short"], + ["Binance", "qr", "medium"], + ["BinanceUSDC", "qr", "medium"], + ["BinanceUSDT", "qr", "medium"], + ["Lemon", "qr", "short"], + ] as const)( + "preserves legacy %s handoff behavior", + (exchangeId, desktopBehavior, legacyQrPlaceholderDensity) => { + const node: NavNodeExchange = { + type: "Exchange", + id: `Exchange-${exchangeId}`, + title: exchangeId, + exchangeId, + minimumUsd: 1, + maximumUsd: 100, + }; + + expect(getNavExternalHandoff(node)).toEqual({ + desktopBehavior, + legacyQrPlaceholderDensity, + }); + }, + ); }); diff --git a/packages/sdk/src/web/api/navTree.ts b/packages/sdk/src/web/api/navTree.ts index b7d6b96a..aa4bc8ad 100644 --- a/packages/sdk/src/web/api/navTree.ts +++ b/packages/sdk/src/web/api/navTree.ts @@ -104,7 +104,6 @@ export type NavSourceAmount = { export type NavExternalHandoff = { desktopBehavior: "popup" | "qr"; popupName?: string; - placeholderDensity?: "short" | "medium" | "long"; }; export type NavNodeExchange = NavNodeCommon & { @@ -173,12 +172,30 @@ export function getNavSourceAmount( /** Compatibility fallback for nav trees produced by pre-handoff servers. */ export function getNavExternalHandoff( node: NavExternalPaymentNode, -): NavExternalHandoff { +): NavExternalHandoff & { + legacyQrPlaceholderDensity?: "short" | "medium" | "long"; +} { if (node.type === "HostedPayment") return node.externalHandoff; if (node.externalHandoff != null) return node.externalHandoff; + return getLegacyNavExternalHandoff(node); +} + +/** Preserve pre-handoff SDK behavior while old backend nav trees remain valid. */ +function getLegacyNavExternalHandoff( + node: NavNodeExchange | NavNodeCashApp, +): NavExternalHandoff & { + legacyQrPlaceholderDensity: "short" | "medium"; +} { + const exchangeId = node.type === "CashApp" ? "CashApp" : node.exchangeId; return { - desktopBehavior: "qr", - placeholderDensity: "short", + desktopBehavior: + exchangeId === "Coinbase" || exchangeId === "MtPelerin" ? "popup" : "qr", + legacyQrPlaceholderDensity: + exchangeId === "Binance" || + exchangeId === "BinanceUSDC" || + exchangeId === "BinanceUSDT" + ? "medium" + : "short", }; } diff --git a/packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx b/packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx index 527bedd0..3da80349 100644 --- a/packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx +++ b/packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx @@ -50,7 +50,7 @@ export function ExternalPaymentFlowPage({ baseUrl={baseUrl} desktopBehavior={desktopBehavior} popupName={handoff.popupName ?? node.id.toLowerCase()} - placeholderDensity={handoff.placeholderDensity} + placeholderDensity={handoff.legacyQrPlaceholderDensity} details={ quote == null ? undefined From bceec6281603c9ef80da5de0c61db2ad99c8de4a Mon Sep 17 00:00:00 2001 From: a16i <151609257+a16i@users.noreply.github.com> Date: Tue, 28 Jul 2026 12:54:00 -0700 Subject: [PATCH 4/6] give external payment details stable identity --- .../sdk/src/web/components/ExternalPaymentFlowPage.tsx | 4 +++- .../sdk/src/web/components/ExternalPaymentPage.tsx | 10 ++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx b/packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx index 3da80349..2ea97441 100644 --- a/packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx +++ b/packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx @@ -56,10 +56,12 @@ export function ExternalPaymentFlowPage({ ? undefined : [ { + id: "estimated-output", label: t.estimatedOutput, value: `${quote.estimatedDestinationUnits} ${quote.destinationCurrency}`, }, - ...quote.fees.map((fee) => ({ + ...quote.fees.map((fee, index) => ({ + id: `fee-${fee.kind}-${index}`, label: fee.kind === "service" ? t.serviceFee diff --git a/packages/sdk/src/web/components/ExternalPaymentPage.tsx b/packages/sdk/src/web/components/ExternalPaymentPage.tsx index 2b491014..320717a2 100644 --- a/packages/sdk/src/web/components/ExternalPaymentPage.tsx +++ b/packages/sdk/src/web/components/ExternalPaymentPage.tsx @@ -15,6 +15,12 @@ import { type QRDensity = "short" | "medium" | "long"; type DesktopBehavior = "popup" | "qr"; +type ExternalPaymentDetail = { + id: string; + label: string; + value: string; +}; + type ExternalPaymentPageProps = { title: string; platform: DaimoPlatform; @@ -29,7 +35,7 @@ type ExternalPaymentPageProps = { popupName?: string; popupFeatures?: string; placeholderDensity?: QRDensity; - details?: { label: string; value: string }[]; + details?: ExternalPaymentDetail[]; /** Called with the opened window (null when blocked by the browser). */ onOpened?: (popup: Window | null) => void; }; @@ -117,7 +123,7 @@ export function ExternalPaymentPage({
{details.map((detail) => (
From 1a012671f214bb425a2a53d2c1f1a3397d0e7f4b Mon Sep 17 00:00:00 2001 From: a16i <151609257+a16i@users.noreply.github.com> Date: Wed, 29 Jul 2026 18:21:33 -0700 Subject: [PATCH 5/6] model Cash App and Revolut as external payments --- packages/sdk/src/common/api.test.ts | 78 ++++++++++++++++--- packages/sdk/src/common/api.ts | 42 ++++------ packages/sdk/src/common/externalPayment.ts | 34 ++++++++ packages/sdk/src/common/index.ts | 1 + packages/sdk/src/common/session.ts | 14 +++- packages/sdk/src/web/api/index.ts | 2 +- packages/sdk/src/web/api/navTree.test.ts | 12 +-- packages/sdk/src/web/api/navTree.ts | 28 ++++--- .../sdk/src/web/components/DaimoModal.tsx | 6 +- .../components/ExternalPaymentFlowPage.tsx | 4 +- packages/sdk/src/web/hooks/types.ts | 2 +- packages/sdk/src/web/hooks/useSessionNav.ts | 51 ++++++------ 12 files changed, 190 insertions(+), 84 deletions(-) create mode 100644 packages/sdk/src/common/externalPayment.ts diff --git a/packages/sdk/src/common/api.test.ts b/packages/sdk/src/common/api.test.ts index f13f4efe..cd07a414 100644 --- a/packages/sdk/src/common/api.test.ts +++ b/packages/sdk/src/common/api.test.ts @@ -20,13 +20,30 @@ describe("zCreatePaymentMethodRequest", () => { }); }); - test("accepts backend-defined hosted methods and source currencies", () => { + test("continues to accept legacy Cash App exchange requests", () => { expect( zCreatePaymentMethodRequest.parse({ clientSecret: "secret", paymentMethod: { - type: "hosted", - hostedPaymentMethodId: "FutureHostedMethod", + type: "exchange", + exchangeId: "CashApp", + amountUsd: 10, + }, + }).paymentMethod, + ).toEqual({ + type: "exchange", + exchangeId: "CashApp", + amountUsd: 10, + }); + }); + + test("accepts typed external methods and source currencies", () => { + expect( + zCreatePaymentMethodRequest.parse({ + clientSecret: "secret", + paymentMethod: { + type: "external", + id: "Revolut", countryCode: "DE", sourceAmount: { units: "10.50", @@ -35,8 +52,8 @@ describe("zCreatePaymentMethodRequest", () => { }, }).paymentMethod, ).toEqual({ - type: "hosted", - hostedPaymentMethodId: "FutureHostedMethod", + type: "external", + id: "Revolut", countryCode: "DE", sourceAmount: { units: "10.50", @@ -45,13 +62,36 @@ describe("zCreatePaymentMethodRequest", () => { }); }); - test("rejects malformed source amounts without encoding provider policy", () => { + test("accepts Cash App without a country", () => { + expect( + zCreatePaymentMethodRequest.parse({ + clientSecret: "secret", + paymentMethod: { + type: "external", + id: "CashApp", + sourceAmount: { + units: "10.50", + currency: "USD", + }, + }, + }).paymentMethod, + ).toEqual({ + type: "external", + id: "CashApp", + sourceAmount: { + units: "10.50", + currency: "USD", + }, + }); + }); + + test("rejects malformed source amounts without encoding method policy", () => { expect(() => zCreatePaymentMethodRequest.parse({ clientSecret: "secret", paymentMethod: { - type: "hosted", - hostedPaymentMethodId: "FutureHostedMethod", + type: "external", + id: "Revolut", countryCode: "DE", sourceAmount: { units: "0", @@ -64,8 +104,8 @@ describe("zCreatePaymentMethodRequest", () => { zCreatePaymentMethodRequest.parse({ clientSecret: "secret", paymentMethod: { - type: "hosted", - hostedPaymentMethodId: "FutureHostedMethod", + type: "external", + id: "Revolut", countryCode: "DE", sourceAmount: { units: "10.00", @@ -76,7 +116,7 @@ describe("zCreatePaymentMethodRequest", () => { ).toThrow(); }); - test("keeps hosted methods out of the exchange enum", () => { + test("keeps external methods out of the exchange enum", () => { expect(() => zCreatePaymentMethodRequest.parse({ clientSecret: "secret", @@ -88,4 +128,20 @@ describe("zCreatePaymentMethodRequest", () => { }), ).toThrow(); }); + + test("rejects untyped external method IDs", () => { + expect(() => + zCreatePaymentMethodRequest.parse({ + clientSecret: "secret", + paymentMethod: { + type: "external", + id: "FutureExternalMethod", + sourceAmount: { + units: "10.00", + currency: "EUR", + }, + }, + }), + ).toThrow(); + }); }); diff --git a/packages/sdk/src/common/api.ts b/packages/sdk/src/common/api.ts index be6797d2..05aa804a 100644 --- a/packages/sdk/src/common/api.ts +++ b/packages/sdk/src/common/api.ts @@ -1,6 +1,10 @@ import { z } from "zod"; import { zAccountRail } from "./account.js"; +import { + type ExternalPayment, + zExternalPaymentMethodId, +} from "./externalPayment.js"; import type { TronAddress, UUID } from "./primitives.js"; import { zAddress, zSolanaAddress } from "./primitives.js"; import type { SessionPublicInfo } from "./session.js"; @@ -46,11 +50,13 @@ export const zCreatePaymentMethodRequest = z.object({ platform: zPlatform.optional(), }), z.object({ - type: z.literal("hosted"), - /** Opaque method ID supplied by the backend navigation tree. */ - hostedPaymentMethodId: z.string().min(1), + type: z.literal("external"), + id: zExternalPaymentMethodId, /** ISO-3166 alpha-2 country selected in the backend navigation tree. */ - countryCode: z.string().regex(/^[A-Z]{2}$/), + countryCode: z + .string() + .regex(/^[A-Z]{2}$/) + .optional(), sourceAmount: z.object({ units: zPositiveDecimalUnits, currency: z.string().regex(/^[A-Z]{3}$/), @@ -164,28 +170,12 @@ export type CreatePaymentMethodResponse = { }; }; -export type ExternalPayment = { - /** URL where the user completes the external payment. */ - url: string; - /** Message to display while waiting for the payment. */ - waitingMessage: string; - /** Link expiry time (unix seconds), when supplied by the backend. */ - expiresAt?: number; - /** Optional estimate for quoted external payments. */ - quote?: ExternalPaymentQuote; -}; - -export type ExternalPaymentQuote = { - sourceAmountUnits: string; - sourceCurrency: string; - estimatedDestinationUnits: string; - destinationCurrency: string; - fees: { - kind: "service" | "network" | "partner"; - amountUnits: string; - currency: string; - }[]; -}; +export type { + ExternalPayment, + ExternalPaymentQuote, + ExternalPaymentMethodId, + Money, +} from "./externalPayment.js"; export type CheckSessionResponse = { /** Current session state. */ diff --git a/packages/sdk/src/common/externalPayment.ts b/packages/sdk/src/common/externalPayment.ts new file mode 100644 index 00000000..05de42fb --- /dev/null +++ b/packages/sdk/src/common/externalPayment.ts @@ -0,0 +1,34 @@ +import { z } from "zod"; + +export const zExternalPaymentMethodId = z.enum(["CashApp", "Revolut"]); + +export type ExternalPaymentMethodId = z.infer; + +export type Money = { + /** ISO 4217 currency or asset symbol. */ + currency: string; + /** Decimal amount in currency units. */ + units: string; +}; + +export type ExternalPayment = { + /** URL where the user completes the external payment. */ + url: string; + /** Message to display while waiting for the payment. */ + waitingMessage: string; + /** Link expiry time (unix seconds), when supplied by the backend. */ + expiresAt?: number; + /** Optional estimate for quoted external payments. */ + quote?: ExternalPaymentQuote; +}; + +export type ExternalPaymentQuote = { + /** Money paid by the user. */ + sourceAmount: Money; + /** Estimated money delivered before the on-chain payment is observed. */ + estimatedDestinationAmount: Money; + fees: { + kind: "service" | "network" | "partner"; + amount: Money; + }[]; +}; diff --git a/packages/sdk/src/common/index.ts b/packages/sdk/src/common/index.ts index d0243972..ee5993f9 100644 --- a/packages/sdk/src/common/index.ts +++ b/packages/sdk/src/common/index.ts @@ -2,6 +2,7 @@ export * from "./account.js"; export * from "./api.js"; export * from "./chain.js"; export * from "./errors.js"; +export * from "./externalPayment.js"; export * from "./primitives.js"; export * from "./session.js"; export * from "./theme.js"; diff --git a/packages/sdk/src/common/session.ts b/packages/sdk/src/common/session.ts index de98f148..f5d4b26f 100644 --- a/packages/sdk/src/common/session.ts +++ b/packages/sdk/src/common/session.ts @@ -2,6 +2,7 @@ import type { Address, Hex } from "viem"; import { z } from "zod"; import type { AccountRail } from "./account.js"; +import type { ExternalPaymentMethodId, Money } from "./externalPayment.js"; import type { DaimoSessionTheme } from "./theme.js"; import type { SolanaAddress, @@ -96,7 +97,18 @@ export type PaymentMethod = | PaymentMethodTron | PaymentMethodSolana | PaymentMethodStripe - | PaymentMethodFiat; + | PaymentMethodFiat + | PaymentMethodExternal; + +export type PaymentMethodExternal = { + type: "external"; + /** User-visible payment method identity. */ + id: ExternalPaymentMethodId; + /** Money the user authorized in the external payment app. */ + sourceAmount: Money; + /** When this payment method was created (unix seconds). */ + createdAt: number; +}; export type PaymentMethodStripe = { type: "stripe"; diff --git a/packages/sdk/src/web/api/index.ts b/packages/sdk/src/web/api/index.ts index 9cfd39f0..d315cacb 100644 --- a/packages/sdk/src/web/api/index.ts +++ b/packages/sdk/src/web/api/index.ts @@ -12,7 +12,7 @@ export type { NavNodeExchange, NavExternalPaymentNode, NavExternalHandoff, - NavNodeHostedPayment, + NavNodeExternalPayment, NavNodeFiat, NavNodeKycRequirement, NavNodeKycRequirementDisplayItem, diff --git a/packages/sdk/src/web/api/navTree.test.ts b/packages/sdk/src/web/api/navTree.test.ts index 250ebeb4..bfb427d4 100644 --- a/packages/sdk/src/web/api/navTree.test.ts +++ b/packages/sdk/src/web/api/navTree.test.ts @@ -5,16 +5,16 @@ import { getNavExternalHandoff, getNavSourceAmount, type NavNodeExchange, - type NavNodeHostedPayment, + type NavNodeExternalPayment, } from "./navTree.js"; describe("external payment nav policy", () => { test("uses backend-provided amount and handoff descriptors", () => { - const node: NavNodeHostedPayment = { - type: "HostedPayment", - id: "HostedPayment-FutureHostedMethod", - title: "Future hosted method", - hostedPaymentMethodId: "FutureHostedMethod", + const node: NavNodeExternalPayment = { + type: "ExternalPayment", + id: "ExternalPayment-Revolut", + title: "Revolut", + externalPaymentMethodId: "Revolut", countryCode: "JP", sourceAmount: { currency: "JPY", diff --git a/packages/sdk/src/web/api/navTree.ts b/packages/sdk/src/web/api/navTree.ts index aa4bc8ad..dbad4cbb 100644 --- a/packages/sdk/src/web/api/navTree.ts +++ b/packages/sdk/src/web/api/navTree.ts @@ -4,6 +4,7 @@ import type { DepositPaymentInteraction, } from "../../common/account.js"; import type { ExchangeId } from "../../common/api.js"; +import type { ExternalPaymentMethodId } from "../../common/externalPayment.js"; import type { SessionPublicInfo } from "../../common/session.js"; /** Session plus server-defined modal navigation data. */ @@ -125,6 +126,11 @@ export type NavNodeExchange = NavNodeCommon & { export type NavNodeCashApp = NavNodeCommon & { type: "CashApp"; icon?: string; + /** + * Present when the server accepts the external-payment request for Cash App. + * Its absence preserves compatibility with pre-external-payment servers. + */ + externalPaymentMethodId?: "CashApp"; /** Backend-owned amount and currency policy. Optional for old servers. */ sourceAmount?: NavSourceAmount; /** Backend-owned external handoff presentation. Optional for old servers. */ @@ -135,14 +141,14 @@ export type NavNodeCashApp = NavNodeCommon & { }; /** - * Generic hosted redirect. The SDK renders the interaction without knowing - * which provider owns the method ID. + * Generic external payment handoff. The SDK renders the interaction without + * knowing which implementation owns the method ID. */ -export type NavNodeHostedPayment = NavNodeCommon & { - type: "HostedPayment"; - hostedPaymentMethodId: string; - /** ISO-3166 alpha-2 country to echo when initiating this hosted payment. */ - countryCode: string; +export type NavNodeExternalPayment = NavNodeCommon & { + type: "ExternalPayment"; + externalPaymentMethodId: ExternalPaymentMethodId; + /** ISO-3166 alpha-2 country to echo when initiating this payment. */ + countryCode?: string; icon?: string; sourceAmount: NavSourceAmount; externalHandoff: NavExternalHandoff; @@ -151,13 +157,13 @@ export type NavNodeHostedPayment = NavNodeCommon & { export type NavExternalPaymentNode = | NavNodeExchange | NavNodeCashApp - | NavNodeHostedPayment; + | NavNodeExternalPayment; /** Compatibility fallback for nav trees produced by pre-sourceAmount servers. */ export function getNavSourceAmount( node: NavExternalPaymentNode, ): NavSourceAmount { - if (node.type === "HostedPayment") return node.sourceAmount; + if (node.type === "ExternalPayment") return node.sourceAmount; if (node.sourceAmount != null) return node.sourceAmount; return { currency: "USD", @@ -175,7 +181,7 @@ export function getNavExternalHandoff( ): NavExternalHandoff & { legacyQrPlaceholderDensity?: "short" | "medium" | "long"; } { - if (node.type === "HostedPayment") return node.externalHandoff; + if (node.type === "ExternalPayment") return node.externalHandoff; if (node.externalHandoff != null) return node.externalHandoff; return getLegacyNavExternalHandoff(node); } @@ -253,7 +259,7 @@ export type NavNode = | NavNodeDeeplink | NavNodeExchange | NavNodeCashApp - | NavNodeHostedPayment + | NavNodeExternalPayment | NavNodeStripe | NavNodeTronDeposit | NavNodeConnectedWallet diff --git a/packages/sdk/src/web/components/DaimoModal.tsx b/packages/sdk/src/web/components/DaimoModal.tsx index 168d8f30..bdc0fbc0 100644 --- a/packages/sdk/src/web/components/DaimoModal.tsx +++ b/packages/sdk/src/web/components/DaimoModal.tsx @@ -1127,12 +1127,12 @@ function renderSelectAmount( if ( entry.flowType === "exchange" || entry.flowType === "cashapp" || - entry.flowType === "hosted" + entry.flowType === "external" ) { if ( node.type !== "Exchange" && node.type !== "CashApp" && - node.type !== "HostedPayment" + node.type !== "ExternalPayment" ) { return null; } @@ -1354,7 +1354,7 @@ function renderExternalPayment( node == null || (node.type !== "Exchange" && node.type !== "CashApp" && - node.type !== "HostedPayment") + node.type !== "ExternalPayment") ) { return null; } diff --git a/packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx b/packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx index 2ea97441..de2e480b 100644 --- a/packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx +++ b/packages/sdk/src/web/components/ExternalPaymentFlowPage.tsx @@ -58,7 +58,7 @@ export function ExternalPaymentFlowPage({ { id: "estimated-output", label: t.estimatedOutput, - value: `${quote.estimatedDestinationUnits} ${quote.destinationCurrency}`, + value: `${quote.estimatedDestinationAmount.units} ${quote.estimatedDestinationAmount.currency}`, }, ...quote.fees.map((fee, index) => ({ id: `fee-${fee.kind}-${index}`, @@ -68,7 +68,7 @@ export function ExternalPaymentFlowPage({ : fee.kind === "network" ? t.networkFee : t.partnerFee, - value: `${fee.amountUnits} ${fee.currency}`, + value: `${fee.amount.units} ${fee.amount.currency}`, })), ] } diff --git a/packages/sdk/src/web/hooks/types.ts b/packages/sdk/src/web/hooks/types.ts index 1cd477d6..e5877339 100644 --- a/packages/sdk/src/web/hooks/types.ts +++ b/packages/sdk/src/web/hooks/types.ts @@ -32,7 +32,7 @@ export type NavEntry = | "tron" | "exchange" | "cashapp" - | "hosted" + | "external" | "stripe"; autoNav?: boolean; } diff --git a/packages/sdk/src/web/hooks/useSessionNav.ts b/packages/sdk/src/web/hooks/useSessionNav.ts index 06d78437..f26d266f 100644 --- a/packages/sdk/src/web/hooks/useSessionNav.ts +++ b/packages/sdk/src/web/hooks/useSessionNav.ts @@ -97,7 +97,7 @@ function isExternalPaymentNode( return ( node?.type === "Exchange" || node?.type === "CashApp" || - node?.type === "HostedPayment" + node?.type === "ExternalPayment" ); } @@ -116,20 +116,27 @@ function getExternalPaymentSelection(node: NavExternalPaymentNode): nodeType: "Exchange" | "CashApp"; } | { - kind: "hosted"; - hostedPaymentMethodId: string; - countryCode: string; - nodeType: "HostedPayment"; + kind: "external"; + externalPaymentMethodId: "CashApp" | "Revolut"; + countryCode?: string; + nodeType: "CashApp" | "ExternalPayment"; } { - if (node.type === "HostedPayment") { + if (node.type === "ExternalPayment") { return { - kind: "hosted", - hostedPaymentMethodId: node.hostedPaymentMethodId, + kind: "external", + externalPaymentMethodId: node.externalPaymentMethodId, countryCode: node.countryCode, - nodeType: "HostedPayment", + nodeType: "ExternalPayment", }; } if (node.type === "CashApp") { + if (node.externalPaymentMethodId != null) { + return { + kind: "external", + externalPaymentMethodId: node.externalPaymentMethodId, + nodeType: "CashApp", + }; + } return { kind: "exchange", exchangeId: "CashApp", nodeType: "CashApp" }; } return { @@ -305,10 +312,10 @@ export function useSessionNav( sourceAmount, ); const paymentMethod: CreatePaymentMethodRequest["paymentMethod"] = - selection.kind === "hosted" + selection.kind === "external" ? { - type: "hosted", - hostedPaymentMethodId: selection.hostedPaymentMethodId, + type: "external", + id: selection.externalPaymentMethodId, countryCode: selection.countryCode, sourceAmount: { units: sourceAmountUnits, @@ -335,8 +342,8 @@ export function useSessionNav( throw new Error("external payment details not returned"); } const paymentMethodId = - selection.kind === "hosted" - ? selection.hostedPaymentMethodId + selection.kind === "external" + ? selection.externalPaymentMethodId : selection.exchangeId; logNavEvent(session.sessionId, session.clientSecret, { nodeId, @@ -369,8 +376,8 @@ export function useSessionNav( ? error.message : "failed to create external payment"; const paymentMethodId = - selection.kind === "hosted" - ? selection.hostedPaymentMethodId + selection.kind === "external" + ? selection.externalPaymentMethodId : selection.exchangeId; logNavEvent(session.sessionId, session.clientSecret, { nodeId, @@ -794,8 +801,8 @@ export function useSessionNav( flowType: targetNode.type === "CashApp" ? "cashapp" - : targetNode.type === "HostedPayment" - ? "hosted" + : targetNode.type === "ExternalPayment" + ? "external" : "exchange", autoNav, }, @@ -891,7 +898,7 @@ export function useSessionNav( const amountContext = (flowType === "exchange" || flowType === "cashapp" || - flowType === "hosted") && + flowType === "external") && selectedSourceAmount != null ? { sourceAmountUnits: formatNavSourceAmountUnits( @@ -911,8 +918,8 @@ export function useSessionNav( ? "TronDeposit" : flowType === "cashapp" ? "CashApp" - : flowType === "hosted" - ? "HostedPayment" + : flowType === "external" + ? "ExternalPayment" : flowType === "stripe" ? "Stripe" : "Exchange", @@ -934,7 +941,7 @@ export function useSessionNav( } else if ( flowType === "exchange" || flowType === "cashapp" || - flowType === "hosted" + flowType === "external" ) { if (!isExternalPaymentNode(selectedNode)) return; setStack((prev) => [ From fda0e8320a9c97ccb16b5ccec5ac88890d7454d9 Mon Sep 17 00:00:00 2001 From: a16i <151609257+a16i@users.noreply.github.com> Date: Wed, 29 Jul 2026 18:28:54 -0700 Subject: [PATCH 6/6] export the external payment request type --- packages/sdk/src/common/api.test.ts | 18 ++++++++++-------- packages/sdk/src/common/api.ts | 6 ++++++ 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/sdk/src/common/api.test.ts b/packages/sdk/src/common/api.test.ts index cd07a414..25de2b30 100644 --- a/packages/sdk/src/common/api.test.ts +++ b/packages/sdk/src/common/api.test.ts @@ -1,5 +1,6 @@ import { describe, expect, test } from "vitest"; +import type { ExternalPaymentMethodRequest } from "./api.js"; import { zCreatePaymentMethodRequest } from "./api.js"; describe("zCreatePaymentMethodRequest", () => { @@ -63,17 +64,18 @@ describe("zCreatePaymentMethodRequest", () => { }); test("accepts Cash App without a country", () => { + const paymentMethod: ExternalPaymentMethodRequest = { + type: "external", + id: "CashApp", + sourceAmount: { + units: "10.50", + currency: "USD", + }, + }; expect( zCreatePaymentMethodRequest.parse({ clientSecret: "secret", - paymentMethod: { - type: "external", - id: "CashApp", - sourceAmount: { - units: "10.50", - currency: "USD", - }, - }, + paymentMethod, }).paymentMethod, ).toEqual({ type: "external", diff --git a/packages/sdk/src/common/api.ts b/packages/sdk/src/common/api.ts index 05aa804a..16ac2b37 100644 --- a/packages/sdk/src/common/api.ts +++ b/packages/sdk/src/common/api.ts @@ -100,6 +100,12 @@ export type CreatePaymentMethodRequest = z.output< typeof zCreatePaymentMethodRequest >; +/** Provider-neutral request for payment apps and hosted external handoffs. */ +export type ExternalPaymentMethodRequest = Extract< + CreatePaymentMethodRequest["paymentMethod"], + { type: "external" } +>; + export type CheckSessionRequest = z.output; export type TokenOptionsRequest = z.output;