var stripe = Stripe('pk_live_imnWNCnL6iaCAWQbW8kSrJZ9');

var elements = stripe.elements();

var card = elements.create('card', {

hidePostalCode: true,
style: {
  base: {
    iconColor: '#F99A52',
    color: '#32315E',
    lineHeight: '34px',
    '::placeholder': {
      color: '#CFD7DF',
    padding:0,
    }
  },
}

}); card.mount('#card-element');

function generatePassword() {

var length = 8,
    charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",
    retVal = "";
for (var i = 0, n = charset.length; i < length; ++i) {
    retVal += charset.charAt(Math.floor(Math.random() * n));
}
return retVal;

}

function hostingshow() {

if (document.getElementById('hosting').checked) {
    document.getElementById('hostingrecap').style.display = '';
}
else {
    document.getElementById('hostingrecap').style.display = 'none';
}

}

function setOutcome(result) {

var successElement = document.getElementById('success');
var processElement = document.getElementById('process');
var warningElement = document.getElementById('warning');
warningElement.style.display = 'none';
var errorElement = document.getElementById('fail');
errorElement.style.display = 'none';
if (result.token) {
  processElement.style.display = '';
  Stamplay.init('parsiweb');
  var userData = {
      email : document.getElementById('email').value,
      password : generatePassword(),
          company: document.getElementById('companyId').value,
          firstname: document.getElementById('firstname').value,
          lastname: document.getElementById('lastname').value,
  }
  Stamplay.User.signup(userData)
      .then(function(user) {
      Stamplay.User.login(user)
          .then(function(user) {
          Stamplay.Stripe.createCustomer(user.id)
              .then(function(res) {
              Stamplay.Stripe.createCreditCard(user.id, result.token.id)
                  .then(function(creditCard) {
                  // success
                  // Appel sur le webhook avec les data en question
                      Stamplay.Webhook("parsiweb_payment")
                      .post({
                          userId : user.id,
                          organization_name: document.getElementById('company').value,
                          address: document.getElementById('street').value,
                          zip_code: document.getElementById('zip').value,
                          city: document.getElementById('city').value,
                          country: document.getElementById('country').value,
                          hosting: document.getElementById('hosting').value,
                      })
                      .then(function(res) {
                      // success
                      processElement.style.display = 'none';
                      successElement.style.display = ''
                      }, function(err) {
                      // error
                      processElement.style.display = 'none';
                      errorElement.style.display = ''
                      cb("unable to send form data")
                      })
                  }, function(err) {
                  // error
                  processElement.style.display = 'none';
                  errorElement.style.display = ''
                  cb("unable to create customer")
                  })
              }, function(err){
              // error
              processElement.style.display = 'none';
              errorElement.style.display = ''
              cb("unable to create card")
              })
          }, function(err) {
          // error
          processElement.style.display = 'none';
          errorElement.style.display = ''
          cb("unable to login user")
          })
      }, function(err) {
      // error
      processElement.style.display = 'none';
      errorElement.style.display = ''
      cb("unable to signup user")
      })
} else if (result.error) {
      processElement.style.display = 'none';
  errorElement.style.display = ''
}

}

card.on('change', function(event) {

setOutcome(event);

});

var payment = document.getElementById('pay'); payment.onclick = function () {

    var warningElement = document.getElementById('warning');
    warningElement.style.display = 'none'
    var form = document.getElementById('payment-form');
    for(var i=0; i < form.elements.length; i++){
    if(form.elements[i].value === '' && form.elements[i].hasAttribute('required')){
            warningElement.style.display = '';
            return false;
    }
}
warningElement.style.display = 'none'
            event.preventDefault();
                    var options = {
                    name: document.getElementById('firstname').value + " " + document.getElementById('lastname').value,
                    address_line1: document.getElementById('company').value,
                    address_line2: document.getElementById('street').value,
                    address_city: document.getElementById('city').value,
                    address_zip: document.getElementById('zip').value,
                    };
                    stripe.createToken(card, options).then(setOutcome);

};