Skip to content
A web component to generate QR codes for ARK payments.
TypeScript HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
src ci: update workflow triggers Oct 8, 2019
.editorconfig initial commit Jan 19, 2018
.gitignore
CONTRIBUTING.md update: add contributing and banner image Jan 23, 2018
LICENSE pkg: update package information and configurations Jul 15, 2019
package.json
readme.md
renovate.json
stencil.config.ts
tsconfig.json
yarn.lock

readme.md

ARK QR Code

A web component to generate QR codes for ARK payments.

Latest Version Node Engine Build Status Codecov License: MIT

Lead Maintainer: Lúcio Rubens

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">

Security

If you discover a security vulnerability within this package, please send an e-mail to security@ark.io. All security vulnerabilities will be promptly addressed.

Credits

This project exists thanks to all the people who contribute.

License

MIT © ARK Ecosystem

You can’t perform that action at this time.