> For the complete documentation index, see [llms.txt](https://developers.spiffy.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.spiffy.co/js-api/overview.md).

# Overview

The JS Interface API enables you to tap into your checkout's data and modify things via custom code directly on your checkout.

{% hint style="info" %}
**The JavaScript Interface API is different from SpiffyJS** \
which is used for embedding and interacting with Spiffy Elements. This interface API may be introduced into SpiffyJS in the future but in the meantime this is available on your checkouts via custom code.
{% endhint %}

## checkout.ready()

All of your custom code that uses this interface needs to be wrapped in a `ready` call so it runs AFTER the checkout is interactable

<pre class="language-markup"><code class="lang-markup"><strong>&#x3C;script>
</strong>checkout.ready(() => {
    /* ...do your stuff here! */
})
&#x3C;/script>
</code></pre>

## checkout.data

This is the main way to access the current state of the checkout. Access checkout data any time within `checkout.ready` including inside events to inform any of your custom logic.

<pre class="language-markup"><code class="lang-markup"><strong>&#x3C;script>
</strong>checkout.ready(() => {
    console.log(checkout.data)
    /* ...do your stuff here! */
})
&#x3C;/script>
</code></pre>

## checkout.on()

Add event listeners to checkout events

<pre class="language-markup"><code class="lang-markup">&#x3C;script>
checkout.ready(() => {
    checkout.on('change:field', (ev) => {
        /* ...do your stuff here! */
<strong>    })
</strong>})
&#x3C;/script>
</code></pre>

### Available Events

* `change:field` - *when a field value is changed*
* `change:item` - *when an item is added/changed on the order*
* `change:discount` - *when the discount/promo code changes*
* `change:payplan` - *when the selected payment plan changes*
* `change:order` - *when the order changes/total is recalculated*
* `change:paymethod` - *when the selected payment method changes*

## checkout.set()

Change fields and selections on the checkout

```markup
<script>
checkout.ready(() => {
    checkout.set('field', 'name_first', 'Taco')
})
</script>
```

#### Fields

```javascript
checkout.set('field', name, value)
```

* `name: String` - *field name, this is the same name that would be used to set the field via the URL*
* `value: String` - *the value to set the field to*

#### Items

```javascript
checkout.set('item', block_id, index, status)
```

* `block_id: Int` - *block ID that this item exists on as an Option. This can be found by inspecting the block element you're looking to hide*
* `index: Int` - *the index of the Item's option*&#x20;
* `status: Boolean` - *optional*, *default: false - whether we are adding/removing this item*

#### Payment Plan

```javascript
checkout.set('payplan', id)
```

* `id: Int` - *optional, default: null* - *ID of the payment plan to select, null/undefined will set it to single-pay*

#### Discount

```javascript
checkout.set('discount', code)
```

* `code: String` - optional, default: null - promo code to apply, null will remove the currently applied promo

#### Payment Method

```javascript
checkout.set('paymethod', method)
```

* `method: String` - *payment method to select*
  * `paypal` - PayPal payment method
  * `stripe` - credit card via Stripe
  * `expressPay` - ApplePay and other express pay options when available

## checkout.show()/hide()

Hide/show elements on the checkout easily – this can always be done via CSS so this is just a shorthand approach to hiding block, sections, and options.

```markup
<script>
checkout.ready(() => {
    checkout.hide('block', 173)
    checkout.show('block', 449)
})
</script>
```

#### Sections

```javascript
checkout.hide('section', section_id)
checkout.show('section', section_id)
```

* section\_id`: Int` - *ID of the section to hide. This can be found by inspecting the section element you're looking to hide*

#### Blocks

```javascript
checkout.hide('block', block_id)
checkout.show('block', block_id)
```

* block\_id`: Int` - *ID of the block to hide. This can be found by inspecting the block element you're looking to hide*

#### Options

```javascript
checkout.hide('option', block_id, indexes)
checkout.show('option', block_id, indexes)
```

* block\_id`: Int` - *ID of the block to hide. This can be found by inspecting the block element you're looking to hide*
* `indexes: Int|Array` -  Index or array of indexes of the options you want to hide

#### Payment Method

```javascript
checkout.hide('paymethod', method)
checkout.show('paymethod', method)
```

* `method: String` - *payment method to hide/show*
  * `paypal` - PayPal payment method
  * `stripe` - credit card via Stripe
  * `expressPay` - ApplePay and other express pay options when available