Information blocks

JSON block

The raw payload, laid out rather than interpreted. Every other information block picks fields, names them and renders each by its type; this one deliberately does not, because a developer reading a webhook body or a provider's raw response needs the exact shape and keys, not our reading of them.

Updated Aug 27, 2026 by Juan Pablo Turina

It is not a code block

No monospace, no dark chrome, no theme. It sits in an InfoBlock like any other section and keeps the page's own type, so a payload reads as part of the detail rather than as an embedded terminal. The only colour is the key, which carries the ink half of the split primary — the step that clears AA on a dark ground.

Seller detail

{
"id":"T-385928-x1kevh09-gmtp4tdor93h90",
"amount":7500,
"currency":"MXN",
"payment_method_type":"CARD",
"country":"MX",
"card":
{
"holder_name":"Mara Jaimes",
"expiration_month":12,
"expiration_year":2025,
"brand":"VI",
"last4":"4242",
"installments":1
},
"created_date":"2025-10-15T15:55:53.000+0000",
"status":"PAID",
"status_detail":"The payment was paid."
}
<InfoBlock title="Seller detail" size="sm">
  <JsonBlock value={event.payload} />
</InfoBlock>

When NOT to reach for it

If you know the fields are id, amount and status, name them: use information blocks. A payload dump where named fields would do tells the reader you did not know the shape.

Import

Copy this import at the top of the file where you compose it.

import { JsonBlock } from "@/components/patterns/json-block";