userAdityaa/caravel
1
1
Fork 0
forked from coracle/caravel
Code Pull Requests Activity

Add checkout sessions for paying an invoice

Browse Source
This commit is contained in:
Jon Staab
2026-06-03 10:02:43 -07:00
parent 8c44d8cc0f
commit b702733559
13 changed files with 541 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/PaymentDialog.tsx
+30 -11
View File
@@ -2,12 +2,11 @@ import { createEffect, createResource, createSignal, Show } from "solid-js"
import QRCode from "qrcode"
import Modal from "@/components/Modal"
import PaymentSetup from "@/components/PaymentSetup"
import { CardSetupBody } from "@/components/PaymentSetupShell"
import InvoiceItemsList from "@/components/payment/InvoiceItemsList"
import LightningPayBody from "@/components/payment/LightningPayBody"
import { setToastMessage } from "@/lib/state"
import { copyToClipboard } from "@/lib/clipboard"
import { useCardPortal } from "@/lib/usePaymentSetup"
import { useInvoiceCheckout } from "@/lib/usePaymentSetup"
import { ensureInvoiceBolt11, listInvoiceItems, reconcileInvoice, type Invoice } from "@/lib/api"
import { autopayConfigured } from "@/lib/paymentMethod"
import { billingTenant } from "@/lib/state"
@@ -40,9 +39,11 @@ export default function PaymentDialog(props: PaymentDialogProps) {
listInvoiceItems,
)
// Card payment is a redirect to the Stripe billing portal; once a card is on
// file we retry collection on this invoice automatically.
const card = useCardPortal()
// Paying by card opens a Stripe Checkout session scoped to this invoice (which
// can clear a 3D Secure challenge the off-session charge can't), then returns
// here where the payment is reconciled. Distinct from PaymentSetup, which
// manages the recurring card on file via the billing portal.
const checkout = useInvoiceCheckout(() => props.invoice.id)
const hasAutopay = () => {
const t = billingTenant()
@@ -72,10 +73,10 @@ export default function PaymentDialog(props: PaymentDialogProps) {
void loadBolt11()
})
// The card portal lives in a shared hook, so surface its failures here by
// mirroring its error signal into the toast.
// The checkout redirect lives in a shared hook, so surface its failures here
// by mirroring its error signal into the toast.
createEffect(() => {
const err = card.error()
const err = checkout.error()
if (err) setToastMessage(err)
})
@@ -106,7 +107,7 @@ export default function PaymentDialog(props: PaymentDialogProps) {
setBolt11("")
setQrDataUrl("")
setPayMethod("lightning")
card.reset()
checkout.reset()
props.onClose()
}
@@ -186,9 +187,27 @@ export default function PaymentDialog(props: PaymentDialogProps) {
/>
</Show>
{/* Card: redirect to the Stripe billing portal */}
{/* Card: redirect to a Stripe Checkout session for this invoice */}
<Show when={payMethod() === "card"}>
<CardSetupBody card={card} />
<div class="text-center space-y-4">
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
<svg class="w-6 h-6 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
<line x1="1" y1="10" x2="23" y2="10" />
</svg>
</div>
<p class="text-sm text-gray-600">
Pay this invoice on Stripe's secure checkout. You'll be redirected and brought back here once it's done.
</p>
<button
type="button"
onClick={checkout.openCheckout}
disabled={checkout.redirecting()}
class="w-full py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
>
{checkout.redirecting() ? "Redirecting..." : `Pay ${amountLabel()} by card`}
</button>
</div>
</Show>
</div>
}
frontend/src/lib/api.ts
+9
View File
@@ -335,6 +335,15 @@ export function ensureInvoiceBolt11(invoiceId: string) {
return callApi<undefined, Bolt11>("POST", `/invoices/${invoiceId}/bolt11`)
}
// Open a hosted Stripe Checkout session to pay a single invoice by card,
// reusing a valid pending one. Unlike the off-session charge, Checkout can
// satisfy a 3D Secure challenge. Returns the URL to redirect to; the payment is
// reconciled by reconcileInvoice once the tenant returns (or by the poll). The
// return URL is fixed to the account page server-side.
export function createInvoiceCheckout(invoiceId: string) {
return callApi<undefined, { url: string }>("POST", `/invoices/${invoiceId}/checkout`)
}
// Reconcile and collect an open invoice: ensure a payable bolt11 exists, then
// run the payment cascade (NWC, then an out-of-band Lightning settle, then a
// saved card). Caller-initiated, so no dunning DM and no churn. Returns the
frontend/src/lib/usePaymentSetup.ts
+31 -1
View File
@@ -1,6 +1,6 @@
import { createSignal } from "solid-js"
import { updateActiveTenant } from "@/lib/hooks"
import { createPortalSession } from "@/lib/api"
import { createInvoiceCheckout, createPortalSession } from "@/lib/api"
import { account } from "@/lib/state"
// Lightning/NWC save state machine, shared by the combined and focused setup
@@ -65,3 +65,33 @@ export function useCardPortal() {
}
export type CardPortal = ReturnType<typeof useCardPortal>
// Paying one specific invoice by card is a full-page redirect to a Stripe
// Checkout session scoped to that invoice (so a 3D Secure challenge can be
// completed) — distinct from the billing-portal redirect that manages the
// recurring card on file. Like the portal, there's no local "saved" state, only
// the in-flight redirect and any failure to open the session.
export function useInvoiceCheckout(invoiceId: () => string) {
const [redirecting, setRedirecting] = createSignal(false)
const [error, setError] = createSignal("")
async function openCheckout() {
setRedirecting(true)
setError("")
try {
const { url } = await createInvoiceCheckout(invoiceId())
window.location.href = url
} catch (e) {
setError(e instanceof Error ? e.message : "Failed to open checkout")
setRedirecting(false)
}
}
function reset() {
setError("")
}
return { redirecting, error, openCheckout, reset }
}
export type InvoiceCheckout = ReturnType<typeof useInvoiceCheckout>
frontend/src/pages/Account.tsx
+28 -2
View File
@@ -7,9 +7,9 @@ import { useInvoicePdf } from "@/lib/useInvoicePdf"
import PaymentSetupNWC from "@/components/PaymentSetupNWC"
import PaymentSetupCard from "@/components/PaymentSetupCard"
import { useBillingStatus, accountStatus, type AccountStatus } from "@/lib/billing"
import { invoiceStatus, listDraftInvoiceItems, type Invoice } from "@/lib/api"
import { invoiceStatus, listDraftInvoiceItems, reconcileInvoice, type Invoice } from "@/lib/api"
import { cardState, methodLabel, nwcState, type PaymentMethodState } from "@/lib/paymentMethod"
import { account } from "@/lib/state"
import { account, setToastMessage } from "@/lib/state"
import { formatPeriod } from "@/lib/format"
import PaymentMethodRow from "@/components/account/PaymentMethodRow"
import InvoiceListItem from "@/components/account/InvoiceListItem"
@@ -51,6 +51,32 @@ export default function Account() {
if (pubkey) void billing.autopay(pubkey)
})
// Returning from a per-invoice Stripe Checkout (the success_url carries
// ?paid_invoice=ID): reconcile that invoice so it flips to paid promptly —
// autopay above only collects when a recurring method is on file, and a
// one-off Checkout payment doesn't leave one — then strip the marker.
createEffect(() => {
const pubkey = account()?.pubkey
const paidInvoice = new URLSearchParams(window.location.search).get("paid_invoice")
if (!pubkey || !paidInvoice) return
void (async () => {
try {
const invoice = await reconcileInvoice(paidInvoice)
setToastMessage(
invoice.paid_at != null ? "Payment received. Thank you!" : "Your payment is still processing.",
)
} catch (e) {
setToastMessage(e instanceof Error ? e.message : "Failed to confirm payment")
} finally {
const params = new URLSearchParams(window.location.search)
params.delete("paid_invoice")
const qs = params.toString()
window.history.replaceState({}, "", `${window.location.pathname}${qs ? `?${qs}` : ""}`)
billing.refetch()
}
})()
})
// Coarse account-health summary for the badge. Same snapshot the inline prompt
// consumes, so the two can never disagree.
const status = createMemo(() =>