Embedding a Checkout Widget

A ticket checkout flow may involve the following steps checkout -> lookup order -> cancel/refund order.

The first step in this flow is checkout. Using the Eventbrite API, you can embed a ticket checkout widget in your app or website. This is done by including HTML code with a Javascript call and the appropriate attributes. The Javascript call is

https://www.eventbrite.com/static/widgets/eb_widgets.js

and the attributes are

Creating a Popup Checkout Widget

You can display your checkout as a modal popup, meaning that the checkout flow is hidden from display until the user makes a click. Using the following HTML code, a Buy Tickets button is embedded on the app or website page, and when clicked shows the checkout flow.

<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>

Creating an Non-Modal Checkout

If you want your users to checkout without having to click on anything first, you can create a non-modal checkout. For example, the following HTML code embeds the checkout widget on your app or website page.

<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!');
    };

    window.EBWidgets.createWidget({
        widgetType: 'checkout',
        eventId: '52766401728',
        iframeContainerId: 'example-widget-trigger',
        iframeContainerHeight: 425,
        onOrderComplete: exampleCallback,
    });
</script>

FAQ

The following are some common questions on embedding a checkout widget.

Can the colors and layout of the checkout widget be customized? No. But you can customize the button the user clicks to start the checkout flow, such as the Buy Tickets button.

Can I choose which page is first displayed in the checkout flow (for example, I want to skip the default first page, i.e. the ticket selection page)? No. But you can implement a seperate button for each ticket type, and that button can contain a unique description.

What’s the best configuration for mobile devices? For mobile devices use a modal button with a popup checkout flow. The button makes use of the full screen in mobile sizes to provide optimal layout.

Can I choose the language (i.e. other than English) displayed in the checkout flow? The checkout flow language cannot be changed through tooling, instead update the appropriate Event fields for the country and lanaguage you want.

Can a promo code be passed to the checkout flow and automatically applied? Yes. You need to use the key promoCode when calling createWidget. For example: "promoCode": "mypromocode".

Can I track sales through Google Analytics or Facebook pixels? Yes. You need to set up sales tracking using your App Management page.

Can I embed the checkout flow on my WordPress website? Yes. For more information, see How to add Eventbrite’s Embedded Checkout to your WordPress.org site.