Add following in the tag (Will be fixed in future)
<script>
var global = global || window;
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aion-gql-webcomponents.js"></script>
OR
<script src="https://unpkg.com/[email protected]/dist/aion-gql-webcomponents.js"></script>
- aion-blocks: Shows recent AION mainnet blocks
- aion-pay: Supports payment in AION coin
<aion-blocks limit={limit} duration="{polling time in sec}" gql-url={graphql_endpoint}></aion-blocks>
Example:
<aion-blocks limit="8" duration="10" gql-url="https://<host>/graphql"></aion-blocks>
A webcomponent to support payment using AION coin. A sender account can be accessed by providing private key or AION keystore file.
If "to" property is mentioned, the payment can only be done to the mentioned address. To enable send to any address, don't provide "to" address in the tag.
Usage:
- Default button. Pay to a given address
<aion-pay to="to_address" gql-url="https://<aion-gql-host>/graphql"></aion-pay>
- To pay to any address, don't provide "to" property.
<aion-pay gql-url="https://<aion-gql-host>/graphql"></aion-pay>
- With a custom text but with aion icon on the button. Pay to a given address.
<aion-pay to="to_address" gql-url="https://<aion-gql-host>/graphql" button-text=[custom_text]></aion-pay>
- With a custom content in the pay button. It will override both default icon and text.
<aion-pay to="to_address" gql-url="https://<aion-gql-host>/graphql">[custom content]</aion-pay>
Examples:
<aion-pay to="0xa01112158d69a368dfebb9db63a903738cxxxxxxxxx" gql-url="http://localhost:8080/graphql"></aion-pay>
<aion-pay gql-url="http://localhost:8080/graphql"></aion-pay>
<aion-pay to="0xa01112158d69a368dfebb9db63a903738cxxxxxxxxx" gql-url="http://localhost:8080/graphql">Pay By AION</aion-pay>
Styles:
Aion Pay component also exposes few style variables which can be used to customize the style of the component. Example: button color, button font family etc.
--pay-button-color: <button_background_color>;
--pay-button-font-weight: <button font weight>;
--pay-button-font-family: <font family for the button text>;
--pay-button-font-style: <button font stye>;
Example:
<style type="text/css">
aion-pay {
--pay-button-color: #BB86FC;
--pay-button-font-weight: bolder;
--pay-button-font-family: "Comic Sans MS", "Comic Sans", cursive;
--pay-button-font-style: normal;
}
</style>
git clone https://github.com/satran004/aion-gql-webcomponents.git
npm install
npm start
npm run build
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent