website logo
Home
Widget
API
Navigate through spaces
⌘K
Onmeta Widget Integration
🔰Getting started
🛠️Pre requisites
🏗️Widget Creation
KYC with Widget
Developer FAQs
Business FAQs
User FAQ's
How to find the UTR details?
📱Mobile SDK
KYC Webhook Configuration
Docs powered by
Archbee
Onmeta Widget Integration

Widget Creation

8min

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>


2. Widget Location

HTML
|
<!-- 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

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

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
        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",
    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>
  );
}




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



Updated 13 Aug 2023
Did this page help you?
PREVIOUS
Config in Dashboard
NEXT
Customizing widget
Docs powered by
Archbee
TABLE OF CONTENTS
Integrations
Web Widget integration
Parameter
Sample Value
Remarks
Widget creation with React Native
Docs powered by
Archbee