README
📜 Cryptocurrencies, simplified!
Crypto Voucher's Widget
💡 Remember to register as widget provider on our website CryptoVoucher to get own reference identificator
🛠Installation
First you have to make sure that you already become our partner, and you have your reference identificator ready, because you will need it to make widget work properly.
With Framework:
Crypto Voucher's widget has been created with Stencil. To check details of implementation with various frontend
frameworks, please check this website.
However there are some common steps for each framework:
Run command:
npm i --save @crypto-voucher/widget
please ensure you install the latest version of widget's packageSecond step depends on framework you are going to use widget with:
In case of using Angular, please checkout this website: Angular installation
When your frontend framework is React, please checkout this website: React installation
The last one widely supported framework is Vue, you can check it out here: Vue installationAfter following previous steps, you should be able to put widget on your website:
First you have to place this html tag inside template. Remember to add any class, id or ref in order to be able to target widget using JavaScript code
<crypto-voucher-widget id="widget" ref="widget" class="widget" />
That's all, to start transaction with widget, you have to call method on widget object: In order to do this, you should get
<crypto-voucher-widget />
tag and store it in variable:const widget = document.querySelector('#widget')
And then you will be able to call method:
widget.beginTransaction(args)
the details of args are described in the following section
Without Framework:
1.Put following scripts inside:
<head>
section:
<script type='module'>
import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@crypto-voucher/widget@0.3.3/loader/index.es2017.js'
defineCustomElements()
</script>
! make sure you use the latest version !
- before
<body>
closing tag:
<script>
const args = {
referenceId: 'your reference id'
}
function startTransaction() {
const widget = document.querySelector('#widget')
widget.beginTransaction(args)
}
</script>
- somewhere inside
<body>
tag:
<crypto-voucher-widget id='widget' ref='widget' class='widget'></crypto-voucher-widget>
the details of args are described in the following section
- After following previous step, you should be able to start widget's transaction by calling
beginTransaction
function, for example on onclick event:
<button onclick='startTransaction()'>Start transaction</button>
Arguments
- args:
args is an object with following properties:const args = { referenceId: 'reference id', email: 'example@email.com', logo: 'https://logo.pl/logo.jpg', amount: 100, primaryColor: '#FF0022' }
- referenceId - is an id you got during widget registration process, it allows you to get provision for your transactions *this is required argument
- email - client's email, if you provide us with client's email, we won't ask for it during transaction process * not required argument
- logo - if you want to display your logo inside widget, please provide us with url of your logo stored on CDN *not required argument
- amount - default amount to be set after opening a widget, value range is from 10 to 200 *not required argument
- primaryColor - main color of buttons, headers and scrollbars. Default value is set
to
#F63563
. This value must be specified in a HEX format with length equal to 6 or 8 characters excluding # character in the beginning: eg.#00FFAA
*not required argument
📈 Statictics of usage
You can follow statistics of your widget usage on our website in "Referral system" tab.
📋 Contact and support
In case of any troubles or difficulties with proper widget configuration on your website, feel free to contact us at contact@cryptovoucher.io.