Checkout Widget

Learn how to embed the checkout widget in our application.

We'll cover the following

Eventbrite provides a checkout widget that we can easily integrate into our websites/applications. We can use the widget with simple HTML and Javascript.

The URL for the Javascript call is:

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

The widget’s request parameters

We’ll pass the following parameters to the widget function:

Attribute

Type

Category

Description

widgetType

string

required

The value of this attribute must be checkout.

eventId

string

required

This is the ID of the event whose ticket(s) have to be bought by the user.

modal

boolean

required

If it is true, the widget will be rendered. Otherwise, it will not.

modalTriggerElementId

string

required

This is the ID of the targeted HTML element for the widget.

onOrderComplete

function

required

The function asks for a callback when an order is completed.

iFrameContainerId

string

optional

This is the target HTML element for the widget.

iFrameContainerHeight

integer

optional

The object indicates the widget’s height in pixels. The default value is 425px.

iFrameAutoAdapt

integer

optional

The object indicates the widget's viewport percentage (between 75–100).

There are two types of checkout widgets:

  • Pop-up checkout
  • Non-modal checkout

Creat an event for the checkout widget

We’ve deleted the first event in the previous lesson. Let’s create a free event and publish it because the checkout widget only appears for the published events.

Press + to interact
import requests
import json
headers = {
    'Authorization': 'Bearer {{PRIVATE_TOKEN}}',
    'Content-Type': 'application/json'
}
# Creating an event
url_event = 'https://www.eventbriteapi.com/v3/organizations/{{ORGANIZATION_ID}}/events/'
values_event = json.dumps({
        "event": {
            "name": {
                "html": "My event name"
            },
            "description": {
                "html": "Long description of the event."
            },
            "start":{
                "timezone": "America/Los_Angeles",
                "utc": "2022-12-01T02:00:00Z"
            },
            "end":{
                "timezone": "America/Los_Angeles",
                "utc": "2022-12-01T05:00:00Z"
            },
            "currency": "USD"
        }
    })
response_event = requests.request("POST", url_event, headers=headers, data=values_event).json()
print("Event_ID: ", response_event['id'])
# creating free ticket for the event
url_ticket = 'https://www.eventbriteapi.com/v3/events/'+response_event['id']+'/ticket_classes/'
values_ticket = json.dumps({
		"ticket_class": {
			"name": "Ticket Name",
			"free": True,
			"capacity": "100",
			"minimum_quantity": "1",
			"maximum_quantity": "10",
			"sales_channels": ["online", "atd"],
			"delivery_methods": ["electronic"]
		}
	})
response_ticket = requests.request("POST", url_ticket, headers=headers, data=values_ticket).json()
print("Ticket_ID: ", response_ticket['id'])
# publishing the event
url_publish = 'https://www.eventbriteapi.com/v3/events/'+response_event['id']+'/publish/'
response_publish = requests.request("POST", url_publish, headers=headers).json()
print("Published: ", response_publish['published'])

Pop-up checkout

It is like a modal popupA popup screen/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 click the “Run” button to run the code below. Then, click the “Buy Tickets” button to pop-up the ticket buying screen in the “Output” tab.

Pop-up checkout widget
Non-modal checkout


If we want the checkout widget to be part of the website/application, users can see the “ticket buying screen” without clicking anything. Let’s click the “Run” button to run the code below. We’ll see the ticket buying screen in the “Output” tab directly without clicking any button.


Non-modal checkout widget