> 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/react.md).

# React

React version of Pay Button is the wrapper for the javascript version. For more detailed information about the API, please check the javascript documentation. The documentation for the[ javascript version](/getpip/product-guide/pay-button/javascript.md) also applies directly to the React version.

How to install React components:

```shell
npm install @getpip/react-pip-button 
```

#### How to use the button in React project:

```jsx
import { PIPButton } from "@getpip/react-button"

const PIPPage: React.FC = () => {
  return (
    <div>
      <PIPButton
        receiver="..."
        amount={1}
        chainNetwork="..."
        asset="..."
      />
    </div>
  )
}
```

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