<div class="radio-wrapper content-box__row " >
  <div class="radio__input"> 
    <input id="checkout_payment_gateway_Isafeccline" class="input-radio checkout_payment_gateway" type="radio" value="Isafeccline" name="payment" {openzc:if $_SESSION['payment']=="Isafeccline"}checked=""{/openzc:if}>
  </div>
  <div class="radio__label payment-method-wrapper ">
    <label for="checkout_payment_gateway_Isafeccline" class="radio__label__primary content-box__emphasis payment-method"> <img src="includes/modules/payment/ps/m.png" height="30px"/></label>
    <div class="radio__label__accessory">
      <ul role="list">
      <!--
        <li class="payment-icon payment-icon--visa"></li>
        <li class="payment-icon payment-icon--master"></li>
        <li class="payment-icon payment-icon--american-express"></li>
        <li class="payment-icon payment-icon--discover"></li>-->
      </ul>
    </div>
    <div id="payment_gateway_description" class="visually-hidden"></div>
  </div>
</div>
<div id="payment-gateway-subfields-Isafeccline" class="radio-wrapper payment-gateway-subfields content-box__row content-box__row--secondary card-fields-container card-fields-container--loaded card-fields-container--transitioned {openzc:if $_SESSION['payment']!='Isafeccline'}hidden{/openzc:if}">
  <div class="fieldset">
    <div class="field field--required">
      <div class="field__input-wrapper field__input-wrapper--icon-right">
        <label class="field__label field__label--visible" for="checkout_credit_card_number">Card number</label>
        <input {openzc:if $_SESSION['payment']!="Isafeccline"}disabled="disabled"{/openzc:if} required id="number" class="field__input credit-card-number" name="cardNo" inputmode="numeric" type="text" pattern="*" placeholder="Card number" >
        <div class="field__icon">
          <div data-tooltip="true" id="credit_card_number_tooltip" class="tooltip-container">
            <button type="button" class="tooltip-control" >
            <svg class="icon-svg icon-svg--color-adaptive-lighter icon-svg--size-16 icon-svg--block icon-svg--center" focusable="false">
              <use xlink:href="#lock"></use>
            </svg>
            </button>
            <span class="tooltip" role="tooltip" id="tooltip-for-credit_card_number">All transactions are secure and encrypted.</span> </div>
        </div>
      </div>
    </div>
    <div class="field field--required">
      <div class="field__input-wrapper">
        <label class="field__label field__label--visible" for="checkout_credit_card_name">Name on card</label>
        <input {openzc:if $_SESSION['payment']!="Isafeccline"}disabled="disabled"{/openzc:if} required id="name" placeholder="Name on card" name="name" type="text" inputmode="text" pattern="*" class="field__input" aria-describedby="error-for-name tooltip-for-name">
      </div>
    </div>
    <div class="field--half field field--required">
      <div class="field__input-wrapper">
        <label class="field__label field__label--visible" for="checkout_credit_card_expiry">Expiration date (MM / YY)</label>
        <input {openzc:if $_SESSION['payment']!="Isafeccline"}disabled="disabled"{/openzc:if} required autocomplete="cc-exp"id="expiry" placeholder="Expiration date (MM / YY)" name="expiry" type="text" inputmode="numeric" pattern="*" class="field__input expiration-month-and-year">
      </div>
    </div>
    <div class="field--half field field--required">
      <div class="field__input-wrapper field__input-wrapper--icon-right">
        <label class="field__label field__label--visible" for="checkout_credit_card_verification_value">Security code</label>
        <input {openzc:if $_SESSION['payment']!="Isafeccline"}disabled="disabled"{/openzc:if} required autocomplete="cc-csc" id="verification_value" name="cvv" placeholder="Security code" type="text" inputmode="numeric" pattern="[0-9]*"  class="field__input security-code">
        <div class="field__icon">
          <div data-tooltip="true" id="verification_value_tooltip" class="tooltip-container">
            <button type="button" class="tooltip-control" data-tooltip-control="true" aria-label="More information" aria-describedby="tooltip-for-verification_value" aria-controls="tooltip-for-verification_value" aria-pressed="false">
            <svg class="icon-svg icon-svg--color-adaptive-lighter icon-svg--size-16 icon-svg--block icon-svg--center" role="presentation" aria-hidden="true" focusable="false">
              <use xlink:href="#question"></use>
            </svg>
            </button>
            <span id="tooltip-for-verification_value" class="tooltip" role="tooltip">
				<span data-cvv-tooltip="unknown"> 3-digit security code usually found on the back of your card. American Express cards have a 4-digit code located on the front. </span>
			</span>
			</div>
        </div>
      </div>
    </div>
  </div>
</div>