Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "tailwind-plus-icpay",
"version": "1.2.25",
"version": "1.2.26",
"private": true,
"packageManager": "pnpm@9.12.3",
"scripts": {
Expand Down
25 changes: 13 additions & 12 deletions src/app/ledgers/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const sections = [

# Tokens

ICPay supports verified tokens across chains (IC ICRC and EVM). You can fetch lists (with or without price data), resolve canister IDs by symbol, and read detailed metadata. {{ className: 'lead' }}
ICPay supports verified tokens across chains (IC ICRC, EVM, and Solana). You can fetch lists (with or without price data), resolve IDs by symbol/shortcode, and read detailed metadata. {{ className: 'lead' }}

## Overview

Expand Down Expand Up @@ -69,6 +69,7 @@ type SdkLedger = {
Notes:
- `shortcode` is a human-friendly token identifier (e.g., `ic_icp`, `ic_ckusdc`) that can be used in UX and filtering.
- `chainId` refers to the underlying chain (ICPay backend UUID) associated to the token.
- On non‑IC chains, `canisterId` represents the on‑chain token address (e.g., ERC‑20 address on EVM, SPL mint address on Solana). For native SOL, the mint can be empty and is handled internally.

## Using with SDK

Expand All @@ -88,9 +89,9 @@ const calc = await icpay.calculateTokenAmountFromUSD({ usdAmount: 10, ledgerSymb
## Using with Widget

Widgets fetch verified tokens automatically. You can constrain choices via multichain filters in the widget config:
- `chainTypes?: Array<'ic' | 'evm'>`
- `chainShortcodes?: string[]` (e.g., `['ic','base']`)
- `tokenShortcodes?: string[]` (e.g., `['ic_icp','ic_ckusdc']`)
- `chainTypes?: Array<'ic' | 'evm' | 'sol'>`
- `chainShortcodes?: string[]` (e.g., `['ic','base','sol']`)
- `tokenShortcodes?: string[]` (e.g., `['ic_icp','ic_ckusdc','sol_usdc']`)

<CodeGroup title="Widget examples">

Expand All @@ -106,9 +107,9 @@ export default function Page() {
publishableKey: process.env.NEXT_PUBLIC_ICPAY_PK,
amountsUsd: [1,5,10],
// Optional filters to limit networks/tokens:
// chainTypes: ['ic','evm'],
// chainShortcodes: ['ic','base'],
// tokenShortcodes: ['ic_icp','ic_ckusdc'],
// chainTypes: ['ic','evm','sol'],
// chainShortcodes: ['ic','base','sol'],
// tokenShortcodes: ['ic_icp','ic_ckusdc','sol_usdc'],
}
}, [])
return <icpay-tip-jar ref={ref as any} />
Expand All @@ -125,8 +126,8 @@ onMounted(() => {
el.value.config = {
publishableKey: import.meta.env.VITE_ICPAY_PK,
amountsUsd: [1,5,10],
// chainTypes: ['ic'],
// tokenShortcodes: ['ic_icp'],
// chainTypes: ['ic','sol'],
// tokenShortcodes: ['ic_icp','sol_usdc'],
}
})
</script>
Expand All @@ -145,7 +146,7 @@ export class AppComponent implements AfterViewInit {
this.el.nativeElement.config = {
publishableKey: (window as any).env?.ICPAY_PK || 'pk_test_xxx',
amountsUsd: [1,5,10],
// tokenShortcodes: ['ic_icp','ic_ckusdc'],
// tokenShortcodes: ['ic_icp','ic_ckusdc','sol_usdc'],
}
}
}
Expand All @@ -158,8 +159,8 @@ export class AppComponent implements AfterViewInit {
el.config = {
publishableKey: 'pk_test_xxx',
amountsUsd: [1,5,10],
// chainTypes: ['ic'],
// tokenShortcodes: ['ic_icp'],
// chainTypes: ['ic','sol'],
// tokenShortcodes: ['ic_icp','sol_usdc'],
}
</script>
```
Expand Down
10 changes: 9 additions & 1 deletion src/app/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const sections = [

# Welcome to ICPay Docs

Use the ICPay SDK to accept payments from users' wallets and manage your account operations. Choose between our Public SDK for frontend payment flows, Private SDK for server-side account management, or Widget Components for quick payment UI integration. {{ className: 'lead' }}
Use the ICPay SDK to accept payments from users' wallets and manage your account operations. Choose between our Public SDK for frontend payment flows, Private SDK for server-side account management, or Widget Components for quick payment UI integration. ICPay is multichain: Internet Computer, EVM, and Solana. {{ className: 'lead' }}

<div className="not-prose mt-6 mb-16 flex gap-3">
<Button href="/sdk" arrow="right">
Expand Down Expand Up @@ -48,8 +48,16 @@ The ICPay SDK ships as a single package that supports two usage modes. Use the p
<Button href="/widget" variant="text" arrow="right" className="ml-2">
<>Widget Components</>
</Button>
<Button href="/ledgers" variant="text" arrow="right" className="ml-2">
<>Supported tokens (IC/EVM/Solana)</>
</Button>
</div>

### What’s new
- Solana chain and tokens are now supported across SDK and Widget.
- Relay payments: accept and forward funds directly to your per‑chain recipient addresses. See [Relay payments](/relay-payments).
- X402 v2: ICPay includes its own facilitator for X402 flows (IC and EVM). See [X402 payments](/x402).

<Guides />

<Widgets />
13 changes: 13 additions & 0 deletions src/app/relay-payments/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,19 @@ await client.createPaymentUsd({
});
```

### Solana example

```ts
await client.createPaymentUsd({
usdAmount: 10,
tokenShortcode: 'sol_usdc',
metadata: { context: 'donation' },
recipientAddresses: {
sol: '7sQ8Yt7o3Qd3...YourSolanaAddressBase58',
},
})
```

### Choosing to charge a Relay Fee

1. Go to ICPay Web → Settings → ICPay Fees.
Expand Down
27 changes: 25 additions & 2 deletions src/app/sdk/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const sections = [

# SDK

The ICPay SDK provides a typed API for payments on the Base blockchain and Internet Computer. It supports public client-side operations with a publishable key and private server-side operations with a secret key. {{ className: 'lead' }}
The ICPay SDK provides a typed API for payments across Internet Computer, EVM chains, and Solana. It supports public client-side operations with a publishable key and private server-side operations with a secret key. {{ className: 'lead' }}

## Intro

Expand Down Expand Up @@ -108,6 +108,27 @@ const out = await icpay.createPaymentX402Usd({

Events are emitted throughout the flow when `enableEvents` is true. See Events section below.

### Solana support
- The SDK can initiate Solana payments (SPL tokens and native SOL) when a Solana provider is available (`window.solana`, Phantom/Backpack, or pass `solanaProvider` in config).
- Prefer `tokenShortcode` (e.g., `'sol_usdc'`) — the backend resolves mint/program details.

```ts
import { Icpay } from '@ic-pay/icpay-sdk'

const icpay = new Icpay({
publishableKey: process.env.NEXT_PUBLIC_ICPAY_PK!,
// Prefer an explicit provider if you manage wallets:
// solanaProvider: window.phantom?.solana || window.solana,
})

const res = await icpay.createPaymentUsd({
usdAmount: 5,
tokenShortcode: 'sol_usdc',
// Optionally relay directly to your Solana address:
recipientAddresses: { sol: '<your_solana_address_base58>' },
})
```

{/*
### Onramp (Transak)

Expand Down Expand Up @@ -154,6 +175,8 @@ const controller = icpay.notifyPaymentIntentOnRamp({ paymentIntentId, intervalMs
- `connectedWallet` (object): Connected wallet/principal for signing.
- `icHost` (string): IC network host for agent-js. Default `https://icp-api.io`.
- `actorProvider` (fn): `(canisterId, idl) => Actor` used to sign ICRC transfers.
- `evmProvider` (any): Preferred EVM provider for EVM flows (defaults to `window.ethereum`).
- `solanaProvider` (any): Preferred Solana provider for Solana flows (defaults to `window.solana` / `window.phantom.solana`).
- `debug` (boolean): Verbose logging in SDK internals.
- `enableEvents` (boolean): Emit SDK lifecycle events.

Expand Down Expand Up @@ -223,7 +246,7 @@ const principal = icpay.getAccountAddress()
- Account and chains:
- `getAccountInfo()` → Public account info: id/live/canister/branding.
- `getVerifiedLedgers()` → Verified ledgers with price metadata.
- `getChains()` → Enabled chains (IC/EVM) with RPC/explorer data.
- `getChains()` → Enabled chains (IC/EVM/Solana) with RPC/explorer data.
- `getLedgerCanisterIdBySymbol(symbol)` → Resolve ICPay-verified symbol to canister id.
- Ledger info and prices:
- `getLedgerInfo(ledgerCanisterId)` → Detailed ledger metadata, price, decimals.
Expand Down
2 changes: 1 addition & 1 deletion src/app/widget/components/amount-input/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export class AppComponent implements AfterViewInit {
- `minUsd?: number`, `maxUsd?: number`, `stepUsd?: number`
- `buttonLabel?: string`
- `progressBar?: { enabled?: boolean }`
- Common options: `tokenShortcodes?: string[]`, `chainShortcodes?: string[]`, `chainTypes?: Array<'ic' | 'evm'>`, `theme?`, `useOwnWallet?`, `plugNPlay?`, `debug?`, `disablePaymentButton?`, `disableAfterSuccess?`
- Common options: `tokenShortcodes?: string[]`, `chainShortcodes?: string[]`, `chainTypes?: Array<'ic' | 'evm' | 'sol'>`, `theme?`, `useOwnWallet?`, `plugNPlay?`, `debug?`, `disablePaymentButton?`, `disableAfterSuccess?`

{/*
## Onramp (Transak)
Expand Down
2 changes: 1 addition & 1 deletion src/app/widget/components/article-paywall/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ export class AppComponent implements AfterViewInit {
- `lockedContent?: string`
- `buttonLabel?: string` (supports `{amount}` and `{symbol}` placeholders)
- `onSuccess?: (tx) => void`
- Common options: `tokenShortcodes?: string[]`, `chainShortcodes?: string[]`, `chainTypes?: Array<'ic' | 'evm'>`, `progressBar?`, `theme?`, `useOwnWallet?`, `plugNPlay?`, `debug?`, `disablePaymentButton?`, `disableAfterSuccess?`
- Common options: `tokenShortcodes?: string[]`, `chainShortcodes?: string[]`, `chainTypes?: Array<'ic' | 'evm' | 'sol'>`, `progressBar?`, `theme?`, `useOwnWallet?`, `plugNPlay?`, `debug?`, `disablePaymentButton?`, `disableAfterSuccess?`

{/*
## Onramp (Transak)
Expand Down
2 changes: 1 addition & 1 deletion src/app/widget/components/coffee-shop/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ export class AppComponent implements AfterViewInit {
- `defaultItemIndex?: number`
- `buttonLabel?: string` (supports `{amount}` and `{symbol}` placeholders)
- `onSuccess?: (tx) => void`
- Common options: `tokenShortcodes?: string[]`, `chainShortcodes?: string[]`, `chainTypes?: Array<'ic' | 'evm'>`, `progressBar?`, `theme?`, `useOwnWallet?`, `plugNPlay?`, `debug?`, `disablePaymentButton?`, `disableAfterSuccess?`
- Common options: `tokenShortcodes?: string[]`, `chainShortcodes?: string[]`, `chainTypes?: Array<'ic' | 'evm' | 'sol'>`, `progressBar?`, `theme?`, `useOwnWallet?`, `plugNPlay?`, `debug?`, `disablePaymentButton?`, `disableAfterSuccess?`

{/* onramp-start */}
## Onramp (Transak)
Expand Down
2 changes: 1 addition & 1 deletion src/app/widget/components/donation-thermometer/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export class AppComponent implements AfterViewInit {
- `amountsUsd?: number[]`
- `buttonLabel?: string` (supports `{amount}` and `{symbol}` placeholders)
- `onSuccess?: (tx) => void`
- Common options: `tokenShortcodes?: string[]`, `chainShortcodes?: string[]`, `chainTypes?: Array<'ic' | 'evm'>`, `progressBar?`, `theme?`, `useOwnWallet?`, `plugNPlay?`, `debug?`, `disablePaymentButton?`, `disableAfterSuccess?`
- Common options: `tokenShortcodes?: string[]`, `chainShortcodes?: string[]`, `chainTypes?: Array<'ic' | 'evm' | 'sol'>`, `progressBar?`, `theme?`, `useOwnWallet?`, `plugNPlay?`, `debug?`, `disablePaymentButton?`, `disableAfterSuccess?`

{/* onramp-start */}
## Onramp (Transak)
Expand Down
8 changes: 4 additions & 4 deletions src/app/widget/components/pay-button/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ export default function Page() {
publishableKey: process.env.NEXT_PUBLIC_ICPAY_PK,
amountUsd: 49.99,
// Optional: constrain wallets/tokens shown
// chainTypes: ['ic','evm'],
// chainShortcodes: ['ic','base'],
// tokenShortcodes: ['ic_icp','ic_ckusdc','base_eth'],
// chainTypes: ['ic','evm','sol'],
// chainShortcodes: ['ic','base','sol'],
// tokenShortcodes: ['ic_icp','ic_ckusdc','base_eth','sol_usdc'],
// progressBar: { enabled: true },
}
return (
Expand Down Expand Up @@ -115,7 +115,7 @@ export class AppComponent implements AfterViewInit {
- `amountUsd?: number`
- `buttonLabel?: string` (used if `amountUsd` not set)
- `progressBar?: { enabled?: boolean }`
- Common options: `tokenShortcodes?: string[]`, `chainShortcodes?: string[]`, `chainTypes?: Array<'ic' | 'evm'>`, `theme?`, `useOwnWallet?`, `plugNPlay?`, `debug?`, `disablePaymentButton?`, `disableAfterSuccess?`
- Common options: `tokenShortcodes?: string[]`, `chainShortcodes?: string[]`, `chainTypes?: Array<'ic' | 'evm' | 'sol'>`, `theme?`, `useOwnWallet?`, `plugNPlay?`, `debug?`, `disablePaymentButton?`, `disableAfterSuccess?`

{/* onramp-start */}
## Onramp (Transak)
Expand Down
2 changes: 1 addition & 1 deletion src/app/widget/components/premium-content/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export class AppComponent implements AfterViewInit {
- `imageUrl?: string`
- `buttonLabel?: string` (supports `{amount}` and `{symbol}` placeholders)
- `onSuccess?: (tx) => void`
- Common options: `tokenShortcodes?: string[]`, `chainShortcodes?: string[]`, `chainTypes?: Array<'ic' | 'evm'>`, `progressBar?`, `theme?`, `useOwnWallet?`, `plugNPlay?`, `debug?`, `disablePaymentButton?`, `disableAfterSuccess?`
- Common options: `tokenShortcodes?: string[]`, `chainShortcodes?: string[]`, `chainTypes?: Array<'ic' | 'evm' | 'sol'>`, `progressBar?`, `theme?`, `useOwnWallet?`, `plugNPlay?`, `debug?`, `disablePaymentButton?`, `disableAfterSuccess?`

{/* onramp-start */}
## Onramp (Transak)
Expand Down
2 changes: 1 addition & 1 deletion src/app/widget/components/tip-jar/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -122,4 +122,4 @@ export class AppComponent implements AfterViewInit {
- `defaultAmountUsd?: number`
- `buttonLabel?: string` (supports `{amount}` and `{symbol}` placeholders)
- `onSuccess?: (tx) => void`
- Common options: `tokenShortcodes?: string[]`, `chainShortcodes?: string[]`, `chainTypes?: Array<'ic' | 'evm'>`, `progressBar?`, `theme?`, `useOwnWallet?`, `plugNPlay?`, `debug?`, `disablePaymentButton?`, `disableAfterSuccess?`
- Common options: `tokenShortcodes?: string[]`, `chainShortcodes?: string[]`, `chainTypes?: Array<'ic' | 'evm' | 'sol'>`, `progressBar?`, `theme?`, `useOwnWallet?`, `plugNPlay?`, `debug?`, `disablePaymentButton?`, `disableAfterSuccess?`
21 changes: 11 additions & 10 deletions src/app/widget/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,10 @@ export const sections = [
ICPay Widget is a set of framework-agnostic Web Components for payments. Drop in `icpay-premium-content`, `icpay-tip-jar`, `icpay-article-paywall`, `icpay-coffee-shop`, `icpay-donation-thermometer`, `icpay-pay-button` or `icpay-amount-input` to accept payments instantly. For React, wrappers are provided to use idiomatic props (e.g., `onSuccess`). {{ className: 'lead' }}

## Intro
- Built-in wallet selector for IC and EVM wallets:
- Built-in wallet selector for IC, EVM, and Solana wallets:
- IC: Plug, Oisy, Internet Identity (II), NFID
- EVM: MetaMask, Coinbase, Brave, Rabby, Phantom, OKX, WalletConnect (Rainbow currently disabled)
- EVM: MetaMask, Coinbase, Brave, Rabby, OKX, WalletConnect (Rainbow currently disabled)
- Solana: Phantom, Backpack (and compatible `window.solana` providers)
- Uses the [SDK](/sdk) under the hood; you can pass SDK options through the widget config.
- Emits global events so your app can react to progress and results.

Expand All @@ -43,9 +44,9 @@ export default function Page() {
amountsUsd: [1,5,10],
defaultAmountUsd: 5,
// Optional filters for multichain UX:
// chainTypes: ['ic','evm'],
// chainShortcodes: ['ic','base'],
// tokenShortcodes: ['ic_icp','ic_ckusdc','base_eth'],
// chainTypes: ['ic','evm','sol'],
// chainShortcodes: ['ic','base','sol'],
// tokenShortcodes: ['ic_icp','ic_ckusdc','base_eth','sol_usdc'],
}
return (
<IcpayTipJar
Expand Down Expand Up @@ -349,9 +350,9 @@ export class AppComponent implements AfterViewInit {
- `disablePaymentButton` / `disableAfterSuccess`: disable the pay button immediately, or after a success.
- Multichain filters and selection:
- `chainName?` (string), `chainId?` (number)
- `chainTypes?: Array<'ic' | 'evm'>`
- `chainShortcodes?: string[]` (e.g., `['ic','base']`)
- `tokenShortcodes?: string[]` (e.g., `['ic_icp','ic_ckusdc','base_eth']`)
- `chainTypes?: Array<'ic' | 'evm' | 'sol'>`
- `chainShortcodes?: string[]` (e.g., `['ic','base','sol']`)
- `tokenShortcodes?: string[]` (e.g., `['ic_icp','ic_ckusdc','base_eth','sol_usdc']`)

<CodeGroup title="Advanced configuration examples">

Expand Down Expand Up @@ -462,7 +463,7 @@ export class AppComponent implements AfterViewInit {

The widget passes a subset of options directly to the SDK:

- `publishableKey`, `apiUrl`, `icHost`, `actorProvider`, `connectedWallet`, `evmProvider`.
- `publishableKey`, `apiUrl`, `icHost`, `actorProvider`, `connectedWallet`, `evmProvider`, `solanaProvider`.

See all SDK options in the [SDK configuration](/sdk#configuration).

Expand Down Expand Up @@ -498,7 +499,7 @@ Common widget config (full):
- `disablePaymentButton?` (boolean)
- `disableAfterSuccess?` (boolean)
// Multichain filters:
- `chainTypes?: Array<'ic' | 'evm'>`
- `chainTypes?: Array<'ic' | 'evm' | 'sol'>`
- `chainShortcodes?: string[]`
- `tokenShortcodes?: string[]`
{/* onramp-start */}
Expand Down
Loading