[email protected]

Patch Changes

• #8465 629efc1 Thanks @joaquim-verges! - Add customization options for the signIn modal shown from useFetchWithPayment

• #8465 629efc1 Thanks @joaquim-verges! - Add monad chain definition

[email protected]

Minor Changes

• #8457 35aaf24 Thanks @joaquim-verges! - Add "upto" payment scheme option for x402 verify and settle

  const paymentArgs = {
    resourceUrl: "https://api.example.com/premium-content",
    method: "GET",
    paymentData,
    payTo: "0x1234567890123456789012345678901234567890",
    network: arbitrum,
    scheme: "upto", // enables dynamic pricing
    price: "$0.10", // max payable amount
    facilitator: thirdwebFacilitator,
  };
  
  // First verify the payment is valid for the max amount
  const verifyResult = await verifyPayment(paymentArgs);
  
  if (verifyResult.status !== 200) {
    return Response.json(verifyResult.responseBody, {
      status: verifyResult.status,
      headers: verifyResult.responseHeaders,
    });
  }
  
  // Do the expensive work that requires payment
  const { tokensUsed } = await doExpensiveWork();
  const pricePerTokenUsed = 0.00001;
  
  // Now settle the payment based on actual usage
  const settleResult = await settlePayment({
    ...paymentArgs,
    price: tokensUsed * pricePerTokenUsed, // adjust final price based on usage
  });

@thirdweb-dev/[email protected]

@thirdweb-dev/[email protected]

@thirdweb-dev/[email protected]

@thirdweb-dev/[email protected]

@thirdweb-dev/[email protected]

Patch Changes

• Updated dependencies [629efc1, 629efc1]:
  • [email protected]

@thirdweb-dev/[email protected]

Patch Changes

• Updated dependencies [35aaf24]:
  • [email protected]

[email protected]

Minor Changes

• #8444 9809d5c Thanks @joaquim-verges! - # New useFetchWithPayment() React Hook

  Added a new React hook that wraps the native fetch API to automatically handle 402 Payment Required responses using the x402 payment protocol.

  Features

  • Automatic Payment Handling: Automatically detects 402 responses, creates payment headers, and retries requests
  • Built-in UI: Shows an error modal with retry and fund wallet options when payment fails
  • Sign In Flow: Prompts users to connect their wallet if not connected, then automatically retries the payment
  • Insufficient Funds Flow: Integrates BuyWidget to help users top up their wallet directly in the modal
  • Customizable: Supports theming, custom payment selectors, BuyWidget customization, and ConnectModal customization
  • Opt-out Modal: Can disable the modal to handle errors manually

  Basic Usage

  The hook automatically parses JSON responses by default.

  import { useFetchWithPayment } from "thirdweb/react";
  import { createThirdwebClient } from "thirdweb";
  
  const client = createThirdwebClient({ clientId: "your-client-id" });
  
  function MyComponent() {
    const { fetchWithPayment, isPending } = useFetchWithPayment(client);
  
    const handleApiCall = async () => {
      // Response is automatically parsed as JSON by default
      const data = await fetchWithPayment(
        "https://api.example.com/paid-endpoint",
      );
      console.log(data);
    };
  
    return (
      <button onClick={handleApiCall} disabled={isPending}>
        {isPending ? "Loading..." : "Make Paid API Call"}
      </button>
    );
  }

  Customize Response Parsing

  By default, responses are parsed as JSON. You can customize this with the parseAs option:

  // Parse as text instead of JSON
  const { fetchWithPayment } = useFetchWithPayment(client, {
    parseAs: "text",
  });
  
  // Or get the raw Response object
  const { fetchWithPayment } = useFetchWithPayment(client, {
    parseAs: "raw",
  });

  Customize Theme & Payment Options

  const { fetchWithPayment } = useFetchWithPayment(client, {
    maxValue: 5000000n, // 5 USDC in base units
    theme: "light",
    paymentRequirementsSelector: (requirements) => {
      // Custom logic to select preferred payment method
      return requirements[0];
    },
  });

  Customize Fund Wallet Widget

  const { fetchWithPayment } = useFetchWithPayment(client, {
    fundWalletOptions: {
      title: "Add Funds",
      description: "You need more tokens to complete this payment",
      buttonLabel: "Get Tokens",
    },
  });

  Customize Connect Modal

  const { fetchWithPayment } = useFetchWithPayment(client, {
    connectOptions: {
      wallets: [inAppWallet(), createWallet("io.metamask")],
      title: "Sign in to continue",
      showThirdwebBranding: false,
    },
  });

  Disable Modal (Handle Errors Manually)

  const { fetchWithPayment, error } = useFetchWithPayment(client, {
    showErrorModal: false,
  });
  
  // Handle the error manually
  if (error) {
    console.error("Payment failed:", error);
  }

Patch Changes

• #8453 52aba0f Thanks @joaquim-verges! - Dont attempt chain switching for cb wallet if already connected to the right chain

@thirdweb-dev/[email protected]

@thirdweb-dev/[email protected]

@thirdweb-dev/[email protected]

Patch Changes

• Updated dependencies [52aba0f, 9809d5c]:
  • [email protected]

[email protected]

Patch Changes

• #8443 f5f6848 Thanks @joaquim-verges! - Add fundWalletLink prop to x402 responses