# Quickstart (/docs/quickstart)

<Steps>
<Step>

### Get a publishable key [#get-a-publishable-key]

In Cashiar, open **Settings › Developers** and choose **Create key**. You need the **Online store** add-on, and the store must be open (**Settings › Online store**).

Your key looks like `pk_live_Fd8sK2…`. It is meant for browsers and apps: you can commit it to your frontend.

</Step>
<Step>

### Make your first request [#make-your-first-request]

List the shop's products:

<Tabs items={['curl', 'JavaScript', 'Dart']}>
<Tab value="curl">

```bash
curl https://api.cashiar.app/v1/storefront/products?limit=3 \
  -H "Authorization: Bearer pk_live_your_key"
```

</Tab>
<Tab value="JavaScript">

```js
const res = await fetch(
  'https://api.cashiar.app/v1/storefront/products?limit=3',
  { headers: { Authorization: 'Bearer pk_live_your_key' } },
);
const { items, nextCursor } = await res.json();
```

</Tab>
<Tab value="Dart">

```dart
import 'dart:convert';
import 'package:http/http.dart' as http;

final res = await http.get(
  Uri.parse('https://api.cashiar.app/v1/storefront/products?limit=3'),
  headers: {'Authorization': 'Bearer pk_live_your_key'},
);
final page = jsonDecode(res.body);
```

</Tab>
</Tabs>

You get a page of products, each with its versions, prices and stock:

```json title="200 OK"
{
  "items": [
    {
      "id": "dabe0026-3fbe-427e-afc3-7c509f68d462",
      "name": "Amoxiclav",
      "unitName": "Sachet",
      "category": "Tablets",
      "imageUrl": "https://api.cashiar.app/photos/orgs/…/products/….png",
      "priceTypes": [{ "id": null, "name": "Retail" }],
      "versions": [
        {
          "variantId": "1db29704-09ee-4aa3-95cc-c424173e6d5a",
          "name": null,
          "sellingPrice": 1200,
          "inStock": true,
          "sellingUnits": [
            { "id": "c22d51bf-…", "name": "Pack of 10", "sellingPrice": 12000, "prices": [] }
          ],
          "prices": [{ "priceListId": null, "sellingPrice": 1200 }]
        }
      ],
      "addonGroups": [],
      "soldOut": false
    }
  ],
  "nextCursor": "dabe0026-3fbe-427e-afc3-7c509f68d462"
}
```

`sellingPrice: 1200` is **GH₵ 12.00**: amounts are in pesewas.

</Step>
<Step>

### Show them [#show-them]

A minimal product list in React:

```tsx title="Products.tsx"
import { useEffect, useState } from 'react';

const KEY = 'pk_live_your_key';
const money = (pesewas: number) =>
  new Intl.NumberFormat('en-GH', { style: 'currency', currency: 'GHS' }).format(
    pesewas / 100,
  );

export function Products() {
  const [products, setProducts] = useState([]);
  useEffect(() => {
    fetch('https://api.cashiar.app/v1/storefront/products', {
      headers: { Authorization: `Bearer ${KEY}` },
    })
      .then((res) => res.json())
      .then((page) => setProducts(page.items));
  }, []);
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>
          {p.name}: {money(p.versions[0].sellingPrice)}
          {p.soldOut && ' (sold out)'}
        </li>
      ))}
    </ul>
  );
}
```

</Step>
<Step>

### Place an order [#place-an-order]

```bash
curl https://api.cashiar.app/v1/storefront/orders \
  -H "Authorization: Bearer pk_live_your_key" \
  -H "Content-Type: application/json" \
  -H "Idempotency-Key: 6f1c2a9e-order-1" \
  -d '{
    "customerName": "Kojo Mensah",
    "customerPhone": "024 555 0199",
    "fulfilment": "pickup",
    "lines": [{ "variantId": "1db29704-09ee-4aa3-95cc-c424173e6d5a", "quantity": 2 }]
  }'
```

The order appears in the shop straight away. Read on in [Cart and checkout](/docs/guides/cart-and-checkout).

</Step>
</Steps>

## Next steps [#next-steps]

<Cards>
  <Card title="Authentication" href="/docs/concepts/authentication">
    Keys, allowed sites and what a key can do.
  </Card>
  <Card title="Product page" href="/docs/guides/product-page">
    Versions, pack sizes, price lists and extras.
  </Card>
  <Card title="React" href="/docs/frameworks/react">
    A typed client and hooks for React.
  </Card>
  <Card title="Flutter" href="/docs/frameworks/flutter">
    Build a shop app in Dart.
  </Card>
</Cards>