diff --git a/client/assets/styles/styles.css b/client/assets/styles/styles.css
index 50dadc62..41de24c7 100644
--- a/client/assets/styles/styles.css
+++ b/client/assets/styles/styles.css
@@ -462,6 +462,18 @@ header {
     font-size: 1.2em;
 }
 
+.stripe-btn {
+    padding: 0 0.5em;
+    background: whitesmoke;
+    color: black;
+    border-radius: 2px;
+}
+
+.stripe-btn:hover {
+    color: black;
+}
+
+
 .refresh-btn {
     border: 1px solid #222;
     float: right;
diff --git a/client/index.html b/client/index.html
index 3101999c..bfb399e6 100644
--- a/client/index.html
+++ b/client/index.html
@@ -17,6 +17,7 @@
   </head>
   <body>
   </body>
+  <script src="https://js.stripe.com/v3/"></script>
   <script src="./index.js"></script>
   <script>
     // Check that service workers are registered
diff --git a/client/package.json b/client/package.json
index 80d32b83..392a747a 100644
--- a/client/package.json
+++ b/client/package.json
@@ -23,8 +23,10 @@
     "node-sass": "^4.12.0",
     "parcel": "^1.12.3",
     "preact": "^8.4.2",
+    "preact-compat": "^3.19.0",
     "preact-context": "^1.1.3",
     "preact-redux": "^2.1.0",
+    "react-stripe-elements": "^3.0.0",
     "redux": "^4.0.0"
   },
   "devDependencies": {
@@ -37,5 +39,9 @@
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-react": "^7.11.1",
     "jest": "^18.0.0"
+  },
+  "alias": {
+    "react": "preact-compat",
+    "react-dom": "preact-compat"
   }
 }
diff --git a/client/src/app.jsx b/client/src/app.jsx
index e22eff9a..9245495b 100644
--- a/client/src/app.jsx
+++ b/client/src/app.jsx
@@ -3,6 +3,7 @@ const preact = require('preact');
 
 const { Provider, connect } = require('preact-redux');
 const { createStore, combineReducers } = require('redux');
+const { StripeProvider } = require('react-stripe-elements');
 
 const reducers = require('./reducers');
 const actions = require('./actions');
@@ -28,7 +29,9 @@ document.fonts.load('16pt "Jura"').then(() => {
 
     const App = () => (
         <Provider store={store}>
-            <Mnml />
+            <StripeProvider apiKey="pk_test_PiLzjIQE7zUy3Xpott7tdQbl00uLiCesTa">
+                <Mnml />
+            </StripeProvider>
         </Provider>
     );
 
diff --git a/client/src/components/account.status.jsx b/client/src/components/account.status.jsx
new file mode 100644
index 00000000..33092653
--- /dev/null
+++ b/client/src/components/account.status.jsx
@@ -0,0 +1,82 @@
+const { connect } = require('preact-redux');
+const preact = require('preact');
+const { Elements, injectStripe } = require('react-stripe-elements');
+
+const { saw } = require('./shapes');
+
+function pingColour(ping) {
+    if (ping < 100) return 'forestgreen';
+    if (ping < 200) return 'yellow';
+    return 'red';
+}
+
+function BitsBtn(args) {
+    const { stripe } = args;
+    function onClick(e) {
+        stripe.redirectToCheckout({
+            items: [{sku: 'sku_FGjPl1YKoT241P', quantity: 1}],
+            successUrl: 'http://localhost:40080/payments/success',
+            cancelUrl: 'http://localhost:40080/payments/cancel',
+        });
+    }
+    return (
+        <div>
+            <div id="error-message"></div>
+            <button
+                onClick={onClick}
+                class="stripe-btn"
+                id="checkout-button-sku_FGjPl1YKoT241P"
+                role="link">
+                Buy Bits
+            </button>
+        </div>
+    );
+}
+
+const StripeBitsBtn = injectStripe(BitsBtn);
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            account,
+            ping,
+        } = state;
+
+        function logout() {
+            postData('/logout').then(() => window.location.reload(true));
+        }
+
+        return {
+            account,
+            ping,
+            logout,
+        };
+    },
+);
+
+
+function AccountStatus(args) {
+    const {
+        account,
+        ping,
+        logout,
+    } = args;
+
+    if (!account) return null;
+
+    return (
+        <div>
+            <div class="header-status">
+                <h2 class="header-username">{account.name}</h2>
+                {saw(pingColour(ping))}
+                <div class="ping-text">{ping}ms</div>
+            </div>
+            <Elements>
+                <StripeBitsBtn />
+            </Elements>
+            <button onClick={() => logout()}>Logout</button>
+        </div>
+    );
+}
+
+module.exports = addState(AccountStatus);
diff --git a/client/src/components/nav.jsx b/client/src/components/nav.jsx
index 57d1665e..b661e1a9 100644
--- a/client/src/components/nav.jsx
+++ b/client/src/components/nav.jsx
@@ -4,17 +4,11 @@ const { Fragment } = require('preact');
 
 const { postData } = require('../utils');
 const actions = require('../actions');
-const { saw } = require('./shapes');
+const AccountStatus = require('./account.status');
 
 const testGame = process.env.NODE_ENV === 'development' && require('./../test.game');
 const testInstance = process.env.NODE_ENV === 'development' && require('./../test.instance');
 
-function pingColour(ping) {
-    if (ping < 100) return 'forestgreen';
-    if (ping < 200) return 'yellow';
-    return 'red';
-}
-
 const addState = connect(
     function receiveState(state) {
         const {
@@ -95,15 +89,13 @@ const addState = connect(
 function Nav(args) {
     const {
         account,
-        ping,
-        team,
         instances,
         game,
+        team,
 
         sendInstanceState,
         sendAccountInstances,
         sendInstanceList,
-        logout,
 
         setTestGame,
         setTestInstance,
@@ -140,24 +132,16 @@ function Nav(args) {
                 <h2>Hax</h2>
                 <button onClick={() => setTestGame(account.id)}>Test Game</button>
                 <button onClick={() => setTestInstance(account.id)}>Test Instance</button>
-                <button onClick={() => logout()}>Logout</button>
             </Fragment>)
         : null;
 
     const canJoin = team.some(c => !c);
 
-    const accountStatus = account
-        ? (<div class="header-status">
-            <h2 class="header-username">{account.name}</h2>
-            {saw(pingColour(ping))}
-            <div class="ping-text">{ping}ms</div>
-        </div>)
-        : false;
-
     return (
         <nav onClick={hideNav} >
             <h1 class="header-title">mnml.gg</h1>
-            {accountStatus}
+            <AccountStatus />
+            <hr />
             <button onClick={() => navTo('team')}>Select Team</button>
             <button disabled={canJoin} onClick={() => navTo('list')}>Play</button>
             <hr />
