From 8a8350432568c5c2c8b410554459cc353c3dc30f Mon Sep 17 00:00:00 2001
From: smgv <gpatra1996@gmail.com>
Date: Thu, 28 Nov 2024 15:57:19 +0530
Subject: [PATCH] checkout plugin

---
 .vscode/settings.json                         |   2 +-
 demo/vue-app-new/package-lock.json            | 238 ++++++++++--------
 demo/vue-app-new/package.json                 |   1 +
 .../src/components/AppSettings.vue            | 154 +++++++++++-
 demo/vue-app-new/src/translations/en.json     | 130 +++++-----
 package-lock.json                             |  27 ++
 packages/plugins/checkout-plugin/README.md    |  41 +++
 packages/plugins/checkout-plugin/package.json |  68 +++++
 packages/plugins/checkout-plugin/src/enums.ts |  15 ++
 packages/plugins/checkout-plugin/src/index.ts |   1 +
 .../plugins/checkout-plugin/src/plugin.ts     | 180 +++++++++++++
 packages/plugins/checkout-plugin/src/utils.ts |  14 ++
 .../plugins/checkout-plugin/torus.config.js   |   1 +
 .../checkout-plugin/tsconfig.build.json       |   3 +
 .../plugins/checkout-plugin/tsconfig.json     |   8 +
 .../plugins/checkout-plugin/webpack.config.js |  15 ++
 16 files changed, 735 insertions(+), 163 deletions(-)
 create mode 100644 packages/plugins/checkout-plugin/README.md
 create mode 100644 packages/plugins/checkout-plugin/package.json
 create mode 100644 packages/plugins/checkout-plugin/src/enums.ts
 create mode 100644 packages/plugins/checkout-plugin/src/index.ts
 create mode 100644 packages/plugins/checkout-plugin/src/plugin.ts
 create mode 100644 packages/plugins/checkout-plugin/src/utils.ts
 create mode 100644 packages/plugins/checkout-plugin/torus.config.js
 create mode 100644 packages/plugins/checkout-plugin/tsconfig.build.json
 create mode 100644 packages/plugins/checkout-plugin/tsconfig.json
 create mode 100644 packages/plugins/checkout-plugin/webpack.config.js

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 863270840..ad1853459 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -13,5 +13,5 @@
       "changeProcessCWD": true
     }
   ],
-  "cSpell.words": ["JRPC","Solana"]
+  "cSpell.words": ["JRPC", "Solana", "toruslabs"]
 }
diff --git a/demo/vue-app-new/package-lock.json b/demo/vue-app-new/package-lock.json
index 386ddab07..9f9398e89 100644
--- a/demo/vue-app-new/package-lock.json
+++ b/demo/vue-app-new/package-lock.json
@@ -20,6 +20,7 @@
         "@web3auth/base-evm-adapter": "file:../../packages/adapters/base-evm-adapter",
         "@web3auth/base-provider": "file:../../packages/providers/base-provider",
         "@web3auth/base-solana-adapter": "file:../../packages/adapters/base-solana-adapter",
+        "@web3auth/checkout-plugin": "file:../../packages/plugins/checkout-plugin",
         "@web3auth/coinbase-adapter": "file:../../packages/adapters/coinbase-adapter",
         "@web3auth/default-evm-adapter": "file:../../packages/adapters/default-evm-adapter",
         "@web3auth/default-solana-adapter": "file:../../packages/adapters/default-solana-adapter",
@@ -56,12 +57,12 @@
     },
     "../../packages/adapters/auth-adapter": {
       "name": "@web3auth/auth-adapter",
-      "version": "9.3.0",
+      "version": "9.4.4",
       "license": "ISC",
       "dependencies": {
-        "@web3auth/auth": "^9.4.1",
-        "@web3auth/base": "^9.3.0",
-        "@web3auth/base-provider": "^9.3.0",
+        "@web3auth/auth": "^9.5.3",
+        "@web3auth/base": "^9.4.4",
+        "@web3auth/base-provider": "^9.4.4",
         "deepmerge": "^4.3.1"
       },
       "engines": {
@@ -74,11 +75,11 @@
     },
     "../../packages/adapters/base-evm-adapter": {
       "name": "@web3auth/base-evm-adapter",
-      "version": "9.3.0",
+      "version": "9.4.4",
       "license": "ISC",
       "dependencies": {
-        "@toruslabs/base-controllers": "^6.2.2",
-        "@web3auth/base": "^9.3.0"
+        "@toruslabs/base-controllers": "^6.3.1",
+        "@web3auth/base": "^9.4.4"
       },
       "engines": {
         "node": ">=18.x",
@@ -90,11 +91,11 @@
     },
     "../../packages/adapters/base-solana-adapter": {
       "name": "@web3auth/base-solana-adapter",
-      "version": "9.3.0",
+      "version": "9.4.4",
       "license": "ISC",
       "dependencies": {
-        "@toruslabs/base-controllers": "^6.2.2",
-        "@web3auth/base": "^9.3.0",
+        "@toruslabs/base-controllers": "^6.3.1",
+        "@web3auth/base": "^9.4.4",
         "bs58": "^5.0.0"
       },
       "devDependencies": {
@@ -110,14 +111,14 @@
     },
     "../../packages/adapters/coinbase-adapter": {
       "name": "@web3auth/coinbase-adapter",
-      "version": "9.3.0",
+      "version": "9.4.4",
       "license": "ISC",
       "dependencies": {
-        "@web3auth/base": "^9.3.0",
-        "@web3auth/base-evm-adapter": "^9.3.0"
+        "@web3auth/base": "^9.4.4",
+        "@web3auth/base-evm-adapter": "^9.4.4"
       },
       "devDependencies": {
-        "@coinbase/wallet-sdk": "^4.1.0"
+        "@coinbase/wallet-sdk": "^4.2.3"
       },
       "engines": {
         "node": ">=18.x",
@@ -130,12 +131,12 @@
     },
     "../../packages/adapters/default-evm-adapter": {
       "name": "@web3auth/default-evm-adapter",
-      "version": "9.3.0",
+      "version": "9.4.4",
       "license": "ISC",
       "dependencies": {
-        "@web3auth/base": "^9.3.0",
-        "@web3auth/base-evm-adapter": "^9.3.0",
-        "@web3auth/wallet-connect-v2-adapter": "^9.3.0",
+        "@web3auth/base": "^9.4.4",
+        "@web3auth/base-evm-adapter": "^9.4.4",
+        "@web3auth/wallet-connect-v2-adapter": "^9.4.4",
         "mipd": "^0.0.7"
       },
       "engines": {
@@ -148,19 +149,19 @@
     },
     "../../packages/adapters/default-solana-adapter": {
       "name": "@web3auth/default-solana-adapter",
-      "version": "9.3.0",
+      "version": "9.4.4",
       "license": "ISC",
       "dependencies": {
         "@solana/wallet-standard-features": "^1.2.0",
-        "@solana/web3.js": "^1.95.4",
-        "@wallet-standard/app": "^1.0.1",
-        "@wallet-standard/base": "^1.0.1",
-        "@wallet-standard/features": "^1.0.3",
-        "@web3auth/auth": "^9.4.1",
-        "@web3auth/base": "^9.3.0",
-        "@web3auth/base-solana-adapter": "^9.3.0",
-        "@web3auth/solana-provider": "^9.3.0",
-        "@web3auth/wallet-connect-v2-adapter": "^9.3.0",
+        "@solana/web3.js": "^1.95.5",
+        "@wallet-standard/app": "^1.1.0",
+        "@wallet-standard/base": "^1.1.0",
+        "@wallet-standard/features": "^1.1.0",
+        "@web3auth/auth": "^9.5.3",
+        "@web3auth/base": "^9.4.4",
+        "@web3auth/base-solana-adapter": "^9.4.4",
+        "@web3auth/solana-provider": "^9.4.4",
+        "@web3auth/wallet-connect-v2-adapter": "^9.4.4",
         "bn.js": "^5.2.1"
       },
       "engines": {
@@ -173,12 +174,12 @@
     },
     "../../packages/adapters/torus-evm-adapter": {
       "name": "@web3auth/torus-evm-adapter",
-      "version": "9.3.0",
+      "version": "9.4.4",
       "license": "ISC",
       "dependencies": {
         "@toruslabs/torus-embed": "^5.0.0",
-        "@web3auth/base": "^9.3.0",
-        "@web3auth/base-evm-adapter": "^9.3.0"
+        "@web3auth/base": "^9.4.4",
+        "@web3auth/base-evm-adapter": "^9.4.4"
       },
       "engines": {
         "node": ">=18.x",
@@ -190,14 +191,14 @@
     },
     "../../packages/adapters/torus-solana-adapter": {
       "name": "@web3auth/torus-solana-adapter",
-      "version": "9.3.0",
+      "version": "9.4.4",
       "license": "ISC",
       "dependencies": {
         "@toruslabs/solana-embed": "^2.1.0",
-        "@web3auth/base": "^9.3.0",
-        "@web3auth/base-provider": "^9.3.0",
-        "@web3auth/base-solana-adapter": "^9.3.0",
-        "@web3auth/solana-provider": "^9.3.0"
+        "@web3auth/base": "^9.4.4",
+        "@web3auth/base-provider": "^9.4.4",
+        "@web3auth/base-solana-adapter": "^9.4.4",
+        "@web3auth/solana-provider": "^9.4.4"
       },
       "engines": {
         "node": ">=18.x",
@@ -210,19 +211,19 @@
     },
     "../../packages/adapters/wallet-connect-v2-adapter": {
       "name": "@web3auth/wallet-connect-v2-adapter",
-      "version": "9.3.0",
+      "version": "9.4.4",
       "license": "ISC",
       "dependencies": {
-        "@solana/web3.js": "^1.95.4",
-        "@toruslabs/base-controllers": "^6.2.2",
-        "@walletconnect/sign-client": "^2.17.1",
-        "@walletconnect/types": "^2.17.1",
-        "@walletconnect/utils": "^2.17.1",
-        "@web3auth/auth": "^9.4.1",
-        "@web3auth/base": "^9.3.0",
-        "@web3auth/base-provider": "^9.3.0",
-        "@web3auth/ethereum-provider": "^9.3.0",
-        "@web3auth/solana-provider": "^9.3.0",
+        "@solana/web3.js": "^1.95.5",
+        "@toruslabs/base-controllers": "^6.3.1",
+        "@walletconnect/sign-client": "^2.17.2",
+        "@walletconnect/types": "^2.17.2",
+        "@walletconnect/utils": "^2.17.2",
+        "@web3auth/auth": "^9.5.3",
+        "@web3auth/base": "^9.4.4",
+        "@web3auth/base-provider": "^9.4.4",
+        "@web3auth/ethereum-provider": "^9.4.4",
+        "@web3auth/solana-provider": "^9.4.4",
         "bs58": "^5.0.0",
         "deepmerge": "^4.3.1"
       },
@@ -239,13 +240,13 @@
     },
     "../../packages/base": {
       "name": "@web3auth/base",
-      "version": "9.3.0",
+      "version": "9.4.4",
       "license": "ISC",
       "dependencies": {
-        "@toruslabs/base-controllers": "^6.2.2",
-        "@toruslabs/constants": "^14.0.0",
+        "@toruslabs/base-controllers": "^6.3.1",
+        "@toruslabs/constants": "^14.1.1",
         "@toruslabs/http-helpers": "^7.0.0",
-        "@web3auth/auth": "^9.4.1",
+        "@web3auth/auth": "^9.5.3",
         "jwt-decode": "^4.0.0",
         "loglevel": "^1.9.2",
         "ts-custom-error": "^3.3.1"
@@ -260,15 +261,15 @@
     },
     "../../packages/composables/modal-vue-composables": {
       "name": "@web3auth/modal-vue-composables",
-      "version": "9.3.1",
+      "version": "9.4.4",
       "license": "ISC",
       "dependencies": {
-        "@web3auth/base": "^9.3.0",
-        "@web3auth/modal": "^9.3.1"
+        "@web3auth/base": "^9.4.4",
+        "@web3auth/modal": "^9.4.4"
       },
       "devDependencies": {
-        "@web3auth/auth": "^9.4.1",
-        "@web3auth/auth-adapter": "^9.3.0"
+        "@web3auth/auth": "^9.5.3",
+        "@web3auth/auth-adapter": "^9.4.4"
       },
       "engines": {
         "node": ">=18.x",
@@ -281,22 +282,22 @@
     },
     "../../packages/modal": {
       "name": "@web3auth/modal",
-      "version": "9.3.1",
+      "version": "9.4.4",
       "license": "ISC",
       "dependencies": {
-        "@web3auth/auth-adapter": "^9.3.0",
-        "@web3auth/base": "^9.3.0",
-        "@web3auth/base-provider": "^9.3.0",
-        "@web3auth/no-modal": "^9.3.1",
-        "@web3auth/ui": "^9.3.1",
+        "@web3auth/auth-adapter": "^9.4.4",
+        "@web3auth/base": "^9.4.4",
+        "@web3auth/base-provider": "^9.4.4",
+        "@web3auth/no-modal": "^9.4.4",
+        "@web3auth/ui": "^9.4.4",
         "deepmerge": "^4.3.1"
       },
       "devDependencies": {
         "@svgr/webpack": "^8.1.0",
         "@toruslabs/isomorphic-style-loader": "^5.3.3",
-        "@web3auth/account-abstraction-provider": "^9.3.1",
-        "@web3auth/auth": "^9.4.1",
-        "@web3auth/wallet-connect-v2-adapter": "^9.3.0",
+        "@web3auth/account-abstraction-provider": "^9.4.4",
+        "@web3auth/auth": "^9.5.3",
+        "@web3auth/wallet-connect-v2-adapter": "^9.4.4",
         "css-loader": "^7.1.2",
         "postcss-prefix-selector": "^2.1.0",
         "style-loader": "^4.0.0",
@@ -318,18 +319,18 @@
     },
     "../../packages/no-modal": {
       "name": "@web3auth/no-modal",
-      "version": "9.3.1",
+      "version": "9.4.4",
       "license": "ISC",
       "dependencies": {
-        "@web3auth/auth": "^9.4.1",
-        "@web3auth/base": "^9.3.0",
-        "@web3auth/base-provider": "^9.3.0",
+        "@web3auth/auth": "^9.5.3",
+        "@web3auth/base": "^9.4.4",
+        "@web3auth/base-provider": "^9.4.4",
         "deepmerge": "^4.3.1"
       },
       "devDependencies": {
-        "@web3auth/account-abstraction-provider": "^9.3.1",
-        "@web3auth/auth-adapter": "^9.3.0",
-        "@web3auth/wallet-connect-v2-adapter": "^9.3.0"
+        "@web3auth/account-abstraction-provider": "^9.4.4",
+        "@web3auth/auth-adapter": "^9.4.4",
+        "@web3auth/wallet-connect-v2-adapter": "^9.4.4"
       },
       "engines": {
         "node": ">=18.x",
@@ -349,15 +350,38 @@
         }
       }
     },
+    "../../packages/plugins/checkout-plugin": {
+      "name": "@web3auth/checkout-plugin",
+      "version": "9.4.4",
+      "license": "ISC",
+      "dependencies": {
+        "@toruslabs/base-controllers": "^6.2.4",
+        "@web3auth/auth": "^9.5.3",
+        "@web3auth/base": "^9.4.4",
+        "@web3auth/no-modal": "^9.4.4",
+        "@web3auth/ws-embed": "^3.1.0",
+        "loglevel": "^1.9.2"
+      },
+      "devDependencies": {
+        "@toruslabs/ethereum-controllers": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=18.x",
+        "npm": ">=9.x"
+      },
+      "peerDependencies": {
+        "@babel/runtime": "^7.x"
+      }
+    },
     "../../packages/plugins/solana-wallet-connector-plugin": {
       "name": "@web3auth/solana-wallet-connector-plugin",
-      "version": "9.3.1",
+      "version": "9.4.4",
       "license": "ISC",
       "dependencies": {
         "@toruslabs/solana-embed": "^2.1.0",
-        "@web3auth/auth": "^9.4.1",
-        "@web3auth/base": "^9.3.0",
-        "@web3auth/no-modal": "^9.3.1",
+        "@web3auth/auth": "^9.5.3",
+        "@web3auth/base": "^9.4.4",
+        "@web3auth/no-modal": "^9.4.4",
         "loglevel": "^1.9.2"
       },
       "engines": {
@@ -370,17 +394,17 @@
     },
     "../../packages/plugins/wallet-services-plugin": {
       "name": "@web3auth/wallet-services-plugin",
-      "version": "9.3.1",
+      "version": "9.4.4",
       "license": "ISC",
       "dependencies": {
-        "@web3auth/auth": "^9.4.1",
-        "@web3auth/base": "^9.3.0",
-        "@web3auth/no-modal": "^9.3.1",
+        "@web3auth/auth": "^9.5.3",
+        "@web3auth/base": "^9.4.4",
+        "@web3auth/no-modal": "^9.4.4",
         "@web3auth/ws-embed": "^3.1.0",
         "loglevel": "^1.9.2"
       },
       "devDependencies": {
-        "@toruslabs/ethereum-controllers": "^6.2.2"
+        "@toruslabs/ethereum-controllers": "^6.3.1"
       },
       "engines": {
         "node": ">=18.x",
@@ -392,18 +416,18 @@
     },
     "../../packages/providers/account-abstraction-provider": {
       "name": "@web3auth/account-abstraction-provider",
-      "version": "9.3.1",
+      "version": "9.4.4",
       "license": "ISC",
       "dependencies": {
         "@ethereumjs/util": "^9.1.0",
-        "@toruslabs/base-controllers": "^6.2.2",
-        "@web3auth/auth": "^9.4.1",
-        "@web3auth/base": "^9.3.0",
-        "@web3auth/base-provider": "^9.3.0",
-        "@web3auth/ethereum-provider": "^9.3.0",
+        "@toruslabs/base-controllers": "^6.3.1",
+        "@web3auth/auth": "^9.5.3",
+        "@web3auth/base": "^9.4.4",
+        "@web3auth/base-provider": "^9.4.4",
+        "@web3auth/ethereum-provider": "^9.4.4",
         "ethers": "^6.13.4",
-        "permissionless": "^0.2.15",
-        "viem": "^2.21.40"
+        "permissionless": "^0.2.18",
+        "viem": "^2.21.49"
       },
       "engines": {
         "node": ">=18.x",
@@ -477,12 +501,12 @@
     },
     "../../packages/providers/base-provider": {
       "name": "@web3auth/base-provider",
-      "version": "9.3.0",
+      "version": "9.4.4",
       "license": "ISC",
       "dependencies": {
-        "@toruslabs/base-controllers": "^6.2.2",
-        "@web3auth/auth": "^9.4.1",
-        "@web3auth/base": "^9.3.0",
+        "@toruslabs/base-controllers": "^6.3.1",
+        "@web3auth/auth": "^9.5.3",
+        "@web3auth/base": "^9.4.4",
         "json-rpc-random-id": "^1.0.1"
       },
       "devDependencies": {
@@ -498,16 +522,16 @@
     },
     "../../packages/providers/ethereum-provider": {
       "name": "@web3auth/ethereum-provider",
-      "version": "9.3.0",
+      "version": "9.4.4",
       "license": "ISC",
       "dependencies": {
         "@ethereumjs/util": "^9.1.0",
-        "@toruslabs/base-controllers": "^6.2.2",
+        "@toruslabs/base-controllers": "^6.3.1",
         "@toruslabs/eccrypto": "^5.0.4",
         "@toruslabs/http-helpers": "^7.0.0",
-        "@web3auth/auth": "^9.4.1",
-        "@web3auth/base": "^9.3.0",
-        "@web3auth/base-provider": "^9.3.0",
+        "@web3auth/auth": "^9.5.3",
+        "@web3auth/base": "^9.4.4",
+        "@web3auth/base-provider": "^9.4.4",
         "assert": "^2.1.0",
         "bignumber.js": "^9.1.2",
         "bn.js": "^5.2.1",
@@ -517,7 +541,7 @@
       "devDependencies": {
         "@types/bn.js": "^5.1.6",
         "@types/json-rpc-random-id": "^1.0.3",
-        "@walletconnect/types": "^2.17.1"
+        "@walletconnect/types": "^2.17.2"
       },
       "engines": {
         "node": ">=18.x",
@@ -529,20 +553,20 @@
     },
     "../../packages/providers/solana-provider": {
       "name": "@web3auth/solana-provider",
-      "version": "9.3.0",
+      "version": "9.4.4",
       "license": "ISC",
       "dependencies": {
-        "@toruslabs/base-controllers": "^6.2.2",
+        "@toruslabs/base-controllers": "^6.3.1",
         "@toruslabs/tweetnacl-js": "^1.0.4",
-        "@web3auth/auth": "^9.4.1",
-        "@web3auth/base": "^9.3.0",
-        "@web3auth/base-provider": "^9.3.0",
+        "@web3auth/auth": "^9.5.3",
+        "@web3auth/base": "^9.4.4",
+        "@web3auth/base-provider": "^9.4.4",
         "bn.js": "^5.2.1",
         "bs58": "^5.0.0",
         "json-rpc-random-id": "^1.0.1"
       },
       "devDependencies": {
-        "@solana/web3.js": "^1.95.4",
+        "@solana/web3.js": "^1.95.5",
         "@types/bn.js": "^5.1.6",
         "@types/bs58": "^4.0.4",
         "@types/json-rpc-random-id": "^1.0.3"
@@ -2501,6 +2525,10 @@
       "resolved": "../../packages/adapters/base-solana-adapter",
       "link": true
     },
+    "node_modules/@web3auth/checkout-plugin": {
+      "resolved": "../../packages/plugins/checkout-plugin",
+      "link": true
+    },
     "node_modules/@web3auth/coinbase-adapter": {
       "resolved": "../../packages/adapters/coinbase-adapter",
       "link": true
diff --git a/demo/vue-app-new/package.json b/demo/vue-app-new/package.json
index 895ec478e..5e1758a53 100644
--- a/demo/vue-app-new/package.json
+++ b/demo/vue-app-new/package.json
@@ -22,6 +22,7 @@
     "@web3auth/base-evm-adapter": "file:../../packages/adapters/base-evm-adapter",
     "@web3auth/base-provider": "file:../../packages/providers/base-provider",
     "@web3auth/base-solana-adapter": "file:../../packages/adapters/base-solana-adapter",
+    "@web3auth/checkout-plugin": "file:../../packages/plugins/checkout-plugin",
     "@web3auth/coinbase-adapter": "file:../../packages/adapters/coinbase-adapter",
     "@web3auth/default-evm-adapter": "file:../../packages/adapters/default-evm-adapter",
     "@web3auth/default-solana-adapter": "file:../../packages/adapters/default-solana-adapter",
diff --git a/demo/vue-app-new/src/components/AppSettings.vue b/demo/vue-app-new/src/components/AppSettings.vue
index 465fc8d42..c950b7003 100644
--- a/demo/vue-app-new/src/components/AppSettings.vue
+++ b/demo/vue-app-new/src/components/AppSettings.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Button, Card, Select, Tab, Tabs, Tag, TextField, Toggle } from "@toruslabs/vue-components";
 import { ADAPTER_STATUS, CHAIN_NAMESPACES, ChainNamespaceType, log } from "@web3auth/base";
+import { CheckoutPlugin } from "@web3auth/checkout-plugin";
 import { useWeb3Auth } from "@web3auth/modal-vue-composables";
 import { computed, InputHTMLAttributes, ref } from "vue";
 
@@ -75,6 +76,40 @@ const onChainNamespaceChange = (value: string) => {
   formData.chain = chainConfigs[value as ChainNamespaceType][0].chainId;
   formData.adapters = [];
 };
+
+const checkoutApiKey = {
+  production: "73efcf2f-f6d0-4f05-b630-0844adbc439e",
+  staging: "73efcf2f-f6d0-4f05-b630-0844adbc439e",
+  testing: "c6c30552-5c2f-4a30-a191-12646029c394",
+};
+
+const checkoutFormData = ref({
+  receiveWalletAddress: "0x0000000000000000000000000000000000000000",
+  buildEnv: "testing",
+  isDark: false,
+  primaryColorHex: "",
+  tokenList: "",
+  fiatList: "",
+  modalZIndex: 99999,
+  userId: "",
+  userEmail: "",
+  crypto: "",
+  fiat: "",
+  fiatAmount: "",
+  cryptoAmount: "",
+  strictMode: false,
+  chainId: "",
+});
+
+const onCheckoutClick = async () => {
+  const checkoutPlugin = new CheckoutPlugin({
+    ...checkoutFormData.value,
+    apiKey: checkoutApiKey[checkoutFormData.value.buildEnv as keyof typeof checkoutApiKey],
+    cryptoList: checkoutFormData.value.tokenList.split(",").map((x) => x.trim()),
+    fiatList: checkoutFormData.value.fiatList.split(",").map((x) => x.trim()),
+  });
+  await checkoutPlugin.init();
+};
 </script>
 
 <template>
@@ -101,6 +136,9 @@ const onChainNamespaceChange = (value: string) => {
         <Tab v-if="formData.chainNamespace === CHAIN_NAMESPACES.EIP155" variant="underline" :active="isActiveTab(4)" @click="onTabChange(4)">
           Account Abstraction Provider
         </Tab>
+        <Tab v-if="formData.chainNamespace === CHAIN_NAMESPACES.EIP155" variant="underline" :active="isActiveTab(5)" @click="onTabChange(5)">
+          Checkout Plugin
+        </Tab>
       </Tabs>
       <Card v-if="isActiveTab(0)" class="grid grid-cols-1 gap-2 px-4 py-4" :shadow="false">
         <Select
@@ -395,7 +433,121 @@ const onChainNamespaceChange = (value: string) => {
           :disabled="isDisabled('paymasterUrl')"
         />
       </Card>
-      <div class="flex justify-center mt-5">
+      <Card v-if="isActiveTab(5)" class="grid grid-cols-1 gap-2 px-4 py-4" :shadow="false">
+        <div class="flex items-center justify-between gap-x-6">
+          <Select
+            v-model="checkoutFormData.buildEnv"
+            :label="$t('app.checkoutPlugin.buildEnv')"
+            :aria-label="$t('app.checkoutPlugin.buildEnv')"
+            :placeholder="$t('app.checkoutPlugin.buildEnv')"
+            :options="[
+              { name: 'production', value: 'production' },
+              { name: 'staging', value: 'staging' },
+              { name: 'testing', value: 'testing' },
+            ]"
+            helper-text="Select the build environment"
+          />
+          <TextField
+            v-model="checkoutFormData.primaryColorHex"
+            :label="$t('app.checkoutPlugin.primaryColorHex')"
+            :aria-label="$t('app.checkoutPlugin.primaryColorHex')"
+            placeholder="#000000"
+            helper-text="Enter the primary color hex code"
+          />
+        </div>
+        <div class="flex items-center justify-between gap-x-6">
+          <TextField
+            v-model="checkoutFormData.receiveWalletAddress"
+            :label="$t('app.checkoutPlugin.receiveWalletAddress')"
+            :aria-label="$t('app.checkoutPlugin.receiveWalletAddress')"
+            placeholder="0x1234567890"
+          />
+          <TextField
+            v-model="checkoutFormData.userId"
+            :label="$t('app.checkoutPlugin.userId')"
+            :aria-label="$t('app.checkoutPlugin.userId')"
+            placeholder="1234567890"
+          />
+        </div>
+        <div class="flex items-center justify-between gap-x-6">
+          <TextField
+            v-model="checkoutFormData.crypto"
+            :label="$t('app.checkoutPlugin.crypto')"
+            :aria-label="$t('app.checkoutPlugin.crypto')"
+            placeholder="ETH-ethereum"
+            helper-text="Enter the crypto currency symbol to show by default"
+          />
+          <TextField
+            v-model="checkoutFormData.fiat"
+            :label="$t('app.checkoutPlugin.fiat')"
+            :aria-label="$t('app.checkoutPlugin.fiat')"
+            placeholder="USD"
+            helper-text="Enter the fiat currency symbol to show by default"
+          />
+        </div>
+        <div class="flex items-center justify-between gap-x-6">
+          <TextField
+            v-model="checkoutFormData.cryptoAmount"
+            :label="$t('app.checkoutPlugin.cryptoAmount')"
+            :aria-label="$t('app.checkoutPlugin.cryptoAmount')"
+            placeholder="0.01"
+          />
+          <TextField
+            v-model="checkoutFormData.fiatAmount"
+            :label="$t('app.checkoutPlugin.fiatAmount')"
+            :aria-label="$t('app.checkoutPlugin.fiatAmount')"
+            placeholder="100"
+          />
+        </div>
+        <div class="flex items-center justify-between gap-x-6">
+          <TextField
+            v-model="checkoutFormData.userEmail"
+            :label="$t('app.checkoutPlugin.userEmail')"
+            :aria-label="$t('app.checkoutPlugin.userEmail')"
+            placeholder="example@gmail.com"
+          />
+          <TextField
+            v-model="checkoutFormData.chainId"
+            :label="$t('app.checkoutPlugin.chainId')"
+            :aria-label="$t('app.checkoutPlugin.chainId')"
+            placeholder="0x1"
+          />
+        </div>
+        <div class="flex items-center justify-between gap-x-6">
+          <TextField
+            v-model="checkoutFormData.tokenList"
+            :label="$t('app.checkoutPlugin.tokenList')"
+            :aria-label="$t('app.checkoutPlugin.tokenList')"
+            placeholder="ETH, USDC, USDT, XRP, BNB, ..."
+            helper-text="Enter the token symbols separated by commas will only show the tokens in the list"
+          />
+          <TextField
+            v-model="checkoutFormData.fiatList"
+            :label="$t('app.checkoutPlugin.fiatList')"
+            :aria-label="$t('app.checkoutPlugin.fiatList')"
+            placeholder="INR, USD, EUR, AED, AUD, ..."
+            helper-text="Enter the fiat currency symbols separated by commas will only show the currencies in the list"
+          />
+        </div>
+        <div class="flex items-center gap-x-6 mt-2">
+          <Toggle
+            v-model="checkoutFormData.isDark"
+            :show-label="true"
+            :size="'small'"
+            :label-disabled="$t('app.checkoutPlugin.isDark')"
+            :label-enabled="$t('app.checkoutPlugin.isDark')"
+          />
+          <Toggle
+            v-model="checkoutFormData.strictMode"
+            :show-label="true"
+            :size="'small'"
+            :label-disabled="$t('app.checkoutPlugin.strictMode')"
+            :label-enabled="$t('app.checkoutPlugin.strictMode')"
+          />
+        </div>
+        <Button class="mt-4" @click="onCheckoutClick">Checkout</Button>
+      </Card>
+      <div v-if="!isActiveTab(5)" class="flex justify-center mt-5">
         <Button
           :class="['w-full !h-auto group py-3 rounded-full flex items-center justify-center']"
           data-testid="loginButton"
diff --git a/demo/vue-app-new/src/translations/en.json b/demo/vue-app-new/src/translations/en.json
index 858096888..e5981aa58 100644
--- a/demo/vue-app-new/src/translations/en.json
+++ b/demo/vue-app-new/src/translations/en.json
@@ -1,77 +1,95 @@
 {
   "app": {
-    "title": "Web3Auth Web Vue Demo",
-    "description": "This is a demo of Web3Auth in a Vue.js app.",
-    "btnLogout": "Logout",
-    "documentation": "Documentation",
-    "network": "Network",
-    "chain": "Chain",
-    "loginProviders": "Login provider",
-    "adapters": "Adapters",
-    "showWalletDiscovery": "Show Wallet Discovery",
-    "greeting": "Let's configure Web3Auth!",
-    "enableWalletServicePlugin": "Enable Wallet Service Plugin",
-    "walletPlugin": {
-      "title": "Wallet Service Plugin",
-      "logoLight": "Logo Light",
-      "logoDark": "Logo Dark"
-    },
     "accountAbstractionProvider": {
-      "title": "Account Abstraction Provider",
-      "smartAccountType": "Smart Account Type",
       "bundlerUrl": "Bundler Url",
       "paymasterUrl": "Paymaster Url",
+      "smartAccountType": "Smart Account Type",
+      "title": "Account Abstraction Provider",
       "useAAWithExternalWallet": "Use Account Abstraction Provider with external wallet"
     },
-    "whiteLabel": {
-      "title": "Enable White Label",
-      "appName": "App Name",
-      "appUrl": "App URL",
-      "defaultLanguage": "Default Language",
-      "logoLight": "Light Logo",
-      "logoDark": "Dark Logo",
-      "useLogoLoader": "Use Logo Loader",
-      "primaryColor": "Primary Color",
-      "onPrimaryColor": "On Primary Color"
-    },
-    "loginMethod": {
-      "name": "Name",
-      "description": "Description",
-      "logoHover": "Logo Hover",
-      "logoLight": "Logo Light",
-      "logoDark": "Logo Dark",
-      "mainOption": "Main Option",
-      "showOnModal": "on Modal?",
-      "showOnDesktop": "on Desktop?",
-      "showOnMobile": "on Mobile?"
-    },
     "adapter": {
       "sessionTime": "Session Time"
     },
-    "chainNamespace": "Chain namespace",
-
-    "w3aStatus": "Web3Auth status ::::: {status}",
-    "isConnected": "Is connected ::::: {isConnected}",
-    "isInitialized": "Is initialized ::::: {isInitialized}",
+    "adapters": "Adapters",
+    "btnLogout": "Logout",
     "buttons": {
+      "btnAddChain": "Add Chain",
       "btnClearConsole": "Clear Console",
-      "btnGetUserInfo": "Get User Info",
       "btnGetAccounts": "Get Accounts",
       "btnGetBalance": "Get Balance",
-      "btnSendEth": "Send ETH",
-      "btnSignEthMessage": "Sign ETH Message",
       "btnGetConnectedChainId": "Get Connected Chain ID",
-      "btnAddChain": "Add Chain",
-      "btnSwitchChain": "Switch Chain",
-      "btnSignAndSendTransaction": "Sign and Send Transaction",
-      "btnSignTransaction": "Sign Transaction",
-      "btnSignMessage": "Sign Message",
-      "btnSignAllTransactions": "Sign All Transactions",
-      "btnShowWalletUI": "Show Wallet UI",
+      "btnGetUserInfo": "Get User Info",
+      "btnSendEth": "Send ETH",
       "btnShowCheckout": "Show Checkout",
       "btnShowWalletConnectScanner": "Show WalletConnect Scanner",
+      "btnShowWalletUI": "Show Wallet UI",
+      "btnSignAllTransactions": "Sign All Transactions",
+      "btnSignAndSendTransaction": "Sign and Send Transaction",
+      "btnSignEthMessage": "Sign ETH Message",
+      "btnSignMessage": "Sign Message",
+      "btnSignPersonalMsg": "Sign Personal Message",
+      "btnSignTransaction": "Sign Transaction",
       "btnSignTypedData_v4": "Sign Typed Data v4",
-      "btnSignPersonalMsg": "Sign Personal Message"
+      "btnSwitchChain": "Switch Chain"
+    },
+    "chain": "Chain",
+    "chainNamespace": "Chain namespace",
+    "checkoutPlugin": {
+      "apiKey": "API Key",
+      "buildEnv": "Build Environment",
+      "chainId": "Chain ID",
+      "checkout": "Checkout",
+      "crypto": "Crypto",
+      "cryptoAmount": "Crypto Amount",
+      "fiat": "Fiat",
+      "fiatAmount": "Fiat Amount",
+      "fiatList": "Fiat List",
+      "isDark": "Dark Mode",
+      "modalZIndex": "Modal Z-Index",
+      "primaryColorHex": "Primary Color Hex",
+      "receiveWalletAddress": "Receive Wallet Address",
+      "strictMode": "Strict Mode",
+      "tokenList": "Token List",
+      "userEmail": "User Email",
+      "userId": "User ID"
+    },
+    "description": "This is a demo of Web3Auth in a Vue.js app.",
+    "documentation": "Documentation",
+    "enableWalletServicePlugin": "Enable Wallet Service Plugin",
+    "greeting": "Let's configure Web3Auth!",
+    "isConnected": "Is connected ::::: {isConnected}",
+    "isInitialized": "Is initialized ::::: {isInitialized}",
+    "loginMethod": {
+      "description": "Description",
+      "logoDark": "Logo Dark",
+      "logoHover": "Logo Hover",
+      "logoLight": "Logo Light",
+      "mainOption": "Main Option",
+      "name": "Name",
+      "showOnDesktop": "on Desktop?",
+      "showOnMobile": "on Mobile?",
+      "showOnModal": "on Modal?"
+    },
+    "loginProviders": "Login provider",
+    "network": "Network",
+    "showWalletDiscovery": "Show Wallet Discovery",
+    "title": "Web3Auth Web Vue Demo",
+    "w3aStatus": "Web3Auth status ::::: {status}",
+    "walletPlugin": {
+      "logoDark": "Logo Dark",
+      "logoLight": "Logo Light",
+      "title": "Wallet Service Plugin"
+    },
+    "whiteLabel": {
+      "appName": "App Name",
+      "appUrl": "App URL",
+      "defaultLanguage": "Default Language",
+      "logoDark": "Dark Logo",
+      "logoLight": "Light Logo",
+      "onPrimaryColor": "On Primary Color",
+      "primaryColor": "Primary Color",
+      "title": "Enable White Label",
+      "useLogoLoader": "Use Logo Loader"
     }
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 2bb41f1b7..893de70b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7174,6 +7174,10 @@
       "resolved": "packages/adapters/base-solana-adapter",
       "link": true
     },
+    "node_modules/@web3auth/checkout-plugin": {
+      "resolved": "packages/plugins/checkout-plugin",
+      "link": true
+    },
     "node_modules/@web3auth/coinbase-adapter": {
       "resolved": "packages/adapters/coinbase-adapter",
       "link": true
@@ -27542,6 +27546,29 @@
         }
       }
     },
+    "packages/plugins/checkout-plugin": {
+      "name": "@web3auth/checkout-plugin",
+      "version": "9.4.4",
+      "license": "ISC",
+      "dependencies": {
+        "@toruslabs/base-controllers": "^6.2.4",
+        "@web3auth/auth": "^9.5.3",
+        "@web3auth/base": "^9.4.4",
+        "@web3auth/no-modal": "^9.4.4",
+        "@web3auth/ws-embed": "^3.1.0",
+        "loglevel": "^1.9.2"
+      },
+      "devDependencies": {
+        "@toruslabs/ethereum-controllers": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=18.x",
+        "npm": ">=9.x"
+      },
+      "peerDependencies": {
+        "@babel/runtime": "^7.x"
+      }
+    },
     "packages/plugins/solana-wallet-connector-plugin": {
       "name": "@web3auth/solana-wallet-connector-plugin",
       "version": "9.4.4",
diff --git a/packages/plugins/checkout-plugin/README.md b/packages/plugins/checkout-plugin/README.md
new file mode 100644
index 000000000..0e762f025
--- /dev/null
+++ b/packages/plugins/checkout-plugin/README.md
@@ -0,0 +1,41 @@
+# Web3Auth Checkout Plugin
+
+[![npm version](https://img.shields.io/npm/v/@web3auth/wallet-services-plugin?label=%22%22)](https://www.npmjs.com/package/@web3auth/wallet-services-plugin/v/latest)
+[![minzip](https://img.shields.io/bundlephobia/minzip/@web3auth/wallet-services-plugin?label=%22%22)](https://bundlephobia.com/result?p=@web3auth/wallet-services-plugin@latest)
+
+> Web3Auth is where passwordless auth meets non-custodial key infrastructure for Web3 apps and wallets. By aggregating OAuth (Google, Twitter, Discord) logins, different wallets and innovative Multi Party Computation (MPC) - Web3Auth provides a seamless login experience to every user on your application.
+
+Web3Auth Checkout Plugin significantly simplifies the conversion process from fiat to cryptocurrency. With a straightforward one-line integration, this service integrates over 100 payment methods, providing an efficient and user-friendly solution for entering the crypto space.
+
+## 📖 Documentation
+
+Read more about the Web3Auth Checkout Plugin in the [official Web3Auth Documentation](https://web3auth.io/docs/features/topup).
+
+## 💡 Features
+
+- Diverse Payment Options
+- Reduced Fees
+- User-Friendly Interface
+- Global Currency Support
+
+...and a lot more
+
+## 🔗 Installation
+
+```shell
+npm i --save @web3auth/checkout-plugin
+```
+
+## 🩹 Example
+
+Check out the examples for your preferred blockchain and platform on our [examples page](https://web3auth.io/docs/examples).
+
+## 🌐 Demo
+
+Checkout the [Web3Auth Demo](https://demo.web3auth.io) to see how Web3Auth can be used in your application.
+
+## 💬 Troubleshooting and Support
+
+- Have a look at our [Community Portal](https://community.web3auth.io/) to see if anyone has any questions or issues you might be having. Feel free to reate new topics and we'll help you out as soon as possible.
+- Checkout our [Troubleshooting Documentation Page](https://web3auth.io/docs/troubleshooting) to know the common issues and solutions.
+- For Priority Support, please have a look at our [Pricing Page](https://web3auth.io/pricing.html) for the plan that suits your needs.
diff --git a/packages/plugins/checkout-plugin/package.json b/packages/plugins/checkout-plugin/package.json
new file mode 100644
index 000000000..e3c68209d
--- /dev/null
+++ b/packages/plugins/checkout-plugin/package.json
@@ -0,0 +1,68 @@
+{
+  "author": "Torus Labs",
+  "bugs": {
+    "url": "https://github.com/Web3Auth/Web3Auth/issues"
+  },
+  "dependencies": {
+    "@toruslabs/base-controllers": "^6.2.4",
+    "@web3auth/auth": "^9.5.3",
+    "@web3auth/base": "^9.4.4",
+    "@web3auth/no-modal": "^9.4.4",
+    "@web3auth/ws-embed": "^3.1.0",
+    "loglevel": "^1.9.2"
+  },
+  "description": "Wallet services for which can be used with Web3Auth or private key providers used inside Web3Auth",
+  "devDependencies": {
+    "@toruslabs/ethereum-controllers": "^6.3.1"
+  },
+  "engines": {
+    "node": ">=18.x",
+    "npm": ">=9.x"
+  },
+  "files": [
+    "dist"
+  ],
+  "gitHead": "6c62ee11818e12b77eca33a78ee896e46549ac16",
+  "homepage": "https://github.com/Web3Auth/Web3Auth/tree/master/packages/plugins/wallet-services-plugin#readme",
+  "jsdelivr": "dist/checkoutPlugin.umd.min.js",
+  "keywords": [
+    "blockchain",
+    "ethereum",
+    "metamask",
+    "web3Auth",
+    "web3auth/checkout-plugin"
+  ],
+  "license": "ISC",
+  "lint-staged": {
+    "!(*d).ts": [
+      "eslint --cache --fix",
+      "prettier --write"
+    ]
+  },
+  "main": "dist/lib.cjs/index.js",
+  "module": "dist/lib.esm/index.js",
+  "name": "@web3auth/checkout-plugin",
+  "peerDependencies": {
+    "@babel/runtime": "^7.x"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Web3Auth/Web3Auth.git"
+  },
+  "scripts": {
+    "build": "torus-scripts build",
+    "dev": "torus-scripts start",
+    "lint": "eslint --fix 'src/**/*.ts'",
+    "pre-commit": "lint-staged --cwd .",
+    "prepack": "npm run build",
+    "test": "mocha --config ../../../.mocharc.json test/**.ts",
+    "test-debugger": "mocha --config ../../../.mocharc.json --inspect-brk test/**.ts"
+  },
+  "sideEffects": false,
+  "types": "dist/types/index.d.ts",
+  "unpkg": "dist/checkoutPlugin.umd.min.js",
+  "version": "9.4.4"
+}
diff --git a/packages/plugins/checkout-plugin/src/enums.ts b/packages/plugins/checkout-plugin/src/enums.ts
new file mode 100644
index 000000000..d2e621a0e
--- /dev/null
+++ b/packages/plugins/checkout-plugin/src/enums.ts
@@ -0,0 +1,15 @@
+export const CHECKOUT_BUILD_ENV = {
+  PRODUCTION: "production",
+  STAGING: "staging",
+  DEVELOPMENT: "development",
+  TESTING: "testing",
+} as const;
+
+export type CHECKOUT_BUILD_ENV_TYPE = (typeof CHECKOUT_BUILD_ENV)[keyof typeof CHECKOUT_BUILD_ENV];
+
+export const CHECKOUT_URLS: Record<CHECKOUT_BUILD_ENV_TYPE, string> = {
+  [CHECKOUT_BUILD_ENV.DEVELOPMENT]: "http://localhost:4050",
+  [CHECKOUT_BUILD_ENV.PRODUCTION]: "https://checkout.web3auth.io",
+  [CHECKOUT_BUILD_ENV.STAGING]: "https://staging-checkout.web3auth.io",
+  [CHECKOUT_BUILD_ENV.TESTING]: "https://develop-checkout.web3auth.io",
+};
diff --git a/packages/plugins/checkout-plugin/src/index.ts b/packages/plugins/checkout-plugin/src/index.ts
new file mode 100644
index 000000000..39b9a61b2
--- /dev/null
+++ b/packages/plugins/checkout-plugin/src/index.ts
@@ -0,0 +1 @@
+export * from "./plugin";
diff --git a/packages/plugins/checkout-plugin/src/plugin.ts b/packages/plugins/checkout-plugin/src/plugin.ts
new file mode 100644
index 000000000..daf28a5a1
--- /dev/null
+++ b/packages/plugins/checkout-plugin/src/plugin.ts
@@ -0,0 +1,180 @@
+import { randomId } from "@toruslabs/base-controllers";
+import { SafeEventEmitter, THEME_MODES } from "@web3auth/auth";
+
+import { CHECKOUT_BUILD_ENV, CHECKOUT_BUILD_ENV_TYPE, CHECKOUT_URLS } from "./enums";
+import { getTheme, htmlToElement } from "./utils";
+
+export type CheckoutPluginParams = {
+  modalZIndex?: number;
+  buildEnv?: CHECKOUT_BUILD_ENV_TYPE;
+  receiveWalletAddress: string;
+  apiKey: string;
+  userId?: string;
+  userEmail?: string;
+  fiat?: string;
+  fiatAmount?: string;
+  cryptoAmount?: string;
+  strictMode?: boolean;
+  chainId?: string;
+  primaryColorHex?: string;
+  isDark?: boolean;
+  cryptoList?: string[];
+  fiatList?: string[];
+};
+
+export class CheckoutPlugin extends SafeEventEmitter {
+  isInitialized: boolean;
+
+  private readonly embedNonce = randomId();
+
+  private receiveWalletAddress: string;
+
+  private apiKey: string;
+
+  private userId: string;
+
+  private modalZIndex?: number;
+
+  private buildEnv?: CHECKOUT_BUILD_ENV_TYPE;
+
+  private userEmail?: string;
+
+  private crypto?: string;
+
+  private fiat?: string;
+
+  private fiatAmount?: string;
+
+  private cryptoAmount?: string;
+
+  private strictMode?: boolean;
+
+  private chainId?: string;
+
+  private primaryColorHex?: string;
+
+  private isDark?: boolean;
+
+  private cryptoList?: string[];
+
+  private fiatList?: string[];
+
+  constructor(params: CheckoutPluginParams) {
+    super();
+    this.isInitialized = false;
+    this.modalZIndex = params.modalZIndex ?? 99999;
+    this.buildEnv = params.buildEnv ?? CHECKOUT_BUILD_ENV.PRODUCTION;
+    this.receiveWalletAddress = params.receiveWalletAddress;
+    this.apiKey = params.apiKey;
+    this.userId = params.userId ?? params.receiveWalletAddress;
+    this.userEmail = params.userEmail;
+    this.crypto = "";
+    this.fiat = params.fiat ?? "";
+    this.fiatAmount = params.fiatAmount ?? "";
+    this.cryptoAmount = params.cryptoAmount ?? "";
+    this.strictMode = params.strictMode ?? false;
+    this.chainId = params.chainId ?? "";
+    this.primaryColorHex = params.primaryColorHex ?? "";
+    this.isDark = params.isDark ?? false;
+    this.cryptoList = params.cryptoList ?? [];
+    this.fiatList = params.fiatList ?? [];
+  }
+
+  async init(): Promise<void> {
+    if (this.isInitialized) throw new Error("Already initialized");
+    if (this.getIframe()) throw new Error("Already initialized Checkout iframe");
+
+    const checkoutUrl = new URL(CHECKOUT_URLS[this.buildEnv]);
+    checkoutUrl.searchParams.append("apiKey", this.apiKey);
+    checkoutUrl.searchParams.append("receiveWalletAddress", this.receiveWalletAddress);
+    checkoutUrl.searchParams.append("userId", this.userId || this.receiveWalletAddress);
+    checkoutUrl.searchParams.append("isIframe", "true");
+
+    const colorScheme = getTheme(this.isDark ? THEME_MODES.dark : THEME_MODES.light);
+
+    if (this.userEmail) checkoutUrl.searchParams.append("userEmail", this.userEmail);
+    if (this.crypto) checkoutUrl.searchParams.append("crypto", this.crypto);
+    if (this.fiat) checkoutUrl.searchParams.append("fiat", this.fiat);
+    if (this.fiatAmount) checkoutUrl.searchParams.append("fiatAmount", this.fiatAmount);
+    if (this.cryptoAmount) checkoutUrl.searchParams.append("cryptoAmount", this.cryptoAmount);
+    if (this.strictMode && this.strictMode !== undefined) checkoutUrl.searchParams.append("strictMode", "true");
+    if (this.chainId) checkoutUrl.searchParams.append("chainId", this.chainId);
+    if (this.primaryColorHex) checkoutUrl.searchParams.append("primaryColorHex", this.checkColorHex(this.primaryColorHex));
+    if (this.isDark || colorScheme === THEME_MODES.dark) checkoutUrl.searchParams.append("isDark", "true");
+    if (this.cryptoList && this.cryptoList.length > 0) checkoutUrl.searchParams.append("cryptoList", this.cryptoList.join(","));
+    if (this.fiatList && this.fiatList.length > 0) checkoutUrl.searchParams.append("fiatList", this.fiatList.join(","));
+
+    // create iframe
+    const checkoutIframe = htmlToElement<HTMLIFrameElement>(
+      `<div 
+        id="checkoutModal-${this.embedNonce}"
+        style="position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
+        border: none; border-radius: 32px; z-index: ${this.modalZIndex.toString()}; height: 659px; width: 430px;
+        justify-content: center; background-color: ${colorScheme === THEME_MODES.dark ? "#000" : "#fff"};"
+      >
+          <button
+            id="closeButton-iframe"
+            style="position: absolute; right: 20px; top: 16px; background: none; border: none; display: none; 
+            color: ${colorScheme === THEME_MODES.dark ? "#fff" : "#000"}; font-size: 20px; cursor: pointer; z-index: 1000;"
+            onclick="document.getElementById('checkoutModal-${this.embedNonce}').remove()"
+          >
+            ✕
+          </button>
+        <iframe
+        id="checkoutIframe-${this.embedNonce}"
+        class="checkoutIframe-${this.embedNonce}"
+        sandbox="allow-popups allow-scripts allow-same-origin allow-forms allow-modals allow-downloads"
+        src="${checkoutUrl.href}"
+        height="659px"
+        width="430px"
+        style="position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
+        border: none; border-radius: 32px;
+        color-scheme: ${colorScheme} background-color: ${colorScheme === THEME_MODES.dark ? "#000" : "#fff"};"
+        allow="autoplay; camera; clipboard-read; clipboard-write; accelerometer; geolocation; microphone; payment; publickey-credentials-get; gyroscope;"
+        onLoad="document.getElementById('closeButton-iframe').style.display = 'block'"
+      >
+      </iframe>
+      </div>`
+    );
+
+    return new Promise<void>((resolve, reject) => {
+      try {
+        window.document.body.appendChild(checkoutIframe);
+        this.isInitialized = true;
+        resolve();
+      } catch (error) {
+        this.cleanup();
+        reject(error);
+      }
+    });
+  }
+
+  public hide(): void {
+    if (!this.isInitialized) throw new Error("Call init() first");
+    const checkoutIframe = this.getIframe();
+    if (!checkoutIframe) throw new Error("Iframe is not initialized");
+    // hide iframe
+    checkoutIframe.style.display = "none";
+  }
+
+  public cleanup(): void {
+    const checkoutIframe = this.getIframe();
+    if (checkoutIframe) checkoutIframe.remove();
+  }
+
+  private checkColorHex = (color: string) => {
+    if (color.startsWith("#")) {
+      return color.slice(1);
+    }
+    return color;
+  };
+
+  private getIframe(): HTMLIFrameElement | null {
+    function isElement(element: unknown) {
+      return element instanceof Element || element instanceof Document;
+    }
+    const checkoutIframe = window.document.getElementById(`checkoutIframe-${this.embedNonce}`);
+    if (!isElement(checkoutIframe)) return null;
+    return checkoutIframe as HTMLIFrameElement;
+  }
+}
diff --git a/packages/plugins/checkout-plugin/src/utils.ts b/packages/plugins/checkout-plugin/src/utils.ts
new file mode 100644
index 000000000..a102f203b
--- /dev/null
+++ b/packages/plugins/checkout-plugin/src/utils.ts
@@ -0,0 +1,14 @@
+import { THEME_MODE_TYPE, THEME_MODES } from "@web3auth/auth";
+
+export const htmlToElement = <T extends Element>(html: string): T => {
+  const template = window.document.createElement("template");
+  const trimmedHtml = html.trim(); // Never return a text node of whitespace as the result
+  template.innerHTML = trimmedHtml;
+  return template.content.firstChild as T;
+};
+
+export const getTheme = (theme: THEME_MODE_TYPE): string => {
+  if (theme === THEME_MODES.light) return "light";
+  if (theme === THEME_MODES.dark) return "dark";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
diff --git a/packages/plugins/checkout-plugin/torus.config.js b/packages/plugins/checkout-plugin/torus.config.js
new file mode 100644
index 000000000..6df6a4932
--- /dev/null
+++ b/packages/plugins/checkout-plugin/torus.config.js
@@ -0,0 +1 @@
+module.exports = require("../../../torus.config");
diff --git a/packages/plugins/checkout-plugin/tsconfig.build.json b/packages/plugins/checkout-plugin/tsconfig.build.json
new file mode 100644
index 000000000..bcd8df0e9
--- /dev/null
+++ b/packages/plugins/checkout-plugin/tsconfig.build.json
@@ -0,0 +1,3 @@
+{
+  "include": ["src"]
+}
diff --git a/packages/plugins/checkout-plugin/tsconfig.json b/packages/plugins/checkout-plugin/tsconfig.json
new file mode 100644
index 000000000..38b212243
--- /dev/null
+++ b/packages/plugins/checkout-plugin/tsconfig.json
@@ -0,0 +1,8 @@
+{
+    "extends": "../../../tsconfig.json",
+    "include": ["src","test"],
+    "compilerOptions": {
+        "strict": true,
+    },
+}
+  
\ No newline at end of file
diff --git a/packages/plugins/checkout-plugin/webpack.config.js b/packages/plugins/checkout-plugin/webpack.config.js
new file mode 100644
index 000000000..8229e9abc
--- /dev/null
+++ b/packages/plugins/checkout-plugin/webpack.config.js
@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require("path");
+const generateWebpackConfig = require("../../../webpack.config");
+
+const pkg = require("./package.json");
+
+const currentPath = path.resolve(".");
+
+const config = generateWebpackConfig({
+  currentPath,
+  pkg,
+  alias: {},
+});
+
+module.exports = config;