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

# Guides and API reference

> Guides, SDKs, and API reference for Payrails: enable payment methods, connect PSPs, and launch checkout on web, iOS, Android, and React Native.

<div class="w-full relative lg:mint-min-h-[calc(100vh-84px-90px)] mint-min-h-[calc(100vh-104px-90px)]">
  <div
    class="flex flex-col absolute justify-center items-center w-full mint-min-h-[540px] mint-z-[-1]
mint-bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] mint-bg-[size:200px_200px]
dark:mint-bg-[linear-gradient(to_right,#1a1a1a_1px,transparent_1px),linear-gradient(to_bottom,#1a1a1a_1px,transparent_1px)]"
  >
    <div class="pointer-events-none absolute inset-y-0 right-0 w-full mint-bg-[linear-gradient(to_top,#fff,#0000_20%,#0000_80%,#fff)] dark:mint-bg-[linear-gradient(to_top,rgb(var(--background-dark)),#0000_30%,#0000_70%,rgb(var(--background-dark)))]" />
  </div>

  <div
    class="flex flex-col relative justify-center items-center p-4 py-12
font-light lg:mint-text-6xl lg:mint-mt-[0rem] mint-mt-[6.75rem] md:mint-text-5xl mint-text-4xl z-1"
  >
    <div class="relative z-10 flex flex-col items-center text-black md:px-12 px-2 dark:text-white py-4">
      <h1 class="text-center lg:mint-text-6xl sm:mint-text-5xl font-semibold my-4">
        Build with Payrails
      </h1>

      <p class="text-center mint-text-2xl">Guides, SDKs, and API reference for building payments with Payrails.</p>
    </div>
  </div>

  <div class="flex flex-col items-center justify-center px-2 md:px-12 z-1">
    <div class="mint-mt-4 mint-mb-8 mx-auto w-full mint-max-w-[62rem] px-4 lg:px-12">
      <div class="not-prose mint-grid mint-grid-cols-1 sm:mint-grid-cols-2 lg:mint-grid-cols-3 gap-8">
        <a href="/docs/explore-payrails" class="pr-card hover-zoom">
          <div class="pr-card__image" style={{ backgroundImage: "url(https://mintcdn.com/payrails-42074109/RfJR_cwOZ_n4ybyl/images/home/get-started.webp?fit=max&auto=format&n=RfJR_cwOZ_n4ybyl&q=85&s=013c2eca9bfcb1d61f645d63b87ae3f2)" }} />

          <div class="pr-card__body">
            <h2 class="pr-card__title">Get started</h2>
            <p class="pr-card__text">Set up your account and make your first payment.</p>
          </div>
        </a>

        <a href="/docs/orchestration/payment-methods" class="pr-card hover-zoom">
          <div class="pr-card__image" style={{ backgroundImage: "url(https://mintcdn.com/payrails-42074109/RfJR_cwOZ_n4ybyl/images/home/payment-methods.webp?fit=max&auto=format&n=RfJR_cwOZ_n4ybyl&q=85&s=b7c697b6b1ccca950bed35db64f65119)" }} />

          <div class="pr-card__body">
            <h2 class="pr-card__title">Payment methods</h2>
            <p class="pr-card__text">Configure and enable payment methods for your checkout.</p>
          </div>
        </a>

        <a href="/docs/orchestration/integrations" class="pr-card hover-zoom">
          <div class="pr-card__image" style={{ backgroundImage: "url(https://mintcdn.com/payrails-42074109/RfJR_cwOZ_n4ybyl/images/home/supported-psps.webp?fit=max&auto=format&n=RfJR_cwOZ_n4ybyl&q=85&s=b21609dfdf7a9833515c6c611dd713fd)" }} />

          <div class="pr-card__body">
            <h2 class="pr-card__title">Integrations</h2>
            <p class="pr-card__text">Connect Payrails to your payment service providers.</p>
          </div>
        </a>

        <a href="/docs/orchestration/checkout-sdks" class="pr-card hover-zoom">
          <div class="pr-card__image" style={{ backgroundImage: "url(https://mintcdn.com/payrails-42074109/RfJR_cwOZ_n4ybyl/images/home/checkout-sdks.webp?fit=max&auto=format&n=RfJR_cwOZ_n4ybyl&q=85&s=9221c19ac2e42db7369409fb2e7a17c3)" }} />

          <div class="pr-card__body">
            <h2 class="pr-card__title">Checkout SDKs</h2>
            <p class="pr-card__text">Build checkout on web, iOS, Android, or React Native.</p>
          </div>
        </a>

        <a href="/reference" class="pr-card hover-zoom">
          <div class="pr-card__image" style={{ backgroundImage: "url(https://mintcdn.com/payrails-42074109/RfJR_cwOZ_n4ybyl/images/home/api-reference.webp?fit=max&auto=format&n=RfJR_cwOZ_n4ybyl&q=85&s=6fbfce9efd41ab3ac14dc3847cf27779)" }} />

          <div class="pr-card__body">
            <h2 class="pr-card__title">API reference</h2>
            <p class="pr-card__text">Endpoints, parameters, and examples for the Payrails API.</p>
          </div>
        </a>

        <a href="/docs/resources/payments" class="pr-card hover-zoom">
          <div class="pr-card__image" style={{ backgroundImage: "url(https://mintcdn.com/payrails-42074109/RfJR_cwOZ_n4ybyl/images/home/resources.webp?fit=max&auto=format&n=RfJR_cwOZ_n4ybyl&q=85&s=db0d43492262174201ef370ff2bda99c)" }} />

          <div class="pr-card__body">
            <h2 class="pr-card__title">Resources</h2>
            <p class="pr-card__text">Look up statuses, error codes, and notification payloads.</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>


## Related topics

- [API References](/docs/orchestration/checkout-sdks/react-native/api-references.md)
- [Event API Reference](/docs/orchestration/checkout-sdks/web/references/event-api-reference.md)
- [Appearance API reference](/docs/orchestration/checkout-sdks/web/references/appearance-api-reference.md)