dojo/public/proc/spay/stripe.js

/* some format to numbers */
var it=1;
var pl = 0;  //instalment plan index 
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');
/* ====================== */

/*  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;} 
}
/* ====================== */

/* 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;
          if(meses==0){ ccard.hidden = false;}
          else{ 
            cplan.hidden = false;
            var multcc = calc_price();
            document.getElementById('gtc').innerHTML=multcc.toLocaleString();
          }
        }
        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);
  }
});

var pl = document.forms["plform"]["pl"];
document.getElementById("timebutton").addEventListener('click', function(ev){
  cplan.hidden = true;
  ccard.hidden = false;
});

function calc_price(){
  if(desc_estado == 1 && descuento > 0) {
    return (mq.value*cu*(1 - (descuento/100) ) );
  }
  else{ return cu*mq.value;}
};


var multc;
for (var i = 0; i < pl.length; i++) {
  pl[i].addEventListener('change', function() {
    if (this.value == 0 ) {
      multc = calc_price();
      document.getElementById('gtc').innerHTML=multc.toLocaleString();
    }
    else {
      multc = cu*mq.value;
      document.getElementById('gtc').innerHTML=multc.toLocaleString();
    }
  });
};

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

/* stripe magic begins here */
/* ====================================================== */
let availablePlans = [0,3,6,9];

//var stripe = Stripe('publc_key');
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) {
      errorh("connection to stripe failed");
    }
    // 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,
          students:students,
          pl:pl.value
        })
      })
      .then(function(result) {
        result.json().then(function(json) { end_message(json); })
      });
    }
  });
});

const end_message = async (response) => {
  document.getElementById("cover").style.opacity = "0";
  setTimeout(function(){ document.getElementById('cover').hidden = true;},500);
  document.getElementById('cmsg').hidden = false;
  document.getElementById('ccard').hidden = true;
  var message;
  if (response.status === "succeeded" && response.pl !== null ) {
    message = `¡Tu compra a ${ 
        response.pl.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;
};


function errorh(msg){
  document.getElementById("cover").style.opacity = "0";
  setTimeout(function(){ document.getElementById('cover').hidden = true;},500);
  cform.hidden = true;
  cplan.hidden = true;
  cform.hidden = true;
  document.getElementById('cmsg').hidden = false;
  console.log(msg);
  var message = `Tenemos un problema para verificar tus datos. 
    Por favor intenta de nuevo o comunícate con nosotros`;
  document.getElementById("status-message").innerText = message;
  tid=0;
  
}