From 278ecaec283c166bf300e726abba92216e58803b Mon Sep 17 00:00:00 2001 From: Keksike Date: Sun, 2 Jul 2017 19:44:16 +0300 Subject: [PATCH] implement requesting of /membership (payment) api --- package.json | 1 + src/js/components/membershipForm.js | 7 ++++--- src/js/components/stripeCheckout.js | 31 +++++++++++++++++++++-------- src/styles/style.styl | 13 ++++++------ src/yhdistys.jade | 8 +++++++- 5 files changed, 42 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 516dcad..89f0949 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "scripts": { "start": "rm -rf public && gulp", "build": "rm -rf public && gulp build", + "dev": "SERVER=http://localhost:9000/ npm start", "lint": "eslint src", "test": "mocha src/**/__tests__/*.js --compilers js:babel-core/register --require test/test-helper" }, diff --git a/src/js/components/membershipForm.js b/src/js/components/membershipForm.js index c9182e8..e48b302 100644 --- a/src/js/components/membershipForm.js +++ b/src/js/components/membershipForm.js @@ -32,6 +32,7 @@ module.exports = React.createClass({ }); this.handleInfoFormSuccess(); + //TODO handleError }, handleInfoFormSuccess() { this.setState({submitted: true, sending: false, infoFormSuccess: true}); @@ -51,7 +52,7 @@ module.exports = React.createClass({ }); }, handlePaymentSuccess() { - this.setState({paymentSuccess: true}) + this.setState({paymentSuccess: true}); }, render() { var formClasses = classSet({ @@ -139,12 +140,12 @@ module.exports = React.createClass({ } else if (this.state.infoFormSuccess && !this.state.paymentSuccess) { return (
- +
) } else { return ( -

Onnee! +

Tervetuloa jäseneksi!

) } diff --git a/src/js/components/stripeCheckout.js b/src/js/components/stripeCheckout.js index 1ff75fe..687887c 100644 --- a/src/js/components/stripeCheckout.js +++ b/src/js/components/stripeCheckout.js @@ -5,7 +5,7 @@ var React = require('react'); var classSet = require('classnames'); var api = require('../api'); -var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh'); +var stripe = Stripe('pk_test_OmNve9H1OuORlmD4rblpjgzh'); var elements = stripe.elements(); var card = elements.create('card', { style: { @@ -55,15 +55,26 @@ module.exports = React.createClass({ error: null }) - // tää siirretään .theniin - this.setState({ - sending: false, - }) + console.log(result.token); + + request.post(api('membership'), { + stripeToken: result.token.id, + email: this.props.payerEmail + }) + .then(() => { + this.setState({ + sending: false + }); + this.props.onPaymentSuccess(); + }) + .catch((e) => { + //TODO :errorhandling + }); - this.props.onPaymentSuccess(); } else if (result.error) { this.setState({ - error: stripeErrMessages[result.error.code] || result.error.message + error: stripeErrMessages[result.error.code] || result.error.message, + sending: false }); } }, @@ -82,7 +93,7 @@ module.exports = React.createClass({ var form = document.querySelector('form'); var extraDetails = { - name: "My Name", + name: this.props.payerName, }; stripe.createToken(card, extraDetails).then(this.setOutcome); }, @@ -92,6 +103,7 @@ module.exports = React.createClass({ 'form': true, 'stripe-form': true, 'has-error': this.state.error, + 'sending': this.state.sending }); var feedbackMessage; @@ -111,6 +123,9 @@ module.exports = React.createClass({ {this.props.payerName}
+ + ) } diff --git a/src/styles/style.styl b/src/styles/style.styl index d2670f7..a13fd49 100644 --- a/src/styles/style.styl +++ b/src/styles/style.styl @@ -115,9 +115,14 @@ section:first-child color rgba(255, 255, 255, 0.9) .loader background transparent url('../images/ajax-loader.gif') no-repeat center center - display block + display none &.sending + .btn + display none .loader + display block + margin-left auto + margin-right auto width 28px height 28px @@ -137,14 +142,10 @@ section:first-child position absolute right 9px top 9px - width 0px - height 0px background transparent url('../images/ajax-loader.gif') no-repeat center center - display block &.sending - .btn - display none .loader + display block width 28px height 28px diff --git a/src/yhdistys.jade b/src/yhdistys.jade index aa4d857..3449360 100644 --- a/src/yhdistys.jade +++ b/src/yhdistys.jade @@ -56,7 +56,9 @@ html .column.column1-2 h3 Rekisteröity yhdistys p. - Koodiklinikka on nyt myös ry! + Koodiklinikka on nyt rekisteröity yhdistys! + p. + Slackin käyttöön tai tapahtumiin osallistumiseen ei vaadita jäsenyyttä ja semmosta. 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 @@ -71,6 +73,10 @@ html .column.column1-2 p. Tähän vois kirjottaa juttuja siitä miks kandee liittyy jäseneks yms. + p. + Jäsenmaksu on 10000€ + p. + Slack-kutsuja varten siirry etusivulle. 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.