crossmint-client-sdk-vue-ui v0.0.3
Crossmint.io Client SDK for Vue.js
The Crossmint SDK allows you to offer wallet-less credit card purchases on your NFT drop. It takes 5 lines of code and 5 min to integrate, and is free to use for the seller. You’ll get the sales proceeds in SOL/ETH as if the user was paying with their own wallet.
Supported chains:
- Solana
- Polygon (for docs: contact us at sales at crossmint.io)
- Ethereum L1 (end of March 2021)
To get started:
- Fill out our form in https://www.crossmint.io/developers/onboarding (we'll review your project in under 24hr!)
- Follow the instructions below to integrate with your code
Demo of the user experience:
Quick Setup (Vue.js - Vite / Vue CLI)
1. Install
yarn add crossmint-client-sdk-vue-ui2. Set up
Go to file where you want to integrate Crossmint button. For example, App.vue.
There, just import the Pay with CrossmintPayButton, and add it in the UI.
Important: If you have Candy Machine UI, be sure to test that the Crossmint button is visible even if a user didn't connect their wallet! Else, your users without wallets won't be able to use it.
<script>
import { CrossmintPayButton } from 'crossmint-client-sdk-vue-ui';
</script>
<template>
<CrossmintPayButton
client-id="<YOUR_CLIENT_ID>"
collection-title="<TITLE_FOR_YOUR_COLLECTION>"
collection-description="<DESCRIPTION_OF_YOUR_COLLECTION>"
collection-photo="<OPT_URL_TO_PHOTO_COVER>"
/>
</template>Finally, make sure you replace the following values in the CrossmintPayButton component:
<TITLE_FOR_YOUR_COLLECTION>: Example: "My NFT collection"<DESCRIPTION_OF_YOUR_COLLECTION>: Example: "The most fun community of 999 generative art monkeys in Solana"<OPT_URL_TO_PHOTO_COVER>: Full URL to an image for your collection. Example: "https://i.picsum.photos/id/542/200/300.jpg?hmac=qD8M4ejDPlEc69pGT21BzB7CDiWOcElb_Ke7V8POjm8"<YOUR_CLIENT_ID>: This is the clientId you received after filling in the onboarding form
3. Components
CrossmintPayButton required
CrossmintPayButton is a button component that is used to trigger the opening of the CrossMint popup and modal overlay.
| propName | default | required | description |
|---|---|---|---|
| clientId | undefined | true | Your client integration identifier |
| collectionTitle | undefined | false | This will be shown to the user during the checkout process. Max length: 120 |
| collectionDescription | undefined | false | This will be shown to the user during the checkout process. Max length: 24 |
| collectionPhoto | undefined | false | This will be shown to the user during the checkout process. Preferred resolution: 200x200 px |
| theme | dark | false | Use this to specify one of our default themes. Can be light, dark |
| ...props | undefined | false | All valid html button props can be added to the button |
CrossmintStatusButton
CrossmintStatusButton is a button component that is used to display Crossmint onboarding status. Normally shouldn't be visible to page visitors.
| propName | default | required | description |
|---|---|---|---|
| clientId | undefined | true | Your client integration identifier |
| theme | dark | false | Use this to specify one of our default themes. Can be light, dark |
| ...props | undefined | false | All valid html button props can be added to the button |