Examples

Simple examples to get you started with the Spiffy JavaScript API

Show/Hide Section Based on Field Value

This is a basic example of how to toggle the visibility of elements on your checkout based on the value of a field.

<script>

    // Declare a constant `sectionToToggle` which contains a CSS selector for the section that will be toggled.
    // This points to the HTML element with the ID 'section-91735'.
    const sectionToToggle = '#section-91735';
    
    // Declare a constant `customFieldName` which specifies the name of the custom field we're interested in monitoring.
    // This is named "24_occupancy_options" in this case.
    const customFieldName = "24_occupancy_options";
    
    // Declare a constant `fieldValueToShow` that holds the value the custom field must have for the section to be visible.
    // In this instance, the section will be shown when the field's value is "double-occupancy".
    const fieldValueToShow = "double-occupancy";

    // The `checkout.ready()` function ensures the code inside runs once the Spiffy checkout system is fully initialized.
    checkout.ready(() => {
        
        // Add an event listener to monitor any changes in checkout fields.
        // The callback function runs whenever a checkout field value changes.
        checkout.on('change:field', (fields) => {
            
            // Initially hide the specified section by setting its CSS 'display' property to 'none'.
            document.querySelector(sectionToToggle).style.display = 'none';
            
            // Filter the `fields` array to find the custom field of interest by its name.
            // The filter function returns an array, but we're only interested in the first item ([0]),
            // as field names should be unique.
            let field = fields.filter(f => f.name == customFieldName)[0];
            
            // Check if the field's value matches `fieldValueToShow`.
            if (field && field.value == fieldValueToShow) {
                
                // If the value matches, make the specified section visible again by resetting its 'display' property.
                document.querySelector(sectionToToggle).style.display = null;
            }
        });
    });

</script>

Charge Flat-Rate Shipping by Country

This is a basic example of how to select/deselect checkout items based on the value of a field. This can be expanded to include all sorts of logic for determining items active on the checkout

<script>
// Declare a variable `shippingBlockId` that contains the ID of a block (or item) related to shipping.
var shippingBlockId = 377;

// The code inside `checkout.ready()` will execute once the checkout is fully initialized and ready for interactions.
checkout.ready(() => {
    
    // Add an event listener to monitor changes in any checkout field.
    // When any field value changes, this listener will be triggered.
    checkout.on('change:field', (value) => {
        
        // Extract the changed field from the event's value.
        const field = value.filter(f => f.name == 'billing_country')[0];
        
        // Check if the changed field's name is 'billing_country'.
        if (field.name == 'billing_country') {
            
            // If the new value of 'billing_country' is 'US'...
            if (field.value == 'US') {
                
                // Set the shipping block's quantity to 0, essentially deselecting or disabling it.
                checkout.set('item', shippingBlockId, 0);
            } else {
                
                // If the 'billing_country' is any other value than 'US'...
                // Set the shipping block's quantity to 1, essentially selecting or enabling it.
                checkout.set('item', shippingBlockId, 1);
            }
        }
    });
})
</script>
<style>#section-319 { display: none !important; }</style>

Subscription Option Specific Discounts

This is an example of how to automatically swap between promo codes depending on which subscription option is selected

<script>
// These suffix's map to the order of your subscription options.
// eg, the first suffix in the list below will be used to change
// the promo code (if any) that is used on the checkout.
// You'll need to add all these promo codes/discounts to your checkout
// in order for this to work properly. Eg, TESTX4F5 and TESTG7DK should
// be valid promo codes. You can add as many sets of promo codes as you
// like and you can should add as many suffixes as you have subscription
// options
const PROMO_SUFFIX = [
  'X4F5',
  'G7DK',
]

checkout.ready(() => {
  // Find a subscription block
  const blockEl = document.querySelector("[id*=basicSubscription-]")
  const BLOCK_ID = blockEl.getAttribute('id').replace('basicSubscription-', '')
  let selected = 0 // store selected in global scope
  
  // Handle subscription plan changes
  checkout.on('change:item', ev => {
    const item = ev.items[0]
    if (ev.block == BLOCK_ID) {
      selected = ev.selected[0]
      setPromo()
    }
  })
  
  // Handle promo code changes
  checkout.on('change:discount', setPromo)
  
  function setPromo () {
    // No promo applied
    if (!checkout.data.promo) return
    
    // Handle removing existing suffix and adding new one
    let code = checkout.data.promo
    PROMO_SUFFIX.forEach(suf => {
      if (code.lastIndexOf(suf) !== -1) {
        code = code.substring(0, code.lastIndexOf(suf))
      }
    })
    
    // Dont update it if we dont need to
    if (code + PROMO_SUFFIX[selected] === checkout.data.promo) return
    
    // Set the discount
    checkout.set('discount', code + PROMO_SUFFIX[selected])
  }
})
</script>

Hide/Show Payment Plans based on Field Value

This is a basic example of how to hide/show payment plan options based on the value of a field.

<script>
// Declare a variable `fieldName` that is a string of the custom field name
// that we should be looking at the values of.
var fieldName = 'event_dates';

// Declare a variable `onlySinglePay` containing an array of custom field values 
// that should only allow single payments.
// Right now, the array contains only one value: 'october'. 
// More values can be added to this array if required.
var onlySinglePay = ['october'];

// Declare a variable `payplanSectionId` that contains the ID of a section 
// that has the payment plan block. This section might be hidden or shown based on conditions.
var payplanSectionId = 123456;

// Initially hide the payment plan section using its ID.
// This uses a template literal to construct the CSS selector based on the provided section ID.
document.querySelector(`#section-${payplanSectionId}`).style.display = 'none';

// The code inside `checkout.ready()` will execute when the checkout is fully loaded and ready.
checkout.ready(() => {
    
    // Check if the event_date from the checkout data matches any of the dates in `onlySinglePay`.
    if (onlySinglePay.includes(checkout.data.fields.event_date)) {
        
        // If it matches, then set the 'payplan' to null. This might mean disabling a payment plan option.
        checkout.set('payplan', null);
        
        // Also hide the section associated with the payment plan using its ID.
        checkout.hide('section', payplanSectionId);
    }

    // Add an event listener to monitor changes in the checkout fields.
    // When a field changes, this listener will be triggered.
    checkout.on('change:field', (value) => {
        
        // Extract the changed field from the event's value.
        const field = value[0];
        
        // Check if the changed field's name is 'event_date'.
        if (field.name == fieldName) {
            
            // If the new value of 'event_date' is in the `onlySinglePay` array...
            if (onlySinglePay.includes(field.value)) {
                
                // Set 'payplan' to null and hide the payment plan section.
                checkout.set('payplan', null);
                checkout.hide('section', payplanSectionId);
            } else {
                
                // If the new value of 'event_date' is not in the `onlySinglePay` array...
                // Show the payment plan section.
                checkout.show('section', payplanSectionId);
            }
        }
    });
})
</script>