Widget Creation

integrations given below are the integration steps to embed the widget in your website web widget integration web widget integration involves the inclusion of three html tag 1 js file 2\ widget location 3\ initialiser file (base) parameter sample value remarks elementid "widget" mandatory mandatory (it should be an id of an element not a class), the name given in step 2 for id apikey "{api key}" mandatory mandatory , this you will get from dashboard post registration environment "staging" "staging" for test environment "production" for prod environment fiattype "inr" optional , fiat currency needed "inr" or "php" walletaddress "0xecc24eab0fb83ef0c536b35c44c578f750fdbb6e" optional , the wallet address to which tokens to be transferred this can be set within script code or can be passed as paramerter with url while initiating the widget fiatamount 100 optional , the amount for which you need to buy token useremail "test\@test com" optional , the email id of the user chainid "80001" optional , the block chain id in which the token is present example 80001 for polygon testnet tokenaddress "0xecc24eab0fb83ef0c536b35c44c578f750fdbb6e" optional , the address for the required token, this can be fetched from respective chains data if you are passing chainid, then tokenaddress or tokensymbol one of them is need to show specific token or else all tokens from that chain will be displayed to users tokensymbol "usdt" token symbol as per standards you can get it from coingecko or coinmarketcap metadata { "userid" "abcxxxx", "username" "user", } optional , metadata is any extra data that user wants to send along with webhook events in the order note metadata should be sent in key value pairs of strings only , you need to stringify whole value object like below "metadata" json stringify({"userid" "abcxxxx", "username" "user"}) successredirecturl " https //www sample net http //www sample net/?twig=square " optional , successredirecturl is the url to which the widget will redirect on successful order completion note successredirecturl should always start with http or https failureredirecturl " https //www sample net http //www sample net/?twig=square " optional , failureredirecturl is the url to which the widget will redirect in case of failure note failureredirecturl should always start with http or https \<script > let createwidget = new onmetawidget({ // (it should be an id of an element not a class) which is set in step 2 above elementid "widget", // mandatory apikey "{api key}", // mandatory environment "staging" //mandatory , "production" for prod walletaddress "0xecc24eab0fb83ef0c536b35c44c578f750fdbb6e", // optional fiatamount 100, // optional (if passed then minimum amount is 100 inr) useremail "test\@test com", // optional (if passed user don't have to register in meta platform) chainid "80001", // optional (it should be passed along with the tokenaddress to show a particular token to the user) tokenaddress "0xecc24eab0fb83ef0c536b35c44c578f750fdbb6e", // optional metadata {"userid" "abcdxxx", "username" "user"} // optional successredirecturl "https //www sample net", // optional failureredirecturl "https //www sample net", // optional }); createwidget init(); // it will initialize the widget inside the particular div element createwidget on(eventtype, callbackfn); // this method will listen to the events of the widget \</script> note by default widget will be initialised with o note by default widget will be initialised with o nramp functionalities only and only inr 100 is the valid amount for order creation in staging and mumbai matic is the only token supported for now to test the end to end onramp flow widget initialisation happens when you call createwidget init(); createwidget init(); and all the respective events are notified back to the parent and once can handle event based actions respectively by passing the callbackfn names to the events like this createwidget on(eventtype, callbackfn); createwidget on(eventtype, callbackfn); callbackfn its the function you have to pass along with the eventtype this function will get called when the event is fired widget creation with react native define two variables one for html content and one for javascript content import {view, stylesheet, text, linking} from 'react native'; import webview from 'react native webview'; export default function app() { const onramphtmlcode = ` \<html> \<head> \<meta name="viewport" content="width=device width, initial scale=1 0"/> \<script src="https //stg platform onmeta in/onmeta sdk js" type="text/javascript">\</script> \</head> \<body> \<div id="widget"> \</div> \<script> let createwidget=new onmetawidget({ elementid "widget", environment "staging", //mandatory , "production" for prod apikey "api key", //update your api key here useremail "sample\@gmail com", isandroid "enabled", }) createwidget init(); createwidget on("action events",(data)=>{window\ reactnativewebview\ postmessage(json stringify(data))}) \</script> \</body> \</html> `; const onrampevent = event => { const eventdata = json parse(event? nativeevent? data); if (eventdata? data? type === 'upi fast') { void linking openurl(eventdata data link); } }; return ( \<view style={styles container}> \<text>onmeta\</text> \<webview originwhitelist={\[' ']} mixedcontentmode="compatibility" source={{html onramphtmlcode}} renderloading={() => { return \<text>loading \</text>; }} startinloadingstate={true} allowsbackforwardnavigationgestures scalespagetofit={true} javascriptenabled={true} mediaplaybackrequiresuseraction={true} domstorageenabled={true} onmessage={event => { onrampevent(event); }}>\</webview> \</view> ); } events below are the eventtypes and its description events description all events this will listen to all the events of the widget and notify the callback function once event is triggered success this will listen to the success event of the widget failed this will listen to the failed event of the widget order events this will listen to the order related events order completed events this will listen to order completed events action events this will listen to action events below is the validation for utr length , on staging use any random character with below validation upi payment 12 character numbers imps payment 12 character numbers neft payment 16 character alphanumeric