Crypto Web3 Payment Widget by DePay

📦 Installation

via CDN

<script defer async src="https://integrate.depay.com/widgets/v13.js"></script>

via Package Manager (recommended)

yarn add @depay/widgets ethers react react-dom

or

npm install @depay/widgets ethers react react-dom --save

[!IMPORTANT] Ensure the peer dependencies (ethers, react, and react-dom) are installed if not already present.

Import in your JavaScript files

import DePayWidgets from '@depay/widgets'

Server-Side Rendering (SSR)

If you're using SSR frameworks like Next.js, make sure to only load DePay Widgets on the client side.

Guide: https://dev.to/elisabethleonhardt/how-to-use-client-side-only-packages-with-ssr-in-gatsby-and-nextjs-3pfa

Demos

Configurator UI: https://app.depay.com/integrations/new

Technical Demo: https://depayfi.github.io/widgets/demo.bundle.html

Support

Platforms

• Ethereum Virtual Machine (EVM)
• Solana Virtual Machine (SVM)

Platform specific packaging

If only specific platform packaging is needed:

EVM (Ethereum Virtual Machine)

yarn add @depay/widgets-evm

or

npm install @depay/widgets-evm --save

import DePayWidgets from '@depay/widgets-evm'

SVM (Solana Virtual Machine)

yarn add @depay/widgets-svm

or

npm install @depay/widgets-svm --save

import DePayWidgets from '@depay/widgets-svm'

Blockchains

• Ethereum
• BNB Smart Chain
• Polygon
• Solana
• Optimism
• Arbitrum
• Avalanche
• Gnosis
• Base
• Worldchain

Wallets

DePay supports most crypto wallets.

Payment Widget

Enable seamless wallet-to-wallet crypto payments.

Managed Integration using Integration ID

DePayWidgets.Payment({
  integration: 'YOUR_INTEGRATION_ID'
})

Managed integration configurations fetched from app.depay.com.

[!IMPORTANT] Local configurations override remote settings.

[!CAUTION] Use either integration (managed) or accept (unmanaged), never both.

Payload for Dynamic Backend Configurations

DePayWidgets.Payment({
  integration: 'YOUR_INTEGRATION_ID',
  payload: { dynamicKey: 'dynamicValue' }
})

Forwards the payload to your backend for dynamic payment setup, like:

{
  "dynamicKey": "dynamicValue"
}

Unmanaged Configuration

[!IMPORTANT] Unmanaged configurations do not provide any callbacks for server-side actions or integrations. They are limited to initiating and executing payments only. If you need callbacks for your integrations, use managed integrations.

DePayWidgets.Payment({
  accept: [{
    blockchain: 'ethereum',
    amount: 1,
    token: 'TOKEN_ADDRESS',
    receiver: 'RECEIVER_ADDRESS'
  }]
})

Multi-blockchain payments:

DePayWidgets.Payment({
  accept: [
    { // 20 USDT on ethereum
      blockchain: 'ethereum',
      amount: 20,
      token: '0xdac17f958d2ee523a2206206994597c13d831ec7',
      receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'
    },{ // 20 BUSD on bsc
      blockchain: 'bsc',
      amount: 20,
      token: '0xe9e7cea3dedca5984780bafc599bd69add087d56',
      receiver: '0x552C2a5a774CcaEeC036d41c983808E3c76477e6'
    },{ // 20 USDC on polygon
      blockchain: 'polygon',
      amount: 20,
      token: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
      receiver: '0x552C2a5a774CcaEeC036d41c983808E3c76477e6'
    }
  ]
});

Configuration Options

accept

[!CAUTION] Use either integration (managed) or accept (unmanaged), never both.

DePayWidgets.Payment({
  accept: [{
    blockchain: 'ethereum',
    amount: 1,
    token: 'TOKEN_ADDRESS',
    receiver: 'RECEIVER_ADDRESS'
  }]
})

blockchain

The blockchain you want to receive the payment on.

token

The address of the token you want to receive.

amount (Optional)

The amount of tokens you want to receive. Needs to be passed as a human readable number e.g. 20.

The BigNumber of that amount will be calculated internally including finding the right amount of decimals for the given token. So please just pass the amount in a human readable form as Number/Decimal: e.g. 20 for 20 USDT or 20.25 etc.

If you do not pass an amount, the user will be able to select an amount within the widget.

receiver

The address receiving the payment. Always double check that you've set the right address.

amount

fixed currency amounts

If you want the widget to fix a payment amount in a currency, use currency and fix:

currency:

Example (charge US$5.20):

{
  amount: {
    currency: 'USD',
    fix: 5.20
  }
}

Make sure to not pass any amounts to accept if you use fix currency amounts.

The widget will still display local currency conversions to users. If you want to change this see currency configuration.

amount selection (changeable amounts)

When you want to control how the amount selection behaves, pass the amount configuration object, alongside values for start, min and step.

start: The amount that is initially selected.

min: The minimum amount selectable.

step: The number by which to increment/decrement changes to the amount.

fee

You can configure a fee which will be applied to every payment with its own dedicated fee receiver address.

The fee will be taken from the target token and target amount (after swap, depending on your accept configuration).

amount: Either percentage (e.g. 5%, or absolute amount as BigNumber string ('100000000000000000') or pure number (2.5)

receiver: The address that is supposed to receive the fee.

DePayWidgets.Payment({
  accept: [
    {...

      fee: {
        amount: '3%',
        receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'
      }
    }
  ],
});

fee2

You can configure up to 2 fees that will be paid out as part of the payment:

DePayWidgets.Payment({
  accept: [
    {...

      fee: {...},
      fee2: {,
        amount: '5%',
        receiver: '0x08B277154218CCF3380CAE48d630DA13462E3950'
      }
    }
  ],
});

protocolFee

The fee paid to the protocol:

DePayWidgets.Payment({
  
  protocolFee: '1.5%',
  
});

title

title

Allows you to change the title of the widget:

DePayWidgets.Payment({

  title: 'Donation'

  //...
})

wallets

You can sort and allow (list) wallets displayed during the initial wallet selection step as follows:

wallets.sort

{
  wallets: {
    sort: [
      'Uniswap',
      'Coinbase'
    ]
  }
}

This configuration would display Uniswap and Coinbase first, then would list all the others.

wallets.allow

{
  wallets: {
    allow: [
      'Uniswap',
      'Coinbase',
      'Rainbow'
    ]
  }
}

This configuration would only display Uniswap, Coinbase and Rainbow. No other options/wallets are displayed.

wallet

wallet

Allows to pass an already connected wallet instance (to skip the "Connect Wallet" flow):

let { wallet } = DePayWidgets.Connect({})

DePayWidgets.Payment({
  
  wallet: wallet

})

providers

Allows to set providers to be used for making RPC calls to the individual blockchains:

DePayWidgets.Payment({

  providers: {
    ethereum: ['http://localhost:8545'],
    bsc: ['http://localhost:8545'],
    polygon: ['http://localhost:8545']
  }
})

currency

Allows you to enforce displayed local currency (instead of automatically detecting it):

DePayWidgets.Payment({

  currency: 'USD'

})

allow (list)

Allows only the configured tokens to be eligible as means of payment:

DePayWidgets.Payment({
  
  allow: {
    ethereum: [
      '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE', // ETH
      '0xdac17f958d2ee523a2206206994597c13d831ec7', // USDT
      '0x6b175474e89094c44da98b954eedeac495271d0f'  // DAI
    ],
    bsc: [
      '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE', // BNB
      '0xe9e7cea3dedca5984780bafc599bd69add087d56', // BUSD
      '0x55d398326f99059ff775485246999027b3197955'  // BSC-USD
    ],
    polygon: [
      '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE', // MATIC
      '0x2791bca1f2de4661ed88a30c99a7a9449aa84174', // USDC
    ]
  }

})

deny

Allows to deny tokens so that they will not be suggested as means of payment:

DePayWidgets.Payment({
  
  deny: {
    ethereum: [
      '0x82dfDB2ec1aa6003Ed4aCBa663403D7c2127Ff67',  // akSwap
      '0x1368452Bfb5Cd127971C8DE22C58fBE89D35A6BF',  // JNTR/e
      '0xC12D1c73eE7DC3615BA4e37E4ABFdbDDFA38907E',  // KICK
    ],
    bsc: [
      '0x119e2ad8f0c85c6f61afdf0df69693028cdc10be', // Zepe
      '0xb0557906c617f0048a700758606f64b33d0c41a6', // Zepe
      '0x5190b01965b6e3d786706fd4a999978626c19880', // TheEver
      '0x68d1569d1a6968f194b4d93f8d0b416c123a599f', // AABek
      '0xa2295477a3433f1d06ba349cde9f89a8b24e7f8d', // AAX
      '0xbc6675de91e3da8eac51293ecb87c359019621cf', // AIR
      '0x5558447b06867ffebd87dd63426d61c868c45904', // BNBW
      '0x569b2