apps/sudo/app/routes/stripe.tsx · flagon-io/g1t

<p className="mt-1 text-sm text-muted">How billing hears from Stripe: the destination in Stripe, its signing secret here, and what it sent lately.</p>

55

</div>

56

<Badge tone={mode.tone}>{mode.label}</Badge>

</div>

{status.error && <Notice tone="error">{status.error}</Notice>}

61

{fixed && !status.error && <Notice tone="ok">Destination checked: enabled, and sending every event billing handles.</Notice>}

62

{status.mode === "off" && <Notice tone="warn">Billing has no Stripe key (STRIPE_SECRET_KEY), so nothing reaches Stripe.</Notice>}

63

{ready && <Notice tone="ok">Ready: Stripe sends to billing, and billing can check what it sends.</Notice>}

</div>

<Section

title="Webhook"

description="Made in Stripe's dashboard; its signing secret is the billing Worker's secret STRIPE_WEBHOOK_SECRET. Billing keeps the destination's events and enables it again if Stripe turns it off; it never changes the secret."

className="mt-6"

actions={

needsFix ? (

Fix destination

</Button>

</form>

) : null

}

>

<dt className="text-muted">Signing secret</dt>

85

<dd>

86

{status.secretSet ? (

) : (

<Badge tone="danger">Not set</Badge> Every event is refused until it is. In Stripe: the destination, Signing secret, Reveal; then, in{" "}

91

<span className="font-mono text-xs">services/billing</span>,{" "}

92

<span className="font-mono text-xs">npx wrangler secret put STRIPE_WEBHOOK_SECRET</span>.

</span>

)}

</dd>

<dt className="text-muted">Destination</dt>

{webhook ? (

<span className="font-mono text-xs break-all">{webhook.url}</span>

101

<Badge tone={webhook.status === "enabled" ? "mint" : "danger"}>{webhook.status}</Badge>

102

<span className="font-mono text-xs text-faint">{webhook.endpointId}</span>

103

</span>

104

) : status.mode === "off" ? (

105

<span className="text-muted">Not checked without a key.</span>

106

) : (

107

108

None in {mode.label.toLowerCase()}. In Stripe: Developers, Webhooks, Add destination, endpoint URL{" "}

109

<span className="font-mono text-xs">{WEBHOOK_URL}</span>, any events (billing adds what it needs here). Then set its secret.

</span>

)}

</dd>

{webhook && (

<>

</dd>

<dt className="text-muted">Events</dt>

120

121

{webhook.events.map((event) => (

{event}

</span>

))}

{status.missingEvents.map((event) => (

{event} missing

</span>

))}

</dd>

</>

)}

</dl>

</Section>

<EveryWorkspaceDetachSection

138

live={status.mode === "live"}

139

result={detach?.everyDetach ?? null}

140

error={detach?.everyDetachError ?? null}

141

exclude={detach?.exclude ?? null}

/>

{status.recentEvents.length === 0 ? (

) : (

<thead>

<th className="px-4 py-2 font-medium sm:pr-5">Outcome</th>

</tr>

</thead>

<tbody>

{status.recentEvents.map((event) => (

</td>

<p className="font-mono text-xs">{event.kind}</p>

165

<p className="font-mono text-xs text-faint">{event.id}</p>

166

</td>

167

<td className="px-4 py-2.5 wrap-break-word text-fg-soft sm:pr-5">{event.outcome}</td>

</tr>

))}

</tbody>

</table>

</div>

)}

</Section>

</main>

);

}

// --- Go-live checklist ----------------------------------------------------------------

180

//

181

// Read-only. Stripe Tax and the Customer Portal come from billing's Stripe

182

// status: `tax` is Stripe's GET /v1/tax/settings (`active`, or `pending`

183

// with `missingFields`), `portal` the configuration billing makes

184

// (metadata g1t=billing). Either is null when it could not be read; the

185

// row then says what to check in Stripe's dashboard.

186

187

function CheckRow({ label, ok, children }: { label: string; ok: boolean | null; children: ReactNode }) {

188

return (

189

<>

190

<dt className="text-muted">{label}</dt>

191

192

<Badge tone={ok == null ? "warn" : ok ? "mint" : "danger"}>{ok == null ? "Check in Stripe" : ok ? "Ready" : "Not ready"}</Badge>

193

<span>{children}</span>

</dd>

</>

);

}

function GoLiveChecklist({ status }: { status: StripeStatus }) {

200

const webhookOk = status.webhook != null && status.webhook.status === "enabled" && status.missingEvents.length === 0;

201

const tax = status.tax;

202

const portal = status.portal;

203

return (

204

<Section

205

title="Go-live checklist"

206

description="What has to be true before live payments: a live key, the webhook, Stripe Tax and the Customer Portal. Read-only."

className="mt-6"

>

{status.mode === "live" ? "Billing uses a live key." : `Billing's key is in ${status.mode === "off" ? "no" : status.mode} mode.`}

212

</CheckRow>

213

214

{status.secretSet && webhookOk ? "Enabled, signed, and sending every event billing handles." : "See Webhook below."}

</CheckRow>

{tax == null

? "Not read. In Stripe: Tax, Settings: status Active, with the head office address and registrations."

219

: tax.status === "active"

220

? "Active."

221

: `${tax.status}${tax.missingFields.length ? `: missing ${tax.missingFields.join(", ")}` : ""}.`}

222

</CheckRow>

223

224

{portal === undefined

225

? "Not read. In Stripe: Settings, Billing, Customer portal: the configuration with metadata g1t=billing, active."

226

: portal

227

? `${portal.configurationId}: ${portal.active ? "active" : "inactive; billing turns it back on the next time someone opens Manage billing"}.`

228

: "No configuration yet: billing makes one the first time someone opens Manage billing."}

</CheckRow>

</dl>

</Section>

);

}