> ## Documentation Index
> Fetch the complete documentation index at: https://crossmint-wallets-docs-2-5.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Dynamic Price and Quantity
> Details about implementing dynamic functionality into the Checkout
See the below examples to understand how to implement dynamic pricing or quantity into your dApp.
The examples below use the [Hosted Checkout](/payments/pay-button/overview), but the same approach is compatible
with the [Embedded Checkout](/payments/embedded/overview) as well.
```jsx React theme={null}
import { useState } from 'react';
import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";
function App() {
const [mintAmount, setMintAmount] = useState(1);
const nftCost = 0.001;
const projectId = '_YOUR_PROJECT_ID_';
const collectionId = '_YOUR_COLLECTION_ID_';
const handleDecrement = () => {
if (mintAmount <= 1) return;
setMintAmount(mintAmount - 1);
}
const handleIncrement = () => {
if (mintAmount >= 3) return;
setMintAmount(mintAmount + 1);
}
return (