> ## Documentation Index
> Fetch the complete documentation index at: https://walletconnect-pay-docs-wcagent-nest-api-reference-under-pay.mintlify.site/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, imgDark, 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-white/5">
          <img src={img} className="block w-full h-full m-0 object-cover object-center transition-transform duration-300 group-hover:scale-105 dark:hidden" alt={title} loading="lazy" noZoom />
          <img src={imgDark || img} className="hidden w-full h-full m-0 object-cover object-center transition-transform duration-300 group-hover:scale-105 dark:block" alt={title} loading="lazy" noZoom />
        </div>
        <div className="not-prose flex flex-col gap-1 pt-3 pb-2">
          <h2 className="text-2xl tracking-tight font-medium text-gray-900 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
            {title}
          </h2>
          <p className="text-gray-500 dark:text-gray-400 text-sm font-medium">
            {description}
          </p>
          {(model || type) && <div className="flex gap-2 mt-2 mb-1">
              {model && <span className="bg-gray-100 dark:bg-white/5 text-gray-600 dark:text-white rounded-lg px-2 py-1 text-sm font-medium">{model}</span>}
              {type && <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. Choose your integration method below to quickstart.
        </p>
      </div>
    </div>

    <CardGroup cols={4}>
      <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-wcagent-nest-api-reference-under-pay/ZnSMvehg6yPtiTfL/images/psp.png?fit=max&auto=format&n=ZnSMvehg6yPtiTfL&q=85&s=e8cfb7bf88762dec6e4c4a5e9f375bdc" width="840" height="438" data-path="images/psp.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-wcagent-nest-api-reference-under-pay/ZnSMvehg6yPtiTfL/images/merchant.png?fit=max&auto=format&n=ZnSMvehg6yPtiTfL&q=85&s=1d630645eb400149f2693024e1c6c1a0" width="840" height="438" data-path="images/merchant.png" />

      <ProductCard title="Wallet Integration" description="Integrate WalletConnect Pay as a wallet provider." href="/payments/wallets/overview" img="https://mintcdn.com/walletconnect-pay-docs-wcagent-nest-api-reference-under-pay/ZnSMvehg6yPtiTfL/images/wallet.png?fit=max&auto=format&n=ZnSMvehg6yPtiTfL&q=85&s=4ecfcbb97558bf733c2b8801eabcc8cb" width="840" height="438" data-path="images/wallet.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-wcagent-nest-api-reference-under-pay/ZnSMvehg6yPtiTfL/images/ecommerce.png?fit=max&auto=format&n=ZnSMvehg6yPtiTfL&q=85&s=06e6c49b880076a199781d7a5a4d2714" width="840" height="438" data-path="images/ecommerce.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-wcagent-nest-api-reference-under-pay/ZnSMvehg6yPtiTfL/images/videos/wc-pay-pos-demo.mp4?fit=max&auto=format&n=ZnSMvehg6yPtiTfL&q=85&s=575e06e2d56e79014737fe5f8d1750e3" 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-pos-demo.mp4" />

    <Steps>
      <Step title="The merchant presents a WalletConnect QR code with the payment intent." />

      <Step title="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.
      </Step>

      <Step title="The wallet displays the payment intent." />

      <Step title="The customer picks the token and network of their choice and approves the payment.">
        (e.g. The customer may pick USDC on Ethereum or USDT on Arbitrum)
      </Step>

      <Step title="The wallet builds the transaction and sends it to the network." />

      <Step title="The merchant receives the transaction result and the customer is notified." />

      <Step title="The merchant then receives stablecoin or fiat settlement from the PSP." />
    </Steps>
  </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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.