make stripe-checkout functionality work and style code a bit

src/js/components/membershipForm.js

@@ -10,32 +10,32 @@ var MembershipInfoForm = require('./membershipInfoForm.js');
 module.exports = React.createClass({
   getInitialState() {
     return {
-      userInfo: null,
+      userInfo:        null,
       infoFormSuccess: false,
-      paymentSuccess: false
+      paymentSuccess:  false
     };
   },
 
   handlePaymentSuccess() {
-    this.setState({paymentSuccess: true});
+    this.setState({ paymentSuccess: true });
   },
 
   handleInfoFormSuccess(userInfo) {
     this.setState({
-      userInfo: userInfo,
+      userInfo:        userInfo,
       infoFormSuccess: true,
     });
   },
 
   render() {
     if(!this.state.infoFormSuccess) {
-      return <MembershipInfoForm onSuccess={this.handleInfoFormSuccess}></MembershipInfoForm>
+      return <MembershipInfoForm onSuccess={ this.handleInfoFormSuccess }></MembershipInfoForm>
 
     } else if (!this.state.paymentSuccess) {
       return (
         <StripeCheckout
-          payerName={this.state.userInfo.name}
-          onPaymentSuccess={this.handlePaymentSuccess}>
+          userInfo         = { this.state.userInfo }
+          onPaymentSuccess = { this.handlePaymentSuccess }>
         </StripeCheckout>)
 
     } else {

src/js/components/membershipInfoForm.js

@@ -10,10 +10,10 @@ var api = require('../api');
 var StripeCheckout = require('./stripeCheckout.js');
 
 var fieldNameTranslations = {
-  email: {fi: "Sähköpostiosoite"},
-  name: {fi: "Koko nimi"},
-  handle: {fi: "Slack-käyttäjätunnus"},
-  residence: {fi: "Paikkakunta"}
+  email:     { fi: "Sähköpostiosoite" },
+  name:      { fi: "Koko nimi "},
+  handle:    { fi: "Slack-käyttäjätunnus "},
+  residence: { fi: "Paikkakunta" }
 }
 
 function validateEmail(email) {
@@ -25,12 +25,12 @@ module.exports = React.createClass({
 
   getInitialState() {
     return {
-      email: '',
-      name: '',
-      handle: '',
+      email:     '',
+      name:      '',
+      handle:    '',
       residence: '',
-      sending: false,
-      errors: []
+      sending:   false,
+      errors:    []
     };
   },
   onSubmit(e) {
@@ -43,9 +43,9 @@ module.exports = React.createClass({
 
 
     var userInfo = {
-      email: this.state.email,
-      name: this.state.name,
-      handle: this.state.handle,
+      email:     this.state.email,
+      name:      this.state.name,
+      handle:    this.state.handle,
       residence: this.state.residence,
     }
 
@@ -56,7 +56,7 @@ module.exports = React.createClass({
     if(userInfoErrors.length){
       this.setState({
         sending: false,
-        errors: userInfoErrors
+        errors:  userInfoErrors
       });
       console.log("errorei");
     } else {
@@ -64,7 +64,7 @@ module.exports = React.createClass({
     }
   },
   handleError(err) {
-    this.setState({error: err, sending: false});
+    this.setState({ error: err, sending: false });
   },
   onChange(e) {
     if(e.target.value === this.state[e.target.name]) {
@@ -81,18 +81,18 @@ module.exports = React.createClass({
     var foundErrors = [];
 
     if (!this.state.name)
-      foundErrors.push({field: 'name', type: 'missing'});
+      foundErrors.push({ field: 'name', type: 'missing' });
 
     if (!this.state.email)
-      foundErrors.push({field: 'email', type: 'missing'});
+      foundErrors.push({ field: 'email', type: 'missing' });
     else if(!validateEmail(this.state.email))
-      foundErrors.push({field: 'email', type: 'invalid'});
+      foundErrors.push({ field: 'email', type: 'invalid' });
 
     if (!this.state.handle)
-      foundErrors.push({field: 'handle', type: 'missing'});
+      foundErrors.push({ field: 'handle', type: 'missing' });
 
     if (!this.state.residence)
-      foundErrors.push({field: 'residence', type: 'missing'});
+      foundErrors.push({ field: 'residence', type: 'missing' });
 
 
     return foundErrors;
@@ -100,10 +100,10 @@ module.exports = React.createClass({
 
   render() {
     var formClasses = classSet({
-      'form': true,
+      'form':            true,
       'membership-form': true,
-      'has-error': this.state.errors.length,
-      'sending': this.state.sending
+      'has-error':       this.state.errors.length,
+      'sending':         this.state.sending
     });
 
 
@@ -117,9 +117,9 @@ module.exports = React.createClass({
       fieldsWithErrors.push(err.field);
 
       if(err.type == 'missing') {
-        feedbackText = `${fieldNameTranslations[err.field].fi} on pakollinen.`
+        feedbackText = `${ fieldNameTranslations[err.field].fi } on pakollinen.`
       } else if (err.type == 'invalid') {
-        feedbackText = `${fieldNameTranslations[err.field].fi} on virheellinen.`
+        feedbackText = `${ fieldNameTranslations[err.field].fi } on virheellinen.`
       }
 
       feedbackMessages.push((<div key={i} className='form--message'>{ feedbackText }</div>))
@@ -127,7 +127,7 @@ module.exports = React.createClass({
 
 
     /* generate input fields */
-    var fieldNames = ['name', 'email', 'handle', 'residence'];
+    var fieldNames  = ['name', 'email', 'handle', 'residence'];
     var inputFields = [];
 
     fieldNames.forEach((fieldName) => {

src/js/components/stripeCheckout.js

@@ -33,75 +33,51 @@ module.exports = React.createClass({
     };
   },
 
-  setOutcome(result) {
-    if (result.token) {
-      this.setState({
-        error: null
-      })
-
-      request.post(api('membership'), {
-        stripeToken: result.token.id,
-        email: this.props.payerEmail
-      })
-      .then(() => {
-        this.setState({
-          sending: false
-        });
-        this.props.onPaymentSuccess();
-      })
-      .catch((e) => {
-        //TODO :errorhandling
-      });
-
-    } else if (result.error) {
-      console.log(result.error);
-      this.setState({
-        error: stripeErrMessages[result.error.code] || result.error.message,
-        sending: false
-      });
-    }
-  },
-
-  onSubmit(e) {
-    e.preventDefault();
-
+  onSubmit(token) {
     this.setState({
       error: null,
       sending: true
     });
 
-    var form = document.querySelector('form');
-    var extraDetails = {
-      name: this.props.payerName,
-    };
-  },
-
-  onToken(t) {
-    console.log(t);
+    request.post(api('membership'), {
+      stripeToken: token.id,
+      email: this.props.payerEmail
+    })
+    .then(() => {
+      this.setState({
+        sending: false
+      });
+      this.props.onPaymentSuccess();
+    })
+    .catch((e) => {
+      this.setState({
+        sending: false,
+        error: e
+      });
+    });
   },
 
   render() {
-    var feedbackMessage;
-
-    if(this.state.error) {
-      feedbackMessage = (
-        <div className='form--message'>
-          {this.state.error}
-        </div>
-      );
+    if (this.state.error) {
+      return <p>Virhe maksaessa! Ota yhteyttä info@koodiklinikka.fi</p>
+    } else if (this.state.sending) {
+      return <img src="../images/ajax-loader.gif" alt="Odota hetki..." height="42" width="42"></img>
+    } else {
+      return (<StripeCheckout
+        amount      = {1000}
+        currency    = 'EUR'
+        description = 'Jäsenmaksu'
+        email       = {this.props.userInfo.email}
+        image       = 'https://avatars3.githubusercontent.com/u/10520119?v = 3&s = 200'
+        locale      = "en"
+        name        = 'Koodiklinikka ry'
+        stripeKey   = 'pk_test_OmNve9H1OuORlmD4rblpjgzh'
+        token       = {this.onSubmit}
+      >
+        <button className="btn btn-primary">
+          Maksa kortilla
+        </button>
+      </StripeCheckout>)
     }
-
-    return (
-      <StripeCheckout
-        amount={1000}
-        currency='EUR'
-        description='Jäsenmaksu'
-        image='https://avatars3.githubusercontent.com/u/10520119?v=3&s=200'
-        name='Koodiklinikka ry'
-        stripeKey='pk_test_OmNve9H1OuORlmD4rblpjgzh'
-        token={this.onToken}
-        locale="en"
-      />
-    )
   }
 });

src/styles/style.styl

@@ -111,6 +111,10 @@ section:first-child
     &:first-child
       margin-top 0
 
+.loader
+  background transparent url('../images/ajax-loader.gif') no-repeat center center
+  width 28px
+  height 28px
 
 .form
   .btn
@@ -118,7 +122,6 @@ section:first-child
     border-bottom 2px solid #117280
     color rgba(255, 255, 255, 0.9)
   .loader
-    background transparent url('../images/ajax-loader.gif') no-repeat center center
     display none
   &.sending
     .btn
@@ -146,7 +149,6 @@ section:first-child
     position absolute
     right 9px
     top 9px
-    background transparent url('../images/ajax-loader.gif') no-repeat center center
   &.sending
     .loader
       display block