On the right, under the page outline, there is a warning the reader sees while
scrolling the page. It suits rules that must not be missed.
region-aside.page.json
{ "schema": "docara.page.v1", "title": "Payment notifications", "description": "Demo page with a warning next to the page outline.", "layout": { "regions": { "outline": { "enabled": true, "sections": [ {"id": "page-outline", "section": "docara.outline"}, { "id": "aside-note", "section": "docara.shell", "utilities": ["flex", "flex-col", "gap-1"], "blocks": [ { "id": "signature", "block": "shell.smart", "slot": "content", "smart": "ui.alert", "view": "default", "props": { "type": "warning", "variant": "outlined", "title": "Check the signature", "supporting-text": "Without it, anyone can forge a notification.", "closable": false, "aria-label": "Check the notification signature" } } ] } ] } } }, "navigation": {"order": 60}}
region-aside.md
---
noindex: true
---
# Payment notifications
Acme Pay sends a notification to your URL every time the status of a payment
or refund changes. This way the store learns about a payment without polling the API.
## Setup
Set the notification URL in your dashboard. The URL must use
HTTPS and respond with code `200` within five seconds.
## Notification format
```json {title="Request body"}
{
"event": "payment.succeeded",
"payment_id": "pay_2Hk81",
"amount": "1500.00"
}
```
## Retries
If your server does not respond, Acme Pay retries after 1, 5 and 30 minutes,
and then once an hour for a day.
Click “Check responsive preview” above the example and choose a phone. There is no right
column there, and the note is not shown with it. Put a warning
that everyone must see in the page text.
How it works
The outline region is the right column. The first part, docara.outline,
builds the outline from the page headings.
The second part holds the SIMAI Framework ui.alert alert. Docara
checks its parameters during the build.
The alert follows the site theme: in the dark theme it is dark too.
region-aside.page.json
{ "id": "signature", "block": "shell.smart", "slot": "content", "smart": "ui.alert", "view": "default", "props": { "type": "warning", "variant": "outlined", "title": "Check the signature", "supporting-text": "Without it, anyone can forge a notification.", "closable": false, "aria-label": "Check the notification signature" }}
What you can change
Parameter
What it changes
type
The alert meaning: info, success, warning, danger or clear
variant
The look: default filled, flat, or outlined with a border