Ark-qrcode NPM

npm.io

ARK QR Code

A web component to generate QR codes for ARK payments.

Install

Script tag

Put this script tag <script src='https://unpkg.com/ark-qrcode@latest/dist/arkqrcode.js'></script> in the head of your index.html

Node Modules

Run npm install ark-qrcode --save
Put this script tag <script src='node_modules/ark-qrcode/dist/arkqrcode.js'></script> in the head of your index.html

In a stencil-starter app

Run npm install ark-qrcode --save
Add { name: 'ark-qrcode' } to your collections.

Usage

Insert the element in your code and enter your custom properties:

<ark-qrcode address="DE6os4N86ef9bba6kVGurqxmhpBHKctoxY" amount="20.3"></ark-qrcode>

Examples

<body>
<ark-qrcode address="DE6os4N86ef9bba6kVGurqxmhpBHKctoxY" amount="10.5" vendor-field="Hello%20Ark!" size="200" show-logo="true">
<script>
  document.querySelector('ark-qrcode').getURI();
  // => ark:DE6os4N86ef9bba6kVGurqxmhpBHKctoxY?amount=10.5&vendorField=Hello%20Ark!
</script>
</body>

Generate this QR code:

Properties

This package complies with the specifications described in AIP-13.

Attribute	Description	Type	Required
address	Ark recipient address encoded in Base58.	String	Yes
amount	Amount in ARK (Ѧ) or DARK (DѦ).	Number	No
label	Recipient label string.	String	No
size	Size of the QR code (pixels)	Number	No
show-logo	Display the ARK logo in QR code	Boolean	No
vendor-field	Vendor field string (encoded URI).	String	No

Methods

You can interact with the component data using the methods below:

`getURI()`

Format the properties entered to the ARK URI scheme.

document.querySelector('ark-qrcode').getURI();
// => ark:DE6os4N86ef9bba6kVGurqxmhpBHKctoxY?amount=20.3

`getDataURL([mime])`

Generates a base64 encoded data URI for the QR code.

document.querySelector('ark-qrcode').getDataURL();
// => data:image/png;base64,iVBORw0KGgoAAAANSUhE...n6ofvMC4I9AAAAAElFTkSuQmCC

`validateURI(uri)`

Validate an URI string.

const uri = 'ark:DE6os4N86ef9bba6kVGurqxmhpBHKctoxY?amount=10.5';
document.querySelector('ark-qrcode').validateURI(uri);
// => ["ark:DE6os4N86ef9bba6kVGurqxmhpBHKctoxY?amount=10.5", "DE6os4N86ef9bba6kVGurqxmhpBHKctoxY", "?amount=10.5"]

`deserializeURI(uri)`

Deserialize the URI scheme to a JSON object.

const uri = 'ark:DE6os4N86ef9bba6kVGurqxmhpBHKctoxY?amount=10.5&vendorField=Hello%20Ark!';
document.querySelector('ark-qrcode').deserializeURI(uri);
// => { address: 'DE6os4N86ef9bba6kVGurqxmhpBHKctoxY', amount: 10.5, label: null, vendorField: 'Hello Ark!' }

`fromObject(obj)`

Instantiate a URI from an Object.

const obj = { address: DE6os4N86ef9bba6kVGurqxmhpBHKctoxY, amount: 10.5 };
const element = document.querySelector('ark-qrcode').fromObject(obj);
// => <ark-qrcode address="DE6os4N86ef9bba6kVGurqxmhpBHKctoxY" amount="10.5">