Checkout Widget

Learn how to embed the checkout widget in your application.

We'll cover the following

Eventbrite provides a checkout widget that we can easily integrate into our websites and applications. The widget can be used with simple HTML and JavaScript. There are two types of checkout widgets:

  • Pop-up checkout
  • Non-modal checkout

The URL for Eventbrite’s JavaScript checkout widget is:

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

Widget’s request parameters

The details of the parameters to be passed to the widget function are as follows:

Attribute

Type

Category

Description

widgetType

String

Required

Value of this attribute must be checkout

eventId

String

Required

ID of the event that has ticket(s) to be bought by the user

modal

Boolean

Required

If it's true, the widget will be rendered; otherwise, it will not

modalTriggerElementId

String

Required

It's the id of the targeted HTML element for the widget

onOrderComplete

Function

Required

Callback when an order is completed

iFrameContainerId

String

Optional

Target HTML element for the widget

iFrameContainerHeight

Integer

Optional

Widget height in pixels. Default value is 425 px.

iFrameAutoAdapt

Integer

Optional

Widget's viewport percentage (between 75-100%)

Creating an event for the checkout widget

We have deleted the first event in the previous lesson. Because the checkout widget only appears for published events, let’s create a free event and publish it.

Press + to interact
const headerParameters = {
  'Authorization': 'Bearer {{PRIVATE_TOKEN}}',
  'Content-Type': 'application/json'
};
// event details
const urlEvent = new URL('https://www.eventbriteapi.com/v3/organizations/{{ORGANIZATION_ID}}/events/');
const valuesEvent = JSON.stringify({
  "event": {
    "name": {
      "html": "My event name"
    },
    "description": {
      "html": "Long description of the event."
    },
    "start": {
      "timezone": "America/Los_Angeles",
      "utc": "2030-12-01T02:00:00Z"
    },
    "end": {
      "timezone": "America/Los_Angeles",
      "utc": "2030-12-01T05:00:00Z"
    },
    "currency": "USD"
  }
});
const optionsEvent = {
  method: 'POST',
  headers: headerParameters,
  body: valuesEvent,
};
// ticket for the event
const valuesTicket = JSON.stringify({
  "ticket_class": {
    "name": "Ticket Name",
    "free": "True",
    "capacity": "100",
    "minimum_quantity": "1",
    "maximum_quantity": "10",
    "sales_channels": ["online", "atd"],
    "delivery_methods": ["electronic"]
  }
});
const optionsTicket = {
  method: 'POST',
  headers: headerParameters,
  body: valuesTicket,
};
const optionsPublish = {
  method: 'POST',
  headers: headerParameters
};
async function createPublishEvent() {
  try {
    // creating an event
    let responseEvent = await fetch(urlEvent, optionsEvent);
    responseEvent = await responseEvent.json();
    console.log("Event ID: ", responseEvent['id']);
    // creating a ticket for the event
    const urlTicket = new URL('https://www.eventbriteapi.com/v3/events/' + responseEvent['id'] + '/ticket_classes/');
    let responseTicket = await fetch(urlTicket, optionsTicket);
    responseTicket = await responseTicket.json();
    console.log("Ticket ID: ", responseTicket['id']);
    // publishing the event
    const urlPublish = new URL('https://www.eventbriteapi.com/v3/events/' + responseEvent['id'] + '/publish/');
    let responsePublish = await fetch(urlPublish, optionsPublish);
    responsePublish = await responsePublish.json();
  } catch (error) {
    // Custom function for printing the error message
    printError(error);
  }
}
createPublishEvent();

Popup checkout

It’s like a modal pop-upA pop-up screen or dialogue box that appears on the current screen., and this pop-up checkout widget can be integrated with any clickable HTML element. The user only sees the ticket buying screen when the user clicks it. Let’s run the code below by clicking the “Run” button. Then, click the “Buy Tickets” button to pop-up the ticket buying screen in the output tab.

Pop-up checkout widget
    

  • Line 5: Adding Eventbrite’s widget library eb_widgets.js.
    • 

  • Line 11–17: Specifying the {event_id} and checkout modal details.
    • 

  • Line 21: The modal pops up when we click the button “Buy Tickets.”
    • 



Non-modal checkout


If we want the checkout widget to be part of the website or application, users can see the ticket buying screen without clicking anything. Let’s run the code below by clicking the “Run” button. You will see the ticket buying screen in the output tab directly without clicking any button.


Non-modal checkout widget