Crossmint checkout button integration isn't working

Question

I'm trying to use crossmint button in my react frontend to enable credit card payments, but I don't know what's wrong with my implementaton, I get this error:

"An error has occurred Try again later. If the error persists contact us at crossmint.io/help"

error img

From the frontend this is what I have:

                <CrossmintPayButton
                  clientId="028123eb-26ca-4a4e-9b80-02bd5719eb2e"
                  mintConfig={{
                    type: "erc-721",
                    totalPrice: "70",
                    _mintAmount: "1",
                  }}
                  mintTo={walletConnected}
                  environment="staging"
                />

You can take a look at the smart contract here in mumbai testnet: https://mumbai.polygonscan.com/address/0x3503A639fFB7784836069DCa703057966729abbE#readContract

The function which must be called is this one:

function crossmint(address _to, uint256 _mintAmount) external payable {
        uint256 totalSupply = totalSupply();

        if (msg.sender != crossmintAddress) revert crossmintErr();
        if (getWhitelistOn()) require(isWhitelisted[_to] || _to == owner());
        if (paused && _to != owner()) revert pausedErr();
        if (_mintAmount <= 0 || _mintAmount > maxMintAmount) revert mintAmountErr();
        if (totalSupply + _mintAmount > maxSupply[mintPhase]) revert totalSupplyErr();

        uint256 payAmount = getMintPayAmount(_to, _mintAmount, cost[mintPhase]);

        if (_to != owner() && msg.value < payAmount.getConversionRate(priceFeed))
            revert payAmountErr();

        unchecked {
            for (uint256 i = 1; i <= _mintAmount; i++) {
                _safeMint(_to, totalSupply + i);
                emit NftMinted(totalSupply + i, _to);
            }
        }
    }

This crossmint function is equal to the mint function which works perfect, but checks msg.seder to be equal to crossmintAddress. I double checked that crossmintAddress is set to "0xDa30ee0788276c093e686780C25f6C9431027234" as specified in the docs. What is interesting to me is that as you can see in the error, totalPrice is empty in th UI, but I can't find the error. Any help with this is really appreciated.

UPDATE:

I found out that the parameter mintTo was receiving a wrong value and not the actual recipient address.

After changing that, I get a revert message

Contract error: execution reverted, no custom error mapping or message found, contact Crossmint support to set up error mapping

revert error

So my question is: is it possible that the transaction is reverted because it doesn't read the totalPrice correctly? On the transaction preview totalPrice seems to be empty.

Answer 1

It's likely that one of the many revert() calls in your mint function is throwing the error. You can contact us in our public discord to setup an error mapping.

Alternatively you can switch these out for require statements that return a specific message, which will be displayed to you in the checkout popup.

For example,instead of:

if (msg.sender != crossmintAddress) revert crossmintErr();

update to:

require(msg.sender == crossmintAddress, "sender is not crossmint")

Then you'll know which line of your mint function is reverting and will be able to better troubleshoot.