This approach is a game-changer for every dev who thinks about accepting donations/support for his or her projects or currently does so.
I will show you how to accept donations with any ERC-20 or BEP-20 token with automatic conversion right on GitHub Pages.
The coolest part:
- your supporters pay with any token available in their wallet on multiple blockchains (number of supported blockchains is growing)
- you always receive the one asset you define in the source code (e.g., DAI or USDT)
All this with just a single button, implemented for free with a small code snippet.
The used solution is decentralized, therefore trustless and permissionless (no email signup required). Watch it live in action:
(Live demo: https://lxpzurich.github.io)
Example from a donor’s perspective
I have set up this scenario with real tokens to show you what is possible.
Let’s imagine: Your supporter Christina (the donor) wants to say thank you for your great repository. She holds the following tokens in her wallet:
At the time of her donation, the assets in the shown wallet have the following USD values:
As you can see, Christina has multiple assets with different USD values at her disposal.
The donation widget automatically recognizes the blockchain network with a wallet address containing some value (via Metamask) — on top of this, it also suggests the token with sufficient funds to pay or donate the chosen amount with.
If there are multiple options for a certain amount, the wallet will display the one with the least conversion cost.
In a nutshell: The donation widget will display different tokens as means of payment, depending on the donation amount. The donor can still select another Token to pay with, as long as it has a sufficient balance.
More examples
- Someone donates 10$ worth of DAI 👉 you receive ~10 USDT.
- Someone donates 1000$ worth of ETH (currently about 0.39 ETH) 👉 you receive ~1000 USDT.
- Someone donates 20$ worth of SHIB (currently about 881K SHIB)👉 you receive ~20 USDT.
You have to initially define one particular asset that you want to receive on your end (I took the stable coin USDT as an example, but you could take any other token!).
As mentioned, the used solution is Open Source, permissionless & trustless.
It will take any dev less than 5 minutes to implement. My dev skills probably suck compared to yours, but even I managed to make this work 🚀.
🔎 Under the hood: Open Source Web3 Payment Protocol developed by DePay
👇
(Skip this part with a click if you just want to know how to implement this…)
☝️
DePay was born after my friend Sebastian Pape (@spape) had the idea of a permissionless & trustless Open Source payment protocol after the DeFi Summer in 2020.
The new hype around decentralized finance brought the TVL (total value locked) in DeFi protocols to new dimensions.
Sebastian figured out that the immense amount of DeFi liquidity in DEx’es (such as Uniswap or PancakeSwap) can be harnessed to make crypto payments finally decentralized, easy to implement & simple to use. He participated in the ETHOnline hackathon with his MVP and became a finalist in October 2020.
Fast forward: We quit our jobs at Swisscom & founded the DePay company in Crypto Valley (Zug) together with our friend Aleks.
Our ecosystem token $DEPAY serves as a utility & governance token. $DEPAY is not required to use the protocol. It can (optionally) be used to unlock data insight dashboards & other PRO features, which will become more and more interesting for heavy users.
That’s the “why” for this article.
Now let’s roll straight away! 🪨🤘🪨
📙 Step-by-step tutorial
All you need:
- A GitHub account & GitHub Desktop (if you don’t use the terminal).
- A static HTML page (template).
- Your receiving wallet address per blockchain. The Ethereum wallet address can be used on the Binance Smart Chain (et vice versa).
- The contract address of the token you want to receive. No matter which token your supporter pays with, it will be converted to this one.
💡 Note: The same token can have different token contract addresses per blockchain.
For example, ETH has the (technically not really an) address “0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE” on the Ethereum Network because it is the native blockchain token.
You would need to provide this tons-of-E’s-address in case you want to receive ETH in your Ethereum wallet as destination token.
At the same time, ETH has the address 0x2170ed0880ac9a755fd29b2688956bd959f933f8 on the Binance Smart Chain.
Please make sure to research your destination token addresses, before you continue.
What I personally prefer to go for is to receive USDT on Ethereum and BUSD on the Binance Smart Chain.
The DePay base snippet for the DePay Donation button: Find it here.
Check the source code of my demo page if you want.
🛠️ Step 1: Build a Donation Page
- I used the Bulma CSS framework to build the demo page.
- Name your file index.html (important).
- Fill it with content. Leave some space for the Donation button.
🛠️ Step 2: Donation Button Configuration
- The HTML/JS snippet contains the configuration for the blockchains you want to support (as of writing this, BSC & Ethereum are supported — more on this below)
- Insert your receiver wallet address per blockchain. You can use the same wallet address on Ethereum and the Binance Smart Chain.
- Insert the addresses of the token you want your donations to be converted to on each blockchain. As mentioned before: The same asset can have different token addresses on other blockchains.
- After having your payment config ready, insert the snippet in your HTML wherever it looks amazing & save the file.
🛠️ Step 3: Set up Github Pages & Upload your page
- You should have your page ready to be uploaded by now.
- Create a repository for your Github Pages site. The repository should be the same as your Github handle.
- Follow the steps described in Github’s official tutorial on this part of the setup: https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site
⭐ That’s it ⭐ push your page live & insert the link in your profile or elsewhere!
Official Documentation: https://depay.fi/documentation/donations#introduction
Some FAQ
Multi-chain support?
DePay currently supports:
- Ethereum Network
- Binance Smart Chain
- (very soon): Major L2 solutions & networks
We can not wait to see L2’s added to DePay. Concrete projects are not added to the roadmap yet but the DePay team is in close contact to multiple teams of amazing projects.
Please follow the DePay news channel on Telegram in order to be notified about relevant updates!
What are the benefits of decentralized altcoin donations?
Financial censorship seems to be more present than ever. No doubt — there are always several perspectives on one and the same story. The fact is that centralization always allows for the possibility of limiting opinions, speech and activities.
Permissionlessness is a strong indicator for a high grade of decentralization. Most payment solutions require individuals to sign up or even apply in order to use their solution. These companies have the power to stop your payments at any time.
Integration examples for payments?
We only disclose integrators who approach us for an official partnership. Our most recent official partner is BlackEyeGalaxy (Metaverse/NFT Gaming). You can buy their token with DePay straight on their website:
What about decentralized Web3 subscriptions?
It's not live yet, but we will release Web3 Subscriptions in the next few months. Making this work will enable tons of new use cases and we also look forward to celebrate the release.
Will there be a setup configurator or wizard?
Yes, it will actually be released within the next few days! We are super excited about it as the configurator will enable literally everyone to get this working in no time.
What if my project requires a custom integration?
Just hit us up, we will always take the time to help you with any question. There are indeed custom setups for Payments that require some more effort, but we were always able to provide quick support.
Can my visitors pay or donate with mobile wallets?
Yes! We integrated support for most major mobile wallets, too.
Do you like this? 👍
DePay believes in freedom and growth through decentralisation & Open Source. That’s why the source code of our altcoin payment solution is open for you:
If you like our solution, please implement it and share this article, our documentation or the GitHub repository with likeminded devs or communities.
This is the most appreciated way to say thank you 🙏
Cheers
Alex, DePay CMO
Top comments (0)