check

templates/misc/stripe.html.ep

@@ -0,0 +1,56 @@
+
+% 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>