To do a checkout in eventbrite, in documentation use a Widget that extends window (https://www.eventbrite.com/platform/docs/embedded-checkout), but how to use vanilla code in angular?, I've done this:
<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>
in index.html<button id="eventbrite-widget-trigger" type="button">Buy Tickets</button>
const eventbriteCallback = function () {
console.log("Order complete!");
};
window.EBWidgets.createWidget({
widgetType: "checkout",
eventId: "52766401728",//Here is event dinamically
modal: true,
modalTriggerElementId: "eventbrite-widget-trigger",
onOrderComplete: eventbriteCallback,
});
But how to merge vanilla code (point 3) with a component (point 2) and send the eventId dinamically? Or somebody has integrated checkout in eventbrite with angular?
Thanks Abderrahim Soubai-Elidrisi I solved my problem doing this:
add the script in the scripts array of the file angular.json
Followed the steps in this post: How to call JavaScript functions from Typescript in Angular 5?
function registerEvent(eventId, action) {
const button = document.createElement("button");
button.setAttribute("id", "example-widget-trigger");
button.setAttribute("type", "button");
document.body.appendChild(button);
button.style.display = "none";
setTimeout(() => {
document.body.removeChild(button);
}, 200);
window.EBWidgets.createWidget({
widgetType: "checkout",
eventId: eventId,
modal: true,
modalTriggerElementId: "example-widget-trigger",
onOrderComplete: action,
});
button.click();
}
function registerEvent(eventId, action): void;
registerEvent(eventId, exampleCallback);
Show steps 3 and 4