Ashley for the Arts- Mobile App Integration with Eventbrite

83 views
Skip to first unread message

Ashley for the Arts

unread,
May 11, 2021, 8:27:10 AM5/11/21
to Eventbrite Developers

In our mobile app , we have embedded the checkout widgets as below. We see that there is a callback function which will be called when order is completed . Now the question is – is there any callback function that will provide the Order Id?

 

<button id="example-widget-trigger" type="button">Buy Tickets</button>

 

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

 

<script type="text/javascript">

  var exampleCallback = function() {

    console.log("Order complete!");

  };

 

  window.EBWidgets.createWidget({

    widgetType: "checkout",

    eventId: "52766401728",

    modal: true,

    modalTriggerElementId: "example-widget-trigger",

    onOrderComplete: exampleCallback

  });

</script>

VB Logix

unread,
May 18, 2021, 10:30:11 AM5/18/21
to Eventbrite Developers
Hello Ashley,
I hope you are doing well.

Were you able to successfully integrate checkout in mobile app? Because I am trying to integrate in react-native using the webview, it is not working for me.
It gives me this error.
https://www.screencast.com/t/4gFAwtCMI

it would be great if you can take a look once and help me.
Thanks

Natalie Blikslager

unread,
May 18, 2021, 1:14:11 PM5/18/21
to Eventbrite Developers
Hello and thank you for reaching out here!

Yes! The built-in callback function provides the order ID - an onOrderComplete callback will receive an object as a single parameter with an 'orderId' key that contains the order ID value.

Best,
Natalie

Hema Shah

unread,
May 21, 2021, 5:14:40 AM5/21/21
to Eventbrite Developers
Hi Natalie,

Our developers started embedding the ticket checkout in the Mobile App using React-Native. 

export const renderHTMLContent = (eventId: string) => {
  return `<html>
  <head>
     <meta name="viewport" content="width=device-width, user-scalable=no">
  </head>
  <body>
     <button id="eventbrite-widget-modal-trigger-${eventId}" type="button">Buy Tickets</button>
     <script type="text/javascript">
        var exampleCallback = function() {
          console.log("Order complete!");
        };
        
        window.EBWidgets.createWidget({
          widgetType: "checkout",
          eventId: ${eventId},
          modal: true,
          modalTriggerElementId: "eventbrite-widget-modal-trigger-${eventId}",
          onOrderComplete: exampleCallback
        });
     </script>
  </body>
</html>`;
};

This is giving an error response and displays the message - 'Oops.. something is wrong at this moment.'

Is there any way to debug this and find out what are we doing wrong?

Thanks & Rgds,
Hema

Natalie Blikslager

unread,
May 21, 2021, 3:47:36 PM5/21/21
to Eventbrite Developers
Hello Hema!

It will help to add quotes around the eventId. See below for example:  

{
...
         widgetType: "checkout",
          eventId: "${eventId}",
...
}

I hope this takes care of the error you're seeing!

Best,
Natalie

VB Logix

unread,
May 22, 2021, 12:43:30 AM5/22/21
to Eventbrite Developers
Hello Natalie,
Thanks for the reply.
I did try to pass in the same way but it is still giving me an error.

please check the below code once.

export const renderHTMLContent = (eventId: number) => {
  return `<html>
  <head>
     <meta name="viewport" content="width=device-width, user-scalable=no">
  </head>
  <body>
     <button id="eventbrite-widget-modal-trigger-${eventId}" type="button">Buy Tickets</button>
     <script type="text/javascript">
        var exampleCallback = function() {
          console.log("Order complete!");
        };
        
        window.EBWidgets.createWidget({
          widgetType: "checkout",
          eventId: "${eventId}",
          modal: true,
          modalTriggerElementId: "eventbrite-widget-modal-trigger-${eventId}",
          onOrderComplete: exampleCallback
        });
     </script>
  </body>
</html>`;
};

It is still giving me the same error which I was getting.
The event Id which we use was  152319689291
Please check once and let me know.
Thanks

Natalie Blikslager

unread,
May 24, 2021, 7:22:25 PM5/24/21
to Eventbrite Developers
Hey Hema!

Do you get a successful response if you substitute "eventId" for "152319689291"?

If so, you will need to debug your code. It is possible "eventId" is not initialized and it fails before it gets set to "152319689291".

Best,
Natalie

VB Logix

unread,
May 25, 2021, 2:42:00 AM5/25/21
to Eventbrite Developers
Hello,
Actually, I got it working by changing the flow a bit.
What we did is we call the laravel API from the mobile app and from the laravel API we called the Eventbrite checkout and we are loading the response of the API into mobile and showing it into the web view.

Please check and let me know.
Thanks
Reply all
Reply to author
Forward
0 new messages