Eventbrite Checkout Redirect (warning - code ahead)

Need help APIs
1

Anyone able to point me in the right direction?

On a popup, I have the following script - which works nicely.

<div id="example-widget-trigger"></div>

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

<script type="text/javascript">
  var exampleCallback = function() {
    console.log("Order complete!");
    // Update the thank you page URL with your own custom thank you page URL
    setTimeout(function() {window.open("https://example.com/thank-you/","_self")}, 500);
  };

  // Update the eventId with your own Eventbrite event id
  window.EBWidgets.createWidget({
    widgetType: "checkout",
    eventId: "52766401728",
    iframeContainerId: "example-widget-trigger",
    iframeContainerHeight: 425,
    onOrderComplete: exampleCallback
  });
</script>

What I do on the “window.open” is go to “this URL” (i.e. the page I am on) and append a URL parameter.

Then on page load I check to see if this parameter is there and show our “thank you” popup with some navigation (which is why we can’t use EB’s customised checkout).

Firstly, getting rid of the page parameter is then somewhat annoying (so you don’t want the popup to show again on this page).

However the main issue is that I then get a console error when the redirect happens.

TypeError: Cannot read properties of undefined (reading 'createWidget')

If this was a new page, then it should not be too much of a problem, but the Widget remembers where it was, so if you click on the button to show the popup again, then it will not show the checkout again.

Any clues as to where I should be looking here.

Thank you !

2

I think that the second script executes before the first script finishes to load the remote source.
I would add the library’s script dynamically and wait for it to be fully loaded before executing the rest of the code.
Or just add the first script to the page head.

1 Like
3

Checking it out. Thanks.

1 Like
4

It was this. Thanks !

In case anyone is also trying to do this, we ended up putting the checkout on a new page as our particular checkout was too long for a popup. Probably could have used a group.

Add this to the page header.

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

The HTML element script looked like this

<div id="EB-widget-trigger"></div>

<script type="text/javascript">
  var ebCallback = function() {
    console.log("Order complete!");
    // Update the thank you page URL with your own custom thank you page URL
    setTimeout(function() {window.open("This urlArbitrary textticket=yes*","_self")}, 2000);
  };

  // Update the eventId with your own Eventbrite event id
  window.EBWidgets.createWidget({
    widgetType: "checkout",
    eventId: "Current Page Event's Registration Link:extract with Regex**",
    iframeContainerId: "EB-widget-trigger",
    iframeContainerHeight: 1200,
    onOrderComplete: ebCallback
  });
</script>

*This urlArbitrary textticket=yes adds ?ticket=yes or &ticket=yes depending on whether there is already a parameter on the page.

image
image

Then on page load, we do various things including redirect back to the same page with no parameters.

**Regex used = (\d+)$

2 Likes