Topup your Wallet in PnP Web Modal SDK
For topping up the wallet of a user, you can use the initiateTopup()
function. This method takes in the parameters of the selected payment provider
and accordingly gives you the option to seemless add money to your user's wallet address directly.
info
This uses the Torus EVM Wallet UI Plugin and Torus Solana Wallet UI Plugin for the respective chains. Please install and configure the packages before using this function.
initiateTopup()
- EVM
- Solana
Initiates the Top Up flow with selected provider.
Arguments
- Table
- Interface
Parameter | Type | Description | Mandatory |
---|---|---|---|
provider | PAYMENT_PROVIDER_TYPE ["moonpay" , "wyre" , "rampnetwork" , "xanpool" , "mercuryo" , "transak" , "banxa" ] | Payment Provider name | Yes |
params | PaymentParams | Payment Params object | Yes |
PaymentParams
Parameter | Type | Description | Mandatory |
---|---|---|---|
selectedAddress? | string | Address to send the funds to | No |
selectedCurrency? | string | Default fiat currency for the user to make the payment in | No |
fiatValue? | number | Amount to buy in the selectedCurrency | No |
selectedCryptoCurrency? | string | Cryptocurrency to buy | No |
chainNetwork? | SUPPORTED_PAYMENT_NETWORK_TYPE ["mainnet" , "matic" , "bsc_mainnet" , "avalanche_mainnet" , "xdai" ] | Chain Network to use | No |
async initiateTopup(provider: PAYMENT_PROVIDER_TYPE, params: PaymentParams): Promise<void> {
if (!this.torusWalletInstance.isLoggedIn) throw TorusWalletPluginError.web3AuthNotConnected();
await this.torusWalletInstance.initiateTopup(provider, params);
}
export interface PaymentParams {
/**
* Address to send the funds to
*/
selectedAddress?: string;
/**
* Default fiat currency for the user to make the payment in
*/
selectedCurrency?: string;
/**
* Amount to buy in the selectedCurrency
*/
fiatValue?: number;
/**
* Cryptocurrency to buy
*/
selectedCryptoCurrency?: string;
/**
* Chain Network to use
*/
chainNetwork?: SUPPORTED_PAYMENT_NETWORK_TYPE;
}
export const PAYMENT_PROVIDER = {
MOONPAY: "moonpay",
WYRE: "wyre",
RAMPNETWORK: "rampnetwork",
XANPOOL: "xanpool",
MERCURYO: "mercuryo",
TRANSAK: "transak",
BANXA: "banxa",
} as const;
export const SUPPORTED_PAYMENT_NETWORK = {
MAINNET: "mainnet",
MATIC: "matic",
BSC_MAINNET: "bsc_mainnet",
AVALANCHE_MAINNET: "avalanche_mainnet",
XDAI: "xdai",
} as const;
Example
import { TorusWalletConnectorPlugin } from "@web3auth/torus-wallet-connector-plugin";
const torusPlugin = new TorusWalletConnectorPlugin({
torusWalletOpts: {},
walletInitOptions: {
whiteLabel: {
theme: { isDark: true, colors: { primary: "#00a8ff" } },
logoDark: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
logoLight: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
},
useWalletConnect: true,
enableLogging: true,
},
});
await web3auth.addPlugin(torusPlugin); // add plugin to web3auth instance
await torusPlugin.initiateTopup("moonpay", {
selectedAddress: "wallet_address",
selectedCurrency: "USD", // Fiat currency
fiatValue: 100, // Fiat Value
selectedCryptoCurrency: "ETH", // Cryptocurreny `SOL`, `MATIC` etc.
chainNetwork: "mainnet", // Blockchain network
});
Initiates the Top Up flow with selected provider.
Arguments
- Table
- Interface
Parameter | Type | Description | Mandatory |
---|---|---|---|
provider | PAYMENT_PROVIDER_TYPE ["moonpay" , "wyre" , "rampnetwork" , "xanpool" , "mercuryo" , "transak" ] | Payment Provider name | Yes |
params | PaymentParams | Payment Params object | Yes |
PaymentParams
Parameter | Type | Description | Mandatory |
---|---|---|---|
selectedAddress? | string | Address to send the funds to | No |
selectedCurrency? | string | Default fiat currency for the user to make the payment in | No |
fiatValue? | number | Amount to buy in the selectedCurrency | No |
selectedCryptoCurrency? | string | Cryptocurrency to buy | No |
cyptoAmount? | number | Amount Cryptocurrency to buy | No |
async initiateTopup(provider: PAYMENT_PROVIDER_TYPE, params: PaymentParams): Promise<void> {
if (!this.torusWalletInstance.isLoggedIn) throw TorusWalletPluginError.web3AuthNotConnected();
await this.torusWalletInstance.initiateTopup(provider, params);
}
export interface PaymentParams {
/**
* Address to send the funds to
*/
selectedAddress?: string;
/**
* Default fiat currency for the user to make the payment in
*/
selectedCurrency?: string;
/**
* Amount to buy in the selectedCurrency
*/
fiatValue?: number;
/**
* Cryptocurrency to buy
*/
selectedCryptoCurrency?: string;
/**
* Amount Cryptocurrency to buy
*/
cryptoAmount?: number;
}
export const PAYMENT_PROVIDER = {
MOONPAY: "moonpay",
WYRE: "wyre",
RAMPNETWORK: "rampnetwork",
XANPOOL: "xanpool",
MERCURYO: "mercuryo",
TRANSAK: "transak",
} as const;
Example
import { SolanaWalletConnectorPlugin } from "@web3auth/solana-wallet-connector-plugin";
const torusPlugin = new SolanaWalletConnectorPlugin({
torusWalletOpts: {},
walletInitOptions: {
whiteLabel: {
theme: { isDark: true, colors: { primary: "#00a8ff" } },
logoDark: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
logoLight: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
},
},
});
await web3auth.addPlugin(torusPlugin); // add plugin to web3auth instance
await torusPlugin.initiateTopup("moonpay", {
selectedAddress: "wallet_address",
selectedCurrency: "USD", // Fiat currency
fiatValue: 100, // Fiat Value
selectedCryptoCurrency: "ETH", // Cryptocurreny `SOL`, `MATIC` etc.
});
Supported Cryptocurrency
Supported Cryptocurrency for each Payment Provider by Network
MOONPAY
Network | Supported Cryptocurrency |
---|---|
mainnet | AAVE , BAT , DAI , ETH , MKR , MATIC , USDT , USDC |
matic | ETH: eth_polygon , MATIC: matic_polygon , USDC: usdc_polygon |
bsc_mainnet | BNB: bnb_bsc , BUSD: busd_bsc |
avalanche_mainnet | AVAX: avax_cchain |
WYRE
Network | Supported Cryptocurrency |
---|---|
mainnet | AAVE , BAT , BUSD , DAI , ETH , MKR , UNI , USDC , USDT |
matic | USDC: MUSDC |
avalanche_mainnet | AVAX |
RAMPNETWORK
Network | Supported Cryptocurrency |
---|---|
mainnet | ETH , DAI , USDC , USDT |
matic | MATIC_DAI , MATIC_MATIC , MATIC_USDC |
avalanche_mainnet | AVAX |
XANPOOL
Network | Supported Cryptocurrency |
---|---|
mainnet | ETH , USDT |
MERCURYO
Network | Supported Cryptocurrency |
---|---|
mainnet | ETH , BAT , USDT , DAI |
bsc_mainnet | BNB , BUSD , 1INCH |
TRANSAK
Network | Supported Cryptocurrency |
---|---|
mainnet | AAVE , DAI , ETH , USDC , USDT , CHAIN |
matic | AAVE , DAI , MATIC , USDC , USDT , WETH , CHAIN |
bsc_mainnet | BNB , BUSD |
avalanche_mainnet | AVAX |
BANXA
Network | Supported Cryptocurrency |
---|---|
mainnet | ETH , USDT , BUSD , LINK , USDC , CHZ , BAT , MANA , AAVE , COMP , ENJ |
matic | MATIC |