Ramp: How to add a fiat onramp to your Dapp? with Maciej Bembenista

hey guys welcome back after the break magic from ramp is here with you with me welcome my check uh so magic will do a workshop uh to teach you how to add uh fiat on wrap to your d app uh so that's one of the bounties that we have for xerox hack and uh pro tip is to combine this bounty with uh with other bounties uh but should be quite easy and straightforward um yeah so i'll give you the stage magic thanks um okay so i'll just share my screen so we can start um okay i've prepared a short presentation about this and there will also be a demo and some code samples at the end i will share the links so that you can see the code for yourself and play with it a little bit it's a simple uh example repo so uh nothing complicated so that you can uh get to the gist easily uh so a word about me uh i'm mate i'm a frontend developer at ramp i've worked there for almost three years i'm one of two front-end developers and i've created the ram sdk which we're gonna use today uh to add ramp to your uh the app um previously i was a consultant at a software house uh where i started working with uh crypto about four years ago uh for a project that's now defined but it's it allowed me to learn about ethereum uh when it was still pretty much in its infancy um and i've also worked for an education startup uh so yeah there's that um i'll now show you guys some short demo about what ramp could look like when you integrate it and add some custom features which i'll talk about a bit later so here's some rare it's a fantasy football web app that's uh based on crypto um and it allows you to uh top up your internal wallet via ramp so i'll click that now uh it shows up after a brief loader and and it allows me to uh buy i'm already logged in uh this is one of the uh awesome parts about ram that if you add it to your app and your users have also used run in another uh dab they will have their payment methods etc already saved so they so that they don't need to type in their credit card details or whatever it's just uh right there uh i'll click proceed uh in this app we then show the user address uh it's a one of the features that you can enable uh if you want to obfuscate uh the fact that we are using blockchain here a bit it might simplify things for uh begin users uh that don't want to think about blockchain addresses transaction hashes whatever you just say software wallet or whatever your app name is wallet and this is uh easy to understand for them uh just click on confirm here i already have a few payment methods uh saved um but i can choose some other ones um for now we'll just stick to the manual bank transfer uh just to create a transaction uh here's an order summary uh you click buy now uh some processing and now there are the transfer details that you need to use to send money to us and uh we'll send you the crypto uh so that's just all there is to it uh pretty much uh and you've probably noticed that uh if you've seen ram before our usual colors are green and white but in this case uh the app is uh the abs accent colors are blue because we allow you to customize that so that users don't feel like they are stepping out of your app uh into another one uh it just feels like one integrated up uh one simple flow uh that's uh that's pretty much seamless um so um that is for the that's it for the demo uh we'll go on to the presentation to talk about what round piece and what is false um so if you've been uh interested in crypto for some time or even if you are just a beginner uh especially if you're just a beginner uh you've probably noticed that the biggest problem is that uh unless uh with the traditional banking system uh unlike with the traditional banking system um it's pretty hard to get the basic things going because uh you need to understand things like transaction hashes how to sign a transaction uh how to send another users your your wallet address how to check up your balance um it's all pretty much still manual at this point you have some apps that make it easier for you but when you create a dab you want users to use their wallets and it can be sometimes sometimes complicated to uh pass some uh pass on details like address because users can find it uh so we've just created a simple app uh that's embedded into your dab so that users don't have to reach for their uh phone uh switch apps uh you just buy crypto right inside the doc that you're using so it makes it a lot simpler for the user uh to understand what's uh going on and so that they are not overwhelmed uh by all this and also behind the scenes we uh handle all of the hard aspects of buying and selling crypto like compliance aml and kyc we support uh various payment methods uh so just so you don't have to and we also have a support team that answers questions uh if your users get stuck during any part of the process we are now available in pretty much most of the world and as i've said before when you add ram to your dab and a user already has an account with us they just log in using their email and a authentication code and they have all their details saved all their payment methods it's just all there but on the technical side we want the integration to be as simple as possible so uh instead of some manual integration we've released an sdk that you just installed from npm and within a few lines of code you have all that running if you need some more uh some more fine-tuned control or notifications you can use our rest api and web hooks to monitor the user's transactions or see what assets we have available for sale and if you are stuck as an integrator we run a discord channel where we provide you with uh support and answer questions about integrations and you can also ask us there about some uh custom features if you need any uh like those custom colors i've shown you or the wallet address of his creation so i'll walk through the code now i'll send you the link after i'm after i'll show you the the code and the demo uh but it's pretty much uh cloned repository uh install all the packages via yarn or npm uh whatever you prefer and run and that's it i'll make it a bit bigger for you uh okay so we have uh we have some simple inputs like whether you want to buy e4 or btc we of course have many more assets but just to keep it simple it's just ethereum and bitcoin type in the transaction value in euro uh that's not required the user can uh select the crypto assets and uh and transaction value uh in our app but if you want to shorten their flow and make it a bit easier for them and familiar you can ask them for those details even before you start ramp and just pass us those details and we also have a few uh modes that you can use ramping the most uh basic one the most uh like the first one we've released is called an overlay mode uh which works just like in so rare you get the loader uh enron pop-ups over your app over the current app and you can uh just go through it uh as you can see uh in uh this particular instance we don't have the address obfuscation enabled so that so we ask the user for their ethereum address i'm already logged in and ramp remembers me here so uh here's my eq address if you want to send me some um and yeah that's it if you want to close ramp uh we handle everything um there's an overlay that when you click on it it shows uh this exit pop-up there's also a mobile version that just takes up your whole screen so we can use it on tablets or smaller devices it's pretty much the same it's just bigger um and more focused on uh touch screens and the the exit button is uh here um the other mode of uh integration is what we call a hosted mode which is uh mainly used for web views when you want to integrate us in a mobile app where you don't have access to a browser or your main app is not run inside the browser so it's just configures the link and opens around in a new tab um it's not necessary to use the sdk for this we have this uh documented so uh all the parameters that are used by the sdk are just included in the url so you can just uh glue the link together with all the query params that that are needed like default asset or fiat currency and redirect the user to this website so that they can go through the flow then close the browser and go back to your dab and finish what they are doing buy some crypto keys some server fantasy cards uh whatever they need and the last mode uh is an embedded mode um due to popular demand uh we've also added a mode where uh you can launch ram inside a given element so uh let's uh suppose that you have a website and you just have one area where you want to display ram uh so that uh it will show up there not overlaying the um the whole app or without redirecting the user to another place you just do that you can set the the size of the the element to be whatever you want uh there there are some restrictions so that the widget can fit inside this element uh but other than that uh you just um you just provide us with an element to put the widget in uh and that's it um so as i've told you before uh you can use those uh inputs uh to configure some parameters like crypto assets and uh transaction value uh here i've selected ethereum and five euro and there it is uh five euro and um if you're young so i'll just show you how it's all done um on the html side we don't have anything complex just some buttons with ids that launch the clip listeners so i'll just go to the javascript bar okay here's the basic config for a ramp application so we want to know uh what your app is so that we can show uh the users uh which are they came from uh or things like go back to um demo up or in this case um we also ask you for your logo url so that we can display in this case i've used some demo logo so it looks like this but you can uh provide us with a logo url for your app and just like in server it looks like this here much better i've i couldn't find a better demo logo that was free to use okay fiat currency this is what i've talked about and url in order to test trump uh you want to use the staging url uh so that you won't pay for real transactions and you will be able to simulate that you've made the payment to test the flow in your app in the production version which is the default so if you want to use the production version you just remove this part and boom uh you go to the production so uh testing it locally is just as simple as providing a url to the widget um in the production version you obviously have to pay for your transactions so that they go through and you receive the crypto but on uh but on staging uh the staging environment i can show you uh you can go through the go through the whole flow create a transaction using uh for example this payment mentor uh okay let's create a transaction here uh i'll check that i've transferred the funds through my online banking which i obviously haven't and here it is go back to demo app as i told you before you can click view receipt and when you go here you can click the button uh that releases the funds uh this is this just simulates that a user has made a payment uh so that you don't have to pay for your transaction and you can see what it looks like when everything is okay and it says sucks here right now uh and the status screen has gone to all done so so yeah uh on the on the production environment is not available um so it's best to test here uh on our staging one mode and here's the sdk we've imported it from npm uh over here the package is called patron network slash rampant sdk ramp instant is the older um name uh we've had for uh ram uh we just used ramp now uh but we didn't want uh to break anyone's implementation so we just kept the old name for our library um okay we create a on click when someone clicks the overlay desktop button for example we launched this function with the desktop parameter we put the basic ramp config we've discussed here into this uh this object and also choose a default asset uh just optional uh as i mentioned before if you want to shorten your users flow and make them get to their crypto purchase faster you can just provide this for them uh so we provide a default asset um fiat value this is the um amount of euro that you want the user to pay for your crypto and variant is uh what selects whether it will be an overlay or a hosted mode or embedded mode just like we've discussed so you create an instance of the ram sdk and just run the show method on it in case of other modes like the hosted mode or the embedded mode is the same although the embedded mode also requires you to provide a container node which is just a reference to this element in this case so you just point us to the element you want ramp to pop up in and we verify that it's the right size etc and put ramp in it so in order to get this element you just do this from container is document.queryselector um and this is the id of the element that i've used uh hashtag node um and this is how it's uh uh if this doesn't look familiar to you this code is a little bit different from your code it's because uh i've used direct script uh i thought that it might be more readable to people who are used to strongly typed languages but you can also use the ramp sdk with basic javascript uh nothing uh nothing complicated is needed no uh complex setup just get the package and uh and go um and also one thing that is not shown here is that we also have uh events that you can subscribe to so if i do this it means uh on any event that uh happens in the uh ramp uh application um console.log need the event so let's just see that i'll open the dev tools here click the desktop overlay uh you can ignore this this is from one of the integrations that we use to check for fraud they basically check if the browser that the user uses is not something simulated or it's not automated it's just basic fraud prevention but the thing that um is the most interesting to us uh is here so this means widget config down uh means the widget is loaded um and everything is okay uh and if i go here and create a transaction it gives me a a purchase created event uh along with uh some uh details about the transaction so um the uh the fiat currency uh the status of the transaction uh the asset uh which is the the crypto that the user bought uh which is ether in this case uh the exchange rate and uh all the other things uh that you uh that might be necessary for you to implement this uh but this is all optional you don't have to use this if you uh if you don't want to you can just remove this uh just show the widget to the user um they will go through they will go through it um buy the crypto they need and it will be available for them to use in your dab so this is all opt-in you use as much as you want uh but uh we don't push you to uh into a complex integration as you can see uh the basic integration is just uh what five lines here uh including the nd4 lines here for uh the config uh the the basic most simple uh integration looks like this um nothing more is needed all other details are completely optional uh so we just want the logo for from you and your app's name all other things are optional um and if you don't use a uh bundler like webpack uh or parcel uh you can uh you can get your uh ramp sdk from uh from a hosting uh so you can just do this in pure html uh with no javascript javascript bundling and building processes so nothing complicated um okay i think that's it for the uh for the code demo um this will all be uh available to you this is in a public repository that i will share with you in a moment um okay so let's go back to the presentation uh okay uh as i've told you before this is all uh described in our documentation so you go to docs.trump.network and you can see all the uh configuration parameters for the sdk they are described so it's easy to understand you can provide the user address uh it's all it all says where a parameter is required or optional you can pass in the user email address their country code you can also use web hooks if you have a back end for your app and you want to process when a user creates a transaction uh you don't have to listen for the events and pass them on to your app you can just use our webhook api so when you create the widget you provide a webhook status url and when when a transaction is done by a user we send you a request to this address that you provided with all the same details that i've shown you in the browser console it's also documented right here uh with some examples on how to set up a simple server that will receive those requests and show them to you if you use this locally you can use angrock uh to uh to receive the request without hosting your backend anywhere um and also uh when you just want the to link uh to ramp uh without downloading the sdk you can just create a link right like here uh linking to by the trump.

network and pass the parameters that you want to use for example the swap asset or user address uh and the most important one uh that you should know about is uh let me switch the top here uh it's here this is uh what probably most of you are going to need uh when integrating around uh into your dabs uh you uh can go to our discord uh either the one on xerox hack or our official param discord to ask for a host api key so that you can ask her ask us for custom features like the custom callers or the address of fusication this is also needed when you want to use credit card payments via ram so some certain some payment methods are enabled only when you um when you provide us with a host api key uh just for the user safety we don't require you to pay us anything it's just for safety so that we can know which apps are registered to use credit card payments with us um okay uh back to the links so uh as i've told you the discord uh channel for uh for ramp uh this is the official one where you can ask about integrations um ask for some custom features uh to be enabled for you if you need any um the docs page which i've shown you uh this is like the most basic source of information for you when it comes to adding your app to your to your website today's demo code if you want to play with it clone it run it and uh the link to the npm package okay untick messaged me does rom support any others if so how do you specify which one the address is on uh okay so ramp supports some uh authors uh like polygon for example and when you go to buy the trump network uh or i will use the this website okay this is the same this just uses uh an api key so that the features are enabled uh you can look for polygon or on polygon train uh die on polygon chain so the user just selects the the appropriate asset and that's it we are in the process of redesigning it so that choosing assets that have their um that have a tooth for them will be easier uh but for now you just select an asset that's uh on a on a l2 chain just go there and it says add your polygon address here um okay another question uh um okay uh can you integrate the app with uh python um okay uh so the ramp is uh separate from uh from the back end that you use so you can use whatever you want on the back and you can use java haskell elixir uh whatever you need um it's separate from the ui layer so the ui layer is what you see in the browser right here this is not python this is just regular browser and when you provide the webhook status url it sends a request but it's not sent to the users uh to the user's browser it's sent to your server so you need to have a back-end the back-end uh set up somewhere for example on aws that receives those requests and uh saves them to the database or whatever you want to do with this transaction so this is separate uh the flask back end as you've mentioned uh doesn't uh interact with the user's instance of ram that is open okay and the last link is the link to the npm package i will show it to you right now um this is where you can uh download the uh the sdk from uh and also there's a link to the repository it's all open source so you can see how exactly all of this works it's just the sdk ram the widget itself is not open source but the sdk is open source so you can see that it doesn't do anything that you might not want it to because ramp i haven't said this before but uh let me just jump to the uh to this part uh ramp uh is completely separate from your app so uh nothing uh that that you do uh in your app uh can uh change uh the content of uh this part because it's run in an iframe and it's done uh mostly for security uh because uh we have some things like the users will provide credit card details here and we don't want dubs to be able to see what the users type in here so uh it's completely like arrogant from each other so if you see the uh if you see the element tree here you can see that this is run in an iframe so details can't leak out of this iframe and but actors malicious actors uh can intercept uh details from inside this widget uh it's just for user safety and also uh this way uh we don't break any of your css and ramp is completely independent of from your from your whole tech stack uh the great part is about this solution is also that you don't need to update your sdk every time we release a product update so um let's suppose uh we released an update uh where we changed all the colors to the background colors to be black like a dark mode and you are still on the old sdk version uh it doesn't matter because uh we fetched the latest version of the ram widget from our servers and you are always up to date you don't need to maintain the integration or do any kind of work on it it just updates itself in the background so it's all fresh and secure with all the latest features that you might need how does ram acquired the users kyc okay so uh we use a third-party provider for this uh they're called passpase um and they uh if we uh decide that uh we aren't sure if uh uh if you are not fraudster or whatever um if we uh before we send you uh the crypto we ask you for id verification uh this just requires a um a webcam and that's it you show your uh show your face to the webcam and send a photo of your id and that's it you can go uh go through with transaction and also uh this is not something that uh requires any work from you it's all in the background so once you are integrate the sdk and show ram to the user we handle all of this and you don't need to concern yourself with with such details just point the user to ramp and uh you can forget about it uh we handle the rest okay uh do you guys have any more uh questions that's that's all i wanted to show you so i will also place the links or i will just send them to to the ramp uh discord um in a sec after we are finished i will send all the links uh that are here uh to the discord channel uh with some write up yeah thanks a lot for uh this introduction to ramon network personally i love this project and the ease of use i use it quite often and just reminder ramp network has two two kinds of bounties one is to use the ramp on ramp in your dmp and the other is to create the newbie friendly app so it's a great bounty to to combine it also with uh with other bounties um yeah so i think you you answered all the questions mache okay so uh if you have any more questions just message me on the xerox hack discord or on the ram channel or just go to ram's discord and we also ask answer questions there uh yeah so you know how to reach me thanks guys thanks machi