> ## Documentation Index
> Fetch the complete documentation index at: https://cashfreepayments-d00050e9-theme-update.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Examples

> Complete code examples for building a payment page

## Cards

<Card href="https://codepen.io/cashfreepayments/pen/eYLWmzZ" img="https://mintlify.s3.us-west-1.amazonaws.com/cashfreepayments-d00050e9-theme-update/static/payments/custom-web-checkout/examples/card.jpg">
  An example for building your own UI for collecting card payments online.
</Card>

## UPI Intent

<Card href="https://codepen.io/cashfreepayments/pen/eYLWmBz">
  An example for building your own UI for collecting UPI intent payment.
</Card>

## UPI Collect

<Card href="https://codepen.io/cashfreepayments/pen/eYLEaJZ">
  An example for building your own UI for collecting UPI collect online.
</Card>

## UPI QR Code

<Card href="https://codepen.io/cashfreepayments/pen/KKxmbpL">
  An example for building your own UI for collecting UPI QR payment.
</Card>

## Net Banking

<Card href="https://codepen.io/cashfreepayments/pen/qBMmBad">
  An example for building your own UI for net banking payments online.
</Card>

## Wallets

<Card href="https://codepen.io/cashfreepayments/pen/VwGbxYz">
  An example for building your own UI for wallet payments online.
</Card>

<div class="hidden mb-4" data-table-of-contents="top">
  <iframe height="150" width="100%" class="shadow-2xl rounded-md" src="https://www.youtube.com/embed/LOXUTo9vWOU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />

  <a href="https://www.cashfree.com/devstudio/preview/pg/web/card" target="_blank" class="inline-flex items-center justify-center mt-4 p-4 w-full text-base font-medium text-gray-500 rounded-lg bg-gray-50 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white">
    <span class="flex items-center gap-2">
      Try it in DevStudio

      <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M14 4H20M20 4V10M20 4L12 12" stroke="#33363F" stroke-width="2" />

        <path d="M11 5H7C5.89543 5 5 5.89543 5 7V17C5 18.1046 5.89543 19 7 19H17C18.1046 19 19 18.1046 19 17V13" stroke="#33363F" stroke-width="2" stroke-linecap="round" />
      </svg>
    </span>
  </a>
</div>