Skip to main content

Wallet Services Plugin for PnP Web SDK


Wallet Services Plugin Enable allows your application to use templated wallet UI screens. Take control of and personalize the wallet interface, and optionally, activate an embedded wallet for your users.


Access to Wallet Services is gated and available on the Scale plan and above. You can use this feature in the development environment for free.

Wallet Services is currently available for all EVM chains.


npm install --save @web3auth/wallet-services-plugin


Import the WalletServicesPlugin class from @web3auth/wallet-services-plugin.

import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";

Assign the WalletServicesPlugin class to a variable

After creating your Web3Auth instance, you need to initialize the Wallet Services Plugin and add it to a class for further usage.

const walletServicesPlugin = new WalletServicesPlugin(options);

This constructor takes an object with wsEmbedOpts & walletInitOptions as input.


While initializing the Wallet Services plugin, you need to pass on the following parameters to the constructor:

wsEmbedOpts?Configuration options for Wallet Services. It accepts Partial<CtorArgs> as a value.
walletInitOptions?Parameters to customize your Wallet Services UI within the application. It accepts Partial<WsEmbedParams> as a value.


wsEmbedOpts is an optional parameter that allows you to pass in the configuration options for Wallet Services. It takes the CtorArgs object as input which contains the following parameters:


modalZIndex?Z-index of the modal and iframe. Default value is 99999
web3AuthClientIdWeb3Auth Client ID in string.
web3AuthNetworkWeb3auth network to be used. It accepts OPENLOGIN_NETWORK_TYPE as a value.


The walletInitOptions from Wallet Services is an optional parameter that allows you to customise your Wallet Services UI within the application. It takes the object WsEmbedParams as input which contains multiple parameters that allow you to customise the UI of the plugin.


chainConfig?Chain config of the Blockchain to connect with. It accepts EthereumProviderConfig.
whiteLabel?White Label parameters to whitelisting the Wallet Services UI. It accepts WhiteLabelParams.

Add the walletServicesPlugin class to your Web3Auth instance

After initializing the walletServicesPlugin, use the addPlugin() function to your Web3Auth instance, you can use the Wallet Services Plugin for your dApp.



In this example, we're adding the WalletServicesPlugin with a very basic configuration.

import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";

const walletServicesPlugin = new WalletServicesPlugin();

// Show the wallet services plugin
await walletServicesPlugin.showWalletUi();

// Show the wallet connect scanner
await walletServicesPlugin.showWalletConnectScanner();

// Show the checkout
await walletServicesPlugin.showCheckout();