8min

Widget Creation

aIntegrationsGiven below are the integration steps to embed the widget in your website.
Web Widget integrationWeb 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
walletAddress
"0xEcc24eab0fb83Ef0c536b35C44C578F750FDBB6E"
Optional , the wallet address to which tokens to be transferred.
Optional, this can be set within script code or can be passed as paramerter with url while initiating the widget.
Optional, this can be set within script code or can be passed as paramerter with url while initiating the widget.
Optional, this can be set within script code or can be passed as paramerter with url while initiating the widget.
Optional, this can be set within script code or can be passed as paramerter with url while initiating the widget.
Optional, this can be set within script code or can be passed as paramerter with url while initiating the widget.
Optional, this can be set within script code or can be passed as paramerter with url while initiating the widget.
Optional, this can be set within script code or can be passed as paramerter with url while initiating the widget.
Optional, this can be set within script code or can be passed as paramerter with url while initiating the widget.
Optional, this can be set within script code or can be passed as paramerter with url while initiating the widget.
Optional, 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.
Optional , the amount for which you need to buy token.
Optional , the amount for which you need to buy token.
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.
﻿
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>
<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.﻿
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
|
var htmlCode = ``` <script src="https://stg.platform.onmeta.in/onmeta-sdk.js"></script> 
            <div id="widget"></div>            
            ```
var jsCode = ```
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
    });
createWidget.init(); // it will initialize the widget inside the particular div element
createWidget.on(eventType, callbackFn);
```
var htmlCode = ``` <script src="https://stg.platform.onmeta.in/onmeta-sdk.js"></script> 
            <div id="widget"></div>            
            ```
var jsCode = ```
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
    });
createWidget.init(); // it will initialize the widget inside the particular div element
createWidget.on(eventType, callbackFn);
```
﻿
then use the above variables inside WebView component 
JS
|
<WebView
    originWhitelist={['*']}
    injectedJavaScript={jsCode}
    source={{ html: htmlCode}}
/>
<WebView
    originWhitelist={['*']}
    injectedJavaScript={jsCode}
    source={{ html: htmlCode}}
/>
﻿
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 24 Mar 2023

Did this page help you?

Yes

UP NEXT

Customizing widget

Docs powered by archbee

TABLE OF CONTENTS

aIntegrations

Web Widget integration

Parameter

Sample Value

Remarks

Widget creation with React Native

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. Optional, this can be set within script code or can be passed as paramerter with url while initiating the widget. Optional, this can be set within script code or can be passed as paramerter with url while initiating the widget. Optional, this can be set within script code or can be passed as paramerter with url while initiating the widget. Optional, this can be set within script code or can be passed as paramerter with url while initiating the widget. Optional, this can be set within script code or can be passed as paramerter with url while initiating the widget. Optional, this can be set within script code or can be passed as paramerter with url while initiating the widget. Optional, this can be set within script code or can be passed as paramerter with url while initiating the widget. Optional, this can be set within script code or can be passed as paramerter with url while initiating the widget. Optional, this can be set within script code or can be passed as paramerter with url while initiating the widget. Optional, 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. Optional , the amount for which you need to buy token. Optional , the amount for which you need to buy token.
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.
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

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.