> For the complete documentation index, see [llms.txt](https://docs.getpip.com/getpip/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.getpip.com/getpip/product-guide/pay-button/html.md).

# 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*](/getpip/product-guide/pay-button/javascript.md) 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

![](/files/DegIO7NWTBQXYqhzfGLq)

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.getpip.com/getpip/product-guide/pay-button/html.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.