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

# openIframe()

> Embed the payment page in an iframe for a given session ID. Accepts an iframeConfig argument, so it works with a session created by your backend

Opens the payment page in an iframe for a given session ID.

```typescript theme={null}
openIframe(sessionId: string, iframeConfig?: IframeConfig): void
```

<Note>
  Pass `iframeConfig` directly to open a session created by your backend — the [recommended integration](/quickstart/integration-methods). If you omit it, the SDK reuses the `iframeConfig` from a previous `createSession()` call on the same instance.
</Note>

<Warning>
  Iframe mode requires your domain to be whitelisted in your Payviox dashboard settings.
</Warning>

<Warning>
  An iframe doesn't guarantee the customer stays on your page. Redirect-based providers (PayPal, Zen, Nicepay, Payssion, Pallapay, Crypto.com) can't render inside an iframe, so picking one triggers a full-page navigation to the provider. To keep the customer on your page in all cases, restrict the session to a non-redirect method — for example `paymentMethodId: 'stripe_credit'`. See [Iframe integration](/sdk/integration/iframe).
</Warning>

## Parameters

<ParamField path="sessionId" type="string" required>
  The session ID to display in the iframe. Returned by [`POST /session`](/api/endpoints/create-session) or by [`createSession()`](/sdk/api-reference/create-session).
</ParamField>

<ParamField path="iframeConfig" type="IframeConfig">
  Iframe configuration. Required unless a previous `createSession()` call on this instance already provided one.

  <Expandable title="IframeConfig properties">
    <ParamField path="iframeTarget" type="HTMLElement" required>
      DOM element the iframe is inserted into. Its existing children are replaced.
    </ParamField>

    <ParamField path="width" type="string" default="100%">
      Any valid CSS width.
    </ParamField>

    <ParamField path="height" type="string" default="400px">
      Any valid CSS height.
    </ParamField>

    <ParamField path="withoutBorder" type="boolean" default="false">
      Removes the iframe border.
    </ParamField>

    <ParamField path="transparentBackground" type="boolean" default="false">
      Renders the payment page with a transparent background.
    </ParamField>

    <ParamField path="style" type="string">
      Additional CSS applied to the iframe.
    </ParamField>
  </Expandable>
</ParamField>

## Examples

### Recommended: session created by your backend

```javascript theme={null}
const payviox = new Payviox('pk_live_your_key');

const { session_id } = await fetch('/api/checkout', { method: 'POST' }).then((r) => r.json());

payviox.openIframe(session_id, {
  iframeTarget: document.getElementById('payment-container'),
  height: '600px',
  withoutBorder: true,
});
```

### Session created by the SDK

```javascript theme={null}
const payviox = new Payviox('pk_live_your_key');

// Passing iframeConfig here lets openIframe() be called later without arguments.
const sessionId = await payviox.createSession({
  amount: 5000,
  currency: 'USD',
  customer: 'user@example.com',
  description: 'Order payment',
  order_id: 'order_123',
  items: [{ name: 'Product', quantity: 1, price: 5000 }]
}, {
  iframeConfig: {
    iframeTarget: document.getElementById('payment-container')
  }
});

// Open the iframe later
payviox.openIframe(sessionId);
```

<Note>
  If you don't need to do anything between session creation and display, `iframeMode: true` in [`createSession()`](/sdk/api-reference/create-session) opens the iframe for you.
</Note>

## Errors

Throws `Iframe target is required` when no `iframeTarget` is available — neither in the `iframeConfig` argument nor from a previous `createSession()` call.