Crossmint
Search…
Add Crossmint for Solana - JavaScript
Questions? Contact us at www.crossmint.io/support
If you are not using React, Crossmint offers a VanillaJS solution (using web-components) that works with any other technology.

1. Install crossmint

Go to the root folder of your Candy Machine website project and run
yarn add @crossmint/client-sdk-vanilla-ui
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.2. Import package
You need to choose the way that best fit your project config.
I am using ESModules
I am using CommonJS
I dont use a bundler
import "@crossmint/client-sdk-vanilla-ui";
require("@crossmint/client-sdk-vanilla-ui");
If you are not using any bundler, you can fetch the script directly from a CDN, for example:
<script src="https://unpkg.com/@crossmint/[email protected]/lib/index.global.js"></script>

3. Use package

Now, you can simply place it in 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='{"type":"candy-machine"}'
/>
There, import the crossmint-pay-buttoncomponent, which will show 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:
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.
Copy link
Outline