Skip to main content
Use SvelteKit with 4Mica by running the Node adapter behind an Express server. Mount the 4Mica middleware before the SvelteKit handler for paid API routes.
This integration is not stable yet. For now, use the NodeJS quick start for the supported implementation.

​
Prerequisites

  • SvelteKit configured with @sveltejs/adapter-node.
  • A seller wallet address for payTo.
  • A buyer wallet with deposited 4Mica collateral.

​
Install

npm install @sveltejs/adapter-node express @4mica/x402 @x402/fetch viem

​
Create wallet

For wallet setup, see Wallet. 
PRIVATE_KEY=0xYourPrivateKey
PAY_TO=0xYourSellerAddress
Use the private key only for buyer-side signing. Use PAY_TO as the seller address advertised by protected routes.

​
Deposit collateral

Deposit collateral for the buyer wallet before making paid requests. Match the network in the client scheme and the protected route. To learn more about collateral setup, see Deposits and Withdrawals.

​
Protect a route

After building SvelteKit with the Node adapter, create an Express server entry that mounts paid routes first and then passes everything else to SvelteKit. 
import express from "express";
import { handler } from "./build/handler.js";
import { paymentMiddlewareFromConfig } from "@4mica/x402/server/express";

const server = express();
server.use(express.json());

server.use(
  paymentMiddlewareFromConfig(
    {
      "GET /api/premium-content": {
        accepts: {
          scheme: "4mica-credit",
          price: "$0.10",
          network: "eip155:84532",
          payTo: process.env.PAY_TO ?? "0xYourAddress",
        },
        description: "Access to premium SvelteKit content",
      },
    },
  ),
);

server.get("/api/premium-content", (req, res) => {
  res.json({ message: "Paid content from SvelteKit" });
});

server.use(handler);

server.listen(3000);

​
Support payment

import { wrapFetchWithPaymentFromConfig } from "@x402/fetch";
import { FourMicaEvmScheme } from "@4mica/x402/client";
import { privateKeyToAccount } from "viem/accounts";

const account = privateKeyToAccount(process.env.PRIVATE_KEY as `0x${string}`);
const scheme = await FourMicaEvmScheme.create(account);

export const fetchWithPayment = wrapFetchWithPaymentFromConfig(fetch, {
  schemes: [{ network: "eip155:84532", client: scheme }],
});
Use it from server-only SvelteKit code: 
const response = await fetchWithPayment("http://localhost:3000/api/premium-content");
const data = await response.json();