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.
  • 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
  1. Add the MarketProvider component

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

<MarketProvider initializationConfig={{ partnerId: "<your-partner-id>" }}>
  <YourPage/>
</MarketProvider>
  1. Add the MarketModal component

The MarketModal component is the Superlink Marketplace Modal.

<MarketModal/>
  1. Implement the hooks
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.

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.

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.

<button onClick={() => open()}>
    Open Marketplace
</button>
OverviewQuick example