@crypto-voucher/widget

Stencil Component Starter

Usage no npm install needed!

<script type="module">
  import cryptoVoucherWidget from 'https://cdn.skypack.dev/@crypto-voucher/widget';
</script>

README

📜 Cryptocurrencies, simplified!

Crypto Voucher's Widget

Contact us LinkedIn Discord Twitter

💡 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:

  1. Run command:
    npm i --save @crypto-voucher/widget
    please ensure you install the latest version of widget's package

  2. Second 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 installation

  3. After 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" />

  4. 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

  1. 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 #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.