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

# FPX

> Accept FPX online banking payments from customers in Malaysia, and check the PSPs that process FPX 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: "fpx",
  name: "FPX",
  href: "/docs/orchestration/payment-methods/fpx",
  workflows: {
    sdk: true,
    api: true,
    delayedCapture: false,
    instantCapture: true,
    cancelVoid: false,
    refund: true,
    saveInstruments: false,
    mit: false,
    interoperability: false
  },
  countries: [{
    code: "MY",
    name: "Malaysia",
    continent: "Asia Pacific"
  }],
  providers: [{
    code: "adyen",
    name: "Adyen",
    href: "/docs/orchestration/payment-methods/fpx/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"
}];

FPX (Financial Process Exchange) is Malaysia's online banking payment network. Customers pick their bank and confirm the payment in their own online banking.

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

## How a FPX payment works

FPX is a bank redirect payment method:

1. The customer selects FPX at checkout.
2. Payrails returns a redirect URL from the PSP, and the customer goes to the bank selection page.
3. The customer picks their bank and confirms the payment in online banking.
4. The customer returns 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 FPX 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

FPX supports MYR (Malaysian ringgit) as its only presentment currency.

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

## Integrate FPX

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/fpx/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">FPX via Adyen</p>
      </div>
    </div>
  </Card>
</CardGroup>

## Check PSPs

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

## Ways to integrate FPX

* **Payrails SDK:** the [Web SDK](/docs/orchestration/checkout-sdks/web) shows FPX when your workflow returns it as a payment option, and redirects the customer to the bank selection page. 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 `fpx` 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

- [FPX via Adyen](/docs/orchestration/payment-methods/fpx/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.