Skip to main content

Vanilla Javascript

Installation​

To install and and use the declo client in your project, run:

npm install @declo/client

Setup your client​

To create a declo client you need to provide your declo api url and your declo api token. Provide your declo config to the client to get full typesafety.

declo-client.ts
import { DecloConfig } from './declo.config.ts';
import { createClient } from '@declo/client';

export const decloClient = createClient<DecloConfig>({
    url: <YOUR_DECLO_API_URL>,
    token: <YOUR_DECLO_API_TOKEN>
})

Create a basket reference​

To create your basket reference you can do it a few different ways.

Without identifier​

When not supplying any parameters to the basket, you will create a new basket.

declo-basket.ts
import { decloClient } from './declo-client.ts';

const basket = client.basket();

With identifer​

When passing an id, you will use an existing basket. Additionally you you can provide createOnNotFound: true, which will create a new basket for the id, if none was found.

declo-basket.ts
import { decloClient } from './declo-client';

let id = 'basket_id';
const basket = client.basket(id, {
    createOnNotFound: true,
    onBasketIdUpdate: (value) => id = value,
});

With observable​

Lastly you can provide an observable, where the emitted value will be used as the id. This is for example the case, when using our localStorage id helper.

declo-basket.ts
import { decloClient } from './declo-client.ts';
import { localStorage } from '@declo/client';

const id = localStorage('basket_id');

const basket = client.basket(id.get(), {
    createOnNotFound: true,
    onBasketIdUpdate: (value) => id.set(value),
});

Get and listen to the basket​

To get realtime updates of the contents of your basket, use subscribe. This will contain whatever objects, data, etc. that you configured for your basket.

import { emptyBasket } from '@declo/client';
import { basket } from './declo-basket';

const sub = basket.subscribe(basket => {
  // handle the recieved basket here
})

// remember to unsubscribe when you are done
sub.unsubscribe()

Adding objets to the basket​

You can add any objects to your basket, that you configured in the config. If you for example have added product as an object to your config, you can add these to your basket like this:

import { basket } from './declo-basket';

basket.product.set({ id: '123' }) // Adds a single 
basket.product.set({ id: '124', quantity: 2 }) // Adds multiple

// basket.subscribe will emit the updated basket
// and the emitted basket.objects outputs 
// [
//   { 
//     id: '123', 
//     quantity: 1 , 
//     source: { ...data sourced }
//   }, 
//   { 
//     id: '124', 
//     quantity: 2 , 
//     source: { ...data sourced }
//   }, 
// ]

Removing objects from the basket​

Just as you can add the objects you configured, you can remove them as well. Use the remove function or provide quantity 0 to the set function.

import { basket } from './declo-basket';

basket.product.remove({ id: '123' })
basket.product.set({ id: '124', quantity: 0 }) 

// basket.subscribe will emit the updated basket

Setting basket data​

It is also possible to set basket data, that you can configured. For this we provide a setData method. In the example below we have configure the data to consist of name.

import { basket } from './declo-basket';

basket.setData({ name: 'Example' });

// basket.subscribe will emit the updated basket
// and the emitted basket.data outputs { name: "Example" }

Initialize an order​

When you are ready to initialize an order, use the initPayment method. Whatever you have configured to be returned in your config.order.init method in the declo config, will be available as the result. Often this is payment id's used to either redirect to a payment sessions or to open a modal via a sdk etc.

import { basket } from './declo-basket';
import { openPaymentWindow } from 'third-party-provider';

const { yourCustomPaymentId } = await basket.initPayment();

await openPaymentWindow(yourCustomPaymentId);