> ## Documentation Index
> Fetch the complete documentation index at: https://docs.walletconnect.com/llms.txt
> Use this file to discover all available pages before exploring further.

# WalletConnect Pay Documentation

> Documentation for WalletConnect Pay. Integrate secure crypto payments into your app with step-by-step guides, APIs, and best practices.

export const ProductCard = ({img, href, title, description, model, type}) => {
  return <a href={href} rel="noopener noreferrer" className="group mb-5">
      <div className="flex flex-col rounded-xl md:p-1">
        <div className="w-full h-32 overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800">
          <img src={img} className="w-full h-[calc(100%+4px)] object-cover transition-transform duration-300 group-hover:scale-105 align-center -mt-1" alt={title} loading="lazy" noZoom />
        </div>
        <div className="flex flex-col gap-3 pb-2">
          <h2 className="text-md font-medium text-gray-900 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors mb-[-8px]">
            {title}
          </h2>
          <p className="text-gray-500 dark:text-gray-400 text-sm font-medium">
            {description}
          </p>
          <div className="flex gap-2 mt-2 mb-1">
            {model && <span className="bg-gray-100 dark:bg-[#181817] text-gray-600 dark:text-white rounded-lg px-2 py-1 text-sm font-medium">{model}</span>}
            <span className="bg-primary-light dark:bg-primary-dark text-white dark:text-white rounded-lg px-2 py-1 text-sm font-medium">{type}</span>
          </div>
        </div>
      </div>
    </a>;
};

export const Title = ({children}) => {
  return <div className="text-gray-900 dark:text-gray-200 text-2xl tracking-tight">
      {children}
    </div>;
};

export const Container = ({children}) => {
  return <div className="px-4 lg:px-10 py-14">
      {children}
    </div>;
};

<div className="px-5 divide-y divide-gray-100 dark:divide-white/10">
  <Container>
    <div className="w-full flex flex-col">
      <div className="flex flex-col items-start justify-center w-full max-w-4xl text-left">
        <div className="text-gray-900 dark:text-gray-200 text-4xl tracking-tight">
          WalletConnect Pay
        </div>

        <p className="text-md text-gray-600 dark:text-gray-400 text-left mt-3 mb-4">
          <strong>WalletConnect Pay</strong> is a complete, end-to-end stablecoin and crypto payment solution that allows PSPs and merchants to enable crypto payments from any wallet and any asset through a single, familiar integration.
        </p>
      </div>
    </div>
  </Container>

  <Container>
    <div className="flex flex-col w-full mb-5">
      <p className="text-[#5B616E] dark:text-gray-300 text-md mb-1 mt-3">
        WalletConnect Pay serves Merchants, PSPs, Wallets and eCommerce. Choose your integration method below to quickstart.
      </p>
    </div>

    <CardGroup cols={4}>
      <ProductCard title="Wallet Integration" description="Integrate WalletConnect Pay as a wallet provider." href="/payments/wallets/overview" img="https://mintcdn.com/walletconnect_pay_docs/ik_OxbbniakLFtXJ/images/wallet.png?fit=max&auto=format&n=ik_OxbbniakLFtXJ&q=85&s=8deb116ffcdaa1e71a6ed2cda12d3f16" type="Get started" width="840" height="438" data-path="images/wallet.png" />

      <ProductCard title="Payment Service Providers (PSPs)" description="Enable stablecoin payments in your payments product." href="/payments/psps/overview" img="https://mintcdn.com/walletconnect_pay_docs/ik_OxbbniakLFtXJ/images/merchant.png?fit=max&auto=format&n=ik_OxbbniakLFtXJ&q=85&s=1fe7993a3286a6533c30c7863f7dafa9" type="Get started" width="840" height="438" data-path="images/merchant.png" />

      <ProductCard title="Ecommerce (Checkout)" description="Add stablecoin and crypto payments to your online checkout." href="/payments/ecommerce/overview" img="https://mintcdn.com/walletconnect_pay_docs/ik_OxbbniakLFtXJ/images/ecommerce.png?fit=max&auto=format&n=ik_OxbbniakLFtXJ&q=85&s=aae5cc98ed85562d43980646b4915b60" type="Get started" width="840" height="438" data-path="images/ecommerce.png" />

      <ProductCard title="Merchant Dashboard" description="Integrate WalletConnect Pay in your business as a Merchant." href="/payments/merchant/quickstart" img="https://mintcdn.com/walletconnect_pay_docs/ik_OxbbniakLFtXJ/images/merchant.png?fit=max&auto=format&n=ik_OxbbniakLFtXJ&q=85&s=1fe7993a3286a6533c30c7863f7dafa9" type="Get started" width="840" height="438" data-path="images/merchant.png" />
    </CardGroup>

    <ul className="not-prose pb-[1px] h-1 min-w-full mt-3 overflow-auto" />
  </Container>

  <Container>
    <div className="flex flex-col w-full mb-5">
      <Title>
        How does WalletConnect Pay work?
      </Title>
    </div>

    <video className="w-full" src="https://mintcdn.com/walletconnect_pay_docs/85k_aocjIDF_jNJn/images/videos/wc-pay.mp4?fit=max&auto=format&n=85k_aocjIDF_jNJn&q=85&s=9630ff26119343b3e146f87c098df4ba" poster="/images/videos/wc-pay-poster.png" aria-label="Animated walkthrough of a WalletConnect Pay payment, from merchant QR code to settlement." controls autoPlay muted loop playsInline data-path="images/videos/wc-pay.mp4" />

    1. The merchant presents a WalletConnect QR code with the payment intent.
    2. The customer scans the QR code, either with their wallet or with a standard QR scanner:
       * Scanning with a wallet opens the wallet directly on the payment intent.
       * Scanning with a QR scanner opens a payment gateway URL pre-filled with the payment intent, where the customer connects their wallet using WalletConnect.
    3. The wallet displays the payment intent.
    4. The customer picks the token and network of their choice (e.g., USDC on Ethereum) and approves the payment.
    5. The wallet builds the transaction and sends it to the network.
    6. The merchant receives the transaction result and the customer is notified.
    7. The merchant then receives stablecoin or fiat settlement from the PSP.
  </Container>

  <Container>
    <div className="flex flex-col w-full mb-5">
      <Title>
        Resources
      </Title>

      <p className="text-[#5B616E] dark:text-gray-300 text-md mb-1 mt-3">
        Learn more about WalletConnect Pay and the wider WalletConnect brand.
      </p>
    </div>

    <Columns cols={3}>
      <Card title="API Reference" icon="code" href="/payments/api-reference">
        Dive into the API reference to explore more
      </Card>

      <Card title="WalletConnect Blog" icon="newspaper" href="https://walletconnect.com/blog">
        Read the latest news and updates from the WalletConnect team
      </Card>
    </Columns>
  </Container>
</div>