progress with stripe-payment

src/index.jade

@@ -33,6 +33,7 @@ html
     meta(name='msapplication-TileColor', content='#10558c')
     meta(name='msapplication-TileImage', content='icons/mstile-144x144.png')
     meta(property='og:image', content='images/logo.png')
+    script(src='https://js.stripe.com/v3/')
     script(src='//use.typekit.net/scb5xny.js')
     script.
       try{Typekit.load();}catch(e){};

src/js/components/inviteForm.js

@@ -48,6 +48,7 @@ module.exports = React.createClass({
   },
   render() {
     var formClasses = classSet({
+      'form': true,
       'invite-form': true,
       'has-success': this.state.submitted,
       'has-error': this.state.error,
@@ -76,7 +77,7 @@ module.exports = React.createClass({
       }
 
       feedbackMessage = (
-        <div className='invite-form--message'>
+        <div className='form--message'>
           {messageText}
         </div>
       );

src/js/components/membershipForm.js

@@ -6,6 +6,8 @@ var classSet = require('classnames');
 
 var api = require('../api');
 
+var StripeCheckout = require('./stripeCheckout.js');
+
 module.exports = React.createClass({
   getInitialState() {
     return {
@@ -15,7 +17,9 @@ module.exports = React.createClass({
       residence: '',
       submitted: false,
       sending: false,
-      error: null
+      error: null,
+      infoFormSuccess: false,
+      paymentSuccess: false
     };
   },
   onSubmit(e) {
@@ -27,14 +31,10 @@ module.exports = React.createClass({
       error: null
     });
 
-    request.post(api('invites'), {
-      email: this.state.email.trim()
-    })
-    .then(this.handleSuccess)
-    .catch(this.handleError);
+    this.handleInfoFormSuccess();
   },
-  handleSuccess() {
-    this.setState({submitted: true, sending: false});
+  handleInfoFormSuccess() {
+    this.setState({submitted: true, sending: false, infoFormSuccess: true});
   },
   handleError(err) {
     this.setState({error: err, sending: false});
@@ -50,8 +50,12 @@ module.exports = React.createClass({
       submitted: false
     });
   },
+  handlePaymentSuccess() {
+    this.setState({paymentSuccess: true})
+  },
   render() {
     var formClasses = classSet({
+      'form': true,
       'membership-form': true,
       'has-success': this.state.submitted,
       'has-error': this.state.error,
@@ -80,54 +84,69 @@ module.exports = React.createClass({
       }
 
       feedbackMessage = (
-        <div className='membership-form--message'>
+        <div className='form--message'>
           {messageText}
         </div>
       );
     }
 
-    return (
-      <form className={formClasses} onSubmit={this.onSubmit}>
-        <input
-          className={inputClasses}
-          type='text'
-          name='email'
-          placeholder='Sähköposti'
-          value={this.state.email}
-          onChange={this.onChange} />
-        <input
-          className={inputClasses}
-          type='text'
-          name='name'
-          placeholder='Koko nimi'
-          value={this.state.name}
-          onChange={this.onChange} />
-        <input
-          className={inputClasses}
-          type='text'
-          name='handle'
-          placeholder='Slack-käyttäjätunnus'
-          value={this.state.handle}
-          onChange={this.onChange} />
-        <input
-          className={inputClasses}
-          type='text'
-          name='residence'
-          placeholder='Paikkakunta'
-          value={this.state.residence}
-          onChange={this.onChange} />
-        <button
-          className='btn btn__submit'
-          type='submit'
-          title='Lähetä'
-          disabled={this.state.error || this.state.submitted}>
-          Siirry maksamaan
-        </button>
-        <span
-          className='loader'>
-        </span>
-        {feedbackMessage}
-      </form>
+    if(!this.state.infoFormSuccess) {
+      return (
+        <div>
+          <form className={formClasses} onSubmit={this.onSubmit}>
+            {feedbackMessage}
+            <input
+              className={inputClasses}
+              type='text'
+              name='email'
+              placeholder='Sähköposti'
+              value={this.state.email}
+              onChange={this.onChange} />
+            <input
+              className={inputClasses}
+              type='text'
+              name='name'
+              placeholder='Koko nimi'
+              value={this.state.name}
+              onChange={this.onChange} />
+            <input
+              className={inputClasses}
+              type='text'
+              name='handle'
+              placeholder='Slack-käyttäjätunnus'
+              value={this.state.handle}
+              onChange={this.onChange} />
+            <input
+              className={inputClasses}
+              type='text'
+              name='residence'
+              placeholder='Paikkakunta'
+              value={this.state.residence}
+              onChange={this.onChange} />
+            <button
+              className='btn btn__submit'
+              type='submit'
+              title='Lähetä'
+              disabled={this.state.error || this.state.submitted}>
+              Siirry maksamaan
+            </button>
+            <span
+              className='loader'>
+            </span>
+          </form>
+        </div>
       )
+    } else if (this.state.infoFormSuccess && !this.state.paymentSuccess) {
+      return (
+        <div>
+          <StripeCheckout payerName={this.state.name} onPaymentSuccess={this.handlePaymentSuccess}></StripeCheckout>
+        </div>
+      )
+    } else {
+      return (
+        <p> Onnee!
+        </p>
+      )
+    }
   }
 });

src/js/components/stripeCheckout.js

@@ -0,0 +1,117 @@
+'use strict';
+
+var request = require('axios');
+var React = require('react');
+var classSet = require('classnames');
+var api = require('../api');
+
+var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
+var elements = stripe.elements();
+var card = elements.create('card', {
+  style: {
+    base: {
+      iconColor: '#666EE8',
+      color: '#31325F',
+      lineHeight: '40px',
+      fontWeight: 300,
+      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
+      fontSize: '15px',
+
+      '::placeholder': {
+        color: '#CFD7E0',
+      },
+    },
+  }
+});
+
+var stripeErrMessages = {
+  incomplete_number: "incomplete number",
+  incorrect_number: "Kortin numero on virheellinen.",
+  invalid_number: "Kortin numero on virheellinen.",
+  invalid_expiry_month: "Kortin vanhenemiskuu on virheellinen.",
+  invalid_expiry_year: "Kortin vanhenemisvuosi on virheellinen.",
+  invalid_cvc: "Kortin CVC koodi on virheellinen.",
+  expired_card: "Kortti on vanhentunut.",
+  incorrect_cvc: "Kortin CVC koodi on virheellinen..",
+  incorrect_zip: "The card's zip code failed validation.",
+  card_declined: "Kortti hylättiin.",
+  missing: "There is no card on a customer that is being charged.",
+  processing_error: "Virhe kortin prosessoinnissa.",
+  rate_limit:  "An error occurred due to requests hitting the API too quickly. Please let us know if you're consistently running into this error."
+};
+
+
+module.exports = React.createClass({
+  getInitialState() {
+    return {
+      sending: false,
+      error: null
+    };
+  },
+
+  setOutcome(result) {
+    if (result.token) {
+      this.setState({
+        error: null
+      })
+
+      // tää siirretään .theniin
+      this.setState({
+        sending: false,
+      })
+
+      this.props.onPaymentSuccess();
+    } else if (result.error) {
+      this.setState({
+        error: stripeErrMessages[result.error.code] || result.error.message
+      });
+    }
+  },
+
+  componentDidMount: function() {
+    card.mount('#card-element');
+  },
+
+  onSubmit(e) {
+    e.preventDefault();
+
+    this.setState({
+      error: null,
+      sending: true
+    });
+
+    var form = document.querySelector('form');
+    var extraDetails = {
+      name: "My Name",
+    };
+    stripe.createToken(card, extraDetails).then(this.setOutcome);
+  },
+
+  render() {
+    var formClasses = classSet({
+      'form': true,
+      'stripe-form': true,
+      'has-error': this.state.error,
+    });
+
+    var feedbackMessage;
+
+    if(this.state.error) {
+      console.log(this.state.error);
+      feedbackMessage = (
+        <div className='form--message'>
+          {this.state.error}
+        </div>
+      );
+    }
+
+    return (
+      <form className={formClasses} onSubmit={this.onSubmit}>
+        {feedbackMessage}
+        <span className='name'>{this.props.payerName}</span>
+        <div id='card-element'></div>
+        <button className='btn btn__submit' type='submit'>Maksa 10€</button>
+      </form>
+    )
+  }
+});

src/styles/style.styl

@@ -112,6 +112,7 @@ section:first-child
   .btn
     background linkColor
     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 block
@@ -152,7 +153,14 @@ section:first-child
     margin 8px 0px
   .btn
     margin-top 12px
-    color rgba(255, 255, 255, 0.9)
+
+.stripe-form
+  margin 20px 0px
+  .name
+    margin-top 20px
+    text-align left
+    display block
+    color rgba(0, 0, 0, 0.4)
 
 @keyframes drop
   0%
@@ -166,7 +174,7 @@ section:first-child
   100%
     transform rotateX(0deg)
 
-.invite-form--message
+.form--message
   background linkColor
   color #fff
   line-height 40px
@@ -176,8 +184,8 @@ section:first-child
   transform-origin 100% 0
   animation drop 0.6s linear
 
-.invite-form.has-error
-  .invite-form--message
+.form.has-error
+  .form--message
     background rgb(226, 33, 112)
 
 .members

src/yhdistys.jade

@@ -33,6 +33,7 @@ html
     meta(name='msapplication-TileColor', content='#10558c')
     meta(name='msapplication-TileImage', content='icons/mstile-144x144.png')
     meta(property='og:image', content='images/logo.png')
+    script(src='https://js.stripe.com/v3/')
     script(src='//use.typekit.net/scb5xny.js')
     script.
       try{Typekit.load();}catch(e){};
@@ -55,7 +56,9 @@ html
                 .column.column1-2
                   h3 Rekisteröity yhdistys
                   p.
-                    Koodiklinikka on nyt myös ry! Tähän vois kirjottaa jotain kivoja juttuja
+                    Koodiklinikka on nyt myös ry!
+                  p.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper euismod ex. Morbi vel feugiat turpis. Nunc feugiat enim id elementum dapibus. Nullam rhoncus sem ut sem mattis vulputate id at leo. Phasellus vitae semper libero, ut interdum libero.
                 .column.column1-2
                   a(href='images/slack.png', target='_blank')
                     img(src='images/slack.png')
@@ -64,9 +67,13 @@ html
                 .column.column1-2
                   h3 Liity jäseneksi
                   #membership-form.form
+
                 .column.column1-2
                   p.
-                    Jäseneksi liittymällä saat jotain hienoja juttuja eli kannattaa liittyä
+                    Tähän vois kirjottaa juttuja siitä miks kandee liittyy jäseneks yms.
+                  p.
+                    Mauris imperdiet rutrum turpis ac scelerisque. Nulla ullamcorper mi eget maximus rutrum. Ut malesuada lectus quis dolor vehicula, sed finibus ante ullamcorper. Nullam vitae suscipit arcu. Vestibulum semper tortor in commodo molestie. Ut id enim faucibus, pharetra lectus vel, euismod neque. Cras massa erat, eleifend sit amet ligula et, volutpat blandit erat. Mauris eget lacinia dui. Nullam laoreet fringilla lorem, non tristique arcu aliquam at.
+
 
       footer
         .sponsors