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

```html
<script src="https://{https://button.getpip.com/cdn/pipbutton.js}"></script>
```

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*](https://docs.getpip.com/getpip/product-guide/pay-button/javascript) document will explain this point.

{% hint style="info" %}
HTML PIP Button is the wrapper with Javascript. Some of the details are skipped in this document, so visit 🔗JAVASCRIPT to find more.
{% endhint %}

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

```html
<!-- place your button(s) anywhere you want in your HTML -->
<div class="pip-button"
  data-receiver="GrWtQjkcEMQWKo4xfj6yfyRw2skNyubuXKU..."
  data-amount="1"
	data-chainNetwork="SOLANA"
  data-currency="SOL"
></div>
```

#### PIP-BUTTON can have properties as below:

<table data-header-hidden><thead><tr><th width="255.65951742627345"></th><th width="150"></th><th width="150"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>data-receiver</td><td><mark style="background-color:green;">true</mark></td><td><mark style="background-color:red;">string</mark> </td><td>null</td><td></td></tr><tr><td>data-amount</td><td><mark style="background-color:green;">true</mark></td><td><mark style="background-color:red;">string</mark> </td><td>null</td><td></td></tr><tr><td>data-currency</td><td><mark style="background-color:green;">true</mark></td><td><mark style="background-color:red;">string</mark> </td><td>‘USDC’</td><td></td></tr><tr><td>data-chainNetwork</td><td><mark style="background-color:purple;">false</mark></td><td><mark style="background-color:red;">string</mark> </td><td>‘SOLANA’</td><td></td></tr><tr><td>data-label</td><td><mark style="background-color:purple;">false</mark></td><td><mark style="background-color:red;">string</mark> </td><td>‘PAY’</td><td></td></tr><tr><td>data-useLabel</td><td><mark style="background-color:purple;">false</mark></td><td><mark style="background-color:orange;">boolean</mark></td><td>true</td><td></td></tr><tr><td>data-buttonColor</td><td><mark style="background-color:purple;">false</mark></td><td><mark style="background-color:red;">string</mark> </td><td>‘#1149FF’</td><td></td></tr><tr><td>data-buttonTextColor</td><td><mark style="background-color:purple;">false</mark></td><td><mark style="background-color:red;">string</mark> </td><td>‘#FFFFFF’</td><td></td></tr><tr><td>data-load</td><td><mark style="background-color:purple;">false</mark></td><td><mark style="background-color:red;">string</mark> </td><td>null</td><td></td></tr><tr><td>data-payment</td><td><mark style="background-color:purple;">false</mark></td><td><mark style="background-color:red;">string</mark> </td><td>null</td><td></td></tr><tr><td>data-error</td><td><mark style="background-color:purple;">false</mark></td><td><mark style="background-color:red;">string</mark> </td><td>null</td><td></td></tr><tr><td>data-memo</td><td><mark style="background-color:purple;">false</mark></td><td><mark style="background-color:red;">string</mark> </td><td>null</td><td></td></tr></tbody></table>

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

![](https://1392962919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fu9t7VKDFimbjcCEeJjDt%2Fuploads%2FQA95zPu5qpJHdVcX6MXr%2Fimage.png?alt=media\&token=e5c4c4a3-9355-4307-b9ed-e9b2ad9d24d8)

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

```html
<script>
function callback (payment) {
   console.log('A payment has occurred!', payment)
}

</script><div class="pip-button"
  data-receiver="receiver address"
  data-amount="amount"
	data-chainNetwork="chainNetwork"
  data-currency="currency"
  data-payment="callback"
></div>
```

When the payment is successful, values listed below are transferred.

<table><thead><tr><th width="150">Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>sender</td><td><mark style="background-color:red;">string</mark></td><td>Sender’s public key</td></tr><tr><td>amount</td><td><mark style="background-color:red;">string</mark></td><td>The amount of USD sent</td></tr><tr><td>chainNetwork</td><td><mark style="background-color:red;">string</mark></td><td>The type of blockchain network that the symbol of the token is included. (i.e. SOLANA, BSC)</td></tr><tr><td>currency</td><td><mark style="background-color:red;">string</mark></td><td>The ticker of token that is sent.</td></tr><tr><td>txId</td><td><mark style="background-color:red;">string</mark></td><td>Transaction id</td></tr></tbody></table>

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

```html
<script>
function callback (error) {
    console.log(`Something went wrong: ${error}`)
  }
</script>

<div class="pip-button"
  data-receiver="receiver address"
  data-amount="amount"
	data-chainNetwork="chainNetwork"
  data-currency="currency"
  data-error="callback"
></div>
```

#### data-load

The function that is executed when the button is loaded.

```html
<script>
function callback (error) {
    console.log(`The button has loaded.`)
  }
</script>

<div class="pip-button"
  data-receiver="receiver address"
  data-amount="amount"
	data-chainNetwork="chainNetwork"
  data-currency="currency"
  data-load="callback"
></div>
```