{
  // Version of the x402 payment protocol
  x402Version: int,

  // List of payment requirements that the resource server accepts. A resource server may accept on multiple chains, or in multiple currencies.
  accepts: [paymentRequirements]

  // Message from the resource server to the client to communicate errors in processing payment
  error: string
}

{
  // Scheme of the payment protocol to use
  scheme: string;

  // Network of the blockchain to send payment on
  network: string;

  // Maximum amount required to pay for the resource in atomic units of the asset
  maxAmountRequired: uint256 as string;

  // URL of resource to pay for
  resource: string;

  // Description of the resource
  description: string;

  // MIME type of the resource response
  mimeType: string;

  // Output schema of the resource response
  outputSchema?: object | null;

  // Address to pay value to
  payTo: string;

  // Maximum time in seconds for the resource server to respond
  maxTimeoutSeconds: number;

  // Address of the EIP-3009 compliant ERC20 contract
  asset: string;

  // Extra information about the payment details specific to the scheme
  // For `exact` scheme on a EVM network, expects extra to contain the records `name` and `version` pertaining to asset
  extra: object | null;
}

export default function Paywall() {
  const paymentRequirements: PaymentRequirements = {
    scheme: "exact",
    network: "base-sepolia",
    maxAmountRequired: "10000",
    resource: "https://example.com",
    description: "Payment for a service",
    mimeType: "text/html",
    payTo: "0x209693Bc6afc0C5328bA36FaF03C514EF312287C",
    maxTimeoutSeconds: 60,
    asset: "0x036CbD53842c5426634e7929541eC2318f3dCF7e",
    outputSchema: undefined,
    extra: {
      name: "USDC",
      version: "2",
    },
  };
  return (
    <div>
      <PaymentForm paymentRequirements={paymentRequirements} />
    </div>
  );
}

// 处理 PaymentRequirements
const unSignedPaymentHeader = preparePaymentHeader(
  address,
  1,
  paymentRequirements
);

// 构建 eip712 的签名数据
const eip712Data = {
  types: {
    TransferWithAuthorization: [
      { name: "from", type: "address" },
      { name: "to", type: "address" },
      { name: "value", type: "uint256" },
      { name: "validAfter", type: "uint256" },
      { name: "validBefore", type: "uint256" },
      { name: "nonce", type: "bytes32" },
    ],
  },
  domain: {
    name: paymentRequirements.extra?.name,
    version: paymentRequirements.extra?.version,
    chainId: getNetworkId(paymentRequirements.network),
    verifyingContract: paymentRequirements.asset as `0x${string}`,
  },
  primaryType: "TransferWithAuthorization" as const,
  message: unSignedPaymentHeader.payload.authorization,
};

async function handlePayment() {
  setIsProcessing(true);
  const signature = await signTypedDataAsync(eip712Data);

  const paymentPayload: PaymentPayload = {
    ...unSignedPaymentHeader,
    payload: {
      ...unSignedPaymentHeader.payload,
      signature,
    },
  };

  const payment: string = exact.evm.encodePayment(paymentPayload);

  const verifyPaymentWithPayment = verifyPayment.bind(null, payment);
  const result = await verifyPaymentWithPayment();
  console.log("result", result);
  setIsProcessing(false);
}