CryptoDonate, The Donation Button For CryptoCurrencies


Read {count} times since 2020

CryptoDonate is a JavaScript (vanilla JS) library to embed a donation button for cryptocurrency. It doesn’t require any external library and is very lightweight. I created it to replace my existing BTC donation button in my blog.

Features

  • Supports BTC, LTC, ETH, XMR
  • Lightweight
  • Have an embed script
  • Easy usage
  • Supports theming

Widget

You can simply add the CryptoDonate widget to your blog or site by using this Widget Maker Tool. The widget maker tool generates a script that will load the files asynchoronously meaning your page’s load time won’t be affected.

The Fr.loadCD() function is used to load CryptoDonate to an element. It’s first parameter is the element (can be an element ID or element DOM object). The second parameter is the options.

Fr.loadCD(document.getElementById('cd-loc'), {
  coin: 'bitcoin'
});

To the second parameter, you can pass the same options as you pass to CryptoDonate object.

CryptoDonate dialog

CryptoDonate dialog

Usage

CryptoDonate comes under The Francium Project and therefore the object is referenced by Fr.CryptoDonate. Here is how it’s constructed :

var cd = new Fr.CryptoDonate({
  coin: 'bitcoin',
  address: '3Q2zmZA3LsW5JdxkJEPDRbsXu2YzzMQmBQ'
});

Then you can add the button to an element by using the appendTo function :

cd.appendTo(document.getElementById('target'));

Options

Options is passed to CryptoDonate as the first parameter while constructing the CryptoDonate object. Here are the default options (JSON object) :

{
    coin: 'bitcoin',
    address: '3Q2zmZA3LsW5JdxkJEPDRbsXu2YzzMQmBQ',

    qr: true,
    getQrImage: function(data) {
        return 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=' + data;
    },

    strings: {
        button: 'Donate',
        buttonTitle: 'Donate {coinName}',
        coins: {
            bitcoin: 'Bitcoin',
            ethereum: 'Ether',
            litecoin: 'Litecoin',
            monero: 'Monero',
        },
        dialogHeader: 'Donate {coinName}',
        dialogHelper: 'Please use this {coin} address to donate. Thanks !',
        openInWallet: 'Click here to send this address to your wallet.'
    },

    baseURL: '//lab.subinsb.com/projects/francium/cryptodonate',
    buttonLarge: false,
    buttonClass: '',

    dialogClass: '',
}

Notice the sub-object strings. It helps you to change the text displayed. You can use another language or change the “donation” to a “Pay Now” button.

coin

Type: string; Values: ‘bitcoin’, ‘litecoin’, ‘ethereum’, ‘monero’

address

Type: string;

The address to which payment is made. This value will be in different format for different coins. CryptoDonate does not check whether it’s valid or not. Make sure it’s correct.

qr

Type: boolean; Values: true, false

Should the QR image be displayed or not.

getQRImage

Type: function(string data);

The callback function used to get the URL to QR image representation of the given string.

strings

Type: object;

The strings that are displayed to the user is stored in this object. This is useful for translating strings.

Certain words closed in curly braces can be substituted :

  • {coin} – The coin’s name in lowercase. Example: bitcoin, ethereum
  • {coinName} – The coin’s name. Example: Bitcoin, Ether

baseURL

Type: string;

The base URL from which resources are loaded. The folder structure of base folder should be like this.

buttonLarge

Type: boolean; Values: true, false

Should the button be large sized.

buttonClass

Type: string;

Additional classes that must be added to the button. The classes must be separated by a whitespace.

If ‘dark’ class is added, then the button’s theme will be changed to dark.

dialogClass

Type: string;

Similar to buttonClass, it adds additional classes to dialog. Can be used for theming the dialog as well.

Functions

appendTo

Parameters:

  • element – Type: DOM Object; Element to which the button should be appended

Example :

cd.appendTo(document.getElementById('target'));

Using the CryptoDonate library directly may feel difficult for you if you don’t know JavaScript. In that case, I highly recommend you use the widget.

Show Comments