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

# Examples

> Browse runnable Cashfree Element code examples on CodePen for cards, UPI, netbanking, and wallet payment UIs, ready to fork and adapt for your integration.

The examples on this page support building a custom payment UI with Cashfree Element. Each is a complete, runnable implementation on CodePen that can be forked and adapted for an integration.

<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?enablejsapi=1" 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 19 17V13" stroke="#33363F" stroke-width="2" stroke-linecap="round" />
      </svg>
    </span>
  </a>
</div>

## Cards

Collect card payments (debit and credit) with a custom UI while keeping card data off the server. The example shows how to mount the card element, handle validation, and complete the payment flow.

<div class="element-example-card">
  <Card href="https://codepen.io/cashfreepayments/pen/eYLWmzZ" img="https://mintcdn.com/cashfreepayments-d00050e9/JZc-JzI9LQpTeTyY/static/payments/custom-web-checkout/examples/card.jpg?fit=max&auto=format&n=JZc-JzI9LQpTeTyY&q=85&s=c9a6effe28fd44ca9b45b82b49541285" width="2232" height="1492" data-path="static/payments/custom-web-checkout/examples/card.jpg">
    Example for building a custom UI for card payments: fork the CodePen and plug in the session and config.
  </Card>
</div>

## UPI

The following examples cover the main UPI flows: intent (app redirect), collect (VPA), and QR code. Choose the one that matches the desired customer payment flow.

### UPI intent

UPI intent opens the customer UPI app to complete the payment. The example demonstrates creating the intent component, initiating the flow, and handling success or failure.

<div class="element-example-card">
  <Card href="https://codepen.io/cashfreepayments/pen/eYLWmBz">
    Example for building a custom UI for UPI intent payments: redirect users to their UPI app and handle the callback.
  </Card>
</div>

### UPI collect

UPI collect lets customers pay by entering their UPI ID (VPA). The example shows how to render the collect component and process payments without leaving the checkout page.

<div class="element-example-card">
  <Card href="https://codepen.io/cashfreepayments/pen/eYLEaJZ">
    Example for building a custom UI for UPI collect: collect VPA and complete the payment in the checkout.
  </Card>
</div>

### UPI QR code

UPI QR displays a QR code that customers scan with their UPI app. The example covers generating the QR, showing it in the UI, and listening for payment status.

<div class="element-example-card">
  <Card href="https://codepen.io/cashfreepayments/pen/KKxmbpL">
    Example for building a custom UI for UPI QR payments: show a scannable QR and complete the payment flow.
  </Card>
</div>

## Net banking

Net banking allows customers to pay via their bank online banking page. The example shows how to list banks, let the user choose one, and redirect them to complete the payment.

<div class="element-example-card">
  <Card href="https://codepen.io/cashfreepayments/pen/qBMmBad">
    Example for building a custom UI for net banking: bank selection and redirect to the bank payment page.
  </Card>
</div>

## Wallets

Wallet payments use supported mobile wallets (e.g. Paytm, PhonePe) for one-tap checkout. The example demonstrates listing wallets and handling the wallet payment flow.

<div class="element-example-card">
  <Card href="https://codepen.io/cashfreepayments/pen/VwGbxYz">
    Example for building a custom UI for wallet payments: wallet selection and completion in the checkout.
  </Card>
</div>