Install Stripe API and style credits page

app/Http/Controllers/BillingController.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Stripe\Stripe;
+use Stripe\Customer;
+
+class BillingController extends Controller
+{
+	public function charge() {
+
+	}
+}

app/Http/Controllers/UserController.php

@@ -13,6 +13,8 @@ use Illuminate\Support\Facades\URL;
 use Illuminate\Auth\Events\Registered;
 use Illuminate\Support\Facades\Password;
 use Illuminate\Support\Facades\Auth;
+use Stripe\Stripe;
+use Stripe\Customer;
 
 class UserController extends Controller
 {
@@ -22,6 +24,7 @@ class UserController extends Controller
 			'email' => 'required|email|unique:users,email',
 			'password' => 'required|confirmed|min:8|regex:/[a-z]/|regex:/[A-Z]/|regex:/[0-9]/'
 		]);
+		/* Stripe::setApiKey(); */
 
 		$user = new User;
 		$user->name = $request->name;
@@ -29,6 +32,7 @@ class UserController extends Controller
 		$user->role = "client";
 		$user->active = true;
 		$user->password = Hash::make($request->password);
+		$user->customer_id = Customer::create()->id;
 		$user->save();
 
 		event(new Registered($user));

composer.json

@@ -12,7 +12,8 @@
         "laravel/cashier": "^12.14",
         "laravel/framework": "^8.12",
         "laravel/sanctum": "^2.10",
-        "laravel/tinker": "^2.5"
+        "laravel/tinker": "^2.5",
+        "stripe/stripe-php": "^7.82"
     },
     "require-dev": {
         "facade/ignition": "^2.5",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "944c213422ef588363f5699d6efb4f96",
+    "content-hash": "0ba374a856ee5e8428032e8d550d3048",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -2789,16 +2789,16 @@
         },
         {
             "name": "stripe/stripe-php",
-            "version": "v7.80.0",
+            "version": "v7.82.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/stripe/stripe-php.git",
-                "reference": "566900968407302f88a925ba731c87c05fe98a7a"
+                "reference": "218f5296923265fab4692a7f8a083ff2e7e35a21"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/stripe/stripe-php/zipball/566900968407302f88a925ba731c87c05fe98a7a",
-                "reference": "566900968407302f88a925ba731c87c05fe98a7a",
+                "url": "https://api.github.com/repos/stripe/stripe-php/zipball/218f5296923265fab4692a7f8a083ff2e7e35a21",
+                "reference": "218f5296923265fab4692a7f8a083ff2e7e35a21",
                 "shasum": ""
             },
             "require": {
@@ -2844,9 +2844,9 @@
             ],
             "support": {
                 "issues": "https://github.com/stripe/stripe-php/issues",
-                "source": "https://github.com/stripe/stripe-php/tree/v7.80.0"
+                "source": "https://github.com/stripe/stripe-php/tree/v7.82.0"
             },
-            "time": "2021-05-26T19:10:43+00:00"
+            "time": "2021-06-04T23:26:37+00:00"
         },
         {
             "name": "swiftmailer/swiftmailer",

database/migrations/2014_10_12_000000_create_users_table.php

@@ -17,6 +17,7 @@ class CreateUsersTable extends Migration
             $table->id();
             $table->string('name');
             $table->string('email')->unique();
+            $table->string('customer_id')->unique();
             $table->timestamp('email_verified_at')->nullable();
             $table->string('password');
             $table->string('role');

database/seeders/DatabaseSeeder.php

@@ -7,6 +7,8 @@ use App\Models\User;
 use App\Models\Order;
 use App\Models\Service;
 use Illuminate\Support\Facades\Hash;
+use \Stripe\Stripe;
+use \Stripe\Customer;
 
 class DatabaseSeeder extends Seeder
 {
@@ -175,6 +177,7 @@ class DatabaseSeeder extends Seeder
 			'name' => 'test_user_unverified',
 			'email' => 'unverified@example.com',
 			'role' => 'client',
+			'customer_id' => Customer::create()->id,
 			'active' => true,
 			'password' => Hash::make("test123")
 		]);
@@ -183,6 +186,7 @@ class DatabaseSeeder extends Seeder
 			'email' => 'verified@example.com',
 			'email_verified_at' => now(),
 			'credits' => 250,
+			'customer_id' => Customer::create()->id,
 			'role' => 'client',
 			'active' => true,
 			'password' => Hash::make("test123")
@@ -191,6 +195,7 @@ class DatabaseSeeder extends Seeder
 			'name' => 'test_admin_verified',
 			'email' => 'admin_verified@example.com',
 			'email_verified_at' => now(),
+			'customer_id' => Customer::create()->id,
 			'role' => 'admin',
 			'active' => true,
 			'password' => Hash::make("test123")

resources/images/coin-stack.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#ec9f05" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="401.601px" height="401.6px" viewBox="0 0 401.601 401.6" style="enable-background:new 0 0 401.601 401.6;"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M116.682,229.329c11.286,0,22.195-0.729,32.518-2.086V114.094c-10.322-1.356-21.232-2.085-32.518-2.085
+			c-64.441,0-116.681,23.693-116.681,52.921v11.477C0.001,205.634,52.241,229.329,116.682,229.329z"/>
+		<path d="M116.682,288.411c11.286,0,22.195-0.729,32.518-2.084v-33.166c-10.325,1.356-21.229,2.095-32.518,2.095
+			c-56.25,0-103.199-18.054-114.227-42.082c-1.606,3.5-2.454,7.124-2.454,10.839v11.477
+			C0.001,264.718,52.241,288.411,116.682,288.411z"/>
+		<path d="M149.199,314.823v-2.578c-10.325,1.356-21.229,2.095-32.518,2.095c-56.25,0-103.199-18.054-114.227-42.082
+			C0.848,275.757,0,279.381,0,283.096v11.477c0,29.229,52.24,52.922,116.681,52.922c12.887,0,25.282-0.95,36.873-2.7
+			c-2.873-5.877-4.355-12.075-4.355-18.496V314.823z"/>
+		<path d="M284.92,22.379c-64.441,0-116.681,23.693-116.681,52.921v11.477c0,29.228,52.24,52.921,116.681,52.921
+			c64.44,0,116.681-23.693,116.681-52.921V75.3C401.601,46.072,349.36,22.379,284.92,22.379z"/>
+		<path d="M284.92,165.626c-56.25,0-103.199-18.053-114.227-42.082c-1.606,3.499-2.454,7.123-2.454,10.839v11.477
+			c0,29.228,52.24,52.921,116.681,52.921c64.44,0,116.681-23.693,116.681-52.921v-11.477c0-3.716-0.848-7.34-2.454-10.839
+			C388.119,147.573,341.17,165.626,284.92,165.626z"/>
+		<path d="M284.92,224.71c-56.25,0-103.199-18.054-114.227-42.082c-1.606,3.499-2.454,7.123-2.454,10.839v11.477
+			c0,29.229,52.24,52.922,116.681,52.922c64.44,0,116.681-23.693,116.681-52.922v-11.477c0-3.716-0.848-7.34-2.454-10.839
+			C388.119,206.657,341.17,224.71,284.92,224.71z"/>
+		<path d="M284.92,286.983c-56.25,0-103.199-18.054-114.227-42.082c-1.606,3.5-2.454,7.123-2.454,10.838v11.478
+			c0,29.228,52.24,52.921,116.681,52.921c64.44,0,116.681-23.693,116.681-52.921v-11.478c0-3.715-0.848-7.34-2.454-10.838
+			C388.119,268.928,341.17,286.983,284.92,286.983z"/>
+		<path d="M284.92,346.066c-56.25,0-103.199-18.053-114.227-42.081c-1.606,3.5-2.454,7.125-2.454,10.838V326.3
+			c0,29.228,52.24,52.921,116.681,52.921c64.44,0,116.681-23.693,116.681-52.921v-11.478c0-3.715-0.848-7.34-2.454-10.838
+			C388.119,328.012,341.17,346.066,284.92,346.066z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

resources/images/coins.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path d="M256,386c-5.52,0-10,4.48-10,10s4.48,10,10,10c5.52,0,10-4.48,10-10S261.52,386,256,386z"/>
+<path d="M469.087,61.37C444.479,51.459,412.485,46,379,46s-65.479,5.459-90.087,15.37C274.371,67.227,263.268,74.385,256,82.417
+	c-7.268-8.032-18.371-15.189-32.913-21.046C198.479,51.459,166.485,46,133,46s-65.479,5.459-90.087,15.37
+	C15.24,72.516,0,88.366,0,106v240c0,17.634,15.24,33.484,42.913,44.63C65.8,399.848,95.078,405.208,126,405.914V406
+	c0,34.206,55.888,60,130,60s130-25.794,130-60v-0.086c30.922-0.706,60.2-6.066,83.087-15.284C496.76,379.484,512,363.634,512,346
+	V106C512,88.366,496.76,72.516,469.087,61.37z M492,286c0,8.537-11.643,18.529-30.385,26.078
+	c-20.285,8.17-47.519,13.113-75.615,13.823V286c0-0.029-0.002-0.058-0.002-0.086c30.923-0.705,60.201-6.065,83.09-15.284
+	c8.983-3.618,16.646-7.734,22.913-12.244L492,286L492,286z M246,166c0,8.537-11.643,18.529-30.385,26.078
+	C193.648,200.926,163.536,206,133,206s-60.648-5.074-82.615-13.922C31.643,184.529,20,174.537,20,166v-27.614
+	c6.267,4.51,13.93,8.626,22.913,12.244C67.521,160.541,99.515,166,133,166s65.479-5.459,90.087-15.37
+	c8.983-3.618,16.646-7.734,22.913-12.244V166z M42.913,210.63C67.521,220.541,99.515,226,133,226s65.479-5.459,90.087-15.37
+	c8.983-3.618,16.646-7.734,22.913-12.244v27.791c-25.87,0.876-50.68,5.122-70.747,12.189c-20.127,7.089-34.61,16.542-42.486,27.631
+	c-30.456-0.026-60.471-5.094-82.382-13.919C31.643,244.529,20,234.537,20,226v-27.614C26.267,202.896,33.93,207.012,42.913,210.63z
+	 M20,258.386c6.267,4.51,13.93,8.626,22.913,12.244c22.888,9.218,52.167,14.578,83.09,15.284c0,0.029-0.002,0.058-0.002,0.086
+	v39.901c-28.097-0.71-55.33-5.653-75.615-13.823C31.643,304.529,20,294.537,20,286V258.386z M147.058,281.087
+	C154.469,263.84,197.244,246,256,246s101.531,17.84,108.934,35.067c0.718,1.681,1.066,3.294,1.066,4.933
+	c0,8.792-10.839,18.558-28.995,26.123C315.529,321.072,286.761,326,256,326s-59.529-4.928-81.005-13.877
+	C156.839,304.558,146,294.792,146,286C146,284.361,146.349,282.748,147.058,281.087z M492,226c0,8.537-11.643,18.529-30.385,26.078
+	c-21.91,8.825-51.924,13.893-82.379,13.919c-7.87-11.083-22.355-20.54-42.489-27.631c-20.067-7.068-44.877-11.313-70.747-12.189
+	v-27.791c6.267,4.51,13.93,8.626,22.913,12.244C313.521,220.541,345.515,226,379,226s65.479-5.459,90.087-15.37
+	c8.983-3.618,16.646-7.734,22.913-12.244V226z M492,166c0,8.537-11.643,18.529-30.385,26.078C439.648,200.926,409.536,206,379,206
+	s-60.648-5.074-82.615-13.922C277.643,184.529,266,174.537,266,166v-27.614c6.267,4.51,13.93,8.626,22.913,12.244
+	C313.521,160.541,345.515,166,379,166s65.479-5.459,90.087-15.37c8.983-3.618,16.646-7.734,22.913-12.244V166z M296.385,79.922
+	C318.352,71.074,348.464,66,379,66s60.648,5.074,82.615,13.922C480.357,87.471,492,97.463,492,106s-11.643,18.529-30.385,26.078
+	C439.648,140.926,409.536,146,379,146s-60.648-5.074-82.615-13.922C277.643,124.529,266,114.537,266,106
+	S277.643,87.471,296.385,79.922z M50.385,79.922C72.352,71.074,102.464,66,133,66s60.648,5.074,82.615,13.922
+	C234.357,87.471,246,97.463,246,106s-11.643,18.529-30.385,26.078C193.648,140.926,163.536,146,133,146s-60.648-5.074-82.615-13.922
+	C31.643,124.529,20,114.537,20,106S31.643,87.471,50.385,79.922z M50.385,372.078C31.643,364.529,20,354.537,20,346v-27.614
+	c6.267,4.51,13.93,8.626,22.913,12.244C65.8,339.848,95.078,345.208,126,345.914v39.988
+	C97.903,385.191,70.67,380.249,50.385,372.078z M337.005,432.123C315.529,441.072,286.761,446,256,446s-59.529-4.928-81.005-13.877
+	C156.839,424.558,146,414.792,146,406v-27.031c2.265,1.639,4.768,3.268,7.544,4.874c15.529,8.986,36.658,15.633,61.104,19.221
+	c0.493,0.072,0.981,0.107,1.465,0.107c4.88,0,9.151-3.577,9.881-8.549c0.802-5.464-2.978-10.544-8.441-11.346
+	C171.078,376.453,146,358.979,146,346v-27.12C168.634,335.442,208.587,346,256,346s87.366-10.558,110-27.12V346
+	c0,12.979-25.078,30.453-71.553,37.276c-5.464,0.802-9.244,5.882-8.441,11.346c0.73,4.973,5.001,8.549,9.881,8.549
+	c0.483,0,0.973-0.035,1.465-0.107c24.445-3.588,45.574-10.234,61.104-19.221c2.775-1.606,5.279-3.235,7.544-4.874V406
+	C366,414.792,355.161,424.558,337.005,432.123z M461.615,372.078c-20.285,8.17-47.519,13.113-75.615,13.823v-39.988
+	c30.922-0.706,60.2-6.066,83.087-15.284c8.983-3.618,16.646-7.734,22.913-12.244V346C492,354.537,480.357,364.529,461.615,372.078z"
+	/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

resources/js/panel/credits.vue

@@ -1,3 +1,39 @@
 <template>
-hello
+<section class="select-credits">
+<div class="credits-pane"><h2>10 Credits</h2>
+<h3>$10.99</h3><div><span>Qty</span><input min="0" max="1000" v-model="packs.credits10" type="number"></div>
+</div>
+
+<div class="credits-pane"><div><h2>50 Credits</h2><span>+5 Free Credits</span></div>
+<h3>$54.99 </h3><div><span>Qty</span><input min="0" max="1000" v-model="packs.credits50" type="number"></div>
+</div>
+
+<div class="credits-pane"><div><h2>100 Credits</h2><span>+10 Free Credits</span></div>
+<h3>$109.99</h3> <div><span>Qty</span><input min="0" max="1000" v-model="packs.credits100" type="number"></div>
+</div>
+
+<div class="credits-pane"><div><h2>1000 Credits</h2><span>+150 Free Credits</span></div>
+<h3>$1010</h3> <div><span>Qty</span><input min="0" max="1000" v-model="packs.credits1000" type="number"></div>
+</div>
+
+	<h3>Total: ${{total.toLocaleString('en')}}</h3>
+	<button class="brand-btn">Continue</button>
+
+</section>
 </template>
+
+<script>
+
+function total() {
+	return this.packs.credits10*10.99 + this.packs.credits50*54.99
+	+ this.packs.credits100*109.99 + this.packs.credits1000*1010
+}
+
+export default {
+	data() {
+		return {packs: {credits10: 0, credits50: 0,
+		credits100: 0, credits1000: 0}}
+	},
+	computed: {total}
+}
+</script>

resources/js/panel/orders.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 	<section class="pending-pane">
-	<div class="actions"><a class="new-order" href="#new-order">New</a><a class="new-order" href="#credits">Add credits</a></div>
+	<div class="actions"><a class="new-order" href="#new-order">New</a><a class="new-order" href="#credits">Add Credits</a></div>
 	<h4>Pending Orders</h4>
 	<ul>
 		<template v-bind:key='order.id' v-for="order in orders">

resources/js/panel/panel.vue

@@ -4,7 +4,7 @@
 <transition name="fade" mode="out-in">
 <div v-if="active === ''" id="main">
 	<section class="welcome-pane"><h3>Welcome, {{user.name}}!</h3></section>
-	<section class="credits-pane"><img src="../../images/wallet2.svg" alt="wallet" class="icon"/><p>Credits: ${{user.credits}}</p></section>
+	<section class="credits-pane"><img src="../../images/coin-stack.svg" alt="wallet" class="icon"/><p>Credits: {{user.credits}}</p></section>
 	<section class="alerts-pane"><h4>News and Announcements</h4>
 	<p>We've just launched. Thanks for joining us.</p>
 	</section>

resources/js/panel/settings.vue

@@ -2,6 +2,7 @@
 <div>
 	<section class="change-name-pane">
 	<h3>Settings</h3>
+		<h4>Billing</h4>
 		<h4>Name</h4>
 		<input :value="user.name" name="name" id="changed_name" type="text">
 		<button @click="changeName">Save <loading src="../../images/loading-white.svg" alt=""></loading></button>

resources/scss/main.scss

@@ -763,12 +763,11 @@ main.panel {
 	}
 
 	.credits-pane {
-		border: 3px solid vars.getColor("alt-blue-medium");
-		background: vars.getColor("alt-blue-light");
-		> * {
-		display: inline;
-		vertical-align: middle;
-		}
+		border: 3px solid vars.getColor("orange");
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: vars.getColor('brand-orange');
 	}
 
 	.alerts-pane {
@@ -1156,3 +1155,39 @@ button .loading-icon {
 	margin: 1em;
 	color: vars.getColor('brand-orange');
 }
+
+.select-credits .credits-pane {
+	flex-flow: wrap;
+	border-radius: 4px;
+	margin-bottom: 2em;
+	text-align: center;
+	display: flex;
+	gap: 5%;
+	padding: 0.5em 0;
+
+	span {margin-right: 0.5em;}
+}
+
+.select-credits h2 {
+	margin: 0;
+}
+
+.select-credits h3 {
+	text-align: center;
+}
+
+.select-credits input {
+	width: 3em;
+}
+
+.brand-btn {
+		display: inline-block;
+		margin: auto;
+		display: flex;
+		align-items: center;
+		text-align: center;
+		justify-content: center;
+		@include vars.inverting-button(vars.getColor('brand-orange'), white);
+		font-size: 1.1rem;
+		min-width: 7em;
+}

resources/views/master.blade.php

@@ -44,6 +44,8 @@ spellcheck='false'>
 		</ul>
 	</div>
 	@yield('content')
+
+
 @section('footer')
 	<footer class='footer text-center'>
 		<div class='foot-links'>
@@ -54,5 +56,9 @@ spellcheck='false'>
 		<small>©Copyright 2021 Trendplays Network, Inc.</small>
 	</footer>
 @show
-	@yield('scripts')
+
+@section('scripts')
+	<script src="https://js.stripe.com/v3/"></script>
+@show
+
 </body>