# Element catalogue

Every Kustom Element, its HTML tag, its attributes and the locales it accepts — payment method display, delivery method display and express buttons, with the include and exclude filters that control what each one lists.

Each element below is a single HTML tag, rendered by the installation script described in
[Adding Elements to your site](/checkout/surfaces/elements/). Nothing here works until that
script is on the page and your domain is registered. Attributes are shared where their
names match, so read the locale rules once and they apply throughout.

## Locale

Every element requires a `locale` attribute, in five characters, as
`language-COUNTRY` — the language in lower case, the country in upper case. An
unsupported value falls back to English rather than failing.

Write `en-SE`, not `en-se`. Some older examples show an all-lowercase form. The
`language-COUNTRY` casing is the one to follow.

| | | | |
|---|---|---|---|
| `cs-CZ` Czech · Czechia | `da-DK` Danish · Denmark | `de-CH` German · Switzerland | `de-DE` German · Germany |
| `en-AT` English · Austria | `en-AU` English · Australia | `en-BE` English · Belgium | `en-CA` English · Canada |
| `en-DE` English · Germany | `en-DK` English · Denmark | `en-FI` English · Finland | `en-FR` English · France |
| `en-GB` English · Great Britain | `en-NL` English · Netherlands | `en-NO` English · Norway | `en-SE` English · Sweden |
| `en-US` English · United States | `es-ES` Spanish · Spain | `es-US` Spanish · United States | `fi-FI` Finnish · Finland |
| `fr-BE` French · Belgium | `fr-CA` French · Canada | `fr-CH` French · Switzerland | `fr-FR` French · France |
| `it-IT` Italian · Italy | `nb-NO` Norwegian Bokmål · Norway | `nl-BE` Dutch · Belgium | `nl-NL` Dutch · Netherlands |
| `pl-PL` Polish · Poland | `pt-PT` Portuguese · Portugal | `sv-FI` Swedish · Finland | `sv-SE` Swedish · Sweden |

## Filtering with include and exclude

Both display elements accept `include` and `exclude`, each a comma-separated list of
identifiers.

- `exclude` hides entries the API returned for your account.
- `include` adds entries the API didn't return — useful for previewing something in
  Playground before it's enabled on your account.
- **`exclude` is applied first.** An identifier in both attributes is hidden.

## Payment method display

Shows the Kustom payment options available for a market. The list is filtered to the
methods actually configured on your account, then adjusted by `include` and `exclude`.

```html
<kustom-payment-method-display locale="en-SE"></kustom-payment-method-display>
```

| Attribute | Required | What it does |
|---|---|---|
| `locale` | Yes | The market whose payment methods to show |
| `include` | No | Identifiers to add even if not returned for your account |
| `exclude` | No | Identifiers to hide |

```html
<kustom-payment-method-display
  locale="en-SE"
  exclude="klarna,swish"
></kustom-payment-method-display>

<kustom-payment-method-display
  locale="en-SE"
  include="applepay,googlepay"
></kustom-payment-method-display>
```

## Delivery method display

Shows the shipping carriers available for a market, drawn from your recent shipping
sessions — so only carriers customers have actually selected appear.

**Requires the Kustom Shipping Assistant** to be configured on your Merchant ID. Without
it the element has no data to draw on.

In Playground the list isn't real. It renders a short static set of carriers so you can
lay the page out without generating shipping sessions first.

```html
<kustom-delivery-method-display locale="en-SE"></kustom-delivery-method-display>
```

| Attribute | Required | What it does |
|---|---|---|
| `locale` | Yes | The market whose carriers to show |
| `include` | No | Carrier identifiers to add even if not returned |
| `exclude` | No | Carrier identifiers to hide |

```html
<kustom-delivery-method-display
  locale="en-SE"
  exclude="postnord,dhl"
></kustom-delivery-method-display>
```

## Express buttons

The one element that isn't purely declarative. The tag places the buttons. A JavaScript
call to `express.initialize` tells them which order they are paying for — and deciding who
creates that order is most of the integration, so it has its own page:
[Add express buttons](/checkout/surfaces/express-buttons/).

```html
<kustom-express-buttons id="express" locale="en-SE"></kustom-express-buttons>
```

| Attribute | Required | What it does |
|---|---|---|
| `locale` | Yes, in practice | The market. Left out, it defaults to a bare `en` with no market |
| `reveal-mode` | No | `progressive` (default) shows each button as it's ready; `full` waits for all of them |

It takes no `include` or `exclude`. Which wallets appear is set in the Portal and narrowed by
market and by the customer's browser.

## Related

- [Adding Elements to your site](/checkout/surfaces/elements/) — the installation this depends on
- [Add express buttons](/checkout/surfaces/express-buttons/) — initializing express buttons and choosing who creates the order
- [Integration models](/checkout/#integration-models) — where Elements fits beside the integration models
- [Shipping Assistant](/checkout/shipping/#shipping-assistant) — required for delivery method display