How to use the pre-bundled version.

Sure. I'm not familiar with Webflow, but I'll try to help anyway.

I think one possible way in Webflow would be the Custom Code embed feature.

Inside the custom code, the first thing you should do is to create an iframe where you can render the QR Bill.

<iframe id="iframe"></iframe>

Then you can import the library. This can be done using the html <script> tag.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/swissqrbill/lib/browser/bundle/index.js" ></script>

Finally you can write the actual code that renders the QR Bill.

<script type="text/javascript">

  const data = {
    currency: "CHF",
    amount: 1199.95,
    reference: "210000000003139471430009017",
    creditor: {
      name: "Robert Schneider AG",
      address: "Rue du Lac",
      buildingNumber: "1268",
      zip: 2501,
      city: "Biel",
      account: "CH4431999123000889012",
      country: "CH"
    },
    debtor: {
      name: "Pia-Maria Rutschmann-Schnyder",
      address: "Grosse Marktgasse",
      buildingNumber: "28",
      zip: 9400,
      city: "Rorschach",
      country: "CH"
    }
  };

  const stream = new SwissQRBill.BlobStream();
  const pdf = new SwissQRBill.PDF(data, stream);

  pdf.on("finish", () => {
    const iframe = document.getElementById("iframe");
    const url = stream.toBlobURL("application/pdf");
    iframe.src = url;
  });

</script>

That's it. This should render a PDF inside the iframe in your Webflow page. Let me know if you need any further help, and try to provide some information about your approach or error messages you may have received.

schoero / swissqrbill

How to use the pre-bundled version. #398