[SOLVED] OnRamper youtube tutorial error

Technical Issue Reporting
#1

I followed the ‘How to Add Fiat Gateway to dApps’ youtube tutorial (https://rb.gy/eku5qd), however when I try to implement the iframefiat() function to render onramper widget on the same page I keep getting : TypeError: Cannot read properties of undefined (reading ‘data’).

Some help would be appreciated folks

<html>

  <head>

    <title>Vanilla Boilerplate</title>

      <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

    <script src="https://npmcdn.com/moralis@latest/dist/moralis.js"></script>

    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>

  </head>

  <body>

    <button id="btn-login" onclick="iframefiat()">Buy crypto</button>

    <iframe id="myIframe" src="" width="350" height="650" style="display:none"></iframe> <br>

    <br><br>

    <script>

      // connect to Moralis server

      Moralis.initialize("cACt60Lmxgj6a2TczULXZo1dVEZkGq0OPhXSx9et");

    Moralis.serverURL = "https://yyk2zokkkllt.grandmoralis.com:2053/server";

      (async function(){

          Moralis.initPlugins();

      })();

      function buycrypto(){

        Moralis.Plugins.fiat.buy();

      }

      async function iframefiat(){

        let response = await Moralis.Plugins.fiat.buy({}, {disableTriggers: true});

        document.getElementById('myIframe').style.display = 'block';

        document.getElementById('myIframe').src = response.result.data;

      }

    </script>

  </body>

</html>
#2

Hi, it may be response.data instead of response.result.data now.
You can use a console.log(response) to see what fields you have there.

#3

thanks; @cryptokid that actually worked

#4

may i know how to insert the buy crypto iframe on the page without using the pop up?

#5

I tried to use your appId and serverUrl but I got issues.
Is the server updated? Is it active? Is the fiat plugin installed?

This is the fixed project (I am using my server here)

<html>
  <head>
    <title>Vanilla Boilerplate</title>
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://npmcdn.com/moralis@latest/dist/moralis.js"></script>
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
  </head>
  <body>
    <button id="btn-login" onclick="iframefiat()">Buy crypto</button>
    <iframe id="myIframe" src="" width="350" height="650" style="display: none"></iframe> <br />
    <br /><br />
    <script>
      async function init() {
        await Moralis.start({
          appId: 'FNRaaWWRzn2dp8ItQBvPhNlc4D4iLVP0ng17BXdR',
          serverUrl: 'https://psvgohe33tol.usemoralis.com:2053/server',
        });
        Moralis.initPlugins();
      }
      async function iframefiat() {
        const response = await Moralis.Plugins.fiat.buy({}, { disableTriggers: true });
        document.getElementById('myIframe').style.display = 'block';
        document.getElementById('myIframe').src = response.data;
      }
      init();
    </script>
  </body>
</html>
#6

Brilliant thanks i’ll try out your code…

The fix I got was to add the below code but it kinds messed up the placement of the information.

<iframe src="" frameborder="0" id="iframeid" style="width: 50%;min-height: 10px;" ></iframe>

I’ll let you know how your code worked out for me.

Thanks

Amer