CrossmintPayButton integration showing errors but no specific error message. How to track down the issue?

Question

I am trying to integrate the CrossmintPayButton from the @crossmint/client-sdk-react-ui package and the button opens the crossmint gateway but shows an error. I cannot backtrace the error since there is no specific error message. Has anyone also faced this issue before? Can someone from the Crossmint team help on this?

Here is the CrossmintPayButton component configuration.

<CrossmintPayButton
  collectionId="c0fd62fc-cb1b-4242-9d60-c55834cf85a0"
  environment="staging"
  getButtonText={(connecting) => (connecting ? "Connecting" : title)}
  mintConfig={{
    type: "erc-721",
    totalPrice: "100",
    amount: [1],

    // Custom values
    EventNFTCollectionAddress: "0xba872bfc6fb9b7f67a6b28cc018210a523982797",
    ticmintDisplayAmount: "1",
    ticketType: ["79b4b2b9-ad69-41f7-af11-100902756c4b"],
    seatNumbers: [],
    serverSignature: "0x48687d282116f41fa6c553eb1d7d379fffea75dc49c47758ddc8de51460d61ba1b0fa09ad9febb6c78ab88fb7c24561b6109824e713655376e23aaa8f4241a491c",
    to: "0xC8efCcCb0514ca741f85Fd638150384dbcB9877C",
  }}
  projectId="2b9e972d-c6ce-458d-a772-b3000dd45641"
  {...buttonProps}
/>

buttonProps={{
 className: "crossmint-pay-button",
}}

Error message screenshot: Most of the time, I get this error

At times, this error is shown but it gets fixed without changes any configuration after sometime

I expect crossmint pay button to list the item purchasing and payment to go through.

EDIT 2:

<CrossmintPayButton
  {...buttonProps}
  collectionId="c0fd62fc-cb1b-4242-9d60-c55834cf85a0"
  environment="staging"
  getButtonText={(connecting) => (connecting ? "Connecting" : title)}
  mintConfig={{
    type: "erc-721",
    totalPrice: "1",
    EventNFTCollectionAddress:
    "0x3023abd5abe9e54edbd3eda6b5fe08809e1bce90",
    ticketType: ["70231b9d-60ad-4a9f-849b-0c788f69fe19"],
    amount: [1],
    seatNumbers: [],
    ticmintDisplayAmount: "1",
    quantity: "1",
    serverSignature: "0x48687d282116f41fa6c553eb1d7d379fffea75dc49c47758ddc8de51460d61ba1b0fa09ad9febb6c78ab88fb7c24561b6109824e713655376e23aaa8f4241a491c",
    to: "0xC8efCcCb0514ca741f85Fd638150384dbcB9877C",
  }}
  projectId="2b9e972d-c6ce-458d-a772-b3000dd45641"
/>

EDIT 3: Issue has been resolved. Thank you for the help.

EDIT 4: Is there any way to get the events or success/failure details for CrossmintPayButton component other than by redirect URLS?

Suggestion: Crossmint dev docs needs to be improved.

Answer 1

First of all, I recognize Crossmint needs to return more actionable error messages to the end developer. I'm working on that internally! I'll answer this question from the perspective of what to do when you get a generic "Execution Reverted" error message while testing the checkout.

1. The easiest troubleshooting step is always to ensure you can actually call the function you've registered with Crossmint directly. In your case the function registered is buy, but there are not any transactions using that as I type this. With a valid transaction you know that you're passing correct arguments to the contract and there is nothing else reverting. In your case the contract is returning "Sale Has Ended". This could be discovered via testing a normal buy before integrating Crossmint.

2. If the first step doesn't reveal anything you should try simulating the transaction using a tool like tenderly.co. It is very good at getting the exact reason a transaction failed and showing you where in the code the reversion was thrown.

The solution in your case it update the smart contract to have an active sale phase.