# Reference

> Every add-to-cart key, cart option and styling option.

## Interface

```ts
interface CartChildItemCreate {
  quantity: number;
  sku: string;
  subscription: boolean;
  subscription_duration: number | null;
  subscription_duration_prepaid: number;
  subscription_end: string | null;
  subscription_frequency: "daily" | "weekly" | "monthly" | "yearly" | null;
  subscription_start: string | null;
  subscription_type: "normal" | "consumable" | "digital" | null;
}

interface CartItemCreate {
  children: CartChildItemCreate | null;
  quantity: number;
  sku: string;
  subscription: boolean;
  subscription_duration: number | null;
  subscription_duration_prepaid: number;
  subscription_end: string | null;
  subscription_frequency: "daily" | "weekly" | "monthly" | "yearly" | null;
  subscription_start: string | null;
  subscription_type: "normal" | "consumable" | "digital"  | null;
}
```

::alert{type="info"}
Some keys were renamed: `subscription_period` is now `subscription_frequency`, `subscription_interval` is now `subscription_duration_prepaid` and `subscription_length` is now `subscription_duration`. The old names are still accepted. See [Deprecated key names](#deprecated-key-names).
::

---

## Keys

### children

- Type: `array`
- Default: `null`

Manually add child items to a parent.

### quantity

- Type: `number`
- Default: `1`

Amount of products added.

### sku

- Type: `string`
- Required

Stock keeping unit.

### subscription

- Type: `boolean`
- Default: `false`

User to determine if the added product is a subscription or not.

### subscription_duration

- Type: `number|null`
- Default: `null`

Specifies the subscription length.

### subscription_duration_prepaid

- Type: `number`
- Default: `1`

Specifies the prepaid length of a subscription. Previously `subscription_interval`.

### subscription_end

- Type: `string|Date|null`
- Default: `null`

Subscription end date.

### subscription_frequency

- Type: `string`
- Default: `null`

Specifies the instalment frequency. Previously `subscription_period`.

```ts
daily | weekly | monthly | yearly;
```

### subscription_start

- Type: `string|Date|null`
- Default: `null`

Subscription start date.

### subscription_type

- Type: `string|null`
- Default: `null`

Specifies the type of the subscription as normal or consumable.

```ts
normal | consumable | digital;
```

### Deprecated key names

The old names are still accepted and translated by the API. If a payload has both, the new name wins.

| Use | Instead of |
| --- | ---------- |
| `subscription_frequency` | `subscription_period` |
| `subscription_duration` | `subscription_length` |
| `subscription_duration_prepaid` | `subscription_interval` or `subscription_period_interval` |

---

## Cart options

### default_locale

- Type:  `null | 'de' | 'el' | 'en' | 'es' | 'fr' | 'it' | 'nl' | 'no' | 'sv'`
- Default: `null`

Sets preferred cart locale in addition to localized redirect url to checkout.
NB! This option will override the "preferred language of the user".
Only use this option if you want to force a specific language on initial page load.


### detached

- Type: `boolean`
- Default: `false`

Detaches cart from window edges.

### persistent

- Type: `boolean`
- Default: `false`

Opens cart on page load.

### right

- Type: `boolean`
- Default: `false`

Position cart right or left.

### tinted

- Type: `boolean`
- Default: `false`

Tinted backdrop when cart is open.

### show_sum_purchases
- Type: `boolean`
- Default: `true`

Show sum of purchases.

### show_sum_subscriptions
- Type: `boolean`
- Default: `true`

Show sum of subscriptions.

### show_sum_total
- Type: `boolean`
- Default: `true`

Show sum total.

---

## Styling options

CSS variables are used to style the cart. The following variables are available:

### border

Influences border of buttons, inputs and product cards.

### border_radius

Influences border radius of all elements.

### box_shadow

Influences box shadow of buttons, inputs & product cards.

### button_cart_primary
- Type: `<color>`

Background color for the predefined "circuly-cart-button" element. 
([Buttons](https://docs.development.circuly.io/cart/v1/buttons))

### button_cart_text_primary
- Type: `<color>`

Text color for the predefined "circuly-cart-button" element.
([Buttons](https://docs.development.circuly.io/cart/v1/buttons))

### button_checkout_primary
- Type: `<color>`

Checkout button background color.

### button_checkout_text_primary
- Type: `<color>`

Checkout button text color.

### button_primary
- Type: `<color>`

Button background color.

### chip_primary
- Type: `<color>`

Chip background color for the predefined "circuly-cart-button" element.
([Buttons](https://docs.development.circuly.io/cart/v1/buttons))

### font_family

Font family.

### font_weight

Font weight.

### primary
- Type: `<color>`

Influences the background color of the cart.

### product_card_primary
- Type: `<color>`

Product card background color.

### secondary
- Type: `<color>`

Influences the product sheet background color.

### text_primary
- Type: `<color>`

Text primary color.

### text_secondary
- Type: `<color>`

Text secondary color, used on buttons, and text such as subscription dates and attributes.