[SOLVED] Onramper plugin not working in React

Moralis General
#1

hi, I’m having trouble configuring onramp into my app,
I try to copy-paste this code into my app, and also I have already added the Fiat Onramp plugin in my moralis account, but then i always receive the error Moralis.Plugins.fiat is undefined. can someone help me why does this happen?

import React, { useState, useEffect } from "react";
import { useMoralis } from "react-moralis";

function Ramper() {
  const [ramper, setRamper] = useState();
  const { Moralis } = useMoralis();
  useEffect(() => {
    if (!Moralis?.["Plugins"]?.["fiat"]) return null;
    async function initPlugin() {
      Moralis.Plugins.fiat
        .buy({}, { disableTriggers: true })
        .then((data) => setRamper(data.data));
    }
    initPlugin();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [Moralis.Plugins]);

  return (
    <iframe
      src={ramper}
      title="ramper"
      frameBorder="no"
      allow="accelerometer; autoplay; camera; gyroscope; payment;"
      style={{
        width: "420px",
        height: "625px",
        boxShadow: "0 0.5rem 1.2rem rgb(189 197 209 / 20%)",
        border: "1px solid #e7eaf3",
        borderRadius: "1rem",
        backgroundColor: "white",
      }}
    />
  );
}

export default Ramper;
#2

Did you install fiat onramp plugin on your moralis server?

#3

yes i did install fiat onramp plugin on my moralis server, is there any extra step that im missing?
this is my version of moralis :
“moralis”: “^1.11.0”,
“react-moralis”: “^1.3.5”,

#4

Try this code. I used isInitialized as a dependency instead of Moralis.Plugins

function Ramper() {
  const [ramper, setRamper] = useState();
  const { isInitialized } = useMoralis();
  const { Moralis } = useMoralis();
  useEffect(() => {
    async function initPlugin() {
      Moralis.Plugins.fiat
        .buy({}, { disableTriggers: true })
        .then((data) => setRamper(data.data));
    }
    isInitialized && initPlugin();
  }, [isInitialized]);

  return (
    <iframe
      src={ramper}
      title="ramper"
      frameBorder="no"
      allow="accelerometer; autoplay; camera; gyroscope; payment;"
      style={{
        width: "420px",
        height: "625px",
        boxShadow: "0 0.5rem 1.2rem rgb(189 197 209 / 20%)",
        border: "1px solid #e7eaf3",
        borderRadius: "1rem",
        backgroundColor: "white",
      }}
    />
  );
}

export default Ramper;
1 Like
#5

i try it but still receive the same error
Screenshot_22

#6

i try console.log Moralis.Plugins and this is what i got, i dont see any fiat function
Screenshot_23

#7

Can you check again if the plugin is installed on your server, if not then try to install it again.

After installing the plugin console log of Moralis.Plugins should also return the fiat object as shown in the image.

image
image724×414 54.1 KB

1 Like
#9

i just uninstall and install it again, and its works now!

1 Like