# Elements

### Checkouts

By default SpiffyJS will automatically convert any links to your checkouts into popups on your page but you can also embed checkouts in-line as well using the checkout element:

```html
<spiffy-checkout url="https://example.spiffy.co/checkout/my-checkout"></spiffy-checkout>
```

**Properties**

* `url` (required) - the URL of the checkout you want to load in-line. Also accepts URL parameters for passing additional data to your checkout

**Compatibility Mode**

```html
<div class="spiffy-checkout__container" data-url="https://example.spiffy.co/checkout/my-checkout"></div>
```

### Portals

Embed customer and affiliate portals into your own pages with the portal element:

```html
<spiffy-portal type="customer"></spiffy-portal>
```

**Properties**

* `type` (default `customer`) - toggle the type of portal to embed. Valid values are `customer` or `affiliate`
* `token` (default `null`) - pass in an authentication token for single sign-on functionality. \
  \&#xNAN;*This requires an API connection with Spiffy to request customer portal tokens*

**Compatibility Mode**

```html
<div class="spiffy-portal__container" data-type="customer"></div>
```

### Affiliate Registration

Embed your affiliate registration form

```html
<spiffy-affiliate-register></spiffy-affiliate-register>
```

**Compatibility Mode**

```html
<div class="spiffy-affiliate-register__container"></div>
```