diff --git a/package.json b/package.json index e146678..eafc140 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tailwind-plus-icpay", - "version": "1.2.30", + "version": "1.2.31", "private": true, "packageManager": "pnpm@9.12.3", "scripts": { diff --git a/src/app/sandbox/page.mdx b/src/app/sandbox/page.mdx new file mode 100644 index 0000000..f69f13b --- /dev/null +++ b/src/app/sandbox/page.mdx @@ -0,0 +1,125 @@ +export const metadata = { + title: 'Sandbox Server', + description: + 'Information about the ICPay sandbox server for testing and development. Access the sandbox at betterstripe.com to test new features with free faucet tokens on Base Sepolia and Solana Devnet.', +} + +export const sections = [ + { title: 'Overview', id: 'overview' }, + { title: 'Test Networks', id: 'test-networks' }, + { title: 'Using with Widget', id: 'using-with-widget' }, +] + +# Sandbox Server + +The ICPay sandbox server provides a testing environment where new features are introduced first, allowing developers to test integrations before they're available in production. {{ className: 'lead' }} + +## Overview + +The sandbox server is available at: + +- **Website**: [https://betterstripe.com](https://betterstripe.com) +- **API**: [https://api.betterstripe.com](https://api.betterstripe.com) + +### Important Notes + +- **Sandbox Environment**: This is a testing environment and may be unavailable at times due to feature rollouts, updates, or maintenance. +- **New Features First**: New features and updates are typically deployed to the sandbox before production, making it ideal for early testing and integration. +- **Test Networks**: The sandbox includes mainnets but also testnet and devnet networks (Base Sepolia and Solana Devnet) so you can test with free faucet tokens without spending real funds. + +## Test Networks + +The sandbox server supports the following test networks for development and testing: + +| Chain Name | Chain ID | RPC URL | Faucet Link | +|------------|----------|---------|-------------| +| Base Sepolia | 84532 | `https://sepolia.base.org` | [Chainlink Faucet](https://faucets.chain.link/base-sepolia) / [ETHGlobal Faucet](https://ethglobal.com/faucet/base-sepolia-84532) | +| Solana Devnet | - | `https://api.devnet.solana.com` | [Solana Faucet](https://faucet.solana.com) / [QuickNode Faucet](https://faucet.quicknode.com/solana/devnet) | + +### Getting Test Tokens + +Both networks provide free test tokens through their respective faucets: + +- **Base Sepolia**: Request test ETH from the Chainlink or ETHGlobal faucets to pay for gas fees and test transactions. +- **Solana Devnet**: Request test SOL from the Solana faucet to pay for transaction fees and test Solana-based payments. + +These test tokens have no real-world value and are intended solely for development and testing purposes. + +## Using with Widget + +To use the ICPay Widget with the sandbox server, configure the `apiUrl` option in your widget config to point to the sandbox API endpoint. + + + +```tsx {{ title: 'Next.js' }} +'use client' +import { useEffect, useRef } from 'react' +import '@ic-pay/icpay-widget' + +export default function Page() { + const ref = useRef(null) + useEffect(() => { + if (!ref.current) return + ref.current.config = { + publishableKey: process.env.NEXT_PUBLIC_ICPAY_PK, + apiUrl: 'https://api.betterstripe.com', // Sandbox API endpoint + amountsUsd: [1, 5, 10], + defaultAmountUsd: 5, + } + const onDone = (e: any) => console.log('Tip completed', e.detail) + window.addEventListener('icpay-sdk-transaction-completed', onDone) + return () => window.removeEventListener('icpay-sdk-transaction-completed', onDone) + }, []) + return +} +``` + +```vue {{ title: 'Vue.js' }} + + + +``` + +```html {{ title: 'No framework' }} + + + + +``` + + + +> **Note**: Make sure you're using a publishable key from your sandbox account at [betterstripe.com](https://betterstripe.com). The sandbox uses test networks (Base Sepolia and Solana Devnet), so you'll need test tokens from the faucets listed above to complete transactions. diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index a2e5e2f..187ae7e 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -237,6 +237,7 @@ export const navigation: Array = [ title: 'Getting started', links: [ { title: 'Introduction', href: '/' }, + { title: 'Sandbox Server', href: '/sandbox' }, ], }, {