Crossmint
Search…
Polygon
Polygon is one of the blockchains supported by Crossmint. Read the instructions below to find out how to integrate our client SDK with your Polygon NFT drop.
Allow your customers to mint NFTs with Polygon using their credit card and email in less than 5 minutes.
The default transaction limit is $750. If your mint price is higher than this or you want to support minting multiple and this would exceed the limit, please contact us at [email protected].

Pre-requisites

  • You must have yarn installed. Install yarn by following these instructions.
  • Your Crossmint Developer Account must be verified.
  • Your contract must be ERC-721 or ERC-1155 compliant and take MATIC as payment. If you have a different contract or use WETH, email us at [email protected].

Obtaining your Crossmint Client ID

To configure the Crossmint button, you will need a Crossmint Client ID. To obtain a Crossmint Client ID, sign up for an account using the Crossmint Developer Console, and register your Polygon contract address.
Before going public and to use the Crossmint client SDK in production, your developer account must be verified.

Verifying your Crossmint Developer Account

First, visit our Crossmint Developer Console. Choose Polygon and register your Contract Address. You'll also need to enter the following information for your drop:
  • ABI section for mint function, the section of your abi file for the mint function in JSON format.
Next, your Crossmint Developer Account must be verified, or else your drop won't work in production. In most cases, verification happens automatically. In very rare cases, we'll reach out to you via email to provide additional information.
See the testing section to learn more about how to test the integration before releasing to production.

Smart Contract Requirements:

To minimize gas fees for your customers, we require that your smart contract meets two criteria:
  1. 1.
    There must be a minting function that allows minting directly to another address different than the one which invoked the contract.
  2. 2.
    A single address must be able to call the mint function unlimited times, but does not need to be able to hold unlimited NFTs.
Your minting function must contain at least one parameter that specifies the recipient address to mint the NFT to. Crossmint needs a mint function that lets the caller specify a different address to mint to.
If your contract is already deployed and doesn't meet this criteria, reach out to us at [email protected].
Let's see some very minimal examples below:

Contract Minting Function Example:

PLEASE NOTE: we plan to merge our EVM addresses soon. If you plan to limit access to a contract method as done in the example below you should allow our ETH and the polygon address for the network you're on. Any questions about this please contact [email protected] or via discord.
function crossmint(address _to) public payable {
require(mintPrice == msg.value, "Incorrect ETH value sent");
require(_tokenIdCounter.current() + 1 <= maxSupply, "No more left");
// NOTE THAT the address is different for ethereum, polygon, and mumbai
// ethereum (all) = 0xdab1a1854214684ace522439684a145e62505233
// polygon mainnet = 0x12A80DAEaf8E7D646c4adfc4B107A2f1414E2002
// polygon mumbai = 0xDa30ee0788276c093e686780C25f6C9431027234
require(msg.sender == 0x12A80DAEaf8E7D646c4adfc4B107A2f1414E2002
|| msg.sender == 0xdab1a1854214684ace522439684a145e62505233,
"This function is for Crossmint only."
);
​
uint256 newTokenId = _tokenIdCounter.current();
_tokenIdCounter.increment();
​
_safeMint(_to, newTokenId);
}
The mint function Crossmint uses can be named anything and contain any number of additional parameters as long as it meets these requirements. You can configure all parameters when minting with our client SDK.

Testing your drop before releasing to production

We support testing on Mumbai. This will let you demo the minting process through Crossmint end-to-end with mock credit cards.
To get started, first create a test contract using our Staging Developer Console. Verification is not necessary for testing purposes. You'll need to create a new account for the staging developer console because it's separate from our primary developer console.
When you register your Contract Address it can be a Mumbai Testnet address.
When testing, use the card number 4242 4242 4242 4242. Use any three-digit CVC and a valid future date, such as 12/34.
Next, ensure that you add the attribute environment="staging" to the Crossmint button so it works when testing. For more information see the section below.
When testing your drop on Mumbai, our recommendation is that you use very low MATIC prices, for example 0.0001.

Integrate the Crossmint Button into your Polygon project

First, go to the root folder of your minting site, and run the following command:
yarn add @crossmint/client-sdk-react-ui
Are you using a different front-end framework or vanilla JavaScript for your drop? We also provide a vanilla JavaScript SDK for you.

Next, go to the main file where your mint button lives and import the client SDK. For example, it is usually named Home.tsx but it can also be named something else.

// Add this import line at the top
import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";
Next, add the CrossmintPayButon component into your app near your minting button. This will show a button to initiate the credit card payment flow. Place this button somewhere close to your minting button, but ensuring that it's visible for users who haven't connected their wallets yet.
// Add this next to your minting button
<CrossmintPayButton
clientId="<YOUR_CLIENT_ID>"
mintConfig={{
price: "<SELECTED_PRICE>",
// ... mint arguments ...
}}
/>
Finally, make sure you replace the following values in the CrossmintPayButton component:
Then inside the mintConfig prop:
  • <SELECTED_PRICE>: The amount it costs to mint the NFT that the user is paying for, denominated in MATIC. For example, if the NFT costs 0.08 MATIC, this value would be the string "0.08"
  • Mint function arguments: you will need to pass the arguments to your mint function to our endpoint through this button. For certain arguments, such as the address of the recipient wallet, you must pass template values that will be used by our system. Currently, the only argument where this is necessary is the argument that specifies the destination address of the mint. The value of this argument must be set to "$CrossmintUserAddress". For example, the mint function mint(address _to, uint256 _mintAmount) would have the following mintConfig:
mintConfig={{
price: "<SELECTED_PRICE>",
_to: "$CrossmintUserAddress",
_mintAmount: 1
}}
Important: be sure to test that the Crossmint button is visible even if a user didn't connect their wallet! Otherwise, your users without wallets won't be able to use it.

Ready to dive deeper?

After you finished integrating the client SDK into your NFT drop website, there's a lot more you can do.
Learn how to customize the Crossmint button's style to fit your theme. Also, you can listen for NFT purchase events and retrieve the user wallet address using webhooks.
​
Copy link
Outline
Pre-requisites
Obtaining your Crossmint Client ID
Verifying your Crossmint Developer Account
Smart Contract Requirements:
Testing your drop before releasing to production
Integrate the Crossmint Button into your Polygon project
Ready to dive deeper?