Sales

The ultimate guide to integrate Web3 token sales widget.

Purchase

Amount

AXS 1

$144.16 per token

Payment

ETH 0.034

Pay $144.16

Preparation

In order to to sell tokens with DePay on any blockchain, you need to have a decentralized liquidity pool (dex pair) on a decentralized exchange first:

Create Uniswap v2 Liquidity Pool

Create Pancakeswap Liquidity Pool

Button

The DePay Sales button allows you to directly sell tokens from your website or DApp without any further installation of javascript packages. Just use our button to open a widget that uses your configuration.

<div

  class="DePayButton"

  label="Buy"

  widget="Sale"

  configuration='{"sell":{"ethereum":"0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb"}}'

></div>

<script src="https://integrate.depay.com/buttons/v7.js"></script>

<noscript><a href="https://depay.com">Web3 Payments</a> are currently only supported with JavaScript enabled.</noscript>

<script>DePayButtons.init({document: document});</script>

Use our configurator to make sure you pass the correct configuration.

Widget

If you want to open our widget directly from your application code, use our widget library.

Installation

You can either load the @depay/widgets package via CDN:

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

or you install @depay/widgets via the package manager of your choice and ship it as part of your application bundle:

yarn add @depay/widgets

npm install @depay/widgets --save

Load the DePayWidgets package wherever you need it and call the Sale method:

import DePayWidgets from '@depay/widgets';

DePayWidgets.Sale({
  sell: {
    'ethereum': '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb'
  }
});

Configuration

You need to pass a configuration object to DePayWidgets.Sale which needs to at least contain sell:

DePayWidgets.Sale({
  sell: {
    'ethereum': '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb'
  }
});

You can also sell the same token on multiple blockchains:

DePayWidgets.Sale({
  sell: {
    'ethereum': '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb',
    'bsc': '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb'
  }
});

sell

Sell needs to have at least one key-value-pair per blockchain you want to sell your token on.

blockchain

The blockchain to sell the token on.

token

The address of the token you want to receive.

Additional optional configuration

amount

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

DePayWidgets.Sale({

  amount: {
    start: 1,
    step: 1,
    min: 1
  }
})

connected

A function that will be called once the user connects a wallet.

This function will be called with the connected wallet address as the main argument:

DePayWidgets.Payment({

  connected: (address)=> {
    // do something with the address
  }
})

sent

A function that will be called once the payment has been sent to the network (but still needs to be mined/confirmed).

The widget will call the this function passing a transaction as single argument. See: depay-web3-transaction for more details.

DePayWidgets.Payment({

  sent: (transaction)=> {
    // called when payment transaction has been sent to the network
  }
})

confirmed

A function that will be called once the payment has been confirmed once by the network.

The widget will call the this function passing a transaction as single argument. See: depay-web3-transaction for more details.

DePayWidgets.Payment({

  confirmed: (transaction)=> {
    // called when payment transaction has been confirmed once by the network
  }
})

failed

A function that will be called if the payment execution failed on the blockchain (after it has been sent/submitted).

The widget will call the this function passing a transaction as single argument. See: depay-web3-transaction for more details.

DePayWidgets.Payment({

  failed: (transaction)=> {
    // called when payment transaction failed on the blockchain
    // handled by the widget, no need to display anything
  }
})

critical

A function that will be called if the widget throws an critical internal error that it can't handle and display on it's own:

DePayWidgets.Payment({
  
  critical: (error)=> {
    // render and display the error with error.toString()
  }
})

error

A function that will be called if the widget throws an non-critical internal error that it can and will handle and display on it's own:

DePayWidgets.Payment({

  error: (error)=> {
    // maybe do some internal tracking with error.toString()
    // no need to display anything as widget takes care of displaying the error
  }
})

providers

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

DePayWidgets.Payment({

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

currency

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

DePayWidgets.Payment({

  currency: 'USD'

})

blacklist

Allows to blacklist tokens so that they will not be suggested as means of payment (from the sender):

DePayWidgets.Payment({
  
  blacklist: {
    ethereum: [
      '0x82dfDB2ec1aa6003Ed4aCBa663403D7c2127Ff67',  // akSwap
      '0x1368452Bfb5Cd127971C8DE22C58fBE89D35A6BF',  // JNTR/e
      '0xC12D1c73eE7DC3615BA4e37E4ABFdbDDFA38907E',  // KICK
    ],
    bsc: [
      '0x119e2ad8f0c85c6f61afdf0df69693028cdc10be', // Zepe
      '0xb0557906c617f0048a700758606f64b33d0c41a6', // Zepe
      '0x5190b01965b6e3d786706fd4a999978626c19880', // TheEver
      '0x68d1569d1a6968f194b4d93f8d0b416c123a599f', // AABek
      '0xa2295477a3433f1d06ba349cde9f89a8b24e7f8d', // AAX
      '0xbc6675de91e3da8eac51293ecb87c359019621cf', // AIR
      '0x5558447b06867ffebd87dd63426d61c868c45904', // BNBW
      '0x569b2cf0b745ef7fad04e8ae226251814b3395f9', // BSCTOKEN
      '0x373233a38ae21cf0c4f9de11570e7d5aa6824a1e', // ALPACA
      '0x7269163f2b060fb90101f58cf724737a2759f0bb', // PUPDOGE
      '0xb16600c510b0f323dee2cb212924d90e58864421', // FLUX
      '0x2df0b14ee90671021b016dab59f2300fb08681fa', // SAFEMOON.is
      '0xd22202d23fe7de9e3dbe11a2a88f42f4cb9507cf', // MNEB
      '0xfc646d0b564bf191b3d3adf2b620a792e485e6da', // PIZA
      '0xa58950f05fea2277d2608748412bf9f802ea4901', // WSG
      '0x12e34cdf6a031a10fe241864c32fb03a4fdad739' // FREE
    ]
  }
})

tokenImage

Allows to set the token image used in the widget to represent the purchased token:

DePayWidgets.Sale({
  tokenImage: 'https://depay.com/favicon.png'
});

style

Allows you to change the style of the widget.

DePayWidgets.Payment({
  style: {
    colors: {
      primary: '#ffd265',
      text: '#e1b64a',
      buttonText: '#000000',
      icons: '#ffd265'
    },
    fontFamily: '"Cardo", serif !important',
    css: `
      @import url("https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&display=swap");

      .ReactDialogBackground {
        background: rgba(0,0,0,0.8);
      }
    `
  }
})

colors

Allows you to set color values:

DePayWidgets.Payment({
  
  style: {
    colors: {
      primary: '#ffd265',
      text: '#ffd265',
      buttonText: '#000000',
      icons: '#ffd265'
    }
  }
})

fontFamily

Allows you to set the font-family:

DePayWidgets.Payment({
  
  style: {
    fontFamily: '"Cardo", serif !important'
  }
})

css

Allows you to inject CSS:

DePayWidgets.Payment({
  
  style: {
    css: `
      @import url("https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&display=swap");

      .ReactDialogBackground {
        background: rgba(0,0,0,0.8);
      }
    `
  }
})

unmount

Allows you to unmount (the React safe way) the entire widget from the outside:

let { unmount } = await DePayWidgets.Payment({})

unmount()

Configurator

The DePay Configurator simplifies and extends setting up the token sale widget:

Open the DePay Configurator