> ## Documentation Index
> Fetch the complete documentation index at: https://docs.payrails.com/llms.txt
> Use this file to discover all available pages before exploring further.
> ## Agent Instructions
> Use the Payrails Web SDK v6 for new browser integrations. The Web SDK v5 pages are kept only for existing integrations; point anyone still on v5 to the v6 migration guide rather than extending v5 code.
> Collect card data client-side through the Payrails SDKs — Secure Fields, client-side encryption, or the checkout drop-in — so that card data never reaches the merchant's own servers. Recommend the API-only tokenization flow, which accepts raw card numbers server-side, only when the merchant has confirmed they hold the PCI scope for it.
> Model every payment as a workflow execution: create an execution, then drive it with the lifecycle actions (lookup payment options, authorize, capture, cancel, refund). Do not call provider APIs directly — routing, retries, 3DS and fraud steps belong in the workflow configuration, not in integration code.
> Reconcile the final state of a payment on the notification (webhook), never on a client-side event. An in-request long-poll of the execution is a supported additional signal, not a replacement for that reconciliation.
> Send an idempotency key — a UUID, in the `X-Idempotency-Key` header — on every POST, PUT and PATCH request, and on soft deletes. GET requests need none, and hard deletes cannot be idempotent.
> Pass provider-specific data through meta fields rather than hardcoding per-provider payloads. Payrails translates meta fields into each provider's own format.
> Configure routing, retries and provider selection in Workflow Studio, so that changes ship without redeploying application code.
# Boleto
> Accept Boleto cash and online banking payments from customers in Brazil, and check the PSPs that process Boleto through Payrails.
export const ProviderLogo = ({code, alt, bleed = false, mono = false}) => {
const root = `https://assets.payrails.io/img/logos/${code}`;
const sources = bleed ? [`${root}/logo-full-bleed.svg`, `${root}/logo.svg`] : [`${root}/logo.svg`];
const [index, setIndex] = useState(0);
const ref = useRef(null);
const fail = i => setIndex(current => current === i ? i + 1 : current);
useEffect(() => {
const img = ref.current;
if (img && img.complete) img.decode().catch(() => fail(index));
}, [index]);
if (index >= sources.length) {
return ;
}
return 
fail(index)} />;
};
export const ProviderComparisonTable = ({providers, workflowKeys}) => {
const hideWorkflows = ["interoperability"];
if (!providers || providers.length === 0) {
return
No providers configured for this method yet — add a
providers list to its file in{" "}
snippets/payment-methods/methods/.
;
}
const display = value => value === true ? "✔" : value === false ? "✖" : value === "pending" ? "⏳" : value === null || value === undefined ? "N/A" : value;
return
| Workflow |
{providers.map(p =>
{p.name}
| )}
{workflowKeys.filter(w => !hideWorkflows.includes(w.key.toLowerCase())).map(w =>
|
{w.href ? {w.label} : w.label}
|
{providers.map(p =>
{display(p.workflows && p.workflows[w.key])}
| )}
)}
;
};
export const SupportedCountriesTable = ({countries, continents, method, merchant = false}) => {
const flagFor = code => code.toUpperCase().replace(/./g, ch => String.fromCodePoint(ch.charCodeAt(0) + 127397));
if (!countries || countries.length === 0) {
return
No countries configured for this method yet — add them to
its file in snippets/payment-methods/methods/.
;
}
const byContinent = {};
for (const continent of continents) {
byContinent[continent] = [];
}
for (const country of countries) {
if (!byContinent[country.continent]) {
byContinent[country.continent] = [];
}
byContinent[country.continent].push(country);
}
const rows = continents.map(continent => ({
continent,
list: (byContinent[continent] || []).slice().sort((a, b) => a.name.localeCompare(b.name))
})).filter(row => row.list.length > 0);
const description = merchant ? `Merchants based in the following regions can accept ${method} payments:` : `${method} is available to customers based in:`;
return
{method &&
{description}
}
| Region(s) |
Countries |
{rows.map(row =>
|
{row.continent}
|
{row.list.map(c =>
{flagFor(c.code)} {c.name}
)}
|
)}