HTML
The easiest way to add Pay Button to a website is to use HTML.
Before defining the button, start by adding this code to the website in any place.
This script enables a user to produce and modify two main components of Pay Button.
HTML tags with certain properties that function as placeholders of the button; this document will describe how to set this component.
Javascript components for dynamically using and setting global PIP button components; ๐JAVASCRIPT document will explain this point.
HTML PIP Button is the wrapper with Javascript. Some of the details are skipped in this document, so visit ๐JAVASCRIPT to find more.
Defining the button with HTML
When the document is successfully loaded, the script will automatically detect classes or properties including and converts them to components of PIP Buttons.
PIP-BUTTON can have properties as below:
data-receiver | true | string | null |
data-amount | true | string | null |
data-currency | true | string | โUSDCโ |
data-chainNetwork | false | string | โSOLANAโ |
data-label | false | string | โPAYโ |
data-useLabel | false | boolean | true |
data-buttonColor | false | string | โ#1149FFโ |
data-buttonTextColor | false | string | โ#FFFFFFโ |
data-load | false | string | null |
data-payment | false | string | null |
data-error | false | string | null |
data-memo | false | string | null |
data-receiver
A receiverโs address that is compatible with a selected blockchain
data-amount
The amount of dollar (Fiat) that a receiver will receive
data-chainNetwork
The type of blockchain network that the symbol of the token is included
data-currency
The symbol of the token will actually be sent to the receiver
data-label
A label of the button
data-useLabel
Option to display the label of the button. The default value is โTRUEโ.
data-buttonColor
The background color of the button
data-buttonTextColor
Text color of the button
data-memo
The text that is included in the transaction.
data-payment
Function(s) that will be executed when the payment is successful.
When the payment is successful, values listed below are transferred.
Name | Type | Description |
---|---|---|
sender | string | Senderโs public key |
amount | string | The amount of USD sent |
chainNetwork | string | The type of blockchain network that the symbol of the token is included. (i.e. SOLANA, BSC) |
currency | string | The ticker of token that is sent. |
txId | string | Transaction id |
data-error
Function(s) that will be executed when the payment is NOT successful. It will not be executed when there is a problem with the parameters of the button.
Parameters that the function receives is the explanation of the error.
data-load
The function that is executed when the button is loaded.
Last updated