Accept Web3 Crypto Donations right on GitHub Pages
Open Source & set up in < 5 mins. Revolutionary multi-chain payment protocol enables accepting Web3 donations with on-the-fly conversion — hosted on Github Pages.
This approach is a game-changer.
If you think you know what I want to share with you today, I promise with 99% confidence: You did not see this before.
I will show you how to accept donations with any ERC-20 or BEP-20 token with automatic conversion:
- your supporters can pay with any token available in their wallet on multiple blockchains
- you always receive the one asset defined by yourself in the source code (e.g., DAI or USDT)
All this with just a single button, implemented for free with a small code snippet. Trustless, permissionless, truly decentralized without any email required.
▶️ Demo: Web3 Donations on Github Pages
Example: The 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.224 ETH) 👉 you receive ~1000 USDT.
Someone donates 20$ worth of SHIB (currently about 495.4K 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!).
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 if you just want to know how to implement this…)
☝️
DePay was born after my friend Sebastian Pape 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 is not required to use the protocol. The token can (optionally) be used to unlock data insight dashboards & other PRO features, which will be interesting for heavy users. $DEPAY serves as a utility & governance token.
That’s the “why” for this article.
Now let’s roll straight away! 🪨🤘🪨
📙 Preparations & 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!
Dev Documentation: https://depay.fi/documentation/donations#introduction
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!
Reasons to accept decentralized 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.
DePay believes in freedom and growth through decentralisation & Open Source. That’s why the source of our payment protocol is open: github.com/DePayFi
👍 Do you like this?
If you like our solution, please use it and share this article on Twitter.
This is the most appreciated way to say thank you 🙏
👋 Join our Telegram community: https://t.me/depayfi
🤝 Partner up with DePay: https://depay.fi/partnerships
Thanks for taking the time to look into DePay! 🚀
Cheers!
Alex
