Fiat OnRamp support for React?

Moralis General
#1

Hi all.
Does the Onramper plugin support React?
Thanks

#2

No hook in to get that currently, but a way around that is to have a hook to hold the onRamper link

const [onRamperSrc, setOnRamperSrc] = useState("");

You can then have a function call to get the onRamper link to update the state such like


  async function getRamperUrl() {
    await Moralis.initPlugins();
    let response = await Moralis.Plugins.fiat.buy(
      {},
      { disableTriggers: true }
    );
    setOnRamperSrc(response.data);
  }

You can render your iframe conditionally such like

{!!onRamperSrc && <iframe src={onRamperSrc}></iframe>}
#3

It renders correctly, but it’s very laggy and sometimes the website freezes. The same happened when importing the plugin directly from onramp, by the way. Do you know what could it be?

#4

Maybe a better way of handling iframe in react using dangerouslySetInnerHTML

<div
  dangerouslySetInnerHTML={{
    __html: `<iframe src=${onRamperSrc} />`,
  }}
/>;
#5

No, same thing happens. Does it work fine for you?

#6

It actually works fine for me. Although can’t tell that much if it lags as I don’t use iframes really in react

#7

Can you try loading the Fiat page on this demo?

This is their code for loading the plugin.

If the same thing happens it could just be an issue with your machine.