The Badger Wallet is your gateway into the world of Bitcoin Cash. Enabling Bitcoin micropayments, paywalls, in-app purchases, tokens and smart-contracts plus more. Recently with the departure of Money Button from the Bitcoin Cash ecosystem, we’ve put together the definitive guide on replacing it by installing Badger Button.

More Spice: Bitcoin White Paper Webcomic by Comics Legend Scott McCloud

Badger Button: The Money Button Replacement

In the above video, Hayden Otto guides users through the installation processes of both the Badger Wallet and then the Badger Button on the CoinSpice website. The general process is as follows:

  1. Download the most recent release from the Chrome (Download) button on https://badgerwallet.cash. Go to chrome://extensions/ and enable developer mode in Chrome. Drag the zip file onto the extensions page to install.
  2. Set up your Badger Wallet by clicking the icon and following the prompts. Then fund your account with some Bitcoin BCH.
  3. Copy the Script, HTML and CSS below into a text/source code editor. Tweak the button and CSS settings to your liking.
  4. Paste the entire completed code into a container on your website, where you want the button to appear.
  5. Start using Badger Button! You can now receive tips, payment for goods/services or put content behind a paywall + more.

For your convenience, we are providing you with the exact scripts, HTML and CSS styling that was used for the SpicyButton™ on our website.

Badger Button Script

A custom script I got Gabriel Cardona to whip up, which automatically anchors a USD value to the amount of Satoshis the button is requesting.

Note:
– If you don’t have jquery running on your website, you will also have to put this extra line of code above the big script.
– This will not work in a local HTML file for testing, it requires you to emulate a server or host it online.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
function getBCHPrice () {
  return new Promise((resolve, reject) => {
    jQuery.getJSON('https://index-api.bitcoin.com/api/v0/cash/price/usd', function (result) {
      if (result.price != '') {
        var singleDollarValue = result.price / 100
        var singleDollarSatoshis = 100000000 / singleDollarValue
        resolve(singleDollarSatoshis);
      } else {
        reject(new Error(result.error));
      }
    });
  });
};
jQuery(window).on('load', function(){ 
  getBCHPrice().then(function(res) {
    var badgerButtons = document.body.getElementsByClassName("badger-button")
    for (var i = 0; i < badgerButtons.length; i++) {
      var badgerButton = badgerButtons[i]
      badgerButton.addEventListener('click', function(event) {
        if (typeof web4bch !== 'undefined') {
          web4bch = new Web4Bch(web4bch.currentProvider)
          var txParams = {
            to: badgerButton.getAttribute("data-to"),
            from: web4bch.bch.defaultAccount,
            value: res
          }
          web4bch.bch.sendTransaction(txParams, (err, res) => {
            if (err) return
            var paywallId = badgerButton.getAttribute("data-paywall-id")
            if (paywallId) {
              var paywall = document.getElementById("paywall")
              paywall.style.display = "block"
            }
            var successCallback = badgerButton.getAttribute("data-success-callback")
            if (successCallback) {
              window[successCallback](res)
            }
          })
        } else {
          window.open('https://badgerwallet.cash')
        }
      })
    }
  });
});
</script>

Define Your Button

Modify these fields to your liking: data-text, data-to, and then the text between the <span> tag.

<button class="badger-button button button--rayen button--border-thick button--text-thick button--size-m" data-text="Donate $1" data-to="bitcoincash:qq6e3seenwkhjqv88vavrlpfy7wc6mrzt5xqu0w5ch" data-satoshis="600000"><span>Support the Spice</span></button>

CSS Styling

Customize colours and other styling of the button here.

<style>
    /* Common button styles */
    .button {
        float: left;
        min-width: 140px;
        max-width: 250px;
        display: block;
        margin: 1em;
        padding: 1em 1em;
        border: none;
        background: none;
        color: inherit;
        vertical-align: middle;
        position: relative;
        z-index: 1;
        -webkit-backface-visibility: hidden;
        -moz-osx-font-smoothing: grayscale;
    }
    .button:focus {
        outline: none;
    }
    .button > span {
        vertical-align: middle;
    }

    /* Size */
    .button--size-m {
        font-size: 16px;
    }

    /* Typography */
    .button--text-thick {
        font-weight: 600;
    }

    /* Border */
    .button--border-thick {
        border: 3px solid;
    }

    /* Rayen custom design adapted from Codrops */
    .button--rayen {
        overflow: hidden;
        padding: 0;
        width: 230px;
    }
    .button--rayen.button--inverted {
        color: #fff;
    }
    .button--rayen::before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #e60b24;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    .button--rayen.button--inverted::before {
        background: #fff;
        color: #e60b24;
    }
    .button--rayen > span {
        display: block;
    }
    .button--rayen::before,
    .button--rayen > span {
        padding: 1em 2em;
        -webkit-transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
        transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }
    .button--rayen:hover::before {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .button--rayen:hover > span {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

</style>

 

Robinhood Enables BCH Trading, Distributes 'New Asset'

If this guide helped you, tip us! With solutions like Badger Wallet emerging on the Bitcoin Cash scene every day, it has never been a more exciting time to be involved in Bitcoin Cash. If you have any issues installing the button reach out to support on the Badger Wallet Telegram.

 

 

Robinhood Enables BCH Trading, Distributes 'New Asset'

CONTINUE THE SPICE and check out our piping hot Videos. Our podcast, Milk, might help sooth that crypto burn. Follow CoinSpice on Twitter. Join our Telegram feed to make sure you never miss a post. Drop some BCH at the merch shop — we’ve got spicy shirts for men and women. Don’t forget to help spread the word about CoinSpice on social media. Thanks!