> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superlink.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Integration Guide

Welcome to the React SDK Integration Guide. This page outlines the steps and prerequisites required to integrate the Superlink React SDK into your website. We're dedicated to making your integration process as effortless as possible.

## Prerequisites

Before you begin, ensure you have:

* **Completed the Superlink Partner Onboarding**: You must be a Superlink partner to use our SDK. If you aren't onboarded yet, please [reach out to us](https://superlink-staging.me/book-a-call).
* **Received a Partner ID**: You must have a Partner ID to initialize the marketplace modal. You will receive a Partner ID when you onboard as a partner.
* **A React Project**: You must have an existing React project to integrate the React SDK.

## Integrating the SDK

To integrate the React SDK into your project, follow these steps:

1. **Install the SDK using npm or yarn**

<CodeGroup>
  ```sh npm theme={null}
  npm install @superlink-me/sdk-react
  ```

  ```sh yarn theme={null}
  yarn add @superlink-me/sdk-react
  ```
</CodeGroup>

2. **Add the MarketProvider component**

The MarketProvider allows its child components to access the state and hooks of the Superlink marketplace.

```tsx theme={null}
<MarketProvider initializationConfig={{ partnerId: "<your-partner-id>" }}>
  <YourPage/>
</MarketProvider>
```

3. **Add the MarketModal component**

The MarketModal component is the Superlink Marketplace Modal.

```tsx theme={null}
<MarketModal/>
```

4. **Implement the hooks**

```javascript theme={null}
const { setUserInfo, setSendTransaction, open } = useMarketModal()
```

The `setUserInfo` hook is used to set the user's information, such as their wallet information and external user ID.

```javascript theme={null}
setUserInfo({
  wallets: [{
    address: "<user-wallet-address>", 
    coin: "<coin-type-of-wallet>"
  }],
  externalUserId: "<user-identifier>"
})
```

The `setSendTransaction` hook is used to set a function that will handle the transaction. The function will be called when the user confirms the transaction in the marketplace.
The `uri` parameter contains the information needed to submit the payment, such as the amount, recipient, and coin type.

In the case of Fiat payments the payment is handled inside the marketplace and the function will not be called.

```javascript theme={null}
setSendTransaction((uri) => {
  // Use the uri to send the transaction
})
```

**Example URI**:

```
ethereum:0x965933D5C73ef443f3a2E4B370c3b6C964fc76eC?value=1.3062319352247146e17
```

Parsing the above yields:

* **coin type**: `ethereum`
* **amount**: `1.3062319352247146e17`
* **recipient**: `0x965933D5C73ef443f3a2E4B370c3b6C964fc76eC`

The `open` hook is used to open the marketplace modal.

```tsx theme={null}
<button onClick={() => open()}>
    Open Marketplace
</button>
```