% stash css => ["misc/xpay.css"];
% stash js => ["misc/stripe.js"];
<section class="header">
  <h2 class="head"><%== $header %></h2>
</section>
<section class="title">
  <article class="title">
    <h2><%= $title %></h2>
    <h1><%= $subtitle %></h1>
  </article>
</section>

<section class="payment flex">
  <div id="cover" hidden></div>
  <article id="cinfo" class="cardinfo">
    <div class="subtitle"><h1>Datos de la tarjeta</h1></div>
    <div id="details">
      <label>Nombre del titular </label>
      <input id="cardholder-name" type="text" placeholder="Cardholder name">
      <!-- placeholder for Elements -->
      <label>Numero de tarjeta </label>
      <div id="card-element"></div>
      <button id="card-button">Siguiente</button>
    </div>
  </article>
    <!--  opciones de plan    -->
  <article id="cplan" class="plan" hidden>
    <div class="subtitle"><h1>Planes de pago</h1></div>
    <div id="plans" >
      <form id="installment-plan-form" >
        <label>
          <input id="immediate-plan" type="radio" name="installment_plan" value="-1" />
          Un solo pago
        </label>
        <input id="payment-intent-id" type="hidden" />
      </form>
    <button id="confirm-button">Confirmar Pago</button>
    </div>
  </article>
  <article id="cmsg" class="message" hidden>
    <div id="result">
      <p id="status-message"></p>
    </div>
    <div id="ccontact" hidden>
      <form id="fcontact">
        <label for="cname">Nombre</label>
        <input type="text" name="cname"></input>
        <label for="cmail">Correo</label>
        <input type="email" name="cmail"></input>
        <label for="ccomment">Comentarios</label>
        <input type="text" name="ccomment"></input>
      </form>
    </div>
  <article>
</section>