Overview

Spiffy Checkout JavaScript interface API

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

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.

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

<script>
checkout.ready(() => {
    /* ...do your stuff here! */
})
</script>

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.

<script>
checkout.ready(() => {
    console.log(checkout.data)
    /* ...do your stuff here! */
})
</script>

checkout.on()

Add event listeners to checkout events

<script>
checkout.ready(() => {
    checkout.on('change:field', (ev) => {
        /* ...do your stuff here! */
    })
})
</script>

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

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

Fields

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

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

• status: Boolean - optional, default: false - whether we are adding/removing this item

Payment Plan

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

checkout.set('discount', code)

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

Payment Method

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.

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

Sections

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

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

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

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