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

# Overview

> Add a button to your site which opens the checkout in a pop-up or new tab

<Frame type="simple">
  <img src="https://mintcdn.com/crossmint/QK6rWfcUCMmvIQPT/images/payments/pay-button-v3/quickstart/hello-world.png?fit=max&auto=format&n=QK6rWfcUCMmvIQPT&q=85&s=e342b7faad38fff50b949787e3d5a320" alt="Crossmint Hosted Checkout Demo" width="1919" height="941" data-path="images/payments/pay-button-v3/quickstart/hello-world.png" />
</Frame>

<Info>
  The hosted variant of checkout is only available for React applications. If you're using a different framework like
  Vite or React Native, you can use the [Headless version](/payments/headless/overview) instead.
</Info>

For general information about Crossmint's Payments product, see the [introduction](/payments/introduction). This guide
will focus on the features specific to the Hosted modality.

## When is Hosted Checkout the best fit?

* **You want to launch quickly and don't need deep customization or a fully native user experience**.

## Get Started

<CardGroup cols={2}>
  <Card title="Quickstart" icon="bolt" color="#E6DB63" href="/payments/pay-button/quickstart">
    Start selling digital assets in 5 minutes.
  </Card>

  <Card title="Talk to an expert" icon="message" iconType="duotone" color="#ADD8E6" href="https://www.crossmint.com/contact/sales">
    Contact our sales team for advanced support.
  </Card>
</CardGroup>

## Advanced Topics

<CardGroup cols={4}>
  <Card title="Marketplaces & Launchpads" icon="cart-shopping" iconType="duotone" color="FF2981" href="/payments/advanced/marketplaces-and-launchpads" />

  <Card title="SDK Reference" icon="gear" iconType="duotone" color="919191" href="/payments/embedded/reference/react" />

  <Card title="Purchasing Multiple Assets" icon="rectangle-vertical-history" iconType="duotone" color="77DFE2" href="/payments/pay-button/guides/item-selection#multiple-item-orders" />

  <Card title="Bring your own Collection" icon="file-import" iconType="duotone" color="BB87FC" href="/payments/guides/register-collection" />

  <Card title="USDC Contracts" icon="circle-dollar" iconType="duotone" href="/payments/advanced/usdc-support" />

  <Card title="Checkout Localization" icon="globe" iconType="duotone" color="194ABA" href="/payments/pay-button/customize/localization" />

  <Card title="Webhooks" icon="bars-progress" iconType="duotone" color="EEA424" href="/payments/advanced/webhooks" />

  <Card title="Testing Tips" icon="flask" iconType="duotone" color="CCBE17" href="/payments/advanced/testing-tips" />
</CardGroup>