> ## Documentation Index
> Fetch the complete documentation index at: https://docs.xpaycheckout.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Architecture

> Below is the Architecture of your xPay integration for one time payments.

<Frame caption="How to accept payments?">
  <img className="block dark:hidden" src="https://mintcdn.com/xpay/REkE_HjmjRViMmXV/images/architecture-light.png?fit=max&auto=format&n=REkE_HjmjRViMmXV&q=85&s=6e93a380a6fea690912df52a83cc56a0" alt="Architecture Light" width="2613" height="2092" data-path="images/architecture-light.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/xpay/REkE_HjmjRViMmXV/images/architecture-dark.png?fit=max&auto=format&n=REkE_HjmjRViMmXV&q=85&s=3affbb89177f7c64782afe1dba46e5cc" alt="Architecture Dark" width="2613" height="2092" data-path="images/architecture-dark.png" />
</Frame>

### xPay Payment Flow Architecture

This diagram illustrates the integration flow for processing payments through xPay. The architecture involves three key components: the **Merchant Server**, **Merchant Frontend**, and **xPay’s Server and Client systems**. Here's a step-by-step breakdown of the payment process:

<Steps>
  <Step title="Payment Intent (Merchant Server → xPay Server)">
    The payment process begins when the Merchant Server initiates a request to
    the xPay Server to create a payment intent. This intent encapsulates the
    necessary details for the payment, such as the amount, currency, and other
    transaction metadata. See all the details in [xPay APIs](/developer-resources/endpoints/payments/create-intent).
  </Step>

  <Step title="Receive Payment Intent (xPay Server → Merchant Server)">
    Once the payment intent is successfully created, the xPay Server responds to
    the Merchant Server with a unique identifier for the payment, known as the
    `xIntentId`. This identifier will be used to track the payment throughout the
    process.
  </Step>

  <Step title="Forward Intent data (Merchant Server → Merchant Frontend)">
    The Merchant Server forwards the `fwdUrl` to the Merchant Frontend, which
    is responsible for managing the user interface that initiates the payment.
  </Step>

  <Step title="Redirect to xPay Client (Merchant Frontend → xPay Client)">
    Upon user interaction (e.g., clicking `Pay Now`), the Merchant Frontend
    redirects the customer to the xPay Client by using the `fwdUrl`. This
    redirection allows xPay to handle the actual payment process, presenting the
    user with various payment options and methods. See all the methods here [Payment Methods](/get-started/payment-methods-supported)
  </Step>

  <Step title="Process Payment & Return Metadata (xPay Client → Merchant Frontend)">
    After the payment is processed, the xPay Client redirects the user back to
    the Merchant Frontend, providing the **xIntentId** and any relevant
    metadata.

    <Tip>Now, you can check the payment status by contacting your server, which will communicate with xPay's server to verify the status using the **xIntentId**.</Tip>
  </Step>
</Steps>

### Key Components

* **Merchant Server**: Handles backend operations like creating payment intents and processing the xIntentId received from xPay.
* **Merchant Frontend**: Manages the user interface, enabling users to initiate payments and receive feedback on the payment status.
* **xPay Server**: Responsible for generating the payment intent and returning the xIntentId to the Merchant Server.
* **xPay Client**: Manages the user’s payment journey, providing them with payment options and returning transaction metadata after payment processing.

This flow ensures a smooth, secure, and efficient integration for handling payments via xPay, with minimal friction on the user’s end. Each step is designed to maintain clarity, streamline transaction handling, and facilitate a seamless experience for both developers and users.