checkout-embed

SquadUp Embed Integration

Embed URL: https://embed.squadup.com/main-v2.min.js

Inital Set-up

Example integration:

<link rel="stylesheet" href="https://embed.squadup.com/default/css/bootstrap-namespace.min.css">
<div id="squadup-checkout"></div>
<script>
    squadup = {
        title: 'SquadUP Events',
        image: 'https://s3.amazonaws.com/checkout.squadup.com/squadup-logo.png',
        root: 'squadup-checkout',
        userId: [818],
        eventId: 1010
    }
</script>
<script src="https://embed.squadup.com/main-v2.min.js"></script>

Config options

Creating/Destroying Embed via DOM Event

The embed may be manually created or destroyed by triggering the following events:

document.dispatchEvent(new CustomEvent('createSquadupEmbed'));
document.dispatchEvent(new CustomEvent('destroySquadupEmbed'));

Note: A polyfill is required for Internet Explorer 9+ support.

(function () {

  if ( typeof window.CustomEvent === "function" ) return false;

  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   }

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;
})();

Listening to DOM events triggered by user actions

Shopping cart updated:

document.addEventListener("shoppingCartUpdated", function (e) {
  var shoppingCartData = e.detail;
  console.log(shoppingCartData);
}, false);

Shopping cart quantity updated:

document.addEventListener("shoppingCartQuantityUpdated", function (e) {
  var shoppingCartQuantity = e.detail;
  console.log(shoppingCartQuantity);
}, false);

Order successful:

document.addEventListener("orderSuccessful", function (e) {
  var orderData = e.detail;
  console.log(orderData);
}, false);

View changed:

document.addEventListener("viewChanged", function (e) {
  var currentView = e.detail.currentView;
  console.log(currentView);
}, false);

Event loaded:

document.addEventListener("eventLoaded", function (e) {
  var event = e.detail.event;
  console.log(event);
}, false);