Token Checkout

Tweed introduces groundbreaking improvements to both user experience and developer workflow. Start selling tokens faster than ever—v2 eliminates the need for backend integration, streamlining the process from start to finish. Manage your tokens and collections effortlessly through our powerful dashboard, or take full control with our lightning-fast API.

Get started

Follow this guide to start selling tokens on your platform:

1. Create new Application in tweed's dashboard

Go to our dashboard, sign up or sign in, and create a new application. Your application will be assigned a unique ID, which we will use throughout the Tweed SDK to identify your application.

2. Add new Item to your collection

Items represent the tokens or products you want to sell on your platform. You can create as many items as you like, each associated with a specific smart contract.

If this is the first item you're introducing to the system, you'll need to add a smart contract and configure a payout method:

• Add a Smart Contract: Specify the blockchain, the contract address, and its ABI. Note the ABI input must contain the field "amount" with the exact field name "amount".

• Configure Payouts: Choose how you'd like to receive funds from sales. You can opt to receive native or stable coins directly to your smart contract or fiat currency directly into your bank account. You can configure different payout options for each item you sell.

For each item, set the price, the fiat currency you want to sell in, and specify the contract function that will mint and transfer tokens to your customers.

Note that when you add an Item you should choose the function from the ABI and weather the input is fixed by the value in the dashboard or costumed by customParams (see section 6 of custom params). The amount should not be fixed if you want the sdk/user to edit the amount.

3. Add tweed to your React app

install tweed SDK to your React app.

npm i @paytweed/core-react

4. Integrate Tweed Provider into Your App

Import the Tweed provider from the Tweed React SDK and wrap your application with it. Use the applicationId from the management console.

Add networks

Specify the networks your application will use by passing them to the Tweed provider. Import the Network enum from the React SDK.

import { Network, TweedProvider } from "@paytweed/core-react";
import DemoPage from "pages/demo";

function App() {
  return (
    <>
      <TweedProvider
        applicationId="YOUR_APP_ID"
          options={{
          chains: [Network.POLYGON, Network.ETHEREUM]
          }}
      >
        <HomePage />
      </TweedProvider>
    </>
  );
}

5. Let's call the Buy token function

Use the checkoutIntent function from the usePayments hook to display the checkout widgets. Specify the item ID you want to sell. You can either provide the wallet address where the token will be sent or allow the user to input this address during the checkout flow.

import { usePayments } from "@paytweed/core-react";

function HomePage() {
  const { checkoutIntent } = usePayments();

  async function handleCheckoutIntent() {
    await checkoutIntent({
      itemId: <ITEM_ID>,
    });
  }

  return (
    <>
      <h1>TWD Token</h1>
      <button onClick={handleCheckoutIntent}>Buy</button>
    </>
  );
}

export default HomePage;

6. Pre-populate Fields

In addition to the itemId you can pre-populate the following fields: customParams (for the non-fixed values), walletAddress, email and amount. If customParams and walletAddress and email are all 3 pre-filled the UI widget will be directly loaded to the payout form (credit details). For example:

  async function handleCheckoutIntent() {
    await checkoutIntent({
      itemId: <ITEM_ID>,
      customParams: { customer_id: "cust_id", order_id: "order_id"},
      walletAddress: <USER_WALLET_ADDRESS>,
      email: <USER_EMAIL>,
      amount: 3, //for example, the default is 1
    });
  }