How to use a variable in place of “event ID” in Eventbrite embedded checkout

I am trying to embed an eventbrite checkout within a dynamic page of my Wix site. Each page needs to have a checkout element for a different show. Very new to HTML, but, if I am understanding correctly, I need to assign the "eventID" within the createWidget method to a variable rather than a string constant. I am currently passing the eventID from my page code using the postMessage() function, but when I try to assign that data to a variable in the HTML, something seems to be going wrong. Here is what I have included in my page (Velo) code:

$w("#eventbriteSales").postMessage(964311781497);

And below is my HTML code contained within the embedded element:
`

<div id="eventbrite-widget-container-964311781497"></div>

<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>

<script type="text/javascript">
  let EventbriteID = "0"
  window.onmessage = (event) => {
      EventbriteID = event.data;
  };
    var exampleCallback = function() {
        console.log('Order complete!');
    };

    window.EBWidgets.createWidget({
        // Required
        widgetType: 'checkout',
        eventId: EventbriteID,
        iframeContainerId: 'eventbrite-widget-container-964311781497',

        // Optional
        iframeContainerHeight: 425,  // Widget height in pixels. Defaults to a minimum of 425px if not provided
        onOrderComplete: exampleCallback  // Method called when an order has successfully completed
    });
</script>`

You need to sign in to view this answers

Related Post