Donations
The ultimate guide to integrate Web3 Donations.
DePay Donations allows you to accept peer-to-peer, web3 donation payments with on-the-fly any-to-anything conversion.
Preparation
In order to receive Web3 Donations on any blockchain you need to have your own wallet on that particular blockchain first:
Button
The DePay Donations button allows you to directly accept Web3 Donations on your website or DApp without any further installation of javascript packages. Just use our button to open a donation widget that uses your configuration.
<div
class="DePayButton"
label="Donate"
widget="Donation"
configuration='{"accept":[{"blockchain":"ethereum","token":"0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb","receiver":"0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02"}]}'
></div>
<script src="https://integrate.depay.fi/buttons/v6.js"></script>
<noscript><a href="https://depay.fi">Web3 Payments</a> are currently not supported without 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 src="https://integrate.depay.fi/widgets/v6.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
Donation
method:
import DePayWidgets from '@depay/widgets';
DePayWidgets.Donation({
accept: [{
blockchain: 'ethereum',
token: '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb',
receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'
}]
});
Configuration
You need to pass a configuration object to
DePayWidgets.Donation
which needs to at least contain
accept
.
DePayWidgets.Donation({
accept: [{
blockchain: 'ethereum',
token: '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb',
receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'
}]
});
You can also receive donations on multiple blockchains:
DePayWidgets.Donation({
accept: [{
blockchain: 'ethereum',
token: '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb',
receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'
},{
blockchain: 'bsc',
token: '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb',
receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'
}]
});
blockchain
The blockchain on which you want to receive the donation on.
token
The address of the token you want to receive.
receiver
The address receiving the payment. Always double check that you've set the right address.
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.Donation({
amount: {
start: 1,
step: 1,
min: 1
}
})
DePayWidgets.Donation({
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
}
})
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
}
})
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
}
})
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
}
})
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()
}
})
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
}
})
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']
}
})
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'
})
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
]
}
})
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
]
}
})
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);
}
`
}
})
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'
}
}
})
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'
}
})
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);
}
`
}
})
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()
let { unmount } = await DePayWidgets.Payment({})
unmount()
Configurator
The DePay Configurator simplifies and extends setting up Web3 Donations:
Feel free to reach out in order to get additional help: