# @dashqart/js-plugin

> ## Integration

Latest version **0.3.2** (published 2022-11-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dashqart/js-plugin
pnpm add @dashqart/js-plugin
yarn add @dashqart/js-plugin
bun add @dashqart/js-plugin
```

## Health

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

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

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.2 |
| Published | 2022-11-22 |
| First published | 2022-11-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 52.7 KB |
| Known vulnerabilities | 0 (+23 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | dashqart |

## Links

- npm: https://www.npmjs.com/package/@dashqart/js-plugin
- npm.io page: https://npm.io/package/@dashqart/js-plugin

## Dependencies (3)

- [yup](https://npm.io/package/yup.md) v1.0.0-beta.4
- [axios](https://npm.io/package/axios.md) ^0.27.2
- [humps](https://npm.io/package/humps.md) ^2.0.1

## Recent versions

- 0.3.2 (latest) — 2022-11-22
- 0.3.1 — 2022-11-22
- 0.3.0 — 2022-11-22
- 0.2.3 — 2022-11-22
- 0.2.2 — 2022-11-22
- 0.2.1 — 2022-11-22
- 0.2.0 — 2022-11-12
- 0.1.1 — 2022-11-09
- 0.1.0 — 2022-11-08
- 0.0.14 — 2022-11-06
- 0.0.13 — 2022-11-06
- 0.0.12 — 2022-11-06
- 0.0.11 — 2022-11-06
- 0.0.10 — 2022-11-06
- 0.0.9 — 2022-11-06
- … 7 more at https://npm.io/package/@dashqart/js-plugin/versions

## README

# DashQart JS Plugin

## Integration

There are two ways to integrate the DashQart button

## Include the JS plugin

<script src="https://js.dashqart.co/v1/dashqart.min.js"></script>

### Declarative way

```
<q-checkout-button 
    merchant-id="c9895061-e989-41de-a3bd-e3d9e9308051"
    requires-shipping="true"
    shipping-countries="['US', 'SG', 'PH']"
    shipping-options="[{}]"
    products='[{"id": "PROD-0001", "sku": "PRD-01", "name": "Product Name", "image": "https://image.com", "quantity": 1, "amount": 100, "variant": {"color": "red"}}]'>
</q-checkout-button>
```

### Programmatic way

#### Install plugin

`yarn add @dashqart/js-plugin` 

```javascript
import DashQart from '@dashqart/js-plugin';

const dq = DashQart();
const cart = await dq.checkout({
    merchantId: 'your-merchant-uuid-here',
    currency: "sgd",
    livemode: true,
    cartItems: [
        {
            "id": "1",
            "name": "sample",
            "sku": "1",
            "quantity": 1,
            "amount": 10
        }
    ],
    metadata: {}
}):
await cart.open();
````


## Listen to events

```
window.addEventListener('dashqartOnFinishOrder', function () {
    alert('order finished):
});
```


## Working on the iframe popup design

1. Make changes in the src/ files then run yarn build -- this will create a dist folder
2. cd dist/ then run python3 -m http.server 8000
3. cd sample then run python3 -m http.server 8080
4. Open chrome and access localhost:8080, you'll see a checkout button. Click it to simulate the checkout flow

---
_Source: https://npm.io/package/@dashqart/js-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._