-
- );
- }
-
- return (
- ✅ Wallet Connected
-- {account.address.slice(0, 6)}...{account.address.slice(-4)} -
-
-
- );
-}
-```
-
-- New to crypto? No worries! Sign in with your existing account. -
-
-
-
-Build the payment options component that shows provider choices:
-
-```typescript
-interface PaymentOptionsProps {
- onSelect: (provider: "stripe" | "coinbase" | "transak") => void;
-}
-
-function PaymentOptions({ onSelect }: PaymentOptionsProps) {
- const paymentMethods = [
- {
- provider: "stripe" as const,
- name: "Stripe",
- description: "Credit Card, Apple Pay, Google Pay",
- logo: "💳",
- fees: "3.5% + $0.30",
- popular: true,
- },
- {
- provider: "coinbase" as const,
- name: "Coinbase Pay",
- description: "Bank Transfer, Debit Card",
- logo: "🟦",
- fees: "1% (Bank) / 3.9% (Card)",
- popular: false,
- },
- {
- provider: "transak" as const,
- name: "Transak",
- description: "Multiple Payment Options",
- logo: "🌐",
- fees: "0.99% - 5.5%",
- popular: false,
- },
- ];
-
- return (
-
-
-
-Implement the final steps of the user journey:
-
-```typescript
-import { sepolia } from "thirdweb/chains";
-
-function SuccessStep({
- txHash,
- nftMetadata
-}: {
- txHash: string;
- nftMetadata: typeof NFT_METADATA;
-}) {
- const explorerUrl = `${sepolia.blockExplorers?.[0]?.url}/tx/${txHash}`;
-
- return (
-
-
-
-Put it all together in your main application:
-
-```typescript
-import { ThirdwebProvider } from "thirdweb/react";
-// Import all the components we defined earlier
-import { NFTCheckout, WalletAuth, PaymentOptions, ProcessingStep, SuccessStep, ErrorStep } from "./nft-checkout-components";
-
-function App() {
- return (
-
-
- );
-}
-
-export default App;
-```
-
-
\ No newline at end of file
diff --git a/apps/portal/src/app/pay/guides/onramp-integration/page.mdx b/apps/portal/src/app/pay/guides/onramp-integration/page.mdx
deleted file mode 100644
index 7357c80238a..00000000000
--- a/apps/portal/src/app/pay/guides/onramp-integration/page.mdx
+++ /dev/null
@@ -1,199 +0,0 @@
-import {
- createMetadata,
- Callout,
- DocImage,
- InstallTabs,
- Steps,
- Step,
- Tabs,
- TabsList,
- TabsTrigger,
- TabsContent,
-} from "@doc";
-
-export const metadata = createMetadata({
- image: {
- title: "thirdweb Payments - Onramp Integration",
- icon: "thirdweb",
- },
- title: "thirdweb Payments - Onramp Integration | thirdweb",
- description:
- "Learn how to integrate fiat-to-crypto onramps using Stripe, Coinbase, and Transak with Payments.",
-});
-
-# Fiat-to-Crypto Onramp Integration
-
-Learn how to integrate seamless fiat-to-crypto onramps using Payments. This guide covers integration with Stripe, Coinbase, and Transak providers, enabling your users to purchase crypto directly with fiat currency.
-
-Payments's onramp functionality provides a unified interface across multiple providers, automatic routing to the best rates, and comprehensive status tracking.
-
----
-
-
-
-
-
-
-Configure your client and understand the available onramp providers:
-
-```typescript
-import { createThirdwebClient } from "thirdweb";
-import { Bridge, NATIVE_TOKEN_ADDRESS } from "thirdweb";
-
-const client = createThirdwebClient({
- clientId: "your_client_id"
-});
-```
-
-
-
-
-Create a basic onramp experience for your users:
-
-
-
-Stripe
-Coinbase
-Transak
-
-
-
-
-```typescript
-import { Bridge, NATIVE_TOKEN_ADDRESS, toWei } from "thirdweb";
-
- const onrampSession = await Bridge.Onramp.prepare({
- client,
- onramp: "stripe",
- chainId: 1, // Ethereum
- tokenAddress: NATIVE_TOKEN_ADDRESS, // ETH
- receiver: userAddress,
- amount: toWei("0.1"), // 0.1 ETH
- currency: "USD",
- country: "US", // User's country - important for compliance
- });
-
- window.open(onrampSession.link);
-```
-
-
-
-
-
-```typescript
-import { Bridge, NATIVE_TOKEN_ADDRESS, toWei } from "thirdweb";
-
-async function createCoinbaseOnramp(userAddress: string) {
- try {
- const onrampSession = await Bridge.Onramp.prepare({
- client,
- onramp: "coinbase",
- chainId: 8453, // Base (Coinbase's L2)
- tokenAddress: NATIVE_TOKEN_ADDRESS, // ETH on Base
- receiver: userAddress,
- amount: toWei("0.05"), // 0.05 ETH
- currency: "USD",
- country: "US",
- });
-
- console.log("Coinbase onramp session:", onrampSession.id);
- console.log("Estimated cost:", `$${onrampSession.currencyAmount}`);
-
- // Redirect to Coinbase onramp
- window.location.href = onrampSession.link;
-
- return onrampSession;
- } catch (error) {
- console.error("Failed to create Coinbase onramp:", error);
- throw error;
- }
-}
-```
-
-
-
-
-```typescript
-import { Bridge, NATIVE_TOKEN_ADDRESS, toWei } from "thirdweb";
-
-async function createTransakOnramp(userAddress: string) {
- try {
- const onrampSession = await Bridge.Onramp.prepare({
- client,
- onramp: "transak",
- chainId: 137, // Polygon
- tokenAddress: NATIVE_TOKEN_ADDRESS, // MATIC
- receiver: userAddress,
- amount: toWei("10"), // 10 MATIC
- currency: "USD",
- country: "US",
- });
-
- // Redirect to Transak
- window.open(onrampSession.link);
-
- return onrampSession;
- } catch (error) {
- console.error("Failed to create Transak onramp:", error);
- throw error;
- }
-}
-```
-
-
-
-
-
-Monitor onramp transactions and handle completion:
-
-```typescript
-import { Bridge } from "thirdweb";
-
-// Monitor onramp status
- const status = await Bridge.Onramp.status({
- sessionId,
- client,
- });
-
- switch (status.status) {
- case "COMPLETED":
- console.log("Onramp completed successfully!");
- console.log("Transaction hash:", status.transactionHash);
- console.log("Amount received:", status.destinationAmount);
- // Update your UI to show success
- break;
-
- case "PENDING":
- console.log("Onramp in progress...");
- // Show loading state to user
- setTimeout(() => monitorOnrampStatus(sessionId), 10000); // Check again in 10s
- break;
-
- case "FAILED":
- console.log("Onramp failed:", status.error);
- // Show error message to user
- break;
-
- case "CANCELLED":
- console.log("Onramp was cancelled by user");
- // Handle cancellation
- break;
-
- default:
- console.log("Unknown status:", status.status);
- }
-```
-
-
-
-## Next Steps
-
-- **[Onramp Providers](/pay/onramp-providers)** - Detailed provider comparison and features
-- **[Webhooks](/pay/webhooks)** - Set up real-time onramp status notifications
-- **[Testing](/pay/testing-pay)** - Test onramp flows in development mode
-- **[Payments API](https://bridge.thirdweb.com/reference)** - Complete API reference
diff --git a/apps/portal/src/app/pay/guides/smart-accounts/page.mdx b/apps/portal/src/app/pay/guides/smart-accounts/page.mdx
deleted file mode 100644
index b4ee08330b1..00000000000
--- a/apps/portal/src/app/pay/guides/smart-accounts/page.mdx
+++ /dev/null
@@ -1,154 +0,0 @@
-import {
- createMetadata,
- Callout,
- DocImage,
- InstallTabs,
- Steps,
- Step,
-} from "@doc";
-
-export const metadata = createMetadata({
- image: {
- title: "thirdweb Payments - Smart Accounts",
- icon: "thirdweb",
- },
- title: "thirdweb Payments - Smart Accounts | thirdweb",
- description:
- "Learn how to use EIP7702 smart accounts with batched transactions for seamless Payments experiences.",
-});
-
-# Smart Accounts with Payments
-
-Learn how to leverage EIP7702 smart accounts to batch Payments transactions for optimal user experience. This approach enables gasless transactions, batched execution, and seamless cross-chain operations.
-
-Smart accounts with EIP7702 allow you to upgrade any EOA (Externally Owned Account) into a smart account without code changes, enabling advanced features like transaction batching and gas sponsorship.
-
----
-
-
-
-
-
-
-Configure an in-app wallet with EIP7702 execution mode to enable smart account features:
-
-```typescript
-import { createThirdwebClient } from "thirdweb";
-import { inAppWallet } from "thirdweb/wallets/in-app";
-
-const client = createThirdwebClient({
- clientId: "your_client_id"
-});
-
-// Create in-app wallet with EIP7702 smart account features
-const wallet = inAppWallet({
- executionMode: {
- mode: "EIP7702",
- sponsorGas: true, // Enable gas sponsorship
- },
-});
-
-// Connect the wallet
-const account = await wallet.connect({
- client,
- strategy: "google", // or other auth strategies
-});
-```
-
-
- EIP7702 execution mode upgrades your EOA into a smart account, enabling batched transactions, gas sponsorship, and other advanced features without requiring contract deployment.
-
-
-
-
-
-Use Payments to prepare transactions, then batch them per step (since each step may be on a different chain):
-
-```typescript
-import { Bridge, NATIVE_TOKEN_ADDRESS, toWei } from "thirdweb";
-import { sendBatchTransaction } from "thirdweb";
-
-const bridgePreparation = await Bridge.Buy.prepare({
- originChainId: 1, // Ethereum
- originTokenAddress: NATIVE_TOKEN_ADDRESS,
- destinationChainId: 137, // Polygon
- destinationTokenAddress: NATIVE_TOKEN_ADDRESS,
- amount: toWei("0.1"), // 0.1 MATIC
- sender: account.address,
- receiver: account.address,
- client,
-});
-```
-
-
- **Key Rule**: You can only batch transactions that are on the same chain. Since Payments steps may span multiple chains, you must batch transactions within each step separately, not across steps.
-
-
-
-
-
-Execute transactions in batches per step (same chain), proceeding through steps sequentially:
-
-```typescript
-import { sendBatchTransaction, waitForReceipt } from "thirdweb";
-// Execute each step's transactions as a batch (same chain)
-for (let i = 0; i < bridgePreparation.steps.length; i++) {
- const step = bridgePreparation.steps[i];
-
- // Batch all transactions within this step (they're all on the same chain)
- const stepBatchResult = await sendBatchTransaction({
- transactions: step.transactions,
- account,
- });
-
- console.log(`Step ${i + 1} batch sent:`, stepBatchResult.transactionHash);
-
- const receipt = await waitForReceipt({
- client,
- chain: step.transactions[0].chain,
- transactionHash: stepBatchResult.transactionHash,
- });
-
- console.log(`Step ${i + 1} completed:`, receipt.status);
-
- // Monitor bridge completion status for this step
- let bridgeStatus;
- do {
- bridgeStatus = await Bridge.status({
- transactionHash: stepBatchResult.transactionHash,
- chainId: step.transactions[0].chainId,
- client,
- });
-
- if (bridgeStatus.status === "PENDING") {
- console.log(`Bridge step ${i + 1} still pending...`);
- await new Promise((resolve) => setTimeout(resolve, 5000));
- }
- } while (bridgeStatus.status === "PENDING");
-
- if (bridgeStatus.status === "COMPLETED") {
- console.log(`Bridge step ${i + 1} completed!`);
- } else if (bridgeStatus.status === "FAILED") {
- throw new Error(`Bridge step ${i + 1} failed`);
- }
-}
-```
-
-
- With EIP7702 smart accounts, transactions within each step execute atomically. Steps execute sequentially, ensuring proper cross-chain coordination. Gas sponsorship applies to all batched transactions.
-
-
-
-
-
-## Next Steps
-
-- **[EIP7702 Documentation](/wallets/sponsor-gas)** - Learn more about smart account features
-- **[Batching Transactions](/typescript/v5/account-abstraction/batching-transactions)** - Explore advanced batching patterns
-- **[Gas Sponsorship](/wallets/sponsor-gas)** - Set up custom gas sponsorship rules
-- **[Payments API](/payments/webhooks)** - Monitor cross-chain operations with webhooks
diff --git a/apps/portal/src/app/pay/onramp-providers/page.mdx b/apps/portal/src/app/pay/onramp-providers/page.mdx
deleted file mode 100644
index d6f58651257..00000000000
--- a/apps/portal/src/app/pay/onramp-providers/page.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { createMetadata } from "@doc";
-
-export const metadata = createMetadata({
- image: {
- title: "thirdweb Payments - Onramp Providers",
- icon: "thirdweb",
- },
- title: "thirdweb Payments - Onramp Providers | thirdweb",
- description:
- "Integrate onramp providers for any onchain transaction and set preferred providers",
-});
-
-# Onramp Providers
-
-**Onramp Providers** are services that allow users to buy crypto with fiat.
-Payments supports the following onramp providers:
-
-- **Coinbase**
-- **Transak**
-- **Stripe**
-
-## Provider Fees
-
-Each provider has different fees associated with their services which often depend on various factors. Onramp provider fees are set by the provider and are not controlled by thirdweb.
-
-| Provider | Fees |
-| -------- | ---- |
-| Coinbase | [Learn more about Coinbase Fees](https://help.coinbase.com/en/coinbase/trading-and-funding/pricing-and-fees/fees) |
-| Transak | [Learn more about Transak Fees](https://support.transak.com/en/articles/7845942-how-does-transak-calculate-prices-and-fees)|
-| Stripe | [Learn more about Stripe Fees](https://stripe.com/legal/crypto-onramp). |
-
-
-## Provider Regions
-
-Each provider has different regions they support. You can learn more about the supported regions for each provider in the links below.
-
-| Provider | Regions |
-| -------- | ------- |
-| Coinbase | [View Regions](https://docs.cdp.coinbase.com/onramp/docs/api-configurations) |
-| Transak | [View Regions](https://transak.com/global-coverage) |
-| Stripe | [View Regions](https://support.stripe.com/questions/crypto-supportability-and-availability-by-region) |
diff --git a/apps/portal/src/app/pay/supported-chains/page.mdx b/apps/portal/src/app/pay/supported-chains/page.mdx
deleted file mode 100644
index f4f6113dbd5..00000000000
--- a/apps/portal/src/app/pay/supported-chains/page.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { createMetadata } from "@doc";
-
-export const metadata = createMetadata({
- image: {
- title: "Supported Chains",
- icon: "payments",
- },
- title: "thirdweb Payments - Supported Chains | thirdweb",
- description: "List of chains supported by Payments.",
-});
-
-# Supported Chains
-
-[View all supported chains with Payments](https://thirdweb.com/chainlist?service=pay).
-
-If you’d like to suggest a chain for us to support, [contact us](https://thirdweb.com/contact-us).
diff --git a/apps/portal/src/app/pay/troubleshoot/page.mdx b/apps/portal/src/app/pay/troubleshoot/page.mdx
deleted file mode 100644
index 22bf3c858b1..00000000000
--- a/apps/portal/src/app/pay/troubleshoot/page.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
-import {Details} from "@doc";
-
-# Payments Troubleshoot Articles
-
-
-**When using webhooks to distribute purchased items, always verify that the proper amount was paid to the proper address onchain using the provided transaction hash. Do not make any assumptions regarding onchain data based on webhook payloads.**
-
-
-You can create a webhook in your project dashboard under the Payments tab. You'll be prompted to copy a secret key before saving the webhook. This will be used for verification on all webhook requests received by your backend.
-
-## Response Objects
-
-To get the TypeScript type for webhook responses, see the [`Webhook.Payload`](https://portal.thirdweb.com/typescript/v5/webhook/payload) type in the SDK.
-
-### Example Payloads
-
-
-
-
- Bridge & Swap
- Onramp
-
-
-```json
-{
- "version": 2,
- "data": {
- "id": "d5d33244-f855-441d-af62-4593094a3eb1",
- "onramp": "stripe",
- "token": {
- "chainId": 8453,
- "address": "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
- "symbol": "USDC",
- "name": "USD Coin",
- "decimals": 6,
- "priceUsd": 0.99995,
- "iconUri": "https://coin-images.coingecko.com/coins/images/6319/large/usdc.png?1696506694"
- },
- "amount": "5100000",
- "currency": "USDC",
- "currencyAmount": 5.36,
- "receiver": "0xa5a484Af10FF67257A06DDbf8DdE6A99a483f098",
- "status": "PENDING",
- "purchaseData": null
- }
-}
-```
-
-
-
-```json
-{
- "version": 2,
- "data": {
- "transactionId": "0x7baae858e28628fe57cb0ca93c86fcda68f556563199cb4472044bfd9fbe5ec8",
- "paymentId": "0xbea711bf1da223b29b176cff7f01596834dd63c7ad85477a3504f4b9285b33a2",
- "clientId": "c56b27030ad22846003fafbb4302b5d7",
- "action": "SELL",
- "status": "COMPLETED",
- "originToken": {
- "chainId": 466,
- "address": "0x675C3ce7F43b00045a4Dab954AF36160fb57cB45",
- "symbol": "USDC",
- "name": "USD Coin",
- "decimals": 6,
- "priceUsd": 0.99995,
- "iconUri": "https://coin-images.coingecko.com/coins/images/6319/large/usdc.png?1696506694"
- },
- "originAmount": "24875000",
- "destinationToken": {
- "chainId": 8453,
- "address": "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
- "symbol": "USDC",
- "name": "USD Coin",
- "decimals": 6,
- "priceUsd": 0.99995,
- "iconUri": "https://coin-images.coingecko.com/coins/images/6319/large/usdc.png?1696506694"
- },
- "destinationAmount": "24794905",
- "sender": "0xb4523A0D69612B9A4629A70E42021B2F384CC8Fa",
- "receiver": "0x044A83bA68f36CF1F27836Cb93614f86d8B0ea96",
- "type": "sell",
- "transactions": [
- {
- "chainId": 466,
- "transactionHash": "0xc507bde1da0832d097c2160aacc2c9333ac3a0516c8dca4fb955f4c949da1ef6"
- },
- {
- "chainId": 8453,
- "transactionHash": "0xc44b372284061a11ec96c67acfc96a67cc6180d14753b55a93c1f780d16ddc95"
- }
- ],
- "developerFeeBps": 20,
- "developerFeeRecipient": "0x66d3d733e597bdf8b794ab6e13c8f2be0fcda39b"
- }
-}
-```
-
-
-
-## Webhook Verification
-
-There are two ways to verify a webhook request authenticity:
-1. Checking that the bearer token in the `Authorization` header matches the secret key received when you created the webhook.
-2. Decrypting the payload signature from the `x-payload-signature` header and verifying it against the received webhook body.
-
-### Decrypting the Payload Signature
-
-The payload signature is constructed using the `x-timestamp` header and the webhook's full body:
-```ts
-const signature = crypto
- .createHmac("sha256", decryptedSecret)
- .update(`${timestamp}.${payload}`)
- .digest("hex");
-```
-The `x-timestamp` header is a UNIX timestamp in seconds, and the webhook body is the JSON payload received by your webhook endpoint.
-
-Then verify that the signature matches the `x-payload-signature` header.
-
diff --git a/apps/portal/src/app/tokens/modular-contracts/tutorials/deploy-erc721-core/page.mdx b/apps/portal/src/app/tokens/modular-contracts/tutorials/deploy-erc721-core/page.mdx
deleted file mode 100644
index e69de29bb2d..00000000000
- 
-
-
- {/* Step Progress Indicator */}
- {NFT_METADATA.name}
-{NFT_METADATA.description}
-
- {NFT_PRICE_ETH} ETH (~$30 USD)
-
-
- {["connect", "payment", "processing", "success"].map((step, index) => (
- setState({ step: "payment" })}
- />
- )}
-
- );
-}
-```
-
-
-= index
- ? "bg-blue-500"
- : "bg-gray-200"
- }`}
- />
- ))}
-
-
- {/* Step Content */}
- {state.step === "connect" && (
-
-
- );
-}
-
-function ProcessingStep({ provider }: { provider: "stripe" | "coinbase" | "transak" }) {
- const [currentStep, setCurrentStep] = useState<"payment" | "confirmation" | "minting">("payment");
-
- // Auto-progress through steps for demo purposes
- useEffect(() => {
- const timer1 = setTimeout(() => setCurrentStep("confirmation"), 5000);
- const timer2 = setTimeout(() => setCurrentStep("minting"), 10000);
-
- return () => {
- clearTimeout(timer1);
- clearTimeout(timer2);
- };
- }, []);
-
- const providerInfo = {
- stripe: { name: "Stripe", logo: "💳", color: "blue" },
- coinbase: { name: "Coinbase Pay", logo: "🟦", color: "blue" },
- transak: { name: "Transak", logo: "🌐", color: "green" },
- };
-
- const info = providerInfo[provider];
-
- return (
-
-
-
- Choose Payment Method
-- Select how you'd like to pay for your NFT -
-
- {paymentMethods.map((method) => (
-
- ))}
-
-
-
-
-
- 🔒
- Secure Payment Processing
-
- - All payments are processed securely through industry-leading providers. - Your payment information is never stored on our servers. -
-
-
- );
-}
-```
-
-
-
- {/* Progress Steps */}
- {info.logo}
- Processing with {info.name}
-
-
-
- {currentStep === "payment" && (
-
-
-
-
- {currentStep === "payment" ? "1" : "✓"}
-
-
-
- Complete Payment
-
- {currentStep === "payment" ? "Finish your purchase in the payment window" : "Payment completed successfully"}
-
-
-
-
-
- {currentStep === "confirmation" ? "2" : currentStep === "minting" ? "✓" : "2"}
-
-
-
- Confirming Transaction
-
- {currentStep === "confirmation" ? "Verifying your payment on the blockchain" :
- currentStep === "minting" ? "Transaction confirmed" : "Waiting for payment completion"}
-
-
-
-
- 3
-
-
-
- Minting Your NFT
-
- {currentStep === "minting" ? "Creating your unique NFT on the blockchain" : "Preparing to mint your NFT"}
-
-
-
- )}
-
- {currentStep === "minting" && (
- - Complete your payment in the {info.name} window to continue. - This page will automatically update when payment is confirmed. -
-
-
-
- )}
- - Almost done! Your NFT is being created on the blockchain. - This usually takes 30-60 seconds. -
-
-
- );
-}
-
-function ErrorStep({
- error,
- onRetry
-}: {
- error: string;
- onRetry: () => void;
-}) {
- return (
- 🎉
-
-
-
-
-
- NFT Minted Successfully!
-- Congratulations! Your NFT has been minted and is now in your wallet. -
-
-
-
-
-
-
- );
-}
-```
-
-❌
-
-
-
- Something went wrong
-- We couldn't complete your NFT purchase. Please try again. -
-
-
- - Error details -
-- {error} -
-
-
-
-
-
-
-
-
-
-
-
- - NFT Marketplace -
-- Buy NFTs seamlessly with fiat currency -
-
-When using onramp providers, you may encounter an error stating "There was an issue processing your payment and you have not been charged. Your card does not support this type of purchase."
-
-This typically means that your card issuer does not allow cryptocurrency purchases.
-
-To work around this issue, you can try using a different card or payment method, such as debit card, if available.
-
-
-
-If you encounter an "Error 500: Internal Server Error" or if the modal shows "Something went wrong" it may indicate you are using an
-outdated version of the Payments service.
-
-To resolve this issue, please upgrade your SDK to the latest version in your project. You can download the latest version with `npm install thirdweb@latest` or `yarn add thirdweb@latest`.
-
-If the issue persists after upgrade, please [contact our support team](https://thirdweb.com/support) for further assistance.
-
\ No newline at end of file
diff --git a/apps/portal/src/app/pay/webhooks/page.mdx b/apps/portal/src/app/pay/webhooks/page.mdx
deleted file mode 100644
index b885151554f..00000000000
--- a/apps/portal/src/app/pay/webhooks/page.mdx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { createMetadata, DocImage, Callout } from "@doc";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
-
-export const metadata = createMetadata({
- title: "Payments Webhooks Implementation Guide — thirdweb Docs",
- description:
- "Learn how to set up webhooks for any Payments transactions.",
-});
-
-# Webhooks
-
-