小工具请求参数

传递给小工具函数的参数详情如下：

创建用于结账小工具的活动

在上一课中我们已删除了第一个活动。由于结账小工具仅对已发布的活动显示，因此我们需要创建一个免费活动并发布它。

1const headerParameters = {
2  'Authorization': 'Bearer {{PRIVATE_TOKEN}}',
3  'Content-Type': 'application/json'
4};
5
6// 活动详情
7const urlEvent = new URL('https://www.eventbriteapi.com/v3/organizations/{{ORGANIZATION_ID}}/events/');
8const valuesEvent = JSON.stringify({
9  "event": {
10    "name": {
11      "html": "我的活动名称"
12    },
13    "description": {
14      "html": "活动的详细描述。"
15    },
16    "start": {
17      "timezone": "America/Los_Angeles",
18      "utc": "2030-12-01T02:00:00Z"
19    },
20    "end": {
21      "timezone": "America/Los_Angeles",
22      "utc": "2030-12-01T05:00:00Z"
23    },
24    "currency": "USD"
25  }
26});
27
28const optionsEvent = {
29  method: 'POST',
30  headers: headerParameters,
31  body: valuesEvent,
32};
33
34// 活动的票券
35const valuesTicket = JSON.stringify({
36  "ticket_class": {
37    "name": "票券名称",
38    "free": "True",
39    "capacity": "100",
40    "minimum_quantity": "1",
41    "maximum_quantity": "10",
42    "sales_channels": ["online", "atd"],
43    "delivery_methods": ["electronic"]
44  }
45});
46
47const optionsTicket = {
48  method: 'POST',
49  headers: headerParameters,
50  body: valuesTicket,
51};
52
53const optionsPublish = {
54  method: 'POST',
55  headers: headerParameters
56};
57
58async function createPublishEvent() {
59  try {
60    // 创建活动
61    let responseEvent = await fetch(urlEvent, optionsEvent);
62    responseEvent = await responseEvent.json();
63    console.log("活动 ID: ", responseEvent['id']);
64
65    // 为活动创建票券
66    const urlTicket = new URL('https://www.eventbriteapi.com/v3/events/' + responseEvent['id'] + '/ticket_classes/');
67    let responseTicket = await fetch(urlTicket, optionsTicket);
68    responseTicket = await responseTicket.json();
69    console.log("票券 ID: ", responseTicket['id']);
70
71    // 发布活动
72    const urlPublish = new URL('https://www.eventbriteapi.com/v3/events/' + responseEvent['id'] + '/publish/');
73    let responsePublish = await fetch(urlPublish, optionsPublish);
74    responsePublish = await responsePublish.json();
75  } catch (error) {
76    // 自定义函数：打印错误信息
77    printError(error);
78  }
79}
80
81createPublishEvent();

弹窗结账

弹窗结账类似于模态弹窗：一个出现在当前屏幕上的弹出窗口或对话框。当用户点击某个元素时，会触发弹出购票界面。该结账小工具可与任意可点击的 HTML 元素集成。只需点击“运行”按钮执行代码，然后点击“购买票券”按钮，即可在输出区域弹出购票界面。

• 第 5 行：引入 Eventbrite 的小工具库 eb_widgets.js。
• 第 11–17 行：指定 {event_id} 和结账弹窗的相关配置。
• 第 21 行：点击“购买票券”按钮时，弹出结账窗口。

非模态结账

如果希望结账小工具直接嵌入网站或应用中，用户无需点击任何按钮即可直接看到购票界面。点击“运行”按钮执行以下代码，你将直接在输出区域看到购票界面，无需额外操作。