Payment Field

Open in Figma View all renders

Payment Field Display - Card

This example shows a payment field component. It uses a 'CreditDebitCard' atom as it's content inside the component itself so there is no need to reference it. It also has an image to the left indicating the type of payment method being referenced. 

<div class="payment-field" data-testid="payment-field-display">
    <div class="payment-field__image payment-field__image-visa" data-testid="payment-credit-debit-card-image"></div>
    <div>
        <span class="payment-field__payment-number" data-testid="payment-field__number">************7989</span>
        <span class="payment-field__expiry" data-testid="payment-credit-debit-card-details">
            Expires: 02/26, Mx Sam Green
        </span>
    </div>
</div>

Payment Field Display - Direct Debit

This example shows a payment field component. It uses a 'DirectDebit' atom as it's content inside the component itself so there is no need to reference it. It also has an image to the left indicating the type of payment method being referenced. 

<div class="payment-field" data-testid="payment-field-display">
    <div class="payment-field__image payment-field__image-direct-debit" data-testid="payment-direct-debit-image"></div>
    <div>
        <span class="payment-field__payment-number" data-testid="payment-field__number">****7898</span>
        <span class="payment-field__expiry" data-testid="payment-direct-debit-details">
            Sort code: 01-02-03, Mx Sam Green
        </span>
    </div>
</div>

Variations and modifiers

Payment Field Radio Button

This is the variation of the payment field component. It uses a 'CustomRadio' atom as it's content inside the component itself so there is no need to reference it. 

<fieldset class="input-field ">
    <legend class="copy copy--bold micro-spacing--fixed-desktop">Radios</legend>
    <label class="check-radio justify-content-between" for="number2-1">
        <div class="payment-field" data-testid="payment-field-display">
            <div class="payment-field__image payment-field__image-direct-debit" data-testid="payment-direct-debit-direct-debit-image"></div>
            <div>
                <span class="payment-field__payment-number" data-testid="payment-direct-debit-direct-debit-number">****7898</span>
                <span class="payment-field__expiry" data-testid="payment-direct-debit-direct-debit-details">
                    Sort code: 01-02-03, Mx Sam Green
                </span>
            </div>
        </div>
        <input id="number2-1" class="valid" type="radio" name="group1" value="1">
    </label>
    <div class="separator"></div>
    <label class="check-radio justify-content-between" for="number2-2">
        <div class="payment-field" data-testid="payment-field-display">
            <div class="payment-field__image payment-field__image-visa" data-testid="payment-card-credit-debit-card-image"></div>
            <div>
                <span class="payment-field__payment-number" data-testid="payment-card-credit-debit-number">************7989</span>
                <span class="payment-field__expiry" data-testid="payment-card-credit-debit-card-details">
                    Expires: 02/26, Mx Sam Green
                </span>
            </div>
        </div>
        <input id="number2-2" class="valid" type="radio" name="group1" value="2">
    </label>
    <div class="input-field__validation"></div>
</fieldset>