How to mint NFTs using Crossmint API?

Question

I am developing NFT marketplace integrating Crossmint API now. I added crossmintPayButton to my website like the following.

import { CrossmintPayButton } from '@crossmint/client-sdk-react-ui';
...
<CrossmintPayButton
    clientId="..."
      environment='staging'
      mintConfig={{
      type: 'erc-721',
      totalPrice: price * quantity,
      _price: price
      _quantity: quantity,
      _tokenURI: tokenURI
    }}
/>

How can I write mint function of contract to mint NFTs? Please, help me.

Answer 1

So the answer to this question is a bit involved, but I'll give you the high level. You'll want to inherit from OpenZeppelin contracts most likely to help minimize the potential mistakes.

Here is an example mint function that will work with Crossmint:

    function mint(address _to, uint256 _quantity) 
        external  
        payable
        isCorrectPayment(_quantity)
        isAvailable(_quantity) 
    {
        mintInternal(_to, _quantity);
    }

    function mintInternal(address _to, uint256 _quantity) internal {
        for (uint256 i = 0; i < _quantity; i++) {
            uint256 tokenId = nextId.current();
            nextId.increment();

            _safeMint(_to, tokenId);

            emit Mint(tokenId);
        }
    } 

    modifier isCorrectPayment(uint256 _quantity) {
        require(msg.value == (price * _quantity), "Incorrect Payment Sent");
        _;
    }

    modifier isAvailable(uint256 _quantity) {
        require(nextId.current() + _quantity <= MAX_SUPPLY, "Not enough tokens left for quantity");
        _;
    }

All of this code is taken from a sample starter NFT contract you can check out here: https://github.com/dmulvi/evm-721-starter

If you implement this contract you'll need to change your button code slightly to look like this:

    <CrossmintPayButton
        clientId="_YOUR_CROSSMINT_CLIENT_ID_"
        environment="staging"
        mintConfig={{
            totalPrice: "0.001",
            _quantity: "1"
    }}
    />