Skip to main content

Code Samples

tip

Due to the way in which Memberships work in Spektrix, you cannot have more than one of the same type of Membership in a Basket session at once. The examples on this page all use the same set of Memberships on the same Spektrix system, meaning that if you have already tried using one Component, others might fail due to the pre-existing Membership. In order to continue testing the others out, you'll need to delete them and empty your Basket out which can be done here.

Basic Example​

Join our Gold Membership programme.

Insert success content/markup here
Insert failure content/markup here
<div style="margin-bottom: 1rem;">
    <spektrix-memberships client-name="iframedemo" membership-id="401ANPJQJQPQMRSBDNMVNLSPGTRBVQVRH" forward-to="https://iframetool.integrate.spektrix.com/iframedemo/website/Basket2.aspx">
        <p>Join our Gold Mmbership programme.</p>
        <button  data-submit-membership>$100/yr</button>
        <label for="autorenew">
            <input type="checkbox" name="autorenew" data-set-autorenew>Autorenew?
        </label>
        <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-memberships>
</div>

Monthly Auto-Renewing Donation​

Donate $10 Monthly!

Insert success content/markup here
Insert failure content/markup here
<div style="margin-bottom: 1rem;">
    <spektrix-memberships client-name="iframedemo" membership-id="201AGBHDRLQHNHPHKKMPKLGPMDRDTDMVL" forward-to="https://iframetool.integrate.spektrix.com/iframedemo/website/Basket2.aspx" auto-renew>
        <p>Donate $10 Monthly!</p>
        <button  data-submit-membership>$10/month</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-memberships>
</div>

Choose your membership level​

Insert success content/markup here
Insert failure content/markup here
  • 10% discount
Insert success content/markup here
Insert failure content/markup here
  • 10% discount
  • Access to the members bar
<div style="margin-bottom: 1rem;">
    <spektrix-memberships client-name="iframedemo" membership-id="401ANPJQJQPQMRSBDNMVNLSPGTRBVQVRH" forward-to="https://iframetool.integrate.spektrix.com/iframedemo/website/Basket2.aspx">
        <button class="btn btn-dark mx-2" data-submit-membership>Buy Gold Membership</button>
        <label for="autorenew">
            <input type="checkbox" name="autorenew" data-set-autorenew>Autorenew?
        </label>
        <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-memberships>  
    <br />
    <ul> 
        <li>10% discount</li>
    </ul>
    <br />
    <spektrix-memberships client-name="iframedemo" membership-id="6410ADGSLQHSNTLQCCBGCLVSMJHVNSTHK" forward-to="https://iframetool.integrate.spektrix.com/iframedemo/website/Basket2.aspx">
        <button class="btn btn-dark mx-2" data-submit-membership>Buy Platinum Membership</button>
        <label for="autorenew">
            <input type="checkbox" name="autorenew" data-set-autorenew>Autorenew?
        </label>
        <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-memberships>  
    <br />
    <ul> 
        <li>10% discount</li>
        <li>Access to the members bar</li>  
    </ul>

Amount: £0
<div id="slider-box">
    <h4>Amount: £<span data-item-value>0</span></h4>
    <input id="sliderinput" type="range"  step="1" value="0" min="0" max="200" style="width: 100%">
    <span class="my-4" data-cta style="display: none;">For just £<span data-cta-amount></span> more, you could join our membership programme!</span>
</div>
<spektrix-donate style="margin-top: 2rem" client-name="iframedemo" fund-id="2603AMKKPMCKTPCPQBBCPVLVKTNCTTMPQ" donation-amount="10" forward-to="https://iframetool.integrate.spektrix.com/iframedemo/website/basket2.aspx" data-donate-component>
    <button class="btn btn-dark mx-2" data-submit-donation>Donate</button>
    <div class="my-4" data-success-container style="display: none;">Insert success content/markup here</div>
    <div class="my-4" data-fail-container style="display: none;">Insert failure content/markup here</div>
</spektrix-donate>
<spektrix-memberships client-name="iframedemo" membership-id="7811AHVQTSPCBNLQKKQPBRJBQGNMNPTPB" forward-to="https://iframetool.integrate.spektrix.com/iframedemo/website/Basket2.aspx" data-donate-to-memberships-component style="display: none">
    <button class="btn btn-dark mx-2" data-submit-membership>Buy Membership</button>
    <label for="autorenew">
        <input type="checkbox" name="autorenew" data-set-autorenew>Autorenew?
    </label>
    <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-memberships>

<script>
    var sliderInput = document.getElementById('sliderinput');
    var itemValue = document.querySelector('[data-item-value]');
    var donateComponent = document.querySelector('[data-donate-component]');
    var donateToMembershipsComponent = document.querySelector('[data-donate-to-memberships-component]');
    var cta = document.querySelector('[data-cta]')
    var ctaAmount = document.querySelector('[data-cta-amount]')

    sliderInput.addEventListener('input', function () {
        if (sliderInput.value < 100) {
            sliderInput.step = 1;
            donateToMembershipsComponent.style.display = 'none';
            donateComponent.style.display = 'block';
            donateComponent.donationAmount = sliderInput.value;
        } else if (sliderInput.value >= 100) {
            sliderInput.step = 100;
            donateComponent.style.display = 'none';
            donateToMembershipsComponent.style.display = 'block';
            cta.style.display = 'none';
            donateToMembershipsComponent.membershipId = '401ANPJQJQPQMRSBDNMVNLSPGTRBVQVRH';
        } else {
            donateToMembershipsComponent.style.display = 'block';
            donateToMembershipsComponent.membershipId = '601APNNMRMBJQQPBSCNQGQHGKKCRPSSGN';
        }
        
        if (sliderInput.value > 50 && sliderInput.value < 100) {
            cta.style.display = 'block';
            ctaAmount.textContent = 100 - sliderInput.value;
        }

        itemValue.textContent = sliderInput.value;
        console.log('sliderInput.value', sliderInput.value)
    });
</script>

Instant Priority Booking​

Insert success content/markup here
Insert failure content/markup here
<spektrix-memberships client-name="iframedemo" membership-id="601APNNMRMBJQQPBSCNQGQHGKKCRPSSGN" data-memb-to-priority-booking>
    <button class="btn btn-dark mx-2" data-submit-membership>Add Membership and buy event</button>
    <label for="autorenew">
        <input type="checkbox" name="autorenew" data-set-autorenew>Autorenew?
    </label>
    <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-memberships>
<script>
var membToPriorityBookingComponent = document.querySelector('[data-memb-to-priority-booking]');
var priorityBookingContainer = document.querySelector('[data-priority-booking-container]');
var seatingPlanDiv = document.createElement('div');
seatingPlanDiv.innerHTML =`<iframe src="https://iframetool.integrate.spektrix.com/iframedemo/website/ChooseSeats.aspx?EventInstanceId=3006" frameborder="0" style="width: 100%; min-height: 1000px;" data-memb-iframe></iframe>`;

membToPriorityBookingComponent.addEventListener('success', function (e) {
    priorityBookingContainer.appendChild(seatingPlanDiv);
})
</script>

Comprehensive Example​

This example demonstrates all the advanced features including variable pricing, loading states, multi-language period formatting, customer ownership checking, and conditional display attributes. This example also shows the react code we have used to dynamically update culture in this example for demonstration purposes.

Loading membership details...

Membership Name

Duration:

You're Already a Member!

Thank you for your continued support.

Price: 0
Renewal: 0

Choose your membership amount:

Between 0 and 0

🎁 This membership can be purchased as a gift!

Auto-renewal is not available for this membership.

Success! Redirecting to checkout...
Something went wrong. Please try again.
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'}}>
                        <h4>{culture === 'fr' ? 'Vous êtes déjà membre!' : 'You\'re Already a Member!'}</h4>
                        <p>{culture === 'fr' ? 'Merci pour votre soutien continu.' : 'Thank you for your continued support.'}</p>
                    </div>
                    
                    {/* Not a member - conditional display */}
                    <div data-customer-does-not-hold-membership style={{display: 'none'}}>
                        
                        {/* Fixed price membership */}
                        <div data-is-not-variable-membership style={{display: 'none'}}>
                            <p><strong>{culture === 'fr' ? 'Prix: ' : 'Price: '}</strong><span data-price>0</span></p>
                            <p><strong>{culture === 'fr' ? 'Renouvellement: ' : 'Renewal: '}</strong><span data-renewal-price>0</span></p>
                        </div>
                        
                        {/* Variable price membership */}
                        <div data-is-variable-membership style={{display: 'none'}}>
                            <p>{culture === 'fr' ? 'Choisissez votre montant:' : 'Choose your amount:'}</p>
                            <p>
                                {culture === 'fr' ? 'Entre ' : 'Between '}
                                <span data-price>0</span>
                                {culture === 'fr' ? ' et ' : ' 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={culture === 'fr' ? 'Ou entrez le montant' : 'Or enter amount'} />
                        </div>
                        
                        {/* Conditional: Can be gifted */}
                        <div data-is-giftable style={{display: 'none'}}>
                            <p>{culture === 'fr' ? '🎁 Peut être offert en cadeau!' : '🎁 Can be purchased as a gift!'}</p>
                        </div>
                        
                        {/* Conditional: Can auto-renew */}
                        <div data-can-auto-renew style={{display: 'none'}}>
                            <label>
                                <input type="checkbox" data-set-autorenew defaultChecked /> 
                                {culture === 'fr' ? ' Renouveler automatiquement' : ' Auto-renew membership'}
                            </label>
                        </div>
                        
                        {/* Conditional: Cannot auto-renew */}
                        <div data-cannot-auto-renew style={{display: 'none'}}>
                            <p>{culture === 'fr' ? 'Renouvellement automatique non disponible.' : 'Auto-renewal not available.'}</p>
                        </div>
                        
                        <button className="button button--primary" data-submit-membership>
                            {culture === 'fr' ? 'Acheter l\'adhésion' : 'Purchase Membership'}
                        </button>
                    </div>
                </div>
                
                {/* Feedback containers */}
                <div data-success-container style={{display: 'none', background: '#d4edda', padding: '1em'}}>
                    {culture === 'fr' ? 'Succès!' : 'Success! Redirecting to checkout...'}
                </div>
                <div data-fail-container style={{display: 'none', background: '#f8d7da', padding: '1em'}}>
                    {culture === 'fr' ? 'Erreur.' : 'Something went wrong. Please try again.'}
                </div>
            </spektrix-memberships>
        </div>
    )
}
Last updated on by Andrew 'AJ' Jones