mtx init

client/assets/styles/styles.css

@@ -463,6 +463,7 @@ header {
 }
 
 .stripe-btn {
+    width: 100%;
     padding: 0 0.5em;
     background: whitesmoke;
     color: black;

client/src/components/account.status.jsx

@@ -11,12 +11,16 @@ function pingColour(ping) {
 }
 
 function BitsBtn(args) {
-    const { stripe } = args;
+    const {
+        stripe,
+        account,
+    } = args;
     function onClick(e) {
         stripe.redirectToCheckout({
-            items: [{sku: 'sku_FGjPl1YKoT241P', quantity: 1}],
+            items: [{plan: 'plan_FGmRwawcOJJ7Nv', quantity: 1}],
             successUrl: 'http://localhost:40080/payments/success',
             cancelUrl: 'http://localhost:40080/payments/cancel',
+            clientReferenceId: account.id
         });
     }
     return (
@@ -27,7 +31,7 @@ function BitsBtn(args) {
                 class="stripe-btn"
                 id="checkout-button-sku_FGjPl1YKoT241P"
                 role="link">
-                Buy Bits
+                Subscribe
             </button>
         </div>
     );
@@ -72,7 +76,7 @@ function AccountStatus(args) {
                 <div class="ping-text">{ping}ms</div>
             </div>
             <Elements>
-                <StripeBitsBtn />
+                <StripeBitsBtn account={account} />
             </Elements>
             <button onClick={() => logout()}>Logout</button>
         </div>

client/src/socket.jsx

@@ -1,7 +1,7 @@
 const toast = require('izitoast');
 const cbor = require('borc');
 
-const SOCKET_URL = process.env.NODE_ENV === 'production' ? 'wss://mnml.gg/ws' : 'ws://localhost:40000/ws/';
+const SOCKET_URL = process.env.NODE_ENV === 'production' ? 'wss://mnml.gg/ws' : 'ws://localhost:40000/api/ws';
 
 function errorToast(err) {
     console.error(err);