Tweed Docs
  • Welcome to Tweed
    • What Can Tweed Do?
  • Getting Started
    • Embedded Wallets | WaaS
    • Token Checkout | Payments
      • Flow of Funds: Purchase to Settlement
      • Token Checkout
      • Legacy Token Checkout
        • Basic Checkout Integration
        • Checkout + WaaS + Auth
        • Features
          • Payment links
          • Whitelist
          • Flow of Funds
          • Apple & Google Pay
          • AML & KYC Policy Overview
  • Developer Tools
    • Tweed SDKs
      • core-react
        • useAuth
        • useWallet
        • useTweed
        • usePayments
        • useWeb3
      • core-js
      • core-vue
      • Payments SDKs (v1)
        • Frontend SDKs (Payments)
        • Backend SDK (Payments)
        • How to set up your smart contract for Tweed
        • Tezos chain considerations
    • Management Dashboard
      • Create platform
      • Create application
        • UI Customization
    • Webhooks
      • Checkout Webhooks
    • API
      • API (V1)
      • API (V2)
        • Authorization
        • API reference
          • Contracts
            • Add
            • Add contract function
            • Contract
          • Payouts
            • Add
            • Payout
          • Items
            • Add
            • All
              • Contract
                • Count
              • Payout
                • Count
          • Assets
            • Blockchain
            • All
              • Blockchains
          • Blockchains
            • Multiple
            • Native asset
          • Audit event mappings
          • Platform webhooks
            • Set active
          • Tickets
        • Specification
    • External Integrations
      • Wagmi connector
      • Onramp to Crypto
    • Example Projects
    • Supported Blockchains
    • Pricing
  • Products
    • WaaS
    • Payments
Powered by GitBook
On this page
  • Get started
  • 1. Create new Application in tweed's dashboard
  • 2. Add new Item to your collection
  • 3. Add tweed to your React app
  • 4. Integrate Tweed Provider into Your App
  • 5. Let's call the Buy token function
  • 6. Pre-populate Fields
  1. Getting Started
  2. Token Checkout | Payments

Token Checkout

Effortless Integration for Selling Tokens: Simplified Like Never Before

PreviousFlow of Funds: Purchase to SettlementNextLegacy Token Checkout

Last updated 3 months ago

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

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.

3. Add tweed 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

App.tsx
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>
    </>
  );
}

Coming soon

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
    });
  }

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.

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.

install to your React app.

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

tweed SDK
dashboard
Tweed provider