Minimal Rendering and Validation

With the JavaScript library and placeholder <div> added, the widget is ready to be initialized. We can do this by passing options into the configure command.

The minimum configuration options required to render the widget are a valid Client API Key and at least one item's value to quote. Here is an example to test on your checkout page:

tg("configure", {
  apiKey: "pk_xxxxxxxxxxxxxxxxxxxx", // Client API Key
  // if using a sandbox apiKey, enable this option
  // sandbox: true,
  items: [{
    cost: "100.00",
    event: {
              startDate: "2027-12-10",
              endDate: "2028-01-01",  //optional
              startTime: "10:30:00",
              endTime: "12:00:00",  //optional
              name: "Event Name"
            },
    referenceNumber: "EVT-001"
  }]
});

When there are multiple line items in the cart, add each line item to the items array. Here is an example:

tg("configure", {
  apiKey: "pk_xxxxxxxxxxxxxxxxxxxx",
  // if using a sandbox apiKey, enable this option
  // sandbox: true,
  items: [
		{
      cost: "100.00",
      event: {
                startDate: "2027-12-10",
                endDate: "2028-01-01",  //optional
                startTime: "10:30:00",
                endTime: "12:00:00",  //optional
                name: "Event Name"
              },
      referenceNumber: "EVT-001"
  	},
  	{
      cost: "200.00",
      event: {
                startDate: "2027-12-10",
                endDate: "2028-01-01",  //optional
                startTime: "10:30:00",              
                endTime: "12:00:00",  //optional
                name: "Event Name"
              },
      referenceNumber: "EVT-002"
    }
	]
});

🧪
Quick Test
At this point you should be able to initialize and see the widget in your checkout process. If not, please make sure that you've added the Teak library script to your page, that you've added the placeholder <div> with the proper id, that your configure command matches the example above, and that your API key is valid.

Todo

Render the widget with minimal configuration options