Version 1.2.36 - 2026-02-13 14:04:22

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-plus-icpay",
-  "version": "1.2.35",
+  "version": "1.2.36",
   "private": true,
   "packageManager": "pnpm@9.12.3",
   "scripts": {

src/app/errors/page.mdx

@@ -76,7 +76,7 @@ try {
 
 
 <div className="not-prose">
-  <Button href="/quickstart" variant="text" arrow="right">
+  <Button href="/quick-start" variant="text" arrow="right">
     <>Get started with the icpay API</>
   </Button>
 </div>

src/app/quick-start/page.mdx

@@ -0,0 +1,122 @@
+export const metadata = {
+  title: 'Quick start guide',
+  description:
+    'Create an ICPay account, get your API keys, and add a pay button to your site with the ICPay Widget and Next.js.',
+}
+
+export const sections = [
+  { title: 'Create an account', id: 'create-account' },
+  { title: 'Get your API keys', id: 'api-keys' },
+  { title: 'Add a pay button with Next.js', id: 'pay-button-nextjs' },
+  { title: 'Try it in the demo', id: 'try-demo' },
+]
+
+# Quick start guide
+
+This guide walks you through creating an ICPay account, getting your publishable key, and adding a pay button to your site using Next.js. No prior crypto or blockchain experience required. {{ className: 'lead' }}
+
+## Create an account
+
+1. Go to **[icpay.org](https://icpay.org)** and click **Sign up** (or **Log in** if you already have an account).
+2. Register with your email and set a password. You can also use social login if available.
+3. After signing in, you’ll land in the **dashboard**. Here you can manage payments, view balances, and find your API keys.
+
+For testing without real funds, you can use the **sandbox** at [betterstripe.com](https://betterstripe.com). Accounts and keys there are separate from production—see the [Sandbox Server](/sandbox) docs.
+
+## Get your API keys
+
+To show a pay button on your site, you only need the **publishable key**. It’s safe to use in the browser.
+
+1. In the [icpay.org](https://icpay.org) dashboard, open **Settings** (or **API keys** / **Developers**, depending on the menu).
+2. Find your **Publishable key**. It usually starts with `pk_` (for example, `pk_live_...` in production or `pk_test_...` in sandbox).
+3. Copy the key. You’ll use it in your Next.js app in the next step.
+
+Keep your **Secret key** (if you see it) private and only use it on the server. For a simple pay button, the publishable key is enough.
+
+## Add a pay button with Next.js
+
+These steps add a single “Pay with crypto” button that opens the ICPay payment flow. The code matches what you can generate on [demo.icpay.org](https://demo.icpay.org) when you choose the Pay Button and the Next.js tab.
+
+### 1. Install the widget
+
+In your Next.js project folder, run:
+
+```bash
+npm install @ic-pay/icpay-widget @ic-pay/icpay-sdk
+```
+
+(or `pnpm add` / `yarn add` if you use those).
+
+### 2. Add your publishable key to environment variables
+
+Create or edit `.env` in the project root and add:
+
+```
+NEXT_PUBLIC_ICPAY_PK=pk_your_publishable_key_here
+```
+
+Replace `pk_your_publishable_key_here` with the key you copied from the dashboard. The `NEXT_PUBLIC_` prefix makes it available in the browser, which is what the widget needs.
+
+### 3. Create a page with the pay button
+
+Create a new page (for example `app/checkout/page.tsx`) or add the snippet below to an existing page. This uses the **Pay Button** widget: one button that opens the payment modal for a fixed amount.
+
+```tsx
+'use client'
+import { useEffect, useRef } from 'react'
+import '@ic-pay/icpay-widget'
+
+export default function Checkout() {
+  const elRef = useRef<any>(null)
+
+  useEffect(() => {
+    const el = elRef.current
+    if (!el) return
+
+    el.config = {
+      publishableKey: process.env.NEXT_PUBLIC_ICPAY_PK,
+      amountUsd: 9.99,
+      buttonLabel: 'Pay $9.99 with crypto',
+    }
+
+    const onSuccess = (e: any) => console.log('Payment completed', e.detail)
+    const onError = (e: any) => console.error('Payment error', e.detail)
+
+    el.addEventListener('icpay-pay', onSuccess)
+    el.addEventListener('icpay-error', onError)
+
+    return () => {
+      el.removeEventListener('icpay-pay', onSuccess)
+      el.removeEventListener('icpay-error', onError)
+    }
+  }, [])
+
+  return <icpay-pay-button ref={elRef} />
+}
+```
+
+- **`publishableKey`**: Your key from the dashboard (from `.env`).
+- **`amountUsd`**: The amount in USD (e.g. `9.99`).
+- **`buttonLabel`**: Optional text on the button.
+
+When a visitor clicks the button, they’ll see the ICPay payment UI to choose a wallet and complete the payment. You can change `amountUsd` and `buttonLabel` to match your product or donation amount.
+
+### 4. Run your app
+
+Run your dev server (e.g. `npm run dev`) and open the page that renders `<icpay-pay-button />`. Click the button and complete a test payment. In production, use your live publishable key from [icpay.org](https://icpay.org); for testing, use the sandbox at [betterstripe.com](https://betterstripe.com) and a `pk_test_...` key.
+
+## Try it in the demo
+
+You can try the Pay Button (and other widgets) and get ready-made code without writing anything first:
+
+1. Go to **[demo.icpay.org](https://demo.icpay.org)**.
+2. Select **Pay Button** (or another component like Tip Jar or Coffee Shop).
+3. Enter your publishable key (or use the demo key to preview).
+4. Adjust the amount, label, and other options.
+5. Open the **Next.js** tab and copy the generated code into your project.
+
+The generated snippet is the same pattern as above: install the widget, set `el.config` with your `publishableKey` and options, and listen for `icpay-pay` and `icpay-error`. You can paste it into a new `app/checkout/page.tsx` (or similar) and add your key to `.env`.
+
+---
+
+For more widget types (tip jar, premium content, donation thermometer) and options, see [Widget components](/widget) and [Pay Button](/widget/components/pay-button). For server-side operations and webhooks, see the [Private SDK](/sdk-secret) and [Webhooks](/webhooks).

src/app/sandbox/page.mdx

@@ -1,12 +1,13 @@
 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, SKALE Base Testnet, ARC Network Testnet, and Solana Devnet.',
+    'Information about the ICPay sandbox server for testing and development. Access the sandbox at betterstripe.com, demo.betterstripe.com, and pos.betterstripe.com. Sandbox users and accounts are separate from live production icpay.org. Test with free faucet tokens on Base Sepolia, SKALE Base Testnet, ARC Network Testnet, and Solana Devnet.',
 }
 
 export const sections = [
   { title: 'Overview', id: 'overview' },
   { title: 'Test Networks', id: 'test-networks' },
+  { title: 'Wallet setup for Solana Devnet', id: 'wallet-setup-solana-devnet' },
   { title: 'Using with Widget', id: 'using-with-widget' },
 ]
 
@@ -20,12 +21,17 @@ The sandbox server is available at:
 
 - **Website**: [https://betterstripe.com](https://betterstripe.com)
 - **API**: [https://api.betterstripe.com](https://api.betterstripe.com)
+- **Demo**: [https://demo.betterstripe.com](https://demo.betterstripe.com)
+- **POS**: [https://pos.betterstripe.com](https://pos.betterstripe.com)
+
+[demo.betterstripe.com](https://demo.betterstripe.com) and [pos.betterstripe.com](https://pos.betterstripe.com) are linked to the sandbox environment and use the same test networks and sandbox API.
 
 ### 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, SKALE Base Testnet, ARC Network Testnet, and Solana Devnet) so you can test with free faucet tokens without spending real funds.
+- **Separate from production**: Users and accounts created in the sandbox (betterstripe.com, demo.betterstripe.com, pos.betterstripe.com) are **not** the same as users and accounts on live production [icpay.org](https://icpay.org). You must create separate accounts for sandbox testing and for production use.
 
 ## Test Networks
 
@@ -49,6 +55,29 @@ All test networks provide free test tokens through their respective faucets:
 
 These test tokens have no real-world value and are intended solely for development and testing purposes.
 
+## Wallet setup for Solana Devnet
+
+To test Solana payments on the sandbox with devnet tokens, use a Solana wallet in developer/testnet mode. Below is how to configure **Phantom** and **Backpack**.
+
+### Phantom
+
+1. Open Phantom and go to **Settings** (gear icon).
+2. Open **Developer Settings** (or **Security & Privacy** → **Developer Settings** in some versions).
+3. Turn on **Developer Mode** (or **Testnet Mode**) so you can switch the wallet to Solana Devnet.
+4. In the network selector, choose **Devnet** so the wallet uses Solana Devnet and your devnet SOL/tokens.
+
+### Backpack
+
+1. Open Backpack and go to **Settings**.
+2. Enable **Developer Mode** so you can use test networks and custom RPCs.
+3. To test with devnet tokens, set the Solana RPC to the devnet endpoint:
+   - Go to **Settings** → **Networks** (or **Developer** / **RPC**).
+   - Set the Solana RPC URL to: `https://api.devnet.solana.com`
+
+   Without this RPC setting, Backpack may use mainnet by default and devnet transactions (e.g. from the [Solana Faucet](https://faucet.solana.com)) will not appear or work correctly.
+
+After configuring your wallet, request test SOL from the [Solana Faucet](https://faucet.solana.com) or [QuickNode Faucet](https://faucet.quicknode.com/solana/devnet) and use the sandbox (betterstripe.com) to complete devnet payments.
+
 ## 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.