Single Page App for OpenNode Lightning Payments \ stacker news ~bitcoin

This post is in relation to a previous discussion: #76089

I decided to just code it myself. There's no CSS and it violates all kinds of best practices, but - it's super simple (50 lines of code), and - it works!

The merchant just needs to enter the amount, the order number (optional), and a description (optional).

The OpenNode checkout will then open in a new window, with the option of lightning or on-chain payments.

To configure - just enter your OpenNode API key on line #13 below, along with your preferred fiat-shitcoin for display purposes. Then deploy to any web server, or even a github pages instance.

<html>

<body style="padding:30px">
  <p id="amtTxt"></p><input type="number" id="amtId" />
  <p>Order ID:</p><input type="text" id="orderId" />
  <p>Description:</p><input type="text" id="descId" />
  </br></br>
  <button type="button" onclick="makeInvoice();">Make Invoice</button>

  <script defer>
    // Enter OpenNode INVOICE API key (first one) and preferred Fiat Currency
    // https://app.opennode.com/developers/integrations
    const apiKey = 'long-random-string';
    const currency = 'EUR';

    // put currency in the text description
    document.getElementById("amtTxt").innerHTML = "Invoice Amount (" + currency + "):"

    function makeInvoice() {
      const data = JSON.stringify({
        currency: currency,
        auto_settle: true,
        amount: document.getElementById("amtId").value,
        order_id: document.getElementById("orderId").value,
        description: document.getElementById("descId").value
      });

      const xhr = new XMLHttpRequest();
      xhr.withCredentials = false;

      xhr.addEventListener('readystatechange', function () {
        if (this.readyState === this.DONE) {
          console.log(this.responseText);
          const res = JSON.parse(this.responseText);
          window.open(res.data.hosted_checkout_url, '_blank');
        }
      });

      xhr.open('POST', 'https://api.opennode.com/v1/charges');
      xhr.setRequestHeader('accept', 'application/json');
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.setRequestHeader('Authorization', apiKey);
      xhr.send(data);

    }
  </script>
</body>

</html>