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.

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.

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/<COLLECTOR_ID>?return_url=${encodeURIComponent(currentUrl + "/result")}`}
    className="w-full h-full border-0"
    title="Crypto Payment"
    allow="payment"
/>

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 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.

💡 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

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.