progress with stripe-payment

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>
+    )
+  }
+});