dojo/public/proc/spay/stripe.js

/* some format to numbers */
var it=1;
var students = new Array(10);

/* price format (comas) */
window.addEventListener('load', function() {
  document.getElementById('cu').innerHTML=cu.toLocaleString();
  document.getElementById('gt').innerHTML=cu.toLocaleString();
});

var mq = document.forms["cform"]["mq"];
mq.addEventListener('change',function() {
  var mult = cu*mq.value;
  document.getElementById('gt').innerHTML=mult.toLocaleString();
});
/* ====================== */

/* vars to hide contact form, show card info fields */ 
var cinfob = document.getElementById('cinfob');
var cinfo = document.getElementById('cinfo');
var cform = document.getElementById('cform');
var ccard = document.getElementById('ccard');
/* ====================== */

/* back button ========== */
cinfob.addEventListener('click', function(ev){ 
  it --;
  atof();
  if (it==1){cinfob.hidden=true;}
  
});
/* ====================== */

/* fwd button============ */
cinfo.addEventListener('click', function(ev){ 
  if ( 
    (document.forms["cform"]["mname"].value =="") || 
    (document.forms["cform"]["mmail"].value =="")
  ){console.log("form incomplete");}
  else if ( mq.value > it) {
    students[it - 1]=ftoa();
    it ++;
    if(typeof students[it - 1]!== "undefined"){ atof(); }
    cinfob.hidden=false;
  }
  else {
    students[it - 1]=ftoa();
    document.getElementById('cover').hidden = false;
    document.getElementById("cover").style.opacity = "0.8";
    fetch('/spay/userCheck', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ students:students, req:"precheck", mq:mq.value})

    })
      .then((response) => response.json())
      .then((data) => { 
        if(data.userst == "0"){
          cform.hidden = true;
          ccard.hidden = false;
        }
        else{ alert("hay un error en los datos de alumnos"); }
      })
      .catch((error) => {
        console.error('Error:', error);
      });

    document.getElementById("cover").style.opacity = "0";
    setTimeout(function(){ document.getElementById('cover').hidden = true;},500);
  }
});

/* ====================== */

/*  save form to array=== */
function ftoa(){
  var rad;
  if (document.getElementById('r2').checked) { rad = document.getElementById('r2').value; }
  else if(document.getElementById('r1').checked) { rad = document.getElementById('r1').value; }
  else { rad = document.getElementById('r3').value; }

  var x= [
   document.forms["cform"]["mname"].value,
   document.forms["cform"]["mmail"].value,
   document.getElementById('obs').value,
   rad
  ]
  var tmp=mq.value;
   document.getElementById("cform").reset();
   mq.value=tmp;

  return x;
}
/* ====================== */

/*  load form from array=== */
function atof(){
 document.forms["cform"]["mname"].value = students[it-1][0];
 document.forms["cform"]["mmail"].value = students[it-1][1];
 document.getElementById('obs').value = students[it-1][2];
 if(document.getElementById('r2').value == students[it-1][3]){ document.getElementById('r2').checked=true;} 
 if(document.getElementById('r1').value == students[it-1][3]){ document.getElementById('r1').checked=true;} 
 if(document.getElementById('r3').value == students[it-1][3]){ document.getElementById('r3').checked=true;} 
}
/* ====================== */

/* stripe magic begins here */
/* ====================================================== */
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('/spay/intentCreate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ payment_method_id: result.paymentMethod.id, req:"precheck", mq:mq.value, tid:tid})
      })
      .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 {
    // si avaliable plans es indefinido, se queda alli con el cover
    // 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('ccard').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('/spay/intentConfirm', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      payment_intent_id: intentId,
      selected_plan: selectedPlan,
      req:"check",
      students:students,
      mq:mq.value,
      tid:tid
    }),
  });
  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;
});