❤
npm
Sign UpSign In

kokun

0.0.3 • Public • Published

Aion Pay

This component allows you to transfer Aion, AIP4 tokens, and sign smart contract transactions.

Installing ReactJS component

Run the following command in your project directory:

$ [sudo] npm install kokun-0.0.3 -s

Import the component and pass the data as props:

import React, { Component } from 'react';
import { AionPayButtonWidget } from 'kokun';
    
class MyApp extends Component {
    render() {
        return(<AionPayButtonWidget web3Provider='...'/>)
    }
}
 
export default MyApp;

React Component Parameters

Property Type Required Example
web3Provider string true "https://api.nodesmith.io/v1/aion/testnet/jsonrpc?apiKey=451ea61711c4409aaa12fb9394d008b8"
address string false "0xa0d84a7c8409668f3249b1478ea8253e8f707004494fa9f50afc9012c8a5f7be"
amount number false 1.2345
tokenAddress string false "0xa051aeecf95f7921c9f8ba3851445d7f221f9c7988a0d2d9ed0080eff583b313"
buttonText string false "Donate"
theme json false {primary: { main: '#113665', contrastText: '#fff' }, secondary: { main: '#F2F6FA', contrastText: '#113665',aionPay:{textColor:'#cca300',backgroundColor:'#000000',fontWeight:'500',fontSize:'11px',paddingTop:'6p',paddingBottom:'6p',paddingLeft:'16p',paddingRight:'16p'} }}
buttonIconType string false "dark" or "light"
transaction json false {data:'0xf0a147ada0f9b0086fdf6c29f67c009e98eb31e1ddf1809a6ef2e44296a377b37ebb982700000000000000000de0b6b3a76400000000000000000000000000000000004000000000000000000000000000000000',gas: 2000000,gasPrice: 10000000000,to: '0xa051aeecf95f7921c9f8ba3851445d7f221f9c7988a0d2d9ed0080eff583b313',value: 0}
callback function false (txHash,status)=>console.log({txHash,status})

Importing as JavaScript library

In your page create <aion-pay> tag then pass the data as attribute parameters. At the bottom of your html body add <script> tag pointing to the location of the library:

<html>
    <body>
        <aion-pay  
            id='aion-pay-0' 
            data-web3-provider='...'></aion-pay>
        <script type="text/javascript" src="https://www.kokun.co/aion_pay.js"></script> 
    </body>
</html>

aion-pay Tag Attributes

Property Type Required Example
data-web3-provider string true "https://api.nodesmith.io/v1/aion/testnet/jsonrpc?apiKey=451ea61711c4409aaa12fb9394d008b8"
data-address string false "0xa0d84a7c8409668f3249b1478ea8253e8f707004494fa9f50afc9012c8a5f7be"
data-amount number false 1.2345
data-tokenAddress string false "0xa051aeecf95f7921c9f8ba3851445d7f221f9c7988a0d2d9ed0080eff583b313"
data-button-text string false Donate
data-theme string false "{ primary: { main: '#113665', contrastText: '#fff' }, secondary: { main: '#F2F6FA', contrastText: '#113665'} }"
data-button-icon-type string false "dark" or "light"
data-transaction string false "{ data: '0xf0a147ada0f9b0086fdf6c29f67c009e98eb31e1ddf1809a6ef2e44296a377b37ebb982700000000000000000de0b6b3a76400000000000000000000000000000000004000000000000000000000000000000000', gas: 2000000, gasPrice: 10000000000, to: '0xa051aeecf95f7921c9f8ba3851445d7f221f9c7988a0d2d9ed0080eff583b313',value: 0 }"

aion-pay Tag Events

First assign an id attribute to your tag, then add a listener:

document
    .getElementById('aion-pay-0')
    .addEventListener('transactionSent',
        function(e){
            alert('Got Event:'+e.detail.txHash+' with status '+e.detail.status);
        }
    )

Readme

Keywords

none

Package Sidebar

Install

npm i kokun

Weekly Downloads

1

Version

0.0.3

License

Apache-2.0

Unpacked Size

11.9 MB

Total Files

72

Last publish

Collaborators

  • august_tech
Try on RunKit
Report malware