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

# Front-End Integration

The front-end SDK enables you to integrate a payment page into your applications without directly handling complex payment processing or security. It simplifies the front-end payment experience by providing a few key methods for securely displaying and interacting with the payment page. At the same time, Nayax manages the complex interactions with the billing provider in the background.

## Payment Flow

The diagram below describes the typical payment flow for a front-end integration.

```mermaid theme={null}
sequenceDiagram
    autonumber
    participant A as App
    participant S as SDK
    participant N as Nayax
    participant B as Backend

    Note over A,N: 1. Setup (Auto-Auth)
    A->>S: startPayment()
    S->>N: Open Session
    N-->>S: Session Data

    Note over A,S: 2. UI
    S->>A: Render Drop-In UI
    Note right of A: User taps "Pay"

    Note over S,N: 3. Execution
    S->>N: authRequest
    N-->>S: Approval

    Note over A,B: 4 & 5 (Independent)

    Note over S,A: 4. Callback
    S-->>A: onPaymentComplete

    Note over N,B: 5. Webhook
    N->>B: POST (JSON + HMAC)
    B-->>N: HTTP 200
```

<a
  href="/images/ecom-front-end-integration.png"
  download="ecom-front-end-integration.png"
  style={{
display: 'inline-flex',
alignItems: 'center',
gap: '8px',
padding: '8px 16px',
backgroundColor: '#6352E0',
color: 'white',
borderRadius: '6px',
fontWeight: '500',
fontSize: '14px',
textDecoration: 'none',
cursor: 'pointer'
}}
>
  ↓ Download diagram
</a>

Here's the breakdown of the diagram:

**1. Setup**

Your app calls [`startPayment (PaymentData)`](/docs/ecom-sdk/front-end-integration/ecom-sdk-create-payments) once. The SDK handles merchant authentication and session initialization with Nayax automatically. No additional API calls needed from your side.

**2. UI**

The SDK renders the [Drop-In UI](/docs/ecom-sdk/front-end-integration/drop-in-ui/index), a ready-made payment screen, directly inside your app. The cardholder enters their card details and taps Pay. Your app never touches raw card data.

**3. Execution**

The SDK submits the authorization request to Nayax. The server responds with an approval or decline based on the [`requestType`](/docs/ecom-sdk/front-end-integration/ecom-sdk-create-payments) you specified (Sale, Auth, or Capture).

**4. Callback**

The SDK fires a [callback](/docs/ecom-sdk/front-end-integration/handling-payment-results) (`onPaymentComplete`, `onPaymentFail`, or `onError`) depending on the outcome. Handle these in your app to update the UI and your local order state.

**5. Webhook**

Once the transaction is processed, Nayax automatically sends the result to your back-end as a [webhook notification](/docs/ecom-sdk/back-end-integration/webhook-notifications), a JSON payload containing the transaction status, card details, and your original `merchantRequestId`. Validate the [`Hmac`](/docs/ecom-sdk/hmac-validation/index) field before processing, then return `HTTP 200` to confirm receipt. This is your authoritative record of the transaction.

## Available Guides

<CardGroup cols={3}>
  <Card icon="play" title="Initiate Payments" href="/docs/ecom-sdk/front-end-integration/ecom-sdk-create-payments">
    Call startPayment to launch a payment flow with the Nayax eCom SDK.
  </Card>

  <Card icon="bell" title="Payment Callbacks" href="/docs/ecom-sdk/front-end-integration/handling-payment-results">
    Handle the SDK's payment result callbacks for Android and iOS.
  </Card>

  <Card icon="window" title="Drop-in UI" href="/docs/ecom-sdk/front-end-integration/drop-in-ui/index">
    Display a pre-configured list of payment methods anywhere on your site.
  </Card>
</CardGroup>