4 files changed, 49 insertions, 15 deletions
diff --git a/components/CreateItem.js b/components/CreateItem.js
index 843263c..b29b210 100644
--- a/components/CreateItem.js
+++ b/components/CreateItem.js
@@ -36,17 +36,13 @@ class CreateLink extends Component {
       <div>
         { this.state.loading ? 'LOADING...' : 'Ready!' }
         <form onSubmit={this._createLink}>
-          <p>Image: {this.state.image}</p>
-          <input
-            value={this.state.title}
-            onChange={(e) => this.setState({ title: e.target.value })}
-            type='text'
-            placeholder='A description for the link'
-          />
-          <input
-            onChange={this.uploadFile}
-            type='file'
-          />
+          <p>
+            Image
+            <input onChange={this.uploadFile} type='file'/>
+          </p>
+          <p>Title
+            <input value={this.state.title} onChange={(e) => this.setState({ title: e.target.value })} type='text' placeholder='A description for the link'/>
+          </p>
           <textarea
             value={this.state.description}
             onChange={(e) => this.setState({ description: e.target.value })}
@@ -77,9 +73,7 @@ class CreateLink extends Component {
     });
     this.setState({ loading: false });
   }
-
 }
-
 // When we submit this mutation, we need to update our store - we have a few ways to do that:
 // One - we can go nucular and run refetchQueries() which will just go get everything - this is easy, but at the cost of efficiency.
 
diff --git a/components/Items.js b/components/Items.js
index 1e6b3bf..35db906 100644
--- a/components/Items.js
+++ b/components/Items.js
@@ -3,6 +3,8 @@ import { graphql, compose } from 'react-apollo'
 import UpdateItem from './UpdateItem';
 import Link from 'next/link';
 import styled from 'styled-components';
+import TakeMyMoney from './TakeMyMoney';
+import formatMoney from '../lib/formatMoney';
 
 import { ALL_ITEMS_QUERY, DELETE_ITEM_MUTATION } from '../queries';
 
@@ -44,6 +46,15 @@ class ItemList extends Component {
               <a>Edit {item.id}</a>
             </Link>
 
+            <TakeMyMoney
+              amount={item.price}
+              name={item.title} // the pop-in header title
+              description={item.description} // the pop-in header subtitle
+              image={`https://images.graph.cool/v1/cj5xz8szs28930145gct82bdj/${item.image.secret}/300x300`}
+            >
+              <button>Buy for {formatMoney(item.price)}</button>
+            </TakeMyMoney>
+
             <UpdateItem id={item.id} />
 
             <button onClick={() => this.props.removeItemMutation({ variables: { id: item.id }})}>&times; Delete item</button>
diff --git a/components/TakeMyMoney.js b/components/TakeMyMoney.js
new file mode 100644
index 0000000..143f990
--- /dev/null
+++ b/components/TakeMyMoney.js
@@ -0,0 +1,31 @@
+import { Component } from 'react';
+import StripeCheckout from 'react-stripe-checkout';
+import { CREATE_ORDER_MUTATION } from '../queries';
+import { graphql } from 'react-apollo';
+
+
+class TakeMyMoney extends Component {
+  onToken = async (res) => {
+    const token = res.id;
+    console.log(`Going to make a purchase with ${token}`);
+    const charge = await this.props.createOrder({ variables: { token }});
+    alert(`Back from the charge! ${charge.id}`);
+    console.log(charge);
+
+  }
+  render() {
+    return (
+      // ...
+      <StripeCheckout
+        {...this.props}
+        token={this.onToken}
+        stripeKey="pk_lclTtThFp8CnO3QtEZSd8HA9mFUps"
+        currency="USD"
+      >
+        {this.props.children}
+      </StripeCheckout>
+    )
+  }
+}
+
+export default graphql(CREATE_ORDER_MUTATION, { name: 'createOrder' })(TakeMyMoney);
diff --git a/components/UpdateItem.js b/components/UpdateItem.js
index 8ca8b73..0edad06 100644
--- a/components/UpdateItem.js
+++ b/components/UpdateItem.js
@@ -6,8 +6,6 @@ class UpdateLink extends Component {
 
   state = {
     ...this.props.findItem.Item,
-    price: 0,
-    fullPrice: 0
   }
 
   saveToState = (e) => {