# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.spiffy.co/js-api/overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.