Crossmint
Search…
Add Crossmint for Ethereum - JavaScript
Questions? Contact us at www.crossmint.io/support.
Crossmint offers a VanillaJS solution (using web-components) that works with any other framework or technology.

1. Install Crossmint

Go to the root folder of your minting website and run the following command:
yarn add @crossmint/client-sdk-vanilla-ui
If you're not using a bundler, you can fetch the script directly from a CDN:
<script src="https://unpkg.com/@crossmint/[email protected]/lib/index.global.js"></script>
Migration to v0.2.x
The way Crossmint handles collection title, description, and image have changed to provide more security. Check out the migration guide to update your code.
Choose the way that best fits your project's configuration.
I am using ESModules
I am using CommonJS
import "@crossmint/client-sdk-vanilla-ui";
require("@crossmint/client-sdk-vanilla-ui");

3. Use package

Now, you can add the <crossmint-pay-button> web component to your HTML:
<!--
Place the button somewhere where it's visible even
if the user hasn't connected their wallet
-->
<crossmint-pay-button
clientId="<YOUR_CLIENT_ID>"
mintConfig='{"count":"<NUMBER_OF_NFTS>","totalPrice":"<SELECTED_PRICE>",/* ... your custom mint arguments... */}'
/>
Important: the props are case-sensitive. Ensure that they are written in camelCase:
collection-title
✅ collectionTitle
The crossmint-pay-buttoncomponent shows a button to initiate the credit card payment flow. Place this button somewhere close to your minting button. Ensure that it's visible for users who haven't connected their wallets yet.
Finally, add your own data to the button props:
Then inside the mintConfig prop:
Important: The formatting of the mintConfig attribute is very specific. The entire attribute value should be enclosed in single quotes ', while individual values enclosed in double quotes ". Example: mintConfig='{"key": "value"}'
  • <NUMBER_OF_NFTS>: Crossmint supports minting one or more NFTs in a single transaction. This is where you enter the number of NFTs to mint. The value should be a string and therefore wrapped in strings. Example: count: "2".
  • <SELECTED_PRICE>: The amount it costs to mint the total amount of NFTs that the user is paying for, denominated in ETH. For example, if count is "1" and the NFT costs 0.08 ETH, this value would be the string "0.08". If count is "2" and the NFT costs 0.08 ETH this value would be the string "0.16". Ensure this value is a string and not a number.
To reiterate, the totalPrice variable should contain the total price of all NFTs to mint in a single transaction.
  • Your custom minting arguments: You can optionally pass any other arguments required for your minting function here in mintConfig. An example could be a type argument that determines some property of the NFT. These will be passed into your minting function and correspond with your parameters in the function.
Copy link
Outline