VanityGen.net Donation Widget

HTML

 <!-- partial:index.partial.html -->
  <div id="widget"></div>
 <!-- templates section -->
 <!-- step 1 select amount -->
  <template id="stage-1-template">
  <div class="stage-1">
  <i><svg class="lnr lnr-gift hvr-buzz"><use xlink:href="#lnr-gift"></use></svg></i>
  <p>If you like this content, please consider supporting the team with a donation.</p>
  <button v-show="!showSelection" v-on:click="donate()" class="hvr-grow-shadow">Donate {{amount}} BTC</button>
  <select @change="triggerAmountChange()" v-model="amount" v-show="showSelection">
  <option>0.01</option>
  <option>0.05</option>
  <option>0.1</option>
  <option>0.15</option>
  <option>0.25</option>
  </select>
  <a href="#" v-on:click="selectAmount()">Select other amount</a>
  </div>
  </template>
 <!-- step 2, draw QR code -->
  <template id="stage-2-template">
  <div class="stage-2">
  <i v-on:click="goBack()"><svg class="lnr lnr-cross"><use xlink:href="#lnr-cross"></use></svg></i>
  <p class="explanation"><strong>Thank you for your {{amount}} BTC donation!</strong><br>Here's the code that you can scan with you wallet app and a link below, that you can copy to your Bitcoin client</p>
  <div id="qr-code-container"></div>
  <textarea @click="select">{{ethLink}}</textarea>
  <transition name="slide-fade">
  <p class="notification" v-if="showNotification">Link copied!</p>
  </transition>
  </div>
  </template>
  <!--  main app -->
  <template id="eth-widget-template">
  <div class="eth-donation-widget">
  <transition name="slide-fade">
  <stage-two v-if="checkStage(2)" :amount="amount" v-on:changestage="changeStage"></stage-two>
  </transition>
 <stage-one v-if="checkStage(1)" :amount="amount" v-on:changestage="changeStage"/>
 </div>
  </template>
  <!-- partial -->

CSS

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhzg.ttf) format('truetype');
}
.btn-bitcoin {
  display: flex!important;
  align-items: center!important;
  font-size: 14px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-family: 'Montserrat';
  width: 160px;
  height: 45px;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #f8e9c0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f4ca5d), to(#f4b840));
  background-image: linear-gradient(#f4ca5d, #f4b840);
  color: #333;
  text-transform: uppercase;
  -webkit-transition: width 0.35s ease;
  transition: width 0.35s ease;
}
.btn-bitcoin span {
  display: block;
}
.btn-bitcoin .currency {
  font-size: 1.1em;
}
.btn-bitcoin .currency:before {
  content: 'Pay with';
  font-size: 0.65em;
  display: block;
}
.btn-bitcoin .symbol {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  font-size: 2.3em;
  border: 2px solid #333;
  border-radius: 360px;
  padding: 4px;
  width: 33px;
  height: 33px;
  text-align: center;
  line-height: 1em;
  margin-right: 5px;
}
.btn-bitcoin p {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  padding: 0;
  margin: 0;
}
.btn-bitcoin .symbol,
.btn-bitcoin p {
  display: inline-block;
  white-space: nowrap;
}
.btn-bitcoin:hover p {
  -webkit-transform: translateX(120px);
          transform: translateX(120px);
}
.btn-bitcoin:hover .symbol {
  -webkit-transform: translateX(60px);
          transform: translateX(60px);
}
.btn-bitcoin.opened {
  width: 390px;
}
.btn-bitcoin.opened:hover p {
  -webkit-transform: inherit;
          transform: inherit;
  cursor: text;
}
.btn-bitcoin.opened:hover .symbol {
  -webkit-transform: inherit;
          transform: inherit;
}
.btn-bitcoin.opened .currency {
  text-transform: initial;
}
.btn-bitcoin.opened .currency:before {
  content: 'Thank you !';
  text-transform: uppercase;
}
.btn-bitcoin.donate .currency:before {
  content: 'Make a donation';
  font-size: 0.65em;
  display: block;
}
.btn-bitcoin.donate.opened .currency:before {
  content: 'wow such generous !';
}
.btn-bitcoin.black {
  color: #fbbc3a;
  border-color: #323520;
  background-image: none;
  background-color: #272515;
}
.btn-bitcoin.black .symbol {
  border-color: #fbbc3a;
}
.btn-bitcoin.black.opened:after {
  background-color: #272515;
  border-color: #323520;
}
p.wow {
  text-align: center;
  font-family: 'Comic Sans MS';
}
.btn-bitcoin {
  margin: 20px auto;
}

JS

/**
  the library used: https://github.com/jibrelnetwork/ethereum-qr-code
*/
  const donationAdress = "1DonateWffyhwAjskoEwXt83pHZxhLTr8H";
const getQrCode = value => {
  const qr = new EtheriumQRplugin.etheriumQRplugin();
  const codeDetails = {
  to: donationAdress,
  value,
  size: 180,
  gas: 21000,
  selector: "#qr-code-container",
  options: {
  margin: 1 } };

 return qr.toCanvas(codeDetails);
  };
const copyToClipboard = eventTarget => {
  eventTarget.select();
  document.execCommand('copy');
  };
const StageOne = Vue.component("StageOne", {
  name: "StageOne",
  template: "#stage-1-template",
  props: {
  amount: Number },
 data: function () {
  return {
  showSelection: false };
 },
  methods: {
  donate: function () {
  this.$emit("changestage", [2, this.amount]);
  },
  selectAmount: function () {
  this.showSelection = true;
  },
  triggerAmountChange: function () {
  this.showSelection = false;
  } } });
 
const StageTwo = Vue.component("StageTwo", {
  name: "StageTwo",
  template: "#stage-2-template",
  props: {
  amount: Number },
 data: function () {
  return {
  ethLink: "",
  showNotification: false };
 },
  methods: {
  goBack: function () {
  this.$emit("changestage", [1, this.amount]);
  },
  select: function (event) {
  copyToClipboard(event.target);
  this.showNotification = true;
  } },
 mounted: function () {
  getQrCode(this.amount).then(result => {
  this.ethLink = result.value;
  });
  },
  updated: function () {
  document.getElementById('qr-code-container').innerHTML = '';
  getQrCode(this.amount).then(result => {
  this.ethLink = result.value;
  });
  } });

new Vue({
  el: "#widget",
  template: "#eth-widget-template",
  components: { StageTwo, StageOne },
  data: function () {
  return {
  stage: 1,
  amount: 0.1 };
 },
  methods: {
  checkStage: function (stage) {
  return stage === this.stage;
  },
  changeStage: function (data) {
  this.stage = data[0];
  this.amount = data[1];
  },
  changeAmount: function (amount) {
  this.amount = amount;
  } } });