A framework-less QR Code Web Component.
https://ash.bhimasani.com/bitpay/invoice/demos#walletConnect
https://ash.bhimasani.com/bitpay/invoice/demos#bip21Mode
Import the pretty-qr-code
component properly using your build system/framework, or use the standalone script:
<script src="/path/to/pretty-qr-code.js"></script>
Then use the component anywhere in the document:
<pretty-qr-code></pretty-qr-code>
To use the animateQRCode
method, the Web Animations API polyfill is required for good browser support. Import it properly with your build system, or
<script src="https://unpkg.com/web-animations-js@2.3.1/web-animations.min.js"></script>
Here's an example taking advantage of all configuration options:
<pretty-qr-code
id="qr1"
contents="customprotocol:?r=https://bitpay.com/i/exampleh3mCKGUna7v9S1z"
module-color="#1c7d43"
position-ring-color="#13532d"
position-center-color="#1c7d43"
mask-x-to-y-ratio="1.2"
style="width: 200px; height: 200px; background-color: #fff"
>
<img src="assets/icon.svg" slot="icon" />
</pretty-qr-code>
<script>
setTimeout(() => {
document.getElementById("qr1").animateQRCode("MaterializeIn");
}, 1000);
</script>
For more examples, see index.html
or clone this repo, npm install
, and npm start
.
You'll need Node.js, then:
yarn
yarn start
yarn build
yarn test