Merge pull request #10 from jcreek/1-get-a-proper-checkout-page-with-data-from-stripe

feat(#1): use stripe session to populate checkout success

src/lib/components/checkout/OrderConfirmationItem.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+	import { formatCurrency } from '$lib/utils/currency';
 	export let imgAlt = '';
 	export let imgSrc = '';
-	export let itemCategoryDescription = '';
+	// export let itemCategoryDescription = '';
 	export let itemName = '';
 	export let price = 0;
 	export let quantity = 0;
+	export let currency = 'gbp';
 </script>
 
 <div class="grid grid-cols-1 lg:grid-cols-2 min-[550px]:gap-6 border-b border-gray-200 py-6">
@@ -18,17 +20,17 @@
 			<h5 class="font-semibold text-xl leading-8 text-black max-[550px]:text-center">
 				{itemName}
 			</h5>
-			<p
+			<!-- <p
 				class="font-normal text-lg leading-8 text-gray-500 my-2 min-[550px]:my-3 max-[550px]:text-center"
 			>
 				{itemCategoryDescription}
-			</p>
+			</p> -->
 
 			<div class="flex items-center">
 				<h6
 					class="font-medium text-lg leading-8 text-indigo-600 max-[550px]:text-center pr-4 mr-4 border-r border-gray-200"
 				>
-					£ {price.toFixed(2)}
+					{ formatCurrency(price, currency) }
 				</h6>
 				<p class="font-medium text-base leading-7 text-black">
 					Qty: <span class="text-gray-500">{quantity}</span>
@@ -43,7 +45,7 @@
 		<h6
 			class="text-indigo-600 font-manrope font-bold text-2xl leading-9 w-full max-w-[176px] text-center"
 		>
-			£{(price * quantity).toFixed(2)}
+			{ formatCurrency(price, currency) }
 		</h6>
 	</div>
 </div>

src/lib/utils/currency.ts

@@ -0,0 +1,6 @@
+export function formatCurrency(amount: number, currency: string): string {
+  return new Intl.NumberFormat('en-GB', {
+    style: 'currency',
+    currency: currency,
+  }).format(amount);
+}