Getting started with the Gift Card Pro Javascript API

If you need to customize parts of the purchase process to meet a specific need, Gift Card Pro offers a Javascript API to allow you to get and set data programatically. There are two main components to this API – methods, and events.

Events

Events are triggered when a certain action occurs during the gift card purchase process. You can register event listeners in your theme in order to listen for these events, and run custom actions based on your needs. The following code provides an example of each of the three available events.

<script>


      /**
       * This event is triggered when the page is fully loaded,
       * and when a step changes.
       */
      document.addEventListener('gcp-page-loaded', function() {

        const currentSettings = window.GCPSDK.settings.get();
        const currentPage = window.GCPSDK.page.get();
        console.log("Gift Card Pro loaded - current settings and page", currentSettings, currentPage);

      });

      /**
       * This event is triggered when a gift card is added to the cart.
       */
      document.addEventListener('gcp-item-added', function() {

        console.log("Gift card was added to the cart. Resetting value field.");

        window.GCPSDK.form.set('id', 'Custom');

      });

      /**
       * This event is triggered when the form initially loads.
       */
      document.addEventListener('gcp-form-loaded', function() {

        const formData = window.GCPSDK.form.get();

        console.log("Gift Card Pro form loaded", formData);

      });

      /**
       * This event is triggered when a value on the form changes
       */
      document.addEventListener('gcp-form-changed', function() {

        const formData = window.GCPSDK.form.get();

        console.log("Form details changed", formData);

      });


</script>

Methods

Methods can be used to get details from Gift Card Pro, and set form values programatically. The above example includes these methods, which are used within the event listeners. Methods should only be used once the page is fully loaded, which can be detected by the “gcp-page-loaded” event. The following methods are available:

// Sets form detail
window.GCPSDK.form.set(fieldName, fieldValue);

// Retrieves current form data
window.GCPSDK.form.get();

// Gets settings
window.GCPSDK.settings.get();

// Gets page data
window.GCPSDK.page.get();

By combining methods with CSS, you can enforce certain values to be set, and not changed.

Example #1 – Show the video option only if a gift card greater than $100 is selected.

<script>

    document.addEventListener('gcp-form-changed', function() {

        const formData       = window.GCPSDK.form.get();

        const selectedCostId = document.querySelector('input[value="' + formData.id + '"]').getAttribute('id');
        
        const selectedLabel  = document.querySelector('label[for="' + selectedCostId + '"]');
        
        const currentCost    = parseFloat(selectedLabel.innerText.replace(/[^\d.]/g, ''));

        if (currentCost >= 100) {

          document.body.classList.remove("hide-video-element");

        } else {

          if (document.body.classList.contains("hide-video-element")) {
            return;
          }

          document.body.classList.add("hide-video-element");
          window.GCPSDK.form.set('properties._gcp_video_url', "");
        }

  });

</script>

<style>

    body.hide-video-element #gcpOpenVideoModal {
        display: none !important;
    }

</style>

Example #2 – Clear the form after it has been submitted

<script>
// Clear the form after it is added to the cart
document.addEventListener('gcp-item-added', function() {

window.GCPSDK.form.set('properties._gcp_conversion_rate', "");
window.GCPSDK.form.set('properties._gcp_custom_value', "");
window.GCPSDK.form.set('properties._gcp_delivery_date', "");
window.GCPSDK.form.set('properties._gcp_delivery_time', "Send Now");
window.GCPSDK.form.set('properties._gcp_delivery_timezone', "");
window.GCPSDK.form.set('properties._gcp_iso_delivery_date', "");
window.GCPSDK.form.set('properties._gcp_locale', "");
window.GCPSDK.form.set('properties._gcp_message_from', "");
window.GCPSDK.form.set('properties._gcp_message_text', "");
window.GCPSDK.form.set('properties._gcp_recipient_email', "");
window.GCPSDK.form.set('properties._gcp_recipient_name', "");
window.GCPSDK.form.set('properties._gcp_recipient_phone', "");
window.GCPSDK.form.set('properties._gcp_send_to_self', false);
window.GCPSDK.form.set('properties._gcp_thumbnail_image', "");
window.GCPSDK.form.set('properties._gcp_thumbnail_url', "");
window.GCPSDK.form.set('properties._gcp_video_id', "");
window.GCPSDK.form.set('properties._gcp_video_url', "");

});
</script>

Example #3 – Skip the greeting card selection step, and hide the first breadcrumb

<style>
      
  #gcpRoot.loaded {
    display: block;
  }
  
  .gc__breadcrumbs li:first-of-type {
    display: none;
  }

</style>

<script>

  if (window.location.pathname !== "/a/gc/gift-card/") {
    document.querySelector('#gcpRoot').classList.add('loaded');
  }

  document.addEventListener('gcp-page-loaded', function() {

    const currentPage = window.GCPSDK.page.get();        

    if (currentPage.step === "greeting_card") {
      document.querySelector('#_gcp-purchase-form-continue').click();
      document.querySelector('#gcpRoot').classList.add('loaded');
    }

  });

</script>

Example #4 – Add visible line item properties based on the selected details

/**
 * Gift Card Pro Javascript API implementation to add visible property inputs to the purchase form
 */
(function() {

document.addEventListener('gcp-form-changed', function() {

  const formData    = window.GCPSDK.form.get();
  const fieldsToAdd = ['_gcp_delivery_date', '_gcp_selected_card_image', '_gcp_message_from', '_gcp_message_text', '_gcp_recipient_email', '_gcp_recipient_name', '_gcp_recipient_phone'];
  const formEl      = document.querySelector('#gcpPurchaseForm');
  let hiddenEls     = document.querySelectorAll('.gcpCustomHiddenInput');

  // Remove hidden inputs
  hiddenEls.forEach(e => e.remove());

  // Add them back in with fresh data
  Object.keys(formData.properties).forEach((p, i) => {
    
    if (fieldsToAdd.includes(p) && typeof(formData.properties[p]) != 'undefined') {
  
      var input = document.createElement("input");
      var niceName = p.split('_').filter(v => v !== "_" && v !== "" && v !== "gcp").map(v => `${v.charAt(0).toUpperCase()}${v.slice(1)}`).join(' ');
      input.setAttribute('type', 'hidden');
      input.setAttribute('name', `properties[${niceName}]`);
      input.classList.add('gcpCustomHiddenInput');
      input.value = formData.properties[p];
      formEl.appendChild(input);
      
    }
  
  });
});
})();