Onmeta Widget Integration

Widget Creation

6min

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  
HTML
<!-- Add script in head -->
<script src="https://stg.platform.onmeta.in/onmeta-sdk.js"></script>
<!-- Add script in head -->
<script src="https://stg.platform.onmeta.in/onmeta-sdk.js"></script>
﻿
2. Widget Location 
HTML
<!-- set the id tag to widget -->
<div id="widget"></div>
<!-- set the id tag to widget -->
<div id="widget"></div>
﻿
3. Initialiser file (Base)
Parameter
Sample Value
Remarks
elementId
"widget"
﻿Mandatory (It should be an id of an element not a class), the name given in step 2 for id
apiKey
"{api_key}"
﻿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
"[email protected]"
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"
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"
Optional, failureRedirectUrl is the url to which the widget will redirect in case of failure
﻿
Note:  failureRedirectUrl should always start with http or https 
﻿
JS
<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: "[email protected]", // 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>
<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 OnRamp 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();   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);﻿
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 
JS
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:"[email protected]",
    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>
  );
}
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
﻿

Parameter	Sample Value	Remarks
elementId	"widget"	Mandatory (It should be an id of an element not a class), the name given in step 2 for id
apiKey	"{api_key}"	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	"[email protected]"	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"	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"	Optional, failureRedirectUrl is the url to which the widget will redirect in case of failure Note: failureRedirectUrl should always start with http or https

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.

Config in Dashboard

Customizing widget