Unlock Full Example

Example of full integration of the Unlock snippet.

by smombartz

HTML

<script>
  (function(d, s) {
    var js = d.createElement(s),
      sc = d.getElementsByTagName(s)[0];
    js.src = "https://paywall.unlock-protocol.com/static/unlock.latest.min.js";
    sc.parentNode.insertBefore(js, sc);
  }(document, "script"));
</script>

<script>
  var unlockProtocolConfig = {
      "network": "1", // Network ID (1 is for mainnet, 4 for rinkeby, 100 for xDai... etc)  
      "locks": {
        "0xB0114bbDCe17e0AF91b2Be32916a1e236cf6034F": {
          "name": "Unlock Members"
        }
      },
      "icon": "https://unlock-protocol.com/static/images/svg/unlock-word-mark.svg",
      "callToAction": {
        "default": "Please unlock this demo!"
      }
	}
</script>

<h1>Unlock Demo</h1>
<p class="unlock-content locked">Unlock Demo is currently locked 🔒 </p>
<p class="unlock-content unlocked">Unlock Demo is currently unlocked 🎉</p>
<p class="unlock-content locked" onclick="window.unlockProtocol && window.unlockProtocol.loadCheckoutModal()"><button class="button">
Unlock!
</button></p>

CSS

.unlock-content {
  display: none;
}

.unlock-content .locked {
  display: none;  
}

.unlock-content .unlocked {
  display: none;
  
}

JavaScript

window.addEventListener('unlockProtocol.status', function(event) {
  // We hide all .unlock-content elements
  document.querySelector('.unlock-content').style.display = "none"
  // We show only the relevant element
  document.querySelectorAll(`.unlock-content.${event.detail.state}`).forEach((element) => {
  	element.style.display = "block"
  })
})

window.addEventListener('unlockProtocol.authenticated', function(event) {
	// event.detail.addresss includes the address of the current user, when known
})

window.addEventListener('unlockProtocol.transactionSent', function(event) {
	// event.detail.hash includes the hash of the transaction sent
})