check
This commit is contained in:
mynah
209
public/home/spay/stripe.js
Normal file
209
public/home/spay/stripe.js
Normal file
@@ -0,0 +1,209 @@
|
||||
/* some format to numbers */
|
||||
var it=1;
|
||||
var students = new Array(10);
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
/* 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');
|
||||
cinfob.addEventListener('click', function(ev){
|
||||
it --;
|
||||
atof();
|
||||
if (it==1){cinfob.hidden=true;}
|
||||
|
||||
});
|
||||
|
||||
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();
|
||||
cform.hidden = true;
|
||||
ccard.hidden = false;
|
||||
}
|
||||
});
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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", qantity: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 {
|
||||
// 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;
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user