# 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

![](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)

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