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 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 document 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 { "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 { "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 { "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 { "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 { "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 { eventcategory 'order', paymentstatus 'pending', cryptoswap 'pending', paymenttype 'sell' } in progress event { eventcategory 'order', paymentstatus 'pending', cryptoswap 'success', paymenttype 'sell' } success event { 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}" 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