iframe

iframe is a powerful tool for integrating our payment interface into your website/app. It allows you to embed external web content, such as the payment gateway's interface, seamlessly within your website/app. With iFrame, you can provide your customers with a secure and a convenient payment experience directly on your website/app. By integrating the payment gateway with the iFrame, you maintain control over the overall user interface and design while still leveraging the advanced functionality and security features of the payment gateway.

---

Implementing iframe

To show the checkout page in your domain.
All you need is to pass in the code the redirect_url received in the response from the authentication request.
To know how you can get the Redirect_url check the API Section

example

<iframe src="redirect_url" height="600" width="300"></iframe>

info

Note that the screen size can be adjusted to meet your requirements.

danger

Important: cross-domain requests are prohibited by the security policies of our service.

---

Apple Pay in iframe

Apple Pay is supported when using the Dinero Pay checkout page within an iframe.

To ensure Apple Pay functions correctly, you must complete the following steps on the parent page where the iframe is embedded.

1. Register and verify the merchant domain

The domain hosting the page that contains the iframe must be registered and verified for Apple Pay.

You must provide this domain to Dinero Pay so it can be associated with your Apple Pay configuration.

For example, if your checkout page is:

https://www.example.com/checkout

Then the domain to register is:

www.example.com

---

2. Allow payments inside the iframe

The iframe must include the allow="payment" attribute to enable Apple Pay functionality.

<iframe src="..." allow="payment"></iframe>

Example using the redirect_url:

<iframe
  src="redirect_url"
  height="600"
  width="300"
  allow="payment"
></iframe>

---

3. Add the parent domain communication script

Add the following script to the parent page that contains the iframe:

<script>
  document.addEventListener("DOMContentLoaded", () => {
    window.addEventListener("message", (e) => {
      if (e.data?.type === "iframeReady") {
        e.source.postMessage(
          {
            type: "parentHostname",
            host: window.location.hostname,
          },
          "*"
        );
      }
    });
  });
</script>

This script allows the iframe to retrieve the parent domain and correctly initialize the Apple Pay session.

---

3D authentication

• Your customer might get redirected for authentication against the 3D Secure system of his card issuer's bank.

Receiving response

• After the payment is processed, the customer will be taken to the success_url or cancel_url specified on the request object, depending on the results. Also, you will be notified through the callback_notification if it's configured in the dashboard.

note

Based on the regulations here in Saudi Arabia, most of the transactions require 3D authentication.