@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");

* {
  color: #3F3F3F;
  font-family: Montserrat, sans-serif;
}

.vertical-center {
   display: flex;
   align-items: center;
   min-height: 50vh;
}

.sipay-button {
  background-color: #C34112;
  color: white;
}

#example {
  border: 1px solid black;
  padding: 25px;
}

// var img = document.querySelector("#photo");
var btn = document.querySelector("#btn");
var goto = document.querySelector("#goTo");
var pre = document.querySelector("#json");

btn.addEventListener("click", function() {
  btn.disabled = true;
  goto.innerHTML = '';
  btn.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>`
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
      var url = JSON.parse(xhr.responseText);
      goto.href = url.payload.url;
      goto.innerHTML = url.payload.url;
      btn.disabled = false;
  btn.innerHTML = `Crear enlace`

      
      // pre.innerHTML = JSON.stringify(url, null, 4);
    }
  }
  xhr.open("POST", "https://eog6w34siej30da.m.pipedream.net/", true);
  xhr.setRequestHeader('Content-type', 'application/json');
  xhr.send("{}");
});