Payment Switcher

Open in Figma View all renders

Payment Switcher - Annual

This example shows an annual payment switcher component. 

<label class="payment-switcher" for="test-id1-annual">
    <div class="check-radio">
        <input id="test-id1-annual" class="payment-switcher__radio-button" type="radio" name="test-id1" value="a">
    </div>
    <div class="payment-switcher__content heading">
        <div class="gap-s flex flex--column">
            <p class="bold">Annual</p>
            <p>Payment today</p>
        </div>
        <div class="payment-switcher__summary">
            <span class="bold">£398.10</span>
            <span> / year</span>
        </div>
    </div>
</label>

Payment Switcher - Monthly

This example shows a monthly payment switcher component. 

<label class="payment-switcher" for="test-id2-monthly">
    <div class="check-radio">
        <input id="test-id2-monthly" class="payment-switcher__radio-button" type="radio" name="test-id2" value="m">
    </div>
    <div class="payment-switcher__content heading">
        <div class="gap-s flex flex--column">
            <p class="bold">Monthly</p>
            <div class="monthly-breakdown">
                <div class="monthly-breakdown__content heading">
                    <p class="bold">£38.27</p>
                    <p class="copy--small">today</p>
                </div>
                <div class="monthly-breakdown__circle-container copy--small">
                    <span class="monthly-breakdown__circle-text">then</span>
                </div>
                <div class="monthly-breakdown__content heading">
                    <p class="bold">£38.20</p>
                    <p class="copy--small">x11 months</p>
                </div>
            </div>
        </div>
        <div class="payment-switcher__summary">
            <span class="bold">£398.10</span>
            <span> / year</span>
        </div>
    </div>
</label>

Payment Switcher - Disabled

This example shows a disabled payment switcher component. 

<label class="payment-switcher" for="test-id3-annual">
    <div class="check-radio">
        <input id="test-id3-annual" disabled class="payment-switcher__radio-button" type="radio" name="test-id3" value="a">
    </div>
    <div class="payment-switcher__content heading">
        <div class="gap-s flex flex--column">
            <p class="bold">Annual</p>
            <p>Payment today</p>
        </div>
        <div class="payment-switcher__summary">
            <span class="bold">£398.10</span>
            <span> / year</span>
        </div>
    </div>
</label>

Payment Switcher - Condensed

This example shows a payment switcher component in condensed layout. 

<label class="payment-switcher payment-switcher--condensed" for="test-id4-monthly">
    <div class="check-radio">
        <input id="test-id4-monthly" class="payment-switcher__radio-button" type="radio" name="test-id4" value="m">
    </div>
    <div class="payment-switcher__content copy">
        <div class="gap-s flex flex--column">
            <p class="bold">Monthly</p>
            <div class="monthly-breakdown">
                <div class="monthly-breakdown__content copy">
                    <p class="bold">£38.27</p>
                    <p class="copy--small">today</p>
                </div>
                <div class="monthly-breakdown__circle-container copy--small">
                    <span class="monthly-breakdown__circle-text">then</span>
                </div>
                <div class="monthly-breakdown__content copy">
                    <p class="bold">£38.20</p>
                    <p class="copy--small">x11 months</p>
                </div>
            </div>
        </div>
        <div class="payment-switcher__summary">
            <span class="bold">£398.10</span>
            <span> / year</span>
        </div>
    </div>
</label>