> ## 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.

# Atome

> Accept Atome buy now, pay later payments from customers in Singapore, and check the PSPs that process Atome 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 <span className="provider-card-logo-fallback" role="img" aria-label={alt} />;
  }
  return <img key={sources[index]} ref={ref} src={sources[index]} alt={alt} className={mono ? "provider-logo-mono" : undefined} onError={() => fail(index)} />;
};

export const ProviderComparisonTable = ({providers, workflowKeys}) => {
  const hideWorkflows = ["interoperability"];
  if (!providers || providers.length === 0) {
    return <p>
                <em>
                    No providers configured for this method yet — add a
                    <code>providers</code> list to its file in{" "}
                    <code>snippets/payment-methods/methods/</code>.
                </em>
            </p>;
  }
  const display = value => value === true ? "✔" : value === false ? "✖" : value === "pending" ? "⏳" : value === null || value === undefined ? "N/A" : value;
  return <table>
            <thead>
                <tr>
                    <th>Workflow</th>
                    {providers.map(p => <th key={p.code}>
                            <a href={p.href}>{p.name}</a>
                        </th>)}
                </tr>
            </thead>
            <tbody>
                {workflowKeys.filter(w => !hideWorkflows.includes(w.key.toLowerCase())).map(w => <tr key={w.key}>
                            <td>
                                {w.href ? <a href={w.href}>{w.label}</a> : w.label}
                            </td>
                            {providers.map(p => <td key={p.code}>
                                    {display(p.workflows && p.workflows[w.key])}
                                </td>)}
                        </tr>)}
            </tbody>
        </table>;
};

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 <p>
                <em>
                    No countries configured for this method yet — add them to
                    its file in <code>snippets/payment-methods/methods/</code>.
                </em>
            </p>;
  }
  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 <div>
            {method && <p>{description}</p>}
            <table>
                <thead>
                    <tr>
                        <th className="min-w-[115px]">Region(s)</th>
                        <th>Countries</th>
                    </tr>
                </thead>
                <tbody>
                    {rows.map(row => <tr key={row.continent}>
                            <td>
                                <b>{row.continent}</b>
                            </td>
                            <td>
                                <span className="inline-flex flex-row flex-wrap">
                                    {row.list.map(c => <span className="text-xs text-nowrap rounded-sm hover:mint-bg-gray-100 cursor-default px-1" key={c.code}>
                                            {flagFor(c.code)} {c.name}
                                        </span>)}
                                </span>
                            </td>
                        </tr>)}
                </tbody>
            </table>
        </div>;
};

export const method = {
  slug: "atome",
  name: "Atome",
  href: "/docs/orchestration/payment-methods/atome",
  workflows: {
    sdk: true,
    api: true,
    delayedCapture: false,
    instantCapture: true,
    cancelVoid: false,
    refund: true,
    saveInstruments: false,
    mit: false,
    interoperability: false
  },
  countries: [{
    code: "SG",
    name: "Singapore",
    continent: "Asia Pacific"
  }],
  providers: [{
    code: "adyen",
    name: "Adyen",
    href: "/docs/orchestration/payment-methods/atome/adyen",
    workflows: {
      sdk: true,
      api: true,
      delayedCapture: false,
      instantCapture: true,
      cancelVoid: false,
      refund: true,
      saveInstruments: false,
      mit: false,
      interoperability: false
    }
  }]
};

export const CONTINENTS = ["Africa", "Asia Pacific", "Europe", "Latin America", "Middle East", "North America"];

export const WORKFLOW_KEYS = [{
  key: "sdk",
  label: "Payrails SDK"
}, {
  key: "api",
  label: "Payrails API"
}, {
  key: "delayedCapture",
  label: "Delayed / Manual Capture",
  href: "/docs/orchestration/payment-acceptance/capture-and-cancel-modes#capture-mode"
}, {
  key: "instantCapture",
  label: "Instant Capture",
  href: "/docs/orchestration/payment-acceptance/capture-and-cancel-modes#capture-mode"
}, {
  key: "cancelVoid",
  label: "Cancel / Void",
  href: "/docs/orchestration/payment-acceptance/cancel-a-payment"
}, {
  key: "refund",
  label: "Refund / Reverse",
  href: "/docs/orchestration/payment-acceptance/refund-a-payment"
}, {
  key: "saveInstruments",
  label: "Save Instruments",
  href: "/docs/resources/manage-instruments"
}, {
  key: "mit",
  label: "Merchant Initiated Transaction (MIT)",
  href: "/docs/resources/payments/authorization-flags"
}, {
  key: "interoperability",
  label: "Interoperability"
}];

Atome is a buy now, pay later service in Southeast Asia. Customers split the purchase into instalments in Atome, and you receive the full amount.

Payrails processes Atome through Adyen as the payment service provider (PSP). Open the Adyen guide below for its setup steps and request examples.

## How a Atome payment works

Atome is a redirect payment method:

1. The customer selects Atome at checkout.
2. Payrails returns a redirect URL from the PSP, and the customer goes to Atome.
3. The customer logs in and approves the payment plan.
4. Atome sends the customer back to your `returnInfo` URL.
5. Payrails receives the final result from the PSP and updates the payment.

Each payment is single-use: the customer confirms every payment on its own. Payrails captures Atome payments immediately, so a successful payment is final. To return funds, [refund the payment](/docs/orchestration/payment-acceptance/refund-a-payment).

## Supported currencies and countries

Atome supports SGD (Singapore dollar) as its only presentment currency.

<SupportedCountriesTable countries={method.countries} continents={CONTINENTS} method="Atome" />

## Integrate Atome

The Adyen guide covers the PSP-side setup, the Payrails configuration, and the request fields Adyen requires.

<CardGroup cols="2">
  <Card href="/docs/orchestration/payment-methods/atome/adyen">
    <div className="provider-card">
      <span className="provider-card-logo">
        <ProviderLogo code="adyen" alt="Adyen logo" bleed />
      </span>

      <div>
        <p className="provider-card-name">Adyen</p>
        <p className="provider-card-type">Atome via Adyen</p>
      </div>
    </div>
  </Card>
</CardGroup>

## Check PSPs

<ProviderComparisonTable providers={method.providers} workflowKeys={WORKFLOW_KEYS} />

## Ways to integrate Atome

* **Payrails SDK:** the [Web SDK](/docs/orchestration/checkout-sdks/web) shows Atome when your workflow returns it as a payment option, and redirects the customer to Atome. To control how the redirect opens, listen for the [`actionRequired` event](/docs/orchestration/checkout-sdks/web/guides/action-required-event).
* **Payrails API:** call [lookup payment options](/docs/orchestration/payment-acceptance/lookup-payment-options), then authorize with `atome` as the `paymentMethodCode`. The Adyen guide lists the fields Adyen requires.

In both cases, confirm the final result through [webhook notifications](/docs/orchestration/payment-acceptance/receive-notifications) or the execution status. Don't treat the customer's return to your `success` URL as proof of payment.


## Related topics

- [Atome via Adyen](/docs/orchestration/payment-methods/atome/adyen.md)
- [Lookup payment options](/reference/lookupaction.md)
- [List active provider configs](/reference/listactiveproviderconfigs.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.