# crossmint-client-sdk-vue-ui

> Crossmint.io client SDK for Vue 3

Latest version **0.0.3** (published 2022-03-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install crossmint-client-sdk-vue-ui
pnpm add crossmint-client-sdk-vue-ui
yarn add crossmint-client-sdk-vue-ui
bun add crossmint-client-sdk-vue-ui
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2022-03-03 |
| First published | 2022-03-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 69.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Viktors Ņikiforovs |
| Maintainers | viktorsn |

## Links

- npm: https://www.npmjs.com/package/crossmint-client-sdk-vue-ui
- Repository: https://github.com/NViktors/crossmint-client-sdk-vue-ui
- Homepage: https://github.com/NViktors/crossmint-client-sdk-vue-ui#readme
- Issues: https://github.com/NViktors/crossmint-client-sdk-vue-ui/issues
- npm.io page: https://npm.io/package/crossmint-client-sdk-vue-ui

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.2.31
- [uuid](https://npm.io/package/uuid.md) ^8.3.2

## Recent versions

- 0.0.3 (latest) — 2022-03-03
- 0.0.2 — 2022-03-03
- 0.0.1 — 2022-03-03

## README

# 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:

1. Fill out our form in https://www.crossmint.io/developers/onboarding (we'll review your project in under 24hr!)
2. Follow the instructions below to integrate with your code

## Demo of the user experience:

https://vimeo.com/671525311

---

## Quick Setup (Vue.js - Vite / Vue CLI)

### 1. Install

```shell
yarn add crossmint-client-sdk-vue-ui
```

### 2. 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.

```vue
<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](https://www.crossmint.io/developers/)

## 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                |

---
_Source: https://npm.io/package/crossmint-client-sdk-vue-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._