DashQart JS Plugin

Integration

There are two ways to integrate the DashQart button

Include the JS plugin

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

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