Integrate with Spektrix

https://integrate.spektrix.com/docs
Admin
Spektrix is a cloud-based SaaS solution for ticketing, marketing, and fundraising for arts and...
Tokens:122,785
Snippets:1,186
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Example of basket contents after login and adding tickets

Source: https://integrate.spektrix.com/docs/iframe-load-trigger

This example demonstrates the structure of the message event data after a customer has logged in and added items to the basket. It includes detailed customer information and ticket specifics.

```json
basketContents:{

    "totalDiscount":25.00,

    "total":26.00,

    "customer":{

        "age":null,

        "billingAddress":null,

        "deliveryAddress":null,

        "birthDate":null,

        "email":"john.doe@spektrix.com",

        "firstName":"John",

        "lastName":"Doe",

        "mobile":"",

        "name":"John Doe",

        "phone":"",

        "title":"",

        "passwordSet":true,

        "giftAidDeclarationRequired":false,

        "id":"I-8H22-22HV",

        "creditBalance":0.0},

    "tickets":[{

        "band":{

            "id":"201AGBHDRLQHNHPHKKMPKLGPMDRDTDMVL"},

            "event":{"id":"401ANPJQJQPQMRSBDNMVNLSPGTRBVQVRH"},

            "instance":{"id":"426ANNBCVJQNPTKKTSTRDGGPTTRSJBLSG"},

            "planId":"401ANPJQJQPQMRSBDNMVNLSPGTRBVQVRH",

            "seatName":"",

            "planName":"Demo Theatre General Admission",

            "type":{"id":"1AHGJDSMMPLMPPGNLJBQVLBRSKVDLQRPP"},

            "ticketType":{"id":"1AHGJDSMMPLMPPGNLJBQVLBRSKVDLQRPP"},

            "ticketType_Comment":"Will be removed in a future API release - Use 'Type' instead",

            "delivered":false,

            "barcode":null,

            "offer":{"id":"1AHGJDSMMPLMPPGNLJBQVLBRSKVDLQRPP"},

            "discount":25.00,

            "price":25.00,

            "total":26.00,

            "id":"159ABTGJHMDHKQTHHPJTQNLKMCJMRSBMG"}],

    "membershipSubscriptions":[],

    "giftVouchers":[],

    "merchandiseItems":[],

    "donations":[],

    "hash":"l8IJqdp0pk"

}
```

```text
basketHash:l8IJqdp0pk
```

--------------------------------

### Complete Spektrix Memberships Component Example

Source: https://integrate.spektrix.com/docs/web-components/memberships/spektrix-memberships

This comprehensive example demonstrates the integration of the Spektrix Memberships web component with various features like loading states, membership data display, customer ownership checks, variable pricing, and feedback containers.

```html
<spektrix-memberships   
    client-name="thetheatre"
    membership-id="1213ANPPNPTJDSBPNJDDPKRNVDCBQQRDC"
    forward-to="https://tickets.thetheatre.org/checkout"
    culture="en">
      
    <!-- Loading state -->
    <div data-loading-container style="display: block; text-align: center; padding: 2em;">
        <p>Loading membership details...</p>
    </div>
      
    <!-- Loaded content -->
    <div data-loaded-container style="display: none;">
        <h2 data-name>Membership Name</h2>
        <img data-image-url style="max-width: 300px;" />
        <div data-html-description></div>
          
        <!-- Membership period -->
        <p>
            <strong>Duration:</strong>
            <span data-membership-period
                  data-period-format-yearsmonthsdays="{years} year(s), {months} month(s)"
                  data-period-format-weeksdays="{weeks} week(s), {days} day(s)"
                  data-period-format-fixed="Until a fixed date"
                  data-period-format-openended="Lifetime">
            </span>
        </p>
          
        <!-- Already a member -->
        <div data-customer-holds-membership style="display: none; background: #d4edda; padding: 1em;">
            <h3>You're Already a Member!</h3>
            <p>Thank you for your continued support.</p>
        </div>
          
        <!-- Not a member -->
        <div data-customer-does-not-hold-membership style="display: none;">
              
            <!-- Fixed price membership -->
            <div data-is-not-variable-membership style="display: none;">
                <p><strong>Price:</strong> $<span data-price>0</span></p>
                <p><strong>Renewal:</strong> $<span data-renewal-price>0</span></p>
            </div>
              
            <!-- Variable price membership -->
            <div data-is-variable-membership style="display: none;">
                <p>Choose your membership amount:</p>
                <p>
                    Between $<span data-price>0</span> and $<span data-max-price>0</span>
                </p>
                <input type="range" data-variable-price-input style="width: 100%;" />
                <input type="number" data-variable-price-input placeholder="Or enter amount" />
            </div>
              
            <!-- Auto-renew option (only shown if available) -->
            <div data-can-auto-renew style="display: none;">
                <label>
                    <input type="checkbox" data-set-autorenew checked> Auto-renew my membership
                </label>
            </div>
              
            <button data-submit-membership>Purchase Membership</button>
        </div>
    </div>
      
    <!-- Feedback containers -->
    <div data-success-container style="display: none; background: #d4edda; padding: 1em;">
        Success! Redirecting to checkout...
    </div>
    <div data-fail-container style="display: none; background: #f8d7da; padding: 1em;">
        Something went wrong. Please try again.
    </div>
</spektrix-memberships>
```

--------------------------------

### Example of initial basket contents

Source: https://integrate.spektrix.com/docs/iframe-load-trigger

When an iframe loads, it logs basket contents including total, customer status, and items. This example shows the structure when no customer is logged in and the basket is empty.

```json
basketContents:{

    "totalDiscount":0.0,

    "total":0.0,

    "customer":null,

    "tickets":[],

    "membershipSubscriptions":[],

    "giftVouchers":[],

    "merchandiseItems":[],

    "donations":[],

    "hash":"NotLoggedIn"

}
```

```text
basketHash:NotLoggedIn
```

--------------------------------

### Example API Request

Source: https://integrate.spektrix.com/docs/authentication

This is an example of an API request that requires authentication. Ensure the Date header is in UTC.

```http
GET api/v3/customers/I-AK11-1ATK
```

--------------------------------

### Loading States Example

Source: https://integrate.spektrix.com/docs/web-components/memberships/spektrix-memberships

Provides visual feedback during data loading. Shows a loading indicator by default and content once data is fetched.

```html
<spektrix-memberships client-name="thetheatre" custom-domain="tickets.thetheatre.org" membership-id="1213ANPPNPTJDSBPNJDDPKRNVDCBQQRDC">
  <!-- Loading container shown by default while fetching data -->
  <div data-loading-container style="display: block;">
    <p>Loading membership details...</p>
  </div>
  <!-- Loaded container hidden by default, shown after data is loaded -->
  <div data-loaded-container style="display: none;">
    <h2 data-name>Membership Name</h2>
    <p data-description>Description</p>
    <div>Price: $<span data-price>0</span></div>
    <button data-submit-membership>Add to Basket</button>
  </div>
  <div data-success-container style="display: none;">Successfully added to basket!</div>
  <div data-fail-container style="display: none;">Failed to add to basket</div>
</spektrix-memberships>
```

--------------------------------

### Queueing Response Example

Source: https://integrate.spektrix.com/docs/api/queuing

This JSON response indicates that queuing is triggered and provides a message and a code to join the queue.

```json
{
  "eventInstanceId": "12345ABCDE",
  "joinQueue": "/api/v3/basket/queue/12345ABCDE",
  "message": "You must join the queue.",
  "code": "JoinQueue"
}
```

--------------------------------

### Variable Price Membership Example

Source: https://integrate.spektrix.com/docs/web-components/memberships/spektrix-memberships

Handles memberships where customers can choose their own price. Includes input for variable pricing and a submit button.

```html
<spektrix-memberships client-name="thetheatre" custom-domain="tickets.thetheatre.org" membership-id="1213ANPPNPTJDSBPNJDDPKRNVDCBQQRDC">
  <h2 data-name>Membership Name</h2>
  <!-- Shown only for fixed-price memberships -->
  <div data-is-not-variable-membership style="display: none;">
    <h4>Fixed Price Membership</h4>
    <div>$<span data-price>0</span></div>
    <button data-submit-membership>Add to Basket</button>
  </div>
  <!-- Shown only for variable-price memberships -->
  <div data-is-variable-membership style="display: none;">
    <h4>Choose Your Price</h4>
    <p>Select an amount between $<span data-price>0</span> and $<span data-max-price>0</span></p>
    <input type="number" data-variable-price-input placeholder="Enter amount"/>
    <button data-submit-membership>Add to Basket</button>
  </div>
  <div data-success-container style="display: none;">Successfully added to basket!</div>
  <div data-fail-container style="display: none;">Failed to add to basket</div>
</spektrix-memberships>
```

--------------------------------

### Potential Discount API Response Example

Source: https://integrate.spektrix.com/docs/potentialdiscount

This is an example of the JSON response you will receive when querying the potential discount endpoint. It includes the new basket total, total discount, and transaction commission status.

```json
{
  "basketTotal":  16.25,
  "totalDiscount":  5.00,
  "transactionCommission":  {
        "waived":  true,
        "amount":  2.25
    }
}
```

--------------------------------

### Example Custom Payment Addition Response

Source: https://integrate.spektrix.com/docs/custompayments

Example JSON response after successfully adding a custom payment to a transaction. It confirms the payment details including name, amount, and attributes.

```JSON
{
  "name": "EPOS System",
  "amount": 10.0,
  "attributes": [
    {
      "name": "Payment ref",
      "value": "ABC_123"
    }
  ]
}
```

--------------------------------

### Spektrix Memberships with Data Display

Source: https://integrate.spektrix.com/docs/web-components/memberships/spektrix-memberships

This example demonstrates how to use the component to automatically fetch and display membership details from the API, including name, description, and price.

```html
<spektrix-memberships client-name="thetheatre" custom-domain="tickets.thetheatre.org" membership-id="1213ANPPNPTJDSBPNJDDPKRNVDCBQQRDC">

    <h2 data-name>Loading...</h2>

    <p data-description>Loading description...</p>

    <div data-html-description>Loading HTML description...</div>

    <img data-image-url style="max-width: 300px;" />

    <div>

        <strong>Price:</strong> $<span data-price>0</span>

    </div>

    <div>

        <strong>Renewal Price:</strong> $<span data-renewal-price>0</span>

    </div>

    <button data-submit-membership>Buy membership</button>

    <div data-success-container style="display: none;">Successfully added to basket!</div>

    <div data-fail-container style="display: none;">Failed to add to basket</div>

</spektrix-memberships>
```

--------------------------------

### Membership Period Display Example

Source: https://integrate.spektrix.com/docs/web-components/memberships/spektrix-memberships

Displays and formats membership period information with multi-language support. Configurable formats for different durations and languages.

```html
<spektrix-memberships client-name="thetheatre" membership-id="1213ANPPNPTJDSBPNJDDPKRNVDCBQQRDC" culture="en">
  <h2 data-name>Membership Name</h2>
  <div>
    <strong>Membership Period:</strong>
    <span data-membership-period data-period-format-yearsmonthsdays="{years} year(s), {months} month(s), and {days} day(s)" data-period-format-weeksdays="{weeks} week(s) and {days} day(s)" data-period-format-fixed="Valid until a fixed date" data-period-format-openended="Lifetime membership - never expires" data-period-format-yearsmonthsdays-fr="{years} an(s), {months} mois, et {days} jour(s)" data-period-format-weeksdays-fr="{weeks} semaine(s) et {days} jour(s)" data-period-format-fixed-fr="Valide jusqu'à une date fixe" data-period-format-openended-fr="Adhésion à vie - n'expire jamais">
    </span>
  </div>
  <button data-submit-membership>Purchase Membership</button>
</spektrix-memberships>
```

--------------------------------

### Example Custom Payment Types Response

Source: https://integrate.spektrix.com/docs/custompayments

Example JSON response from the 'api/v3/custom-payment-types' endpoint, showing available custom payment types like 'EPOS System' and 'Quick Donation' with their respective attribute definitions.

```JSON
[
  {
    "name": "EPOS System",
    "id": "93AGQTGJBKVCQVRRKBVCCRTPJTBKCNLBH",
    "isRefund": false,
    "attributeDefinitions": [
      {
        "name": "Reference",
        "isRequired": false,
        "type": "Text field"
      },
      {
        "name": "Receipt Number",
        "isRequired": false,
        "type": "Text field"
      }
    ]
  },
  {
    "name": "Quick Donation",
    "id": "7641ANMTGPDKSKCSGLJHMMLMMQCKCNQGP",
    "isRefund": false,
    "attributeDefinitions": [
      {
        "name": "Reference number",
        "isRequired": false,
        "type": "Text field"
      }
    ]
  }
]
```

--------------------------------

### Basic Spektrix Donate Component Example

Source: https://integrate.spektrix.com/docs/web-components/donations/spektrix-donate

Illustrates basic usage of the spektrix-donate element. Ensure 'client-name', 'custom-domain', and 'fund-id' are updated to match your client's details.

```html
<spektrix-donate client-name="thetheatre" custom-domain="tickets.thetheatre.org" fund-id="2603AMKKPMCKTPCPQBBCPVLVKTNCTTMPQ">

    <span>Amount you are donating: £</span><span data-display-donation-amount></span>

    <button data-donate-amount="10">£10</button>

    <button data-donate-amount="20">£20</button>

    <button data-donate-amount="30">£30</button>

    <button data-donate-amount="0.001">0.001</button>

    <button data-submit-donation>Donate</button>

    <button data-clear-donation>Clear Donation</button>

    <div data-success-container style="display: none;">Insert success content/markup here</div>

    <div data-fail-container style="display: none;">Insert failure content/markup here</div>

</spektrix-donate>
```

--------------------------------

### Basic Spektrix Merchandise Component Example

Source: https://integrate.spektrix.com/docs/web-components/merchandise/spektrix-merchandise

Embed this HTML to display a merchandise item. Ensure 'client-name', 'custom-domain', and 'merchandise-item-id' are updated with your client's specific details.

```html
<spektrix-merchandise client-name="thetheatre" custom-domain="tickets.thetheatre.org" merchandise-item-id="1213ANPPNPTJDSBPNJDDPKRNVDCBQQRDC">

    <h2>A merchandise item</h2>

    <div>

        <span>Quantity:

            <span data-display-quantity></span>

        </span>

    </div>

    <div>

        <label for="quantity">

            Custom Quantity

            <input type="text" name="quantity" data-custom-quantity-input>

        </label>

    </div>

  

    <button data-submit-merchandise>Buy merchandise</button>

    <div data-success-container style="display: none;">Insert success content/markup here</div>

    <div data-fail-container style="display: none;">Insert failure content/markup here</div>

</spektrix-merchandise>
```

--------------------------------

### Spektrix Memberships with Ownership Check

Source: https://integrate.spektrix.com/docs/web-components/memberships/spektrix-memberships

This example shows how to conditionally display content based on whether the customer already owns the specified membership, using 'data-customer-holds-membership' and 'data-customer-does-not-hold-membership' attributes.

```html
<spektrix-memberships client-name="thetheatre" custom-domain="tickets.thetheatre.org" membership-id="1213ANPPNPTJDSBPNJDDPKRNVDCBQQRDC">

    <h2>Premium Membership</h2>

    <!-- Shown when customer already owns this membership -->

    <div data-customer-holds-membership style="display: none;">

        <h3>You're a Member!</h3>

        <p>You already have this membership. Thank you for your support!</p>

    </div>

      

    <!-- Shown when customer does NOT own this membership -->

    <div data-customer-does-not-hold-membership style="display: none;">

        <h3 data-name>Membership Details</h3>

        <p data-description>Membership description will appear here</p>

        <div>

            <strong>Price:</strong> $<span data-price>0</span>

        </div>

        <button data-submit-membership>Add to Basket</button>

        <label>

            <input type="checkbox" data-set-autorenew> Auto-renew membership

        </label>

    </div>

      

    <div data-success-container style="display: none;">Successfully added to basket!</div>

    <div data-fail-container style="display: none;">Failed to add to basket</div>

</spektrix-memberships>
```

--------------------------------

### Basic Spektrix Login Status Example

Source: https://integrate.spektrix.com/docs/web-components/login-status/spektrix-login-status

Illustrates how to embed the spektrix-login-status element on your page. Ensure 'client-name' and 'custom-domain' are updated to your client's specific values.

```html
<spektrix-login-status client-name="thetheatre" custom-domain="tickets.thetheatre.org">

    <span data-logged-in-container style="display: none;">

        <a href="https://thetheatre.org/myaccount">

            <span data-logged-in-status-customer-first-name></span>

            <span data-logged-in-status-customer-last-name></span>

            (<span data-logged-in-status-customer-email-address></span>)

        </a>

    </span>

    <span data-logged-out-container>

        <a href="https://thetheatre.org/myaccount">My account</a>

    </span>

</spektrix-login-status>
```

--------------------------------

### Direct Checkout Eligibility Response Example

Source: https://integrate.spektrix.com/docs/spektrix-payments/payments-custom-checkouts/direct-checkout

Example JSON response indicating Direct Checkout availability and the reason if unavailable. 'CustomerOnBasket' is a common reason for unavailability.

```json
{
  "checkoutTypes": {
    "direct": {
      "available": false,
      "reason": "CustomerOnBasket"
    }
  }
}
```

--------------------------------

### Get Customer Record by Email

Source: https://integrate.spektrix.com/docs/apisignup

Use this GET request to retrieve a customer's unique ID using their email address. This ID is necessary for subsequent updates.

```json
{
  "age": null,
  "billingAddress": null,
  "deliveryAddress": null,
  "birthDate": null,
  "email": "email@domain.com",
  "firstName": "Users First Name",
  "lastName": "Users Last Name",
  "mobile": null,
  "name": "Users First Name Users Last Name",
  "phone": null,
  "title": "",
  "passwordSet": false,
  "giftAidDeclarationRequired": false,
  "id": "Customer ID",
  "creditBalance": value
}
```

--------------------------------

### Initiate Customer Payment Endpoint

Source: https://integrate.spektrix.com/docs/spektrix-payments/payments-custom-checkouts/customer-checkout

Use this POST endpoint to initiate a customer payment. Replace system.spektrix.com with your custom domain. Client-side requests are used in Web/Public mode, and server-side requests in System Owner mode.

```http
POST

system.spektrix.com/{clientname}/basket/initiate-customer-payment  
```

```http
POST

system.spektrix.com/{clientname}/baskets/{basketId}/initiate-customer-payment  
```

--------------------------------

### Sample Request Body for Initiate Direct Payment

Source: https://integrate.spektrix.com/docs/spektrix-payments/payments-custom-checkouts/direct-checkout

This JSON object demonstrates the required fields for initiating a direct payment, including customer and billing address details. Ensure all mandatory fields are provided.

```json
{
  "originDomain": "tickets.mytheatre.com",
  "firstName": "Jane",
  "lastName": "Smith",
  "email": "jane.smith@example.com",
  "billingAddress": {
    "line1": "221 Ealing Street",
    "town": "New Haven",
    "country": "US",
    "postcode": "01165",
    "administrativeDivision": "Connecticut"
  }
}

```

--------------------------------

### Link Styling (New Window)

Source: https://integrate.spektrix.com/docs/styling

Use `#(...)#` with `newWindow=` for links that open in a new window. This renders as an anchor tag (`<a>`) with `target="_blank"`.

```Wiki Text
#(newWindow=http://LinkUrl.com)Link Text#
```

--------------------------------

### Spektrix API Reserved Seat Status Response Examples

Source: https://integrate.spektrix.com/docs/Availability

These examples illustrate the custom format for reserved seating plan status data returned by the Spektrix API. The format varies based on whether lock information is included.

```text
A:12345ABCDEF:33,34,35,36,37,38

A:12345ABCDEF::{56789ASDFGH:"Personal Assistant"}:32

A:31234ABCDEF:39,40,41,42,43,44,45

U:12345ABCDEFL:23,24,25,26,27,28,29,30

W:12345ABCDEFL:31

X:31234ABCDEF:{345678POIUYTR:"Members Exclusive Seats"}:46,47,48

I:Restricted+view:33;34
```

--------------------------------

### Get Instance Status Response

Source: https://integrate.spektrix.com/docs/agentguide

This JSON object represents the response from a GET request to retrieve the latest seat availability status for an unreserved event. It includes counts for available, wheelchair, special, and total capacity, as well as seats currently in the basket or unavailable.

```json
{
  "name": "Unreserved Example",
  "available": 175, 
  "wheelchairAvailable": 0,
  "specialAvailable": 25, 
  "capacity": 200,
  "inBasket": 0,
  "unavailable": 25,
  "lockInfoAvailable": null,
  "lockInfoSpecialAvailable": null
}
```

--------------------------------

### Create Customer with Contact Preferences

Source: https://integrate.spektrix.com/docs/apisignup

Add a new customer and assign contact preferences simultaneously by including `AgreedStatements` in the POST request body.

```json
{
  "email": "email@domain.com",
  "firstName": "Users First Name",
  "lastName": "Users Last Name",
  "AgreedStatements": ["Unique Preference ID"]
}
```

```json
{
  "age": null,
  "billingAddress": null,
  "deliveryAddress": null,
  "birthDate": null,
  "email": "email@domain.com",
  "firstName": "Users First Name",
  "lastName": "Users Last Name",
  "mobile": null,
  "name": "Users First Name Users Last Name",
  "phone": null,
  "title": "",
  "passwordSet": false,
  "giftAidDeclarationRequired": false,
  "id": "Customer ID"
  "creditBalance": value
}
```

--------------------------------

### Create Customer with Tags

Source: https://integrate.spektrix.com/docs/apisignup

Add a new customer and assign tags simultaneously by including the `Tags` array with tag IDs in the POST request body.

```json
{
  "email": "email@domain.com",
  "firstName": "Users First Name",
  "lastName": "Users Last Name",
  "Tags": ["Unique Tag ID", "Unique Tag ID"]
}
```

```json
{
  "age": null,
  "billingAddress": null,
  "deliveryAddress": null,
  "birthDate": null,
  "email": "email@domain.com",
  "firstName": "Users First Name",
  "lastName": "Users Last Name",
  "mobile": null,
  "name": "Users First Name Users Last Name",
  "phone": null,
  "title": "",
  "passwordSet": false,
  "giftAidDeclarationRequired": false,
  "id": "Customer ID",
  "creditBalance": value
}
```

--------------------------------

### Get Memberships

Source: https://integrate.spektrix.com/docs/customer

Retrieves a list of all available memberships, including their IDs and names.

```APIDOC
## GET /v3/memberships

### Description
Retrieves a list of all available memberships.

### Method
GET

### Endpoint
/v3/memberships

### Response
#### Success Response (200)
- **description** (string) - 
- **htmlDescription** (string) - 
- **id** (string) - 
- **imageUrl** (string) - 
- **name** (string) - 
- **thumbnailUrl** (string) - 

### Response Example
```json
[
	{
		"description": "",
		"htmlDescription": "",
		"id": "membershipId",
		"imageUrl": "",
		"name": "Membership Name",
		"thumbnailUrl": ""
	}
]
```
```

--------------------------------

### Get Instance Status

Source: https://integrate.spektrix.com/docs/agentguide

Retrieve the latest seat availability status for an unreserved event.

```APIDOC
## GET /instance/status

### Description
Retrieve the latest seat availability status for an unreserved event.

### Method
GET

### Endpoint
/instance/status

### Response
#### Success Response (200)
- **name** (string) - Name of the unreserved plan.
- **available** (integer) - Number of available seats (excluding specialAvailable).
- **wheelchairAvailable** (integer) - Number of wheelchair accessible seats available.
- **specialAvailable** (integer) - Number of locked seats available for the authorized Agent.
- **capacity** (integer) - Total capacity of the seating plan.
- **inBasket** (integer) - Number of seats currently in the basket.
- **unavailable** (integer) - Number of unavailable seats.
- **lockInfoAvailable** (null) - Information about locked seats (available).
- **lockInfoSpecialAvailable** (null) - Information about locked seats (special available).

### Response Example
```json
{
    "name": "Unreserved Example",
    "available": 175,
    "wheelchairAvailable": 0,
    "specialAvailable": 25,
    "capacity": 200,
    "inBasket": 0,
    "unavailable": 25,
    "lockInfoAvailable": null,
    "lockInfoSpecialAvailable": null
}
```
```

--------------------------------

### Comprehensive Membership Example with React

Source: https://integrate.spektrix.com/docs/web-components/memberships/code-samples-memberships

A React component demonstrating advanced Spektrix membership features including dynamic culture selection for multi-language support, loading states, and conditional display of membership details.

```javascript
import React from 'react'
  
function ComprehensiveExample() {
    const [culture, setCulture] = React.useState('en')  
  
    return (
        <div>  
            <label htmlFor="culture-select">Language: </label>  
            <select id="culture-select" value={culture} onChange={(e) => setCulture(e.target.value)}>
                <option value="en">English</option>  
                <option value="fr">Français</option>  
            </select>  
              
            <spektrix-memberships   
                client-name="iframedemo"   
                membership-id="801ARDQDDMGGJKKRTNTJBMCCMMBCPQKCR"   
                forward-to="https://iframetool.integrate.spektrix.com/iframedemo/website/Basket2.aspx"  
                culture={culture}>
                  
                {/* Loading state */}  
                <div data-loading-container style={{display: 'block', textAlign: 'center', padding: '2em'}}>
                    <p>{culture === 'fr' ? 'Chargement...' : 'Loading membership details...'}</p>  
                </div>  
                  
                {/* Loaded content */}  
                <div data-loaded-container style={{display: 'none'}}>
                    <h3 data-name>Membership Name</h3>  
                    <img data-image-url style={{maxWidth: '300px', width: '100%'}} alt="" />  
                    <div data-html-description></div>
                      
                    {/* Membership period with multi-language support */}  
                    <p>
                        <strong>{culture === 'fr' ? 'Durée: ' : 'Duration: '}</strong>
                        <span data-membership-period   
                              data-period-format-yearsmonthsdays="{years} year(s), {months} month(s)"  
                              data-period-format-weeksdays="{weeks} week(s), {days} day(s)"  
                              data-period-format-fixed="Until a fixed date"  
                              data-period-format-openended="Lifetime"  
                              data-period-format-yearsmonthsdays-fr="{years} an(s), {months} mois"
                              data-period-format-weeksdays-fr="{weeks} semaine(s), {days} jour(s)"
                              data-period-format-fixed-fr="Jusqu'à une date fixe"
                              data-period-format-openended-fr="À vie">
                        </span>
                    </p>
                      
                    {/* Already a member - conditional display */}  
                    <div data-customer-holds-membership style={{display: 'none', background: '#d4edda', padding: '1em'}}>

```

--------------------------------

### Spektrix API - Single Tag Response

Source: https://integrate.spektrix.com/docs/eposintegration

This is an example of a single tag object as returned by the Spektrix API.

```json
{
	"id": "Unique Tag ID",
	"name": "Tag Name"
}
```

--------------------------------

### Merchandise Purchase with SKU Variations

Source: https://integrate.spektrix.com/docs/web-components/merchandise/code-samples-merchandise

This example demonstrates how to handle merchandise items with different SKUs (e.g., sizes for a t-shirt). It requires JavaScript to manage SKU selection and update the component's merchandise-item-id.

```html
<spektrix-merchandise client-name="iframedemo" merchandise-item-id="1001ADGKSHLJDTDBJQTBMGLLJRLBJCMNN" id="skuComponent">
  <div>
    <div>
      <span>Buy a t-shirt</span>
    </div>
    <div id="skuSelector">
      <button data-merch-id="801ARDQDDMGGJKKRTNTJBMCCMMBCPQKCR">S</button>
      <button data-merch-id="1001ADGKSHLJDTDBJQTBMGLLJRLBJCMNN">M</button>
      <button data-merch-id="1002AHCBPDSTCNNKTDJHQGSBVHKNHQLMG">L</button>
    </div>
    <div>
      <span>Quantity</span>
    </div>
    <div>
      <button data-decrement-quantity> - </button>
      <span data-display-quantity></span>
      <button data-increment-quantity> + </button>
    </div>
    <div>
      <button data-submit-merchandise>Add to basket</button>
    </div>
  </div>
  <div>
    <div data-success-container style="display: none;">Insert success content/markup here</div>
    <div data-fail-container style="display: none;">Insert failure content/markup here</div>
  </div>
</spektrix-merchandise>

<script>
// Note: This sample code will only with one instance of a spektrix-merchandise component per page. 
// For multiple components, you will need to add an eventlistener to perform the same logic
// for each instance of the component.
  
var skuComponent = document.getElementById('skuComponent');
var skuSelector = skuComponent.querySelector('#skuSelector');
  
  
skuSelector.addEventListener('click', e => {
    let clickedElement = e.srcElement || e.target;
    while (clickedElement) {
        let clickedElementAttributes = clickedElement.attributes
        if (clickedElementAttributes.getNamedItem('data-merch-id') !== null) {
            console.log('clicked item merchid', clickedElement.dataset.merchId)
            skuComponent.merchandiseItemId = clickedElement.dataset.merchId;
            console.log('skuComponent merchid', skuComponent.merchandiseItemId)
            return;
        }
        if (clickedElement === skuSelector) {
            return;
        }
        clickedElement = clickedElement.parentElement;
    }
});
</script>
```

--------------------------------

### HTML Sign Up Form

Source: https://integrate.spektrix.com/docs/signup

Use this standard HTML form structure to capture customer details for sign-up. Ensure 'clientname' and 'customdomain' are replaced with your specific details. The 'ReturnUrl' should point to the page where users are redirected after submission.

```html
<form 
	action="https://customdomain/clientname/website/secure/signup.aspx"
	method="POST"
>
	<input 
		type="hidden" 
		name="ReturnUrl" 
		value="https://mydomain.com/pagetosend"
	/>
  
	<label for="FirstName">First Name:</label>
	<input name="FirstName" id="FirstName" type="text" />
  
	<label for="LastName">Last Name:</label>
	<input name="LastName" id="LastName" type="text" />
  
	<label for="Email">Email Address:</label>
	<input name="Email" id="Email" type="text" />
  
	<input type="submit" name="submit" value="Submit" />
</form>
```

--------------------------------

### Cumulative Donation Component

Source: https://integrate.spektrix.com/docs/web-components/donations/code-samples-donations

Use this component for a basic cumulative donation setup with predefined amount buttons.

```html
<spektrix-donate client-name="iframedemo" fund-id="201AGBHDRLQHNHPHKKMPKLGPMDRDTDMVL" cumulative-mode>

        <span>Amount to Donate £</span>

        <span class="amount" data-display-donation-amount>0</span>

        <br>

        <button data-donate-amount="10">£10</button>

        <button data-donate-amount="20">£20</button>

        <button data-donate-amount="30">£30</button>

        <div>

            <button data-submit-donation>Donate</button>

            <button data-clear-donation>Clear Donation</button>

        </div>

        <div data-success-container style="display: none;">Insert success content/markup here</div>

        <div data-fail-container style="display: none;">Insert failure content/markup here</div>

</spektrix-donate>
```

--------------------------------

### Display Currency Symbol

Source: https://integrate.spektrix.com/docs/web-components/basket-summary/spektrix-basket-summary

Use the `data-basket-summary-currency` attribute to display the currency symbol used by the client. For example, `£` or `$`. 

```html
<span data-basket-summary-currency>£</span>
```

--------------------------------

### CSV/Excel Raw Data Example

Source: https://integrate.spektrix.com/docs/machine-data

This table shows a sample of raw data output in CSV or Excel format. Column names like 'Price' are consistent across different Spektrix databases.

```text
Event Name| Event Date/Time| Seat Status| Ticket Type| Price| Commission  
Macbeth| 2020-08-31 19:30| Sold| Adult| 12| 1  
Macbeth| 2020-08-31 19:30| Sold| Adult| 12| 1  
Macbeth| 2020-08-31 19:30| Sold| Adult| 12| 1  
Macbeth| 2020-08-31 19:30| Sold| Adult| 12| 1  
Macbeth| 2020-08-31 19:30| Sold| Adult| 12| 1  
Macbeth| 2020-08-31 19:30| Sold| Adult| 12| 1  
Macbeth| 2020-08-31 19:30| Sold| Adult| 12| 1  
```

--------------------------------

### Introduce Choose Attendee at Any Point in Purchase Path

Source: https://integrate.spektrix.com/docs/standardbookingflow

This URL introduces the 'Choose Attendee' iframe at any stage of the purchase process. It requires specifying a 'forwardTo' URL for redirection after an attendee is selected.

```html
https://system.spektrix.com/clientname/website/secure/attendee/choose?forwardTo=https://example.com
```

--------------------------------

### Get Basic Customer Details

Source: https://integrate.spektrix.com/docs/customer

Retrieves the basic details of a customer after they have logged in. This includes personal information and any custom attributes.

```APIDOC
## GET /v3/customer

### Description
Retrieves the basic details of a customer.

### Method
GET

### Endpoint
/v3/customer

### Response
#### Success Response (200)
- **age** (null) - 
- **billingAddress** (null) - 
- **deliveryAddress** (null) - 
- **birthDate** (null) - 
- **email** (string) - 
- **firstName** (string) - 
- **lastName** (string) - 
- **mobile** (null) - 
- **name** (string) - 
- **phone** (null) - 
- **title** (string) - 
- **passwordSet** (boolean) - 
- **giftAidDeclarationRequired** (boolean) - 
- **id** (string) - 
- **creditBalance** (value) - 
- **attribute_name** (string) - 

### Response Example
```json
{
	"age": null,
	"billingAddress": null,
	"deliveryAddress": null,
	"birthDate": null,
	"email": "email@domain.com",
	"firstName": "Users First Name",
	"lastName": "Users Last Name",
	"mobile": null,
	"name": "Users First Name Users Last Name",
	"phone": null,
	"title": "",
	"passwordSet": false,
	"giftAidDeclarationRequired": false,
	"id": "Customer ID",
	"creditBalance": value,
	"attribute_name": "attribute_value"
}
```
```

--------------------------------

### Get Customer Record by Email

Source: https://integrate.spektrix.com/docs/apisignup

Retrieves a customer record using their email address. This is a prerequisite for updating customer information.

```APIDOC
## GET /customer

### Description
Retrieves a customer record by their email address.

### Method
GET

### Endpoint
/customer

### Query Parameters
- **email** (string) - Required - The email address of the customer to retrieve.

### Response
#### Success Response (200)
- **age** (integer) - The age of the customer.
- **billingAddress** (object) - The billing address of the customer.
- **deliveryAddress** (object) - The delivery address of the customer.
- **birthDate** (string) - The birth date of the customer.
- **email** (string) - The email address of the customer.
- **firstName** (string) - The first name of the customer.
- **lastName** (string) - The last name of the customer.
- **mobile** (string) - The mobile number of the customer.
- **name** (string) - The full name of the customer.
- **phone** (string) - The phone number of the customer.
- **title** (string) - The title of the customer.
- **passwordSet** (boolean) - Indicates if the customer's password has been set.
- **giftAidDeclarationRequired** (boolean) - Indicates if a Gift Aid declaration is required.
- **id** (string) - The unique identifier for the customer.
- **creditBalance** (number) - The credit balance of the customer.

### Response Example
{
  "age": null,
  "billingAddress": null,
  "deliveryAddress": null,
  "birthDate": null,
  "email": "email@domain.com",
  "firstName": "Users First Name",
  "lastName": "Users Last Name",
  "mobile": null,
  "name": "Users First Name Users Last Name",
  "phone": null,
  "title": "",
  "passwordSet": false,
  "giftAidDeclarationRequired": false,
  "id": "Customer ID",
  "creditBalance": value
}
```

--------------------------------

### Configure Iframe for Resizing

Source: https://integrate.spektrix.com/docs/resizingiframes

Set the 'resize' parameter to 'true' in the iframe's source URL. Ensure the iframe has 'name' and 'id' attributes set to 'SpektrixIFrame' and a height in pixels.

```html
<iframe name="SpektrixIFrame" id="SpektrixIFrame" frameborder="0" src="https://customdomain/clientname/website/Iframe.aspx?resize=true" style="width: 100%; height: 1000px;"></iframe>
```

--------------------------------

### Get Potential Discount

Source: https://integrate.spektrix.com/docs/potentialdiscount

This endpoint allows you to query the API for potential discounts applicable to a basket by providing a membership ID.

```APIDOC
## GET Call

### Description
To query the API for this information, you can use the following endpoint to find out the potential discount of a basket if you were to sign up to a client's membership scheme.

### Method
GET

### Endpoint
`https://domain/clientname/api/v3/basket/potentialdiscount?membershipId={{id}}`

### Parameters
#### Query Parameters
- **membershipId** (string) - Required - The ID of the available Membership to apply for discount calculation.

### Response
#### Success Response (200)
- **basketTotal** (number) - The new total of the basket, including the cost of membership.
- **totalDiscount** (number) - The total discount amount applicable.
- **transactionCommission** (object) - Details about transaction commission.
  - **waived** (boolean) - Indicates if the transaction commission has been waived.
  - **amount** (number) - The amount of transaction commission waived.

### Response Example
```json
{
  "basketTotal": 16.25,
  "totalDiscount": 5.00,
  "transactionCommission": {
    "waived": true,
    "amount": 2.25
  }
}
```
```

--------------------------------

### GET /queue-status/{eventId}

Source: https://integrate.spektrix.com/docs/api/queuing

Polls the status of the queue for a given event. This is recommended for tracking a customer's position in the queue.

```APIDOC
## GET /queue-status/{eventId}

### Description
Polls the status of the queue for a given event. This is recommended for tracking a customer's position in the queue.

### Method
GET

### Endpoint
`/api/queue-status/{eventId}`

### Parameters
#### Path Parameters
- **eventId** (string) - Required - The unique identifier for the event (can be numeric or API-format).

### Response
#### Success Response (200)
- **eventInstanceId** (string) - The unique identifier for the event instance.
- **queueNumber** (integer) - The customer's queue number.
- **headOfQueue** (integer) - The number currently being served.
- **message** (string) - A message indicating the customer's status.
- **code** (string) - The status code, expected to be 'QueuePositionNotReached'.

#### Response Example
```json
{
  "eventInstanceId": "ABCDE12345",
  "queueNumber": 1542,
  "headOfQueue": 1389,
  "message": "You have not reached the head of the queue. Please wait until your number is reached before proceeding.",
  "code": "QueuePositionNotReached"
}
```

### Error Handling
- **429 `QueuePositionNotReached`**: The customer has a valid queue number but has not yet reached the head of the queue. Display position and poll this endpoint periodically.
```

--------------------------------

### Image Display

Source: https://integrate.spektrix.com/docs/styling

Use `$ShowImage$` to display an image. This markup renders as an `<img>` tag with the provided URL.

```Wiki Text
$ShowImage$
```

--------------------------------

### Reference integrate.js with Custom Domain

Source: https://integrate.spektrix.com/docs/customdomains

Replace existing resizeiframe.js references with this integrate.js script, ensuring to substitute placeholder values with your custom subdomain and Spektrix client name. Failure to do so may cause Safari users to be bounced via system.spektrix.com.

```html
<script type="text/javascript" src="https://subdomain.domain.com/clientname/website/scripts/integrate.js"></script>
```

--------------------------------

### Add Basic Spektrix Basket Summary Component Markup

Source: https://integrate.spektrix.com/docs/web-components/WebComponents

This is the initial markup for the `<spektrix-basket-summary>` component. You must replace `{client-name}` and `{custom-domain}` with your specific values.

```html
<spektrix-basket-summary client-name="{client-name}" custom-domain="{custom-domain}">

</spektrix-basket-summary>
```

--------------------------------

### Retrieve Future Events

Source: https://integrate.spektrix.com/docs/addingitems

Use this GET request to fetch all events that have future instances. Consider using date batching for efficiency.

```http
GET /v3/events?filter[hasInstancesAfter]=YYYY-MM-DD
```

--------------------------------

### Retrieve Event Instances with Date Filtering

Source: https://integrate.spektrix.com/docs/api/highlight-access-performances

Use this endpoint to fetch instances for a specific event, filtering by date range for optimal performance. Replace placeholders with your client's system name and the event ID. Include 'start_from' and 'start_to' parameters in YYYY-MM-DD format.

```http
https://system.spektrix.com/{{clientname}}/api/v3/events/{{eventId}}/instances?start_from=YYYY-MM-DD&start_to=YYYY-MM-DD
```

--------------------------------

### Pseudocode for Authorization Header Construction

Source: https://integrate.spektrix.com/docs/authentication

This pseudocode outlines the steps to construct the Authorization header, including calculating the signature. It is applicable to languages where direct implementation is needed.

```pseudocode
BodyStringToSign = BASE-64( MD5( UTF-8( body ) ) ); // This is only required if sending a request with a body, e.g., non-GET requests  

   

StringToSign = HTTP-Method  
                + "\n" + HTTP-Uri  
                + "\n" + HTTP-Date  
                + [ "\n" , BodyStringToSign ]; // This part should not be included in GET requests  

   

Signature = BASE-64-ENCODE( HMAC-SHA1( BASE-64-DECODE(SecretKey), UTF-8( StringToSign ) ) );  

   

Authorization = "SpektrixAPI3 " + LoginName + ":" + Signature;  

```
Tokens:
Raw