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

Embedding widget

8min

Once you are ready with the widget configuration you can embed the code within your HTML web app and start using it instantly.

Sample code shown below on how to embed the widget within a HTML page.

Note: For demo setup use the below script tag only.

Things to verify : Test api key from staging dashboard can be used with below sample code.

Live api key from live dashboard can be used with live SDK so change the script tag url as shown in above note.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- Add script in head -->
    <script src="https://stg.platform.onmeta.in/onmeta-sdk.js"></script>
  </head>
  <body>
    <div id="widget"></div>
    <script>
      let createWidget = new onMetaWidget({
        elementId: "widget",
        apiKey: "test_api_key",
      });
      createWidget.init();
      createWidget.on("ALL_EVENTS", (data) => console.log("ALL_EVENTS --> ",data))    
  </script>
  </body>
</html>


Events from Widget Onramp:

The widget events gives you data to take action on and utilise it with callBack functions and few of the responses are as below. Here orderID is unique for that transaction.

Order Created waiting for UTR.

JSON
{
  "eventCategory": "order",
  "paymentStatus": "pending",
  "cryptoSwap": "pending",
  "orderId": "6346bf17af14a27251aa2ca8",
  "eventType": "orderCreated",
  "paymentType": "buy",
  "order": {
      "fiat": 100,
      "currency": "INR",
      "utr": "",
      "receiverWalletAddress": "0x4338C380dF304cC6637BC72e3a6C00",
      "buyTokenSymbol": "USDC",
      "buyTokenAddress": "0x2791bca1f2de4661ed88a30c99a7a9449aa84174",
      "orderId": "6346bf17af14a27251aa2ca8",
      "createdAt": "2021-10-12T13:20:23.289Z",
      "chainId": 80001,
      "customer": {
          "email": "test@onmeta.in"
      }
  }
}


UTR captured .

JSON
{
  "eventCategory": "order",
  "paymentStatus": "utrCaptured",
  "cryptoSwap": "pending",
  "orderId": "6346bf17af143323a27251aa2ca8",
  "paymentType": "buy",
  "order": {
      "fiat": 100,
      "currency": "INR",
      "utr": "228554992598",
      "receiverWalletAddress": "0x432432d8C3805cfbcC6637BC72e3a6C00",
      "buyTokenSymbol": "USDC",
      "buyTokenAddress": "0x2791bca1f2de4661ed88a30c99a7a9449aa84174",
      "orderId": "6346bf17af143323a27251aa2ca8",
      "createdAt": "2021-10-12T13:20:23.289Z",
      "chainId": 80001,
      "customer": {
          "email": "test@onmeta.in"
      }
  }
}


UTR verified and Crypto transfer Initiated

JSON
{
  "orderId": "6346bf17af143323a27251aa2ca8",
  "eventCategory": "order",
  "paymentStatus": "success",
  "cryptoSwap": "transfering",
  "paymentType": "buy",
  "order": {
      "fiat": 100,
      "currency": "INR",
      "utr": "228554992598",
      "receiverWalletAddress": "0xe424d8C3805cfbcC6637BC72e3a6C00",
      "buyTokenSymbol": "USDC",
      "buyTokenAddress": "0x2791bca1f2de4661ed88a30c99a7a9449aa84174",
      "orderId": "6346bf17af143323a27251aa2ca8",
      "createdAt": "2021-10-12T13:20:23.289Z",
      "chainId": 80001,
      "customer": {
          "email": "test@onmeta.in"
      }
  }
}


Crypto transfer success and transaction success.

JSON
{
  "orderId": "6346bf17af143323a27251aa2ca8",
  "eventCategory": "order",
  "paymentStatus": "success",
  "cryptoSwap": "success",
  "paymentType": "buy",
  "order": {
      "fiat": 100,
      "currency": "INR",
      "utr": "228554992598",
      "receiverWalletAddress": "0xe424d8C3805cfbcC6637BC72e3a6C00",
      "buyTokenSymbol": "USDC",
      "buyTokenAddress": "0x2791bca1f2de4661ed88a30c99a7a9449aa84174",
      "orderId": "6346bf17af143323a27251aa2ca8",
      "createdAt": "2021-10-12T13:20:23.289Z",
      "chainId": 80001,
      "customer": {
          "email": "test@onmeta.in"
      }
  }
}


Amount mismatch failure event - paid amount and order created amount are different.

JSON
{
    "orderId": "63d8cada3ce50f608b194bff",
    "eventCategory": "order",
    "paymentStatus": "failed",
    "cryptoSwap": "failed",
    "paymentType": "buy",
    "order": {
        "fiat": 100,
        "currency": "INR",
        "utr": "228554992598",
        "receiverWalletAddress": "0xe424d8C3805cfbcC6637BC72e3a6C00",
        "buyTokenSymbol": "USDC",
        "buyTokenAddress": "0x2791bca1f2de4661ed88a30c99a7a9449aa84174",
        "orderId": "6346bf17af143323a27251aa2ca8",
        "createdAt": "2021-10-12T13:20:23.289Z",
        "chainId": 80001,
        "customer": {
            "email": "test@onmeta.inn"
        }
    }
}


Events from Widget Offramp:

Order creation event

JSON
{
    eventCategory: 'order', 
    paymentStatus: 'pending', 
    cryptoSwap: 'pending',
    paymentType: 'sell'
}


In progress event

JSON
{
    eventCategory: 'order', 
    paymentStatus: 'pending', 
    cryptoSwap: 'success',
    paymentType: 'sell'
}


Success event

JSON
{
    eventCategory: 'order', 
    paymentStatus: 'success', 
    cryptoSwap: 'success',
    paymentType: 'sell'
}


Copy the above snippet to a file in your local machine and save it as onmeta_widget.html and update the apiKey: "{demo_api_key}" with the key you received in the demo dashboard. After this open this html file in browser and you will see the widget with the default tokens and start using it.

Don't make any money transfer for testing, enter random number as UTR* and it will be processed. * UTR is 12 digit number for UPI and IMPS payment options and 16 digit alphanumeric for NEFT payment.



Updated 02 Dec 2023
Did this page help you?
PREVIOUS
Customizing widget
NEXT
Enabling UPI Intent
Docs powered by Archbee
TABLE OF CONTENTS
Things to verify : Test api key from staging dashboard can be used with below sample code.
Events from Widget Onramp:
Events from Widget Offramp:
Docs powered by Archbee