> For the complete documentation index, see [llms.txt](https://docs.payr.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.payr.com/payment-interface/iframe.md).

# Iframe

The iframe integration allows you to embed Payr's hosted payment interface directly into your platform with minimal setup.

***

### Overview

After creating a payment session via `/user-login/`, you'll receive a `token` and `session_id`. Use these to construct the iframe URL and embed it in your page.

**Key Benefits:**

* Quick setup
* No JavaScript required
* All features included (APMs, wallet payments, recurring payments, card management)
* Automatic updates managed by Payr

***

### Setup

#### Step 1: Create a Payment Session

Call the `POST /user-login/` endpoint to create a payment session for your user:

```bash
curl -X POST https://sandbox-api.mypayr.co.uk/thirdparty/user-login/ \
  -H "Authorization: Token your_server_token" \
  -H "Content-Type: application/json" \
  -d '{"email": "user@example.com"}'
```

**Response:**

```json
{
  "token": "x9y8z7w6v5u4t3s2r1q0p9o8n7m6l5k4j3i2h1g0f9e8d7c6b5a4",
  "session_id": "01KH1FZ0N0..."
}
```

See the **Payment Session** API reference for full details.

***

#### Step 2: Construct the Iframe URL

Use the environment-specific base URL and append the token and session\_id:

| Environment    | Base URL                                                                         |
| -------------- | -------------------------------------------------------------------------------- |
| **Sandbox**    | `https://sandbox.mypayr.co.uk/third-party?token={token}&session_id={session_id}` |
| **Production** | `https://mypayr.co.uk/third-party?token={token}&session_id={session_id}`         |

**URL format:**

```
{base_url}?token={token}&session_id={session_id}
```

**Example (Sandbox):**

```
https://sandbox.mypayr.co.uk/third-party?token=x9y8z7w6...&session_id=01KH1FZ0N0...
```

***

#### Step 3: Embed the Iframe

Add the iframe to your HTML:

```html
<iframe
  src="https://sandbox.mypayr.co.uk/third-party?token=x9y8z7w6...&session_id=01KH1FZ0N0..."
  width="100%"
  height="700"
  frameborder="0"
  allow="payment"
></iframe>
```

**Recommended iframe attributes:**

* `width="100%"` — Responsive width
* `height="700"` — Minimum recommended height
* `frameborder="0"` — Clean integration
* `allow="payment"` — Required for payment features

***

### Security Notes

#### Token Safety

The `token` returned by `/user-login/` is a **short-lived user session token**, not your server API key.

* **Safe to pass to the client** - It's designed for client-side use
* **User-specific** - Only works for the authenticated user
* **Time-limited** - Expires after 15 minutes

**Never expose your server API token in client-side code.**

#### Session Expiry

The `session_id` expires after **30 minutes**. If a session expires:

1. Call `/user-login/` again to create a new session
2. Update the iframe `src` with the new token and session\_id

***

### Features Available

The iframe integration includes **all Payr payment features**:

#### Alternative Payment Methods (APMs)

* Alipay (Hong Kong & China)
* WeChat Pay
* UnionPay
* Users can select their preferred method in the iframe

#### Wallet Payments

* Apple Pay (Safari/iOS devices with Face ID or Touch ID)
* Google Pay (Chrome/Android devices with fingerprint or PIN)
* Fast biometric authentication
* One-time payments (not available for recurring)

#### Recurring Payments

* Users can set up recurring payment schedules
* Manage recurring payments from the payment interface
* Pause/resume functionality included

#### Card Management

* Add new payment methods
* Delete saved cards
* Select from multiple saved cards

***

### Payment Flow

After the user completes payment in the iframe:

1. **Payr processes the payment** - 3DS authentication if required
2. **Webhook sent to your server** - Real-time payment notification
3. **User sees confirmation** - Success/failure message in iframe

See **Webhooks** for details on handling payment notifications.

***

### Need Customization?

If you need to customize the payment interface to match your brand (colors, fonts, styling), consider using the [**SDK Integration**](/payment-interface/payr-sdk.md) instead.

The SDK provides the same features with full UI customization options.

***

### Next Steps

* [**Webhooks**](/webhooks.md) - Set up payment notifications
* [**Testing**](/testing.md) - Test cards for sandbox environment
* [**Error Handling**](/error-handling.md) - Handle payment errors

***

### Support

Need help with iframe integration? Contact **<support@mypayr.co.uk>**