The examples below use the Hosted Checkout, but the same approach is compatible
with the Embedded Checkout as well.
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 (
<div>
<button onClick={handleDecrement}> - </button>
<input
readOnly
type="number"
value={mintAmount}
/>
<button onClick={handleIncrement}> + </button>
<CrossmintPayButton
projectId={projectId}
collectionId={collectionId}
environment="staging"
mintConfig={{
type: "erc-721",
totalPrice: (nftCost * mintAmount).toString(),
_quantity: mintAmount // the `_quantity` property should match what is in your mint function
// your custom minting arguments...
}}
/>
</div>
);
}
export default App;
<html>
<head>
<title>Variable QTY</title>
<script src="https://unpkg.com/@crossmint/client-sdk-vanilla-ui@latest/dist/index.global.js"></script>
<style>
#mintQty {
background: #efefef;
text-align: center;
border-radius: 3px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<button class="change-qty" id="decrement"> - </button>
<input
readonly
id="mintQty"
type="number"
value=1
/>
<button class="change-qty" id="increment"> + </button>
<crossmint-pay-button
id="xmint-btn"
projectId="_PROJECT_ID_"
collectionId="_COLLECTION_ID_"
environment="staging"
mintConfig='{
"type": "erc-721",
"totalPrice": "0.001",
"_quantity": 1
}'
/>
<script>
document.addEventListener('click', function (event) {
// ignore the click event if it wasn't a change qty button
if (!event.target.matches('.change-qty')) return;
// set up min/max values for minting quantity
const MIN = 1;
const MAX = 5;
// get current value of qty
let qtyEl = document.getElementById('mintQty');
let qty = Number(qtyEl.value);
// increment or decrement the mintQty input
if (event.target.id === 'decrement') {
qty = (qty > MIN) ? --qty : qty;
}
if (event.target.id === 'increment') {
qty = (qty < MAX) ? ++qty : qty;
}
// update the input display
qtyEl.value = qty;
// calculate the totalPrice
let totalPrice = qty * 0.001; // where 0.001 is the cost per NFT
// make sure everything looks good so far
console.log('quantity:', qty);
console.log('totalPrice:', totalPrice);
// setup the new mintConfig
let mintConfigObj = {
type: "erc-721",
totalPrice: totalPrice.toString(),
_quantity: qty
}
let mintConfigJson = JSON.stringify(mintConfigObj);
// finally update the button config
document.getElementById('xmint-btn').setAttribute('mintConfig', mintConfigJson);
}, false);
</script>
</body>
</html>