First Commit

account/src/client/Billing/PaymentSource.js

@@ -0,0 +1,52 @@
+import React, {Component} from 'react';
+import { Header, Button, Segment, Form, Icon, Divider } from 'semantic-ui-react'
+import {CardElement, injectStripe} from 'react-stripe-elements';
+
+class PaymentSource extends Component {
+  constructor(props) {
+    super(props);
+    this.submit = this.submit.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.state = {name: this.props.name ? this.props.name : ""};
+  }
+  handleInputChange = (e, { name, value }) => this.setState({ [name]: value });
+  async submit(ev) {
+    console.log("here");
+    this.props.stripe.createSource({type: 'card', owner: {
+           name: this.state.name, email: this.props.email
+         }}).then(({source}) => {
+          this.props.onSubmit({sourceId: source.id })
+          console.log('Received Stripe token:', source);
+    });
+    
+  }
+
+  render() {
+    return (
+      <div className="checkout">
+      <Segment padded='very'>
+        <Form>
+        <Divider horizontal>
+          <Header as='h3'>
+            <Icon name='credit card outline' />
+            Credit or Debit Card
+          </Header>
+        </Divider>
+          <Form.Input fluid label='Name on card' placeholder='Name'  
+                                   name="name"
+                                   defaultValue={this.state.name}
+                  onChange={this.handleInputChange}/>
+          <Form.Field>
+          <CardElement />
+          </Form.Field>
+          <Divider hidden />
+          <Button  onClick={this.submit}>Submit</Button>
+        </Form>
+          <img src="../../resources/powered_by_stripe.png" />
+        </Segment>
+      </div>
+    );
+  }
+}
+
+export default injectStripe(PaymentSource);