# Javascript

To use the Javascript of the Pay Button, start by adding this script in your website’s HTML.

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

### PIP-BUTTON Objects

render

```html
<div id='pip-button'></div>
<script>
const div = document.getElementById('pip-button')
  pipButton.render(div, {
    receiver: "GrWtQjkcEMQWKo4xfj6yfyRw2skNyubuXKU...",
    amount: "1",
		chainNetwork: "SOLANA",
    currency: "SOL",
    label: "PAY",
    onPayment:function (arg) { console.log('onPayment', arg) },
    onError:function (arg) { console.log('onError', arg) },
    onLoad:function (arg) { console.log('onLoad', arg) }
  })
</script>
```

<table><thead><tr><th width="255.65951742627345">Name</th><th width="150">Required</th><th width="150">Type</th><th>Default Value</th><th data-hidden></th></tr></thead><tbody><tr><td>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>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>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>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>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>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>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>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>onLoad</td><td><mark style="background-color:purple;">false</mark></td><td><mark style="background-color:blue;">function</mark> </td><td>null</td><td></td></tr><tr><td>onPayment</td><td><mark style="background-color:purple;">false</mark></td><td><mark style="background-color:blue;">function</mark> </td><td>null</td><td></td></tr><tr><td>onError</td><td><mark style="background-color:purple;">false</mark></td><td><mark style="background-color:blue;">function</mark> </td><td>null</td><td></td></tr></tbody></table>

#### receiver

A receiver’s address that is compatible with a selected blockchain network

#### amount

The amount of dollar (Fiat) that a receiver will receive

#### chainNetwork

The type of blockchain network that the symbol of the token is included

#### currency

The symbol of token that will actually be sent to the receiver

#### label

A label of the button

![](/files/DegIO7NWTBQXYqhzfGLq)

#### useLabel

Option to display the label of the button. The default value is ‘TRUE’.

#### buttonColor

The background color of the button

#### buttonTextColor

Text color of the button

#### onPayment

Function(s) that will be executed when the payment is successful.

```javascript
function callback (payment) {
  console.log('A payment has occurred!', payment)
}

pipButton.render(div, {
  receiver: "receiver address",
  amount: "amount",
	chainNetwork: "chainNetwork",
  currency: "currency",
  onPayment: callback
})

```

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

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

#### onError

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
<div id="pip-button"></div>

<script>
function callback (error) {
    console.log(`An error has occurred: ${error}`)
  }

  pipButton.render(document.getElementById('pip-button'), {
    receiver: "receiver address",
    amount: "amount",
		chainNetwork: "chainNetwork"
    currency: "currency",
    onError: callback
  })
</script>
```

#### onLoad

The function that is executed when the button is loaded.

```html
<div id="pip-button"></div>

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

  pipButton.render(document.getElementById('pip-button'), {
    receiver: "receiver address",
    amount: "amount",
		chainNetwork: "chainNetwork"
    currency: "currency",
    onLoad: callback
  })
</script>
```


---

# Agent Instructions: 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/javascript.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.