Basic Checkout Integration
To seamlessly integrate token checkout into your application, follow these steps
Related topic
Associated Development tools
API |
Features
Payment links | Whitelist | Flow of Funds | Apple & Google Pay AML & KYC Policy Overview | Dynamic Token Amount | Marketplace Integration
Examples Github examples | CodeSandbox examples | Live demos
1. Contact Tweed support for Payments API keys
You will receive two pairs of API keys. One pair is for the backend SDK, which authenticates your requests. The other pair is for facilitating your checkout implementation, such as adding contract addresses or creating whitelists.
2. List Your contract Address
introduce your contract address to tweed by our API, use the management API keys you got from us. read more how to deploy contract address here.
3. Let's start with the backend
1. Add tweed to your Backend
2. Setup
Import TweedBackendSDK
from the @paytweed/backend-sdk
and implement the setup function. Pass your API keys and specify the default blockchains for your application.
Next, we will create an endpoint to be accessed by the frontend SDK for sending and receiving messages. Within this endpoint, we will use the handleMessageFromFrontend function. This function will handle messages arriving from the frontend SDK, along with the user ID and user email.
This implementation does not include WaaS. You can keep the user ID and email the same for each transaction, as demonstrated in our example. Alternatively, integrate our wallet product alongside the checkout process.
3. Token checkout callback
tweed facilitate multiple settlement options: you can receive payments via credit card and choose to receive funds in either fiat currency or crypto, including native chain currencies or ERC20 tokens.
This example demonstrates settlement with fiat currency. Here are guides for alternative settlement options
The next step involves handling this purchase on your backend. To accomplish this, you need to implement a callback function named getTokenPurchaseData
. This function receives the tokenId
parameter from the frontend as an input and expects to retrieve transaction details such as contract address, price, and other relevant information.
Add the function to the setup function
4. Prepare the frontend
choose from our frontend SDKs for various frameworks: React, React Native, or vanilla JavaScript
1. Add tweed to your React app
install tweed SDK to your React app.
2. Integrate Tweed Provider into Your App
Import the
TweedFrontendSdkProvider
from the Tweed React SDK and wrap your application with it.Implement the function
sendMessageToBackend
, which will send a message to the backend SDK.App.tsx
To call the token checkout widget, a wallet must be created for the user associated with this widget. Even if you plan to specify a different wallet address for each transaction to receive the token, you must still have an existing wallet.
3. Make sure user has wallet before calling token checkout widget
4. Let's call the buy token function
Use the toWalletAddress
parameter within the buyWithFiat
function to specify the destination wallet address where the token will be sent.
Last updated