A Next.js-based sandbox environment for testing and configuring the DriftPay SDK. This application allows developers to experiment with different configurations of the DriftPay button and preview the implementation in real-time.
- Live configuration of DriftPay button parameters
- Real-time preview of button implementation
- Code snippet generation
- Multi-chain support
- Wallet integration with RainbowKit
- Customizable button styling
- Next.js 15.0.2
- React 19
- TypeScript
- TailwindCSS
- NextUI
- RainbowKit
- Wagmi
- Viem
- Node.js (Latest LTS version recommended)
- npm, yarn, or pnpm
Create a .env.local file in the root directory with the following variables:
NEXT_PUBLIC_DRIFT_APP_ID=your_drift_app_id
NEXT_PUBLIC_DRIFT_APP_SECRET=your_drift_app_secret
NEXT_PUBLIC_DECENT_API_KEY=your_decent_api_key
- Clone the repository
- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev- Open http://localhost:3000 in your browser
/app- Next.js app router pages and layouts/components- Reusable React components/lib- Utility functions and configuration/public- Static assets
The main component that handles payments. Configuration options include:
- Amount
- Recipient address
- Destination token address
- Destination chain
- Custom styling
- Custom button text
- Base
- Ethereum
- Polygon
- Optimism
- Arbitrum
- Zora
- Degen
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License.
For support and documentation about the DriftPay SDK, visit:
For more detailed information about the implementation, refer to the source code and comments within the repository.