Onramper API integration on Dapp

Moralis General
#1

Hi, Iā€™d like to try the Onramper Plug-in integrating it on a Dapp using Moralis.

My question is, once the user bought the token with their card or preferred fiat method, which wallet address does those tokens go to? do they go directly to Metamask or the wallet used to authenticate or sign in to my Dapp?

Also, that tokens list to buy are ALL the tokens available to buy? or can we add new tokens from different networks? For example, can I edit the code somehow to list only 1 specific token from the Ethereum network to be bought? My idea is to create a new tab in a Staking Dapp for an specific project, and offer the chance to buy their token onramp besides being able to swap it for ETH or USDT. Is this possible? in that case, how?

Thank you very much,

Marcel

#2

Hi Marcel

I recommend trying buying some crypto yourself through the integration so you understand this first hand.

But the answer is that the user needs to provide the wallet address themselves in the buy process.

While many tokens are available, its not all tokens.

Onramper integration should be mainly used to buy big cryptos like ETH and USDC - and we will soon integrate a DEX plugin which will allow users to trade their cryptos from Onramper to ANY crypto that is on any DEX.

This DEX Plugin should be out this week!

1 Like
#3

Thank you Ivan for the prompt response, I will try it. Also very hyped about the Dex plug-in, very looking forward to it.

Iā€™m excited about Dapp development after completing the courses at the academy. Iā€™ve been studying the Moralis documentation these last 2 weeks waiting for the Moralis course at the Academy. Iā€™m hoping to being helpful here in the forum soon once I have built some dapps myself, as I also would love to be Moralis developer soon. I shill the academy and Moralis in every telegram and Discord group lol.
Thanks brother, greetings from the UK

1 Like
#4

Amazing to hear @ivan

Waiting for the DEX plugin to launch, will need it for one of my applications.

#5

I wanted to do some more customization of the onRamper widget so Iā€™ve been experimenting with it raw in my dap. It has many more parameters than the Moralis plugin exposes and I want those. Specifically I want to limit my users to only buying USDC or Matic, but only on Polygon.

Fiddling with formatting the thing I found the following:

  • The defaultAmount parameter works a peach.
  • The ā€œcolorā€ parameter only affects the button color.
  • The ā€œfontFamilyā€ parameter works well enough. Here Iā€™ve switched it to ā€œtypewriterā€ for a touch more ā€œunibomberā€ vibe.
  • Somehow itā€™s hooked into the same const {colorMode} = useColorMode(); context that @Chakra-react uses. Because when I flip my site colorMode to ā€œdarkā€ in its @Chakra context the widgetā€™s text color responds and flips white. But its background color remains white. So it just blanks out all text.
  • I can manually select the Polygon versions of USDC, Matic and ETH. But I donā€™t know the code to filter for them in onlyCryptos or even defaultCrypto. I canā€™t find a list of supported crypto tokens and their OnRamper symbols anywhere.
  • Not entirely sure if Iā€™m setting the defaultAddrs object right. I canā€™t get past this basic display formatting in my testing.
  • Along the way it occurs to me there is no provision for SELLING crypto in the ONramper interface. Is there a conjugate OFFramper somewhere?

image image

Much respect for aggregating fiat gateways. Thatā€™s a TON of security and KYC work done that I donā€™t have to. Butā€¦altogether onRamperā€™s front-end doesnā€™t seem very robust or customizable, nor quite ready for prime time in such simple things as pages with dark mode. Their documentation has a few examples but its woefully missing the necessary exhaustive tables of supported values that you need once you try and actually configure the thing. Itā€™s left us all guessing for codes and I for one: failing.

And I donā€™t think this is the right place to be complaining about it. Can someone point me to the onRamper devs? I canā€™t find a ā€œcontact usā€ anywhere either.

#7

Ah. NOW weā€™re talkingā€¦

  • I see it has a BUNCH of undocumented parameters like ā€˜supportBuy/Sellā€™ā€¦but is still missing a ā€œbackground-colorā€.
  • I see backgroundColor: inIframe() ? "transparent" : "whitesmoke", on Feb 20 but thatā€™s not working. Do I not have the latest version? Or am I not supporting inIFrame() correctly?
  • I see thereā€™s no font-color in itā€™s style object, so itā€™s just left to whatever frameworkā€™s running? But I canā€™t override it because itā€™s definition fires locally and would overwrite anything at my scope level.
  • Buggers squared off the frame in their css. I canā€™t round the corners. Dang.

Hm.

1 Like
#8

Ok so it probably works in general. However: my use case is all on Polygon for the moment to dodge main-net Tx fees. I donā€™t want my end-users landing on ETH. So when I do get things configured for Polygon ā€œMoonpayā€ is the only service that onRamper routes us to. And Moonpay has this issue with Brave:
image

So thatā€™s deal-killer #1. Anyway, working around that one by switching to Safari and I run intoā€¦ā€œnot quite ready for prime-timeā€ #2:

image
image874Ɨ162 11.5 KB

Then Moonpay barfs up its own pop-up window and offers the USDC on Polygon weā€™ve been promised, right?

Wrong. You get nothing but USDC(erc20 on ETH Mainnet) and like it. Thatā€™s deal killer #2. Thereā€™s no way to change the token or networkId from here.

image
image880Ɨ1188 67.1 KB

Thinking Iā€™m wandering off to give Transak a try instead. This is too far from prod-ready.

#9

Getting Error " Uncaught ReferenceError: Moralis is not defined at buycrypto (NFTMarketPlace:42:9) at HTMLButtonElement.onclick (NFTMarketPlace:28:92)" when I am trying to integrate onramper on my website. I have been following the tutorial on youtube and copied paste the exact code shown.

#10

this error sounds like Moralis SDK was not imported, usually you have to add a line in html header like:
<script src="https://unpkg.com/moralis@latest/dist/moralis.js"></script>

#11

Thanks! This solution worked!

#12

Hello! I am trying to deploy my server using moralis by following the tutorial video on youtube, but am getting this error ā€œDestination folder must contain: index.html!ā€

#13

Yeah, so like whats the benefit to using ramper as a moralis plugin vs ramper react widget available with npm install @onramper/widget ? Iā€™m playing with it on the boilerplate, it works, but it doesnt even fill in your wallet address for you? Then I Itried installing it in my project calling it in as a react component like <Ramper /> and it doesenā€™t work I get a white empty frame and an error in the console. The api key and plugin are installed.

js?id=G-68RDL1MWQE&l=dataLayer&cx=c:53 Uncaught DOMException: Blocked a frame with origin "https://widget.onramper.com" from accessing a cross-origin frame.
    at nc (https://www.googletagmanager.com/gtag/js?id=G-68RDL1MWQE&l=dataLayer&cx=c:53:326)
    at oc (https://www.googletagmanager.com/gtag/js?id=G-68RDL1MWQE&l=dataLayer&cx=c:54:160)
    at oc (https://www.googletagmanager.com/gtag/js?id=G-68RDL1MWQE&l=dataLayer&cx=c:54:192)
    at config (https://www.googletagmanager.com/gtag/js?id=G-68RDL1MWQE&l=dataLayer&cx=c:256:375)
    at Ys (https://www.googletagmanager.com/gtag/js?id=G-68RDL1MWQE&l=dataLayer&cx=c:266:203)
    at $s (https://www.googletagmanager.com/gtag/js?id=G-68RDL1MWQE&l=dataLayer&cx=c:267:21)
    at https://www.googletagmanager.com/gtag/js?id=G-68RDL1MWQE&l=dataLayer&cx=c:448:36
    at https://www.googletagmanager.com/gtag/js?id=G-68RDL1MWQE&l=dataLayer&cx=c:443:335
    at https://www.googletagmanager.com/gtag/js?id=G-68RDL1MWQE&l=dataLayer&cx=c:443:340
    at https://www.googletagmanager.com/gtag/js?id=G-68RDL1MWQE&l=dataLayer&cx=c:451:3```