check

public/misc/stripe.js

@@ -0,0 +1,131 @@
+
+var stripe = Stripe('pk_test_wxFt0GhsUK2YsprkLXa2iFrQ00nfjAeucu');
+var elements = stripe.elements();
+var cardElement = elements.create('card', {
+  style: {
+    base: {
+      //iconColor: '#c4f0ff',
+      iconColor: '#64a0af',
+      color: '#000000',
+      fontWeight: 500,
+      fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
+      fontSize: '18px',
+      fontSmoothing: 'antialiased',
+      ':-webkit-autofill': {
+        color: '#fce883',
+      },
+      '::placeholder': {
+  //      color: '#87BBFD',
+        color: '#87BBFD',
+      },
+    },
+    invalid: {
+      iconColor: '#8f577e',
+      color: '#8F577E',
+    },
+  },
+});
+cardElement.mount('#card-element');
+
+
+var cardholderName = document.getElementById('cardholder-name');
+var cardButton = document.getElementById('card-button');
+
+///*y este el codigo de validación de la tarjeta*/
+cardButton.addEventListener('click', function(ev) {
+  document.getElementById('cover').hidden = false;
+  document.getElementById("cover").style.opacity = "0.8";
+  stripe.createPaymentMethod('card', cardElement, {
+    billing_details: {name: cardholderName.value}
+  })
+  .then(function(result) {
+    // Show error in payment form 
+    if (result.error) {
+      document.getElementById("cover").style.opacity = "0";
+      setTimeout(function(){ document.getElementById('cover').hidden = true;},500);
+      console.log("network error");
+    }
+    // Otherwise send paymentMethod.id to your server (see Step 2)
+    else { 
+      fetch('/xpay', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ payment_method_id: result.paymentMethod.id, req:"precheck"})
+      })
+      .then(function(result) {
+        // Handle server response (see Step 3)
+        result.json().then(function(json) { handleInstallmentPlans(json); })
+      });
+    }
+  });
+});
+
+///*presenta los planes de pago */
+const selectPlanForm = document.getElementById('installment-plan-form');
+let availablePlans = [];
+
+const handleInstallmentPlans = async (response) => {
+  if (response.error) { // Show error from server on payment form
+    console.log("preauth response error");
+  } 
+  else {
+    // Store the payment intent ID.
+    document.getElementById('payment-intent-id').value = response.intent_id;
+    availablePlans = response.available_plans;
+    // Show available installment options
+    availablePlans.forEach((plan, idx) => {
+      const newInput = document.getElementById('immediate-plan').cloneNode();
+      newInput.setAttribute('value', idx);
+      newInput.setAttribute('id', '');
+      const label = document.createElement('label');
+      label.appendChild(newInput);
+      label.appendChild(
+        document.createTextNode(`${plan.count} meses`),
+      );
+      selectPlanForm.appendChild(label);
+    });
+    document.getElementById('cinfo').hidden = true;
+    document.getElementById('cplan').hidden = false;
+  }
+  document.getElementById("cover").style.opacity = "0";
+  setTimeout(function(){ document.getElementById('cover').hidden = true;},500);
+};
+
+// termina la transacción
+const confirmButton = document.getElementById('confirm-button');
+confirmButton.addEventListener('click', async (ev) => {
+  document.getElementById('cover').hidden = false;
+  document.getElementById("cover").style.opacity = "0.8";
+  const selectedPlanIdx = selectPlanForm.installment_plan.value;
+  const selectedPlan = availablePlans[selectedPlanIdx];
+  const intentId = document.getElementById('payment-intent-id').value;
+  const response = await fetch('/xpay', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({
+      payment_intent_id: intentId,
+      selected_plan: selectedPlan,
+      req:"check"
+    }),
+  });
+  const responseJson = await response.json();
+  // Show success / error response.
+  document.getElementById("cover").style.opacity = "0";
+  setTimeout(function(){ document.getElementById('cover').hidden = true;},500);
+  document.getElementById('cmsg').hidden = false;
+  document.getElementById('cplan').hidden = true;
+  var message;
+  if (responseJson.status === "succeeded" && selectedPlan !== undefined) {
+    message = `¡Tu compra a ${
+      selectedPlan.count
+    } meses sin intereses se ha realizado con éxito! `;
+  } else if (responseJson.status === "succeeded") {
+    message = "¡Tu compra se ha realizado con éxito!";
+  } else {
+    message = `Tenemos un problema para verificar tus datos. 
+      Por favor intenta de nuevo o comunícate con nosotros`;
+  }
+
+  document.getElementById("status-message").innerText = message;
+});
+

public/misc/xpay.css

@@ -0,0 +1,44 @@
+html{font-family:"serif";}
+section.title{
+  /*background-color:#2f2c2c;*/
+  /*color:white;*/
+}
+
+article.title{
+}
+
+h2{
+}
+h1{
+}
+div#cover{
+  background: black;
+  z-index: 85;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  transition:opacity .4s linear;
+  top:0px;
+  opacity:0;
+}
+section.cardinfo{
+}
+div#details{
+  min-width:504px;
+}
+form{
+  text-align:center;
+}
+label{
+  text-align:center;
+  margin:auto;
+}
+input{
+  display:block;
+  margin:auto;
+}
+
+button{
+}
+div#card-element{
+}