diff --git a/app/Http/Controllers/BillingController.php b/app/Http/Controllers/BillingController.php
index 28c689d..2c9ceb0 100644
--- a/app/Http/Controllers/BillingController.php
+++ b/app/Http/Controllers/BillingController.php
@@ -5,10 +5,28 @@ namespace App\Http\Controllers;
 use Illuminate\Http\Request;
 use Stripe\Stripe;
 use Stripe\Customer;
+use Stripe\PaymentIntent;
+use Illuminate\Support\Facades\Log;
 
 class BillingController extends Controller
 {
-	public function charge() {
+	//Expects an array 'packs' representing the amount of each multiple of credits.
+	//This controller should have a way of figuring out how much of each pack
+	//was bought later.
+	public function secret(Request $request) {
+		Stripe::setApiKey(env('STRIPE_SECRET'));
+		Log::debug($request->packs);
 
+		$amount = $request->packs[ 'credits10' ]*1099 +
+			$request->packs[ 'credits50' ]*5499 + $request->packs[ 'credits100' ]*10999
+			+ $request->packs[ 'credits1000' ]*101000;
+
+		$intent = PaymentIntent::create([
+			'amount' => $amount,
+			'currency' => 'usd',
+			'metadata' => ['integration_check' => 'accept_a_payment']
+		]);
+
+		return $intent->client_secret;
 	}
 }
diff --git a/database/migrations/2021_05_19_185302_create_orders_table.php b/database/migrations/2021_05_19_185302_create_orders_table.php
index c20cb41..64f59e7 100644
--- a/database/migrations/2021_05_19_185302_create_orders_table.php
+++ b/database/migrations/2021_05_19_185302_create_orders_table.php
@@ -16,7 +16,7 @@ class CreateOrdersTable extends Migration
         Schema::create('orders', function (Blueprint $table) {
             $table->id();
             $table->timestamps();
-            $table->foreignId('service_id')->constrained();
+            $table->foreignId('service_id')->constrained()->nullable();
             $table->foreignId('user_id')->constrained();
             $table->bigInteger('quantity');
             $table->string('note')->default('');
diff --git a/resources/js/panel/credits.vue b/resources/js/panel/credits.vue
index 7bc55a5..e321764 100644
--- a/resources/js/panel/credits.vue
+++ b/resources/js/panel/credits.vue
@@ -13,12 +13,13 @@
 </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>
+<h3>$1010.00</h3> <div><span>Qty</span><input min="0" max="1000" v-model="packs.credits1000" type="number"></div>
 </div>
+</section>
 
+<section class="credits-confirm">
 	<h3>Total: ${{total.toLocaleString('en')}}</h3>
-	<button class="brand-btn">Continue</button>
-
+	<button @click="getSecret" :disabled="total == 0 || loading" class="brand-btn">Continue</button>
 </section>
 </template>
 
@@ -29,11 +30,32 @@ function total() {
 	+ this.packs.credits100*109.99 + this.packs.credits1000*1010
 }
 
+function getSecret() {
+	fetch('/panel/secret', {
+		method: 'POST',
+		headers: {'Content-Type': 'application/json',
+			'Accept': 'application/json',
+		'X-XSRF-TOKEN': this.token},
+		body: JSON.stringify({'packs': this.packs})
+	}).then((response) => {
+		if (response.ok) {
+			return response.text()
+		} else {
+			//handle errors here
+			console.log('an error occured')
+		}
+	}).then(data => {
+		console.log(data)
+	})
+}
+
 export default {
 	data() {
 		return {packs: {credits10: 0, credits50: 0,
-		credits100: 0, credits1000: 0}}
+		credits100: 0, credits1000: 0}, loading: false}
 	},
-	computed: {total}
+	computed: {total},
+	methods: {getSecret},
+	props: ['token']
 }
 </script>
diff --git a/resources/js/panel/services.vue b/resources/js/panel/services.vue
index b342e00..00fc2df 100644
--- a/resources/js/panel/services.vue
+++ b/resources/js/panel/services.vue
@@ -5,7 +5,7 @@
 	<a href="#credits" :class="{selected: page == 'credits'}">Credits</a>
 	<div :class="page" class="menu-slider"><div></div></div>
 	</div>
-	<h4 class="credits-display">Credits: {{credits.toLocaleString('en')}}</h4>
+	<h4 class="credits-display"><img class="icon" src="../../images/coin-stack.svg" alt=""><span> {{credits.toLocaleString('en')}}</span></h4>
 
 	<template v-if="page == 'new-order'">
 
@@ -68,7 +68,7 @@
 
 	</template>
 
-	<credits v-if="page == 'credits'"></credits>
+	<credits :token="token" v-if="page == 'credits'"></credits>
 
 </div>
 </template>
diff --git a/resources/scss/main.scss b/resources/scss/main.scss
index cfbbcd8..f2b5da3 100644
--- a/resources/scss/main.scss
+++ b/resources/scss/main.scss
@@ -1154,6 +1154,9 @@ button .loading-icon {
 	text-align: center;
 	margin: 1em;
 	color: vars.getColor('brand-orange');
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
 .select-credits .credits-pane {
@@ -1172,7 +1175,7 @@ button .loading-icon {
 	margin: 0;
 }
 
-.select-credits h3 {
+.credits-confirm h3 {
 	text-align: center;
 }
 
diff --git a/routes/web.php b/routes/web.php
index 74c370c..274429f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -4,6 +4,7 @@ use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\UserController;
 use App\Http\Controllers\ServiceController;
 use App\Http\Controllers\TransactionController;
+use App\Http\Controllers\BillingController;
 use Illuminate\Foundation\Auth\EmailVerificationRequest;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
@@ -86,3 +87,5 @@ Route::get('/reset-email', [UserController::class,
 Route::post('/panel/orders', [TransactionController::class,
 	'newOrder'])->middleware([ 'auth', 'verified' ]);
 
+Route::post('/panel/secret', [BillingController::class,
+	'secret'])->middleware([ 'auth', 'verified' ]);