Use full stripe form

Moving code from mysociety.org's donate form
just use the same approach we do there.

Styles have been adapted for more compact approach.

conf/general-example

@@ -183,3 +183,8 @@ define('REDIS_SENTINELS', '127.0.0.1'); # Can be comma separated list
 define('REDIS_SENTINEL_PORT', '26379');
 define('REDIS_SERVICE_NAME', 'mymaster');
 
+// donate settings
+define('OPTION_STRIPE_PUBLISHABLE_API_KEY', '');
+define('OPTION_STRIPE_SECRET_API_KEY', '');
+define('OPTION_RECAPTCHA_SITE_KEY', '');
+define('OPTION_RECAPTCHA_SECRET', '');

www/docs/js/main.js

@@ -358,3 +358,128 @@ function trackLinkClick(link, category, name, value) {
     document.location.href = link.href;
   })
 }
+
+/* Donate page */
+
+$(function() {
+
+  if ($.easytabs){
+      $('#tab-container').easytabs({ animate: false });
+  }
+
+  var selected = {};
+
+  $('#how-often-monthly').click(function() {
+    $('.donate-recurring-amount').show();
+    $('.donate-one-off-amount').hide();
+    $('#recurring-how-much-10').prop('checked', true);
+  });
+  $('#how-often-once').click(function() {
+    $('.donate-recurring-amount').hide();
+    $('.donate-one-off-amount').show();
+    $('#one-off-how-much-50').prop('checked', true);
+
+  }); 
+
+  $('#gift-aid-yes').click(function() {
+    if($(this).is(':checked')) {
+      $('.donate-fullname').show();
+    } else {
+      $('.donate-fullname').hide();
+    }
+  });
+
+  //Donate form 'other' amount box toggle if box value is empty
+  current_value = $('#how-much-other-value__input').val();
+  if (current_value == '') {
+    $('#how-much-other-value__input').prop( "disabled", true );
+    $('.how-much-other-value').hide();
+  };
+
+  $('[id^=how-much-]').click(function(){
+      if($('#how-much-other').is(":checked")){
+          $('.how-much-other-value').slideDown(100, function(){
+            $('.how-much-other-value__input').prop( "disabled", false ).focus();
+          });
+      }
+      else if($('#how-much-other').is(":not(:checked)")){
+          $('.how-much-other-value').slideUp(100, function(){
+              $('.how-much-other-value__input').prop( "disabled", true );
+          });
+      }
+  });
+
+  $('input[type=radio]').click(function() {
+      selected[this.name] = 1;
+      var total = 0;
+      for (s in selected) {
+          total++;
+      }
+      if (total === 4) {
+          $('.form__error').remove();
+      }
+  });
+
+  $('#donate_button').click(function(e) {
+    e.preventDefault();
+    var giftaid = $('input[name=gift-aid]:checked').val();
+    var howoften = $('input[name=how-often]:checked').val();
+    var amount = $('input[name=how-much]:checked').val();
+    var contact_permission = $('input[name=contact_permission]:checked').val();
+    var full_name = $('input[name=full_name]').val();
+
+    if (amount == 'other') {
+      amount = $('input[name=how-much-other]').val();
+    }
+    $('.form__error').remove();
+    if (!amount || !howoften) {
+      $(this).parent().before('<p class="form__error">Please select an amount to donate.</p>');
+      return;
+    }
+    if (!contact_permission) {
+      $(this).parent().before('<p class="form__error">Please tell us if we can contact you about our work (or not!).</p>');
+      return;
+    }
+    if (giftaid == 'Yes' && !full_name) {
+      $(this).parent().before('<p class="form__error">Please enter your full name for gift aid.</p>');
+      return;
+    }
+
+    var submitPaymentForm = function(){
+        grecaptcha.execute();
+    };
+
+    if (!window.analytics) {
+      return submitPaymentForm();
+    }
+
+    window.analytics.trackEvent(
+      "donate_form_submit", {"frequency": howoften, "value": amount }
+      ).done(submitPaymentForm);
+  });
+
+  });
+
+  function onDonateError(message) {
+    var displayError = document.getElementsByClassName('form__error-wrapper')[0];
+    document.getElementById('spinner').style.display = 'none';
+    displayError.innerHTML = '<p class="form__error">' + message + '</p>';
+  }
+
+  function onDonatePass(token) {
+    var data = $(document.donation_form).serialize();
+    document.getElementById('spinner').style.display = 'inline-block';
+    $.post('/support-us/?stripe=1', data, 'json').then(function(result) {
+      if (result.error) {
+        return onDonateError(result.error);
+      }
+      stripe.redirectToCheckout({
+        sessionId: result.id
+      }).then(function(result) {
+        if (result.error) {
+          onDonateError(result.error.message);
+        }
+      });
+    });
+  }
+

www/docs/style/sass/_twfy-mixins.scss

@@ -228,14 +228,6 @@ $weight_bold: 700;
   }
 }
 
-.donation-box {
-    border: 2px solid black;
-    border-radius: 10px;
-    padding: 10px;
-    text-align:center;
-    background-color: white;
-
-}
 
 .site-nav a.donate-button {
     background-color: darken($colour_pale_red, 10%);

www/docs/style/sass/app.scss

@@ -266,5 +266,6 @@ form {
 @import "parts/policies";
 @import "parts/regional-headers";
 @import "parts/toc";
+@import "parts/donate_form";
 
 @import "print";