> For the complete documentation index, see [llms.txt](https://lyzi.gitbook.io/developer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lyzi.gitbook.io/developer/getting-started/integration-with-iframe.md).

# Integration with iFrame

## Integrating Lyzi Payment as an iFrame

Lyzi payments can be seamlessly embedded into your website using an iFrame. This approach keeps users on your site throughout the payment process, improving the checkout experience without redirecting them away.

{% hint style="warning" %}
This integration allows the payer to enter the amount they want to pay, offering flexible payment options directly inside your site.\
**This method is not suited for standard e-commerce checkout flows or scenarios** where the host website must set a dynamic price per product or service. Use it only when it’s acceptable for the payer to choose the payment amount freely.
{% endhint %}

<figure><img src="/files/iGKARntIo3rKvQLxKqqK" alt=""><figcaption></figcaption></figure>

### 1. iFrame Implementation

To integrate the Lyzi payment gateway via iFrame, add the following snippet to your web page where you want the payment interface to appear:

```
<iframe
    src="https://pay.lyzi.io/merchant/YOUR_COLLECTOR_ID?return_url=YOUR_ENCODED_URL"
    style="width:1200px; height:520px; border:0;"
    title="Crypto Payment"
    allow="payment; clipboard-write; clipboard-read"
/>
```

#### Explanation of parameters

* src – The URL of the Lyzi payment gateway:
  * Replace \<COLLECTOR\_ID> with your collector ID.
  * `return_url` & `cancel_url` (camel\_case) specify where the user will be redirected after completing the payment inside the iFrame.
  * `webhook_url` (camel\_case) specifies the URL to 'POST' to notify the completion of the payment
  * More info in [Integration with API](/developer/getting-started/quickstart.md#return-callback-url)
* className – Tailwind classes for styling. Adjust width/height as needed.
* title – Provides an accessible description of the iFrame content.
* allow="payment" – Enables the browser to handle the payment process inside the iFrame.<br>

> 💡 Tip: Ensure the return\_url points to a page on your site that can handle and display the payment result to the user.

The method will link a payment to a **collector**, which is related to a **salespoint**. Before initiating the payment, the ID of the collector must be found.

Make sure that a collector has been created. Using the API or the backoffice :

#### Collector creation using the backoffice

{% columns %}
{% column width="25%" %}

<figure><img src="/files/AeNukboRlW4E8LY2oMH8" alt=""><figcaption></figcaption></figure>

{% endcolumn %}

{% column width="75%" %}

<figure><img src="/files/sBSZc7kd4zkkE1Vbv4fS" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

From the table, note the value under the "Static ID" column, **this is the COLLECTOR\_ID you must use**.

### 2. Security Considerations

Even when using an iFrame, it is crucial to verify payments on your backend:

1. The iFrame only handles the user interface; do not trust the front-end for payment status.
2. Use the Check Status API to confirm the transaction after payment completion.
3. Optionally, implement a webhook (callbackUrl) to receive server-to-server payment notifications for added reliability.

### 3. Styling and Responsiveness

* Set width and height to cover the area needed for the payment interface.
* Avoid scrollbars by using border-0 and ensuring parent containers have sufficient dimensions.
* Make the iFrame responsive by using relative units or CSS Flex/Grid layouts.

### 4. Example with React

```
const PaymentIframe = ({ payUrl, collectorId }) => {
  const currentUrl = window.location.origin;
  const iframeSrc = `${payUrl}/merchant/${collectorId}?return_url=${encodeURIComponent(currentUrl + "/result")}`;

  return (
    <iframe
      src={iframeSrc}
      className="w-full h-full border-0"
      title="Crypto Payment"
      allow="payment"
    />
  );
};
```

> 💡 Tip: You can dynamically generate the collectorId and return\_url per transaction for better flexibility.

***

This iFrame integration provides a fast, reliable, and user-friendly way to accept cryptocurrency payments without redirecting users away from your site. Always combine it with backend verification for maximum security.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://lyzi.gitbook.io/developer/getting-started/integration-with-iframe.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.