Ejemplos y Casos de Uso

Ejemplos de implementación en el mundo real para patrones comunes de integración de AnySpend

Ejemplos de implementación real para patrones comunes de integración de AnySpend, desde intercambios simples hasta flujos de pago completos con formularios, envío y automatización de flujos de trabajo.

Intercambios

Intercambios de tokens, pagos fijos, interfaces de usuario personalizadas

Pago

Comercio electrónico, suscripciones, formularios, descuentos

Depósitos

Multi-cadena, staking, códigos QR

Flujos de trabajo

Automatización activada por pago

NFTs

Tarjetas de compra de NFT

Personalización

Pago completamente tematizado

---

​

Intercambios entre Cadenas

​

Interfaz de Intercambio Básico

Simple Swap Page

import { AnySpend } from "@b3dotfun/sdk/anyspend/react";

function TokenSwapPage() {
  return (
    <AnySpend
      mode="page"
      recipientAddress={userWalletAddress}
      onSuccess={(txHash) => {
        toast.success("¡Intercambio completado!");
        queryClient.invalidateQueries(["user-balances"]);
      }}
    />
  );
}

​

Intercambio con Marca Personalizada

Branded Swap

import { AnySpend } from "@b3dotfun/sdk/anyspend/react";

function BrandedSwap() {
  return (
    <AnySpend
      mode="page"
      recipientAddress={userAddress}
      theme={{ brandColor: "#6366f1" }}
      content={{
        successTitle: "¡Intercambio Completo!",
        successDescription: "Tus tokens han sido intercambiados exitosamente.",
        returnButtonLabel: "Volver al Dashboard",
      }}
      slots={{
        footer: (
          <div className="text-center text-sm text-gray-400 py-3">
            Potenciado por MyApp
          </div>
        ),
      }}
    />
  );
}

​

Pago de Monto Fijo

Fixed Amount Payment

import { AnySpend } from "@b3dotfun/sdk/anyspend/react";

function FixedPayment() {
  return (
    <AnySpend
      mode="modal"
      destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
      destinationTokenChainId={8453}
      destinationTokenAmount="10000000" // Exactamente 10 USDC
      recipientAddress={merchantAddress}
      allowDirectTransfer
      onSuccess={(txHash) => {
        toast.success("¡Pago recibido!");
      }}
    />
  );
}

---

​

Experiencias de Pago

​

Pago de Comercio Electrónico

Store Checkout

import { AnySpendCheckout } from "@b3dotfun/sdk/anyspend/react";

function StoreCheckout({ cart }) {
  return (
    <AnySpendCheckout
      mode="page"
      recipientAddress="0xMerchantWallet..."
      destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
      destinationTokenChainId={8453}
      items={cart.map((item) => ({
        name: item.name,
        description: item.variant,
        imageUrl: item.imageUrl,
        amount: item.priceWei,
        quantity: item.quantity,
        metadata: {
          Size: item.size,
          Color: item.color,
        },
      }))}
      shipping={{ amount: "2000000", label: "Envío Estándar" }}
      tax={{ amount: "850000", label: "Impuesto", rate: "8.5%" }}
      discount={{ amount: "5000000", label: "Código Promocional", code: "SAVE10" }}
      organizationName="Tienda Acme"
      organizationLogo="/acme-logo.svg"
      themeColor="#4f46e5"
      onSuccess={(result) => {
        router.push(`/order-confirmation?id=${result.orderId}`);
      }}
      returnUrl="/shop"
      returnLabel="Continuar Comprando"
      content={{
        successTitle: "¡Pedido Realizado!",
        successDescription: "Revisa tu correo electrónico para la confirmación del envío.",
      }}
    />
  );
}

​

Pago con Formularios, Envío y Descuentos

Full-Featured Checkout

import { AnySpendCheckout } from "@b3dotfun/sdk/anyspend/react";

function FullCheckout({ cart }) {
  return (
    <AnySpendCheckout
      mode="page"
      recipientAddress="0xMerchantWallet..."
      destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
      destinationTokenChainId={8453}
      items={cart}
      organizationName="Tienda Acme"
      themeColor="#4f46e5"

      // Recolectar información del cliente vía esquema JSON
      formSchema={{
        fields: [
          { id: "email", type: "email", label: "Correo Electrónico", required: true },
          { id: "name", type: "text", label: "Nombre Completo", required: true },
          { id: "shipping", type: "address", label: "Dirección de Envío", required: true },
        ],
      }}

      // Opciones de envío
      shippingOptions={[
        { id: "free", name: "Envío Gratis", amount: "0", estimated_days: "7-10 días hábiles" },
        { id: "express", name: "Express", amount: "5000000", estimated_days: "2-3 días hábiles" },
      ]}

      // Códigos de descuento
      enableDiscountCode
      validateDiscount={async (code) => {
        const res = await fetch(`/api/discounts/${code}`);
        return res.json();
      }}

      onSuccess={(result) => router.push(`/confirmation?id=${result.orderId}`)}
    />
  );
}

​

Suscripción con Activador de Flujo de Trabajo

Subscription Payment

import { AnySpendCheckoutTrigger } from "@b3dotfun/sdk/anyspend/react";

function SubscriptionCheckout({ plan }) {
  return (
    <AnySpendCheckoutTrigger
      recipientAddress="0xTreasury..."
      destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
      destinationTokenChainId={8453}
      items={[
        {
          name: `Plan ${plan.name}`,
          description: `facturación ${plan.billingCycle}`,
          amount: plan.amountWei,
          quantity: 1,
        },
      ]}
      organizationName="SaaS Co"
      themeColor="#059669"

      // Activar flujo de trabajo en pago exitoso
      workflowId="wf_activate_subscription"
      orgId="org_saas"
      callbackMetadata={{
        inputs: {
          planId: plan.id,
          userId: currentUser.id,
          billingCycle: plan.billingCycle,
        },
      }}

      onSuccess={() => {
        toast.success("¡Suscripción activada!");
        router.push("/dashboard");
      }}
      content={{
        successTitle: `¡Bienvenido a ${plan.name}!`,
        successDescription: "Tu suscripción está ahora activa.",
        returnButtonLabel: "Ir al Dashboard",
      }}
    />
  );
}

---

​

Flujos de Depósito

​

Depósito Multi-Cadena

Deposit with Chain Selection

import { AnySpendDeposit } from "@b3dotfun/sdk/anyspend/react";

function DepositPage() {
  return (
    <AnySpendDeposit
      mode="page"
      recipientAddress={walletAddress}
      destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
      destinationTokenChainId={8453}
      showChainSelection
      supportedChains={[
        { id: 8453, name: "Base" },
        { id: 1, name: "Ethereum" },
        { id: 42161, name: "Arbitrum" },
        { id: 10, name: "Optimism" },
        { id: 137, name: "Polygon" },
      ]}
      chainSelectionTitle="¿De dónde provienen tus fondos?"
      chainSelectionDescription="Selecciona la cadena desde la que deseas depositar"
      onSuccess={(amount) => {
        toast.success(`Depositado ${amount} USDC`);
        queryClient.invalidateQueries(["balance"]);
      }}
    />
  );
}

​

Depósito con Contrato Personalizado (Staking)

Staking via Deposit

import { AnySpendDeposit } from "@b3dotfun/sdk/anyspend/react";

function StakeDeposit({ stakingContract }) {
  return (
    <AnySpendDeposit
      recipientAddress={stakingContract.address}
      destinationTokenAddress={stakingContract.tokenAddress}
      destinationTokenChainId={8453}
      depositContractConfig={{
        functionAbi: JSON.stringify(stakingContract.abi),
        functionName: "stake",
        functionArgs: ["{{amount_out}}", "30"], // marcador de posición de cantidad + 30 días
        to: stakingContract.address,
        action: "Stake",
      }}
      isCustomDeposit
      actionLabel="Stake Tokens"
      onSuccess={(amount) => toast.success(`¡Staked ${amount}!`)}
      content={{
        successTitle: "¡Staking Exitoso!",
        successDescription: "Tus tokens ahora están en staking. Las recompensas se acumularán diariamente.",
      }}
    />
  );
}

​

Depósito con Código QR

QR Code Deposit

import { QRDeposit } from "@b3dotfun/sdk/anyspend/react";

function QRDepositPage() {
  const usdcToken = {
    chainId: 8453,
    address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
    name: "USD Coin",
    symbol: "USDC",
    decimals: 6,
    metadata: { logoURI: "https://..." },
  };

  return (
    <QRDeposit
      recipientAddress={walletAddress}
      destinationToken={usdcToken}
      destinationChainId={8453}
      onOrderCreated={(orderId) => {
        console.log("Orden de depósito creada:", orderId);
      }}
      onSuccess={(txHash) => {
        toast.success("¡Depósito recibido!");
      }}
    />
  );
}

---

​

Activadores de Flujos de Trabajo

​

Automatización Activada por Pago

Workflow Payment Trigger

import { AnySpendWorkflowTrigger } from "@b3dotfun/sdk/anyspend/react";

function WorkflowPayment() {
  return (
    <AnySpendWorkflowTrigger
      recipientAddress="0xServiceWallet..."
      chainId={8453}
      tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
      amount="5000000" // 5 USDC
      workflowId="wf_process_order"
      orgId="org_myapp"
      actionLabel="Pagar y Activar"
      callbackMetadata={{
        inputs: {
          action: "activate_premium",
          userId: currentUser.id,
        },
      }}
      onSuccess={(amount) => {
        toast.success("¡Pago procesado! Flujo de trabajo activado.");
        router.push("/dashboard");
      }}
    />
  );
}

---

​

Mercado de NFT

​

Tarjeta de Compra de NFT

NFT Card Component

import { AnySpendNFTButton } from "@b3dotfun/sdk/anyspend/react";

function NFTCard({ nft }) {
  const nftContract = {
    chainId: nft.chainId,
    contractAddress: nft.contractAddress,
    price: nft.priceWei,
    priceFormatted: nft.priceFormatted,
    currency: nft.currency,
    name: nft.name,
    description: nft.description,
    imageUrl: nft.imageUrl,
    tokenId: null,
    type: "erc721" as const,
  };

  return (
    <div className="nft-card">
      <img src={nft.imageUrl} alt={nft.name} />
      <h3>{nft.name}</h3>
      <p>{nft.priceFormatted} {nft.currency.symbol}</p>
      <AnySpendNFTButton
        nftContract={nftContract}
        recipientAddress={userAddress}
      />
    </div>
  );
}

---

​

Llamadas a Contratos Inteligentes Personalizados

​

Staking en DeFi

Staking Pool

import { AnySpendCustom } from "@b3dotfun/sdk/anyspend/react";
import { encodeFunctionData, parseUnits } from "viem";

function StakingPool({ pool }) {
  const [amount, setAmount] = useState("");

  const stakingCalldata = useMemo(() => {
    if (!amount) return "0x";
    return encodeFunctionData({
      abi: stakingPoolABI,
      functionName: "stake",
      args: [parseUnits(amount, pool.token.decimals), 30 * 86400],
    });
  }, [amount]);

  return (
    <div>
      <input
        type="number"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        placeholder="Cantidad a apostar"
      />

      <AnySpendCustom
        orderType="custom"
        dstChainId={pool.chainId}
        dstToken={pool.token}
        dstAmount={parseUnits(amount || "0", pool.token.decimals).toString()}
        contractAddress={pool.contractAddress}
        encodedData={stakingCalldata}
        metadata={{ action: "stake", poolId: pool.id }}
        header={({ anyspendPrice }) => (
          <div>
            <h3>Apostar {pool.token.symbol}</h3>
            {anyspendPrice && <p>Costo: ${anyspendPrice.totalUsdCost}</p>}
          </div>
        )}
        onSuccess={() => toast.success("¡Apostado exitosamente!")}
      />
    </div>
  );
}

---

​

Pasarela de Moneda Fiat

​

Incorporación de Usuarios con Fiat

Fiat Onboarding

import { AnySpend } from "@b3dotfun/sdk/anyspend/react";

function OnboardingFlow() {
  const [step, setStep] = useState(1);

  return (
    <div>
      {step === 1 && (
        <div>
          <h2>¡Bienvenido! Comencemos</h2>
          <WalletConnectButton onConnect={() => setStep(2)} />
        </div>
      )}

      {step === 2 && (
        <div>
          <h2>Compra tu primer cripto</h2>
          <AnySpend
            mode="page"
            defaultActiveTab="fiat"
            destinationTokenAddress="0x0000000000000000000000000000000000000000"
            destinationTokenChainId={8453}
            recipientAddress={userAddress}
            customUsdInputValues={["10", "25", "50", "100"]}
            onSuccess={() => {
              setStep(3);
              toast.success("¡Compra exitosa!");
            }}
          />
        </div>
      )}

      {step === 3 && (
        <div>
          <h2>¡Todo listo!</h2>
          <button onClick={() => router.push("/dashboard")}>
            Ir al Dashboard
          </button>
        </div>
      )}
    </div>
  );
}

---

​

Ejemplo de Personalización Completa

​

Pago Completamente Tematizado

Customized Checkout

import { AnySpendCheckout } from "@b3dotfun/sdk/anyspend/react";

function CustomCheckout({ items }) {
  return (
    <AnySpendCheckout
      mode="page"
      recipientAddress="0xMerchant..."
      destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
      destinationTokenChainId={8453}
      items={items}
      organizationName="Tienda Premium"
      organizationLogo="/logo.svg"

      // Tema
      theme={{
        brandColor: "#7c3aed",
        colors: {
          surfaceSecondary: "#faf5ff",
        },
      }}

      // Mensajes personalizados
      content={{
        successTitle: "¡Gracias por tu compra!",
        successDescription: "Tu recibo ha sido enviado a tu correo electrónico.",
        processingTitle: "Finalizando tu pedido...",
        processingDescription: "Esto suele tardar menos de un minuto.",
        returnButtonLabel: "Continuar Comprando",
        retryButtonLabel: "Intentar Nuevamente",
      }}

      // Componentes personalizados
      slots={{
        footer: (
          <div className="flex items-center justify-center gap-2 py-3 text-xs text-gray-400">
            <LockIcon className="w-3 h-3" />
            Pago seguro por Tienda Premium
          </div>
        ),
        successScreen: ({ title, description, txHash, onDone }) => (
          <div className="text-center p-8">
            <ConfettiAnimation />
            <h2 className="text-2xl font-bold mt-4">{title}</h2>
            <p className="text-gray-500 mt-2">{description}</p>
            <button onClick={onDone} className="mt-6 btn-primary">
              Continuar Comprando
            </button>
          </div>
        ),