<button id="actionButton" onclick="handleButtonClick()">payInvoice</button>
<br/>
<h3>Success</h3>
<div id="result"></div>
</br>
<h3>Error</h3>
<div id="error"></div>
const { payInvoice, constants } = bitcoincomLink;

function handleButtonClick() {
  fetch("https://pay.bitcoin.com/create_invoice", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      token_id:
        "a4a0dc8fa40729bb9a43fd22862fe08ccd42e43d611a44578273e44adb11484e",
      fiat: "USD",
      slp_outputs: [
        {
          address: "simpleledger:qrw3pqgyjffxsv5qdj9n6zdpe70zqsegxcjyff6q8m",
          amount: 10000
        }
      ],
      memo: "This is a SLP invoice test"
    })
  })
    .then(res => res.json())
    .then(({ paymentUrl }) => {
      const params = {
        url: paymentUrl
      };
      return payInvoice(params);
    })
    .then(result => {
      resultEle.innerHTML = JSON.stringify(result);
    })
    .catch(err => {
      errorResultEle.innerHTML = JSON.stringify(err);
    });
}

const resultEle = document.getElementById("result");
const errorResultEle = document.getElementById("error");

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/bitcoincom-link@0.1.10/lib/bitcoincom-link.min.js