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

# iFrame Integration

> Embed a PCX-hosted payment UI into your platform using a redirect URL — no custom payment UI required

PCX iFrame integration lets you embed a fully hosted payment form directly inside your web application. Your server initiates a payment via the PCX API and receives a `redirect_url` that you embed in an `<iframe>`. The payer completes the payment inside the iFrame using their banking app — PCX handles everything inside it.

***

## How it works

```
1. Your server calls POST /payments-init/initiate with the payment details
2. PCX returns a redirect_url containing encoded payment data
3. Your front end renders an <iframe> pointing to the redirect_url
4. The payer scans a QR code in the iFrame with their banking app and authorises the payment
5. PCX receives confirmation from the bank
6. PCX sends a webhook to your server with the payment status
```

***

## Who this is for

**Partners going live quickly** — if you need to accept GBP bank transfers without building a custom payment UI, the iFrame integration takes hours to embed rather than weeks to build.

**Compliance-focused teams** — payment authorisation happens entirely within the PCX-hosted iFrame via Open Banking. Your servers never see banking credentials, which significantly reduces your compliance surface.

**Cross-border payment platforms** — the integration supports GBP collection with NGN settlement, with PCX handling routing and FX.

***

## What PCX controls

| Layer                                      | Owner |
| ------------------------------------------ | ----- |
| Payment form layout and QR code generation | PCX   |
| Open Banking routing                       | PCX   |
| Payment execution and status tracking      | PCX   |
| Security, encryption, and fraud checks     | PCX   |
| PCI DSS and regulatory compliance          | PCX   |

***

## What your platform controls

| Layer                                                | Owner   |
| ---------------------------------------------------- | ------- |
| Payment initiation (amount, currency, payer details) | Partner |
| Webhook endpoint for payment confirmation            | Partner |
| Parent page UI surrounding the iFrame                | Partner |
| Metadata attached to the payment                     | Partner |

***

## Integration steps

<Steps>
  <Step title="Initiate the payment">
    Your server calls the PCX payment initiation endpoint with the amount, currency, and payer details. PCX returns a `redirect_url`. See [Payment Initiation](/guides/iframe/session-initialisation).
  </Step>

  <Step title="Embed the iFrame">
    Render an `<iframe>` in your page with the `redirect_url` as the `src`. The iFrame displays a QR code that the payer scans with their banking app. See [Embedding](/guides/iframe/embedding).
  </Step>

  <Step title="Receive webhook confirmation">
    PCX sends a server-to-server webhook to your registered endpoint when the payment is confirmed. Use this as your primary fulfilment signal. See [Webhooks](/essentials/webhooks).
  </Step>
</Steps>

***

## v1 scope

The iFrame integration currently targets **GBP bank transfers via Open Banking**. Native iOS and Android SDKs are not available in v1. Mobile apps can embed the iFrame via WebView.