Merge pull request #440 from kernvalley/patch/checkout

Update checkout process & version bump

Author: shgysk8zer0

CHANGELOG.md

@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v2.3.1] - 2023-01-21
+
+### Added
+- Create actual WFD Mayors page with events
+
+### Changed
+- Updated Store to be (basically) fully functional
+
+### Fixed
+- Checkout no longer creates duplicate orders
+
 ## [v2.3.0] - 2023-01-09
 
 ### Changed

_config.yml

@@ -2,7 +2,7 @@ author: Chris Zuber
 title: Whiskey Flat Days
 url: 'https://whiskeyflatdays.com'
 markdown: kramdown
-version: 2.3.0
+version: 2.3.1
 timezone: America/Los_Angeles
 lang: en
 dir: ltr

_data/app.yml

@@ -2,7 +2,7 @@
 name: Whiskey Flat Days
 shortName: WFD App
 id: WhiskeyFlatDays
-version: 2.3.0-2023-01-16T17:18
+version: 2.3.1
 start_url: /?utm_source=homescreen&utm_medium=pwa
 display: standalone
 description: "Map, events, store, and news app for Whiskey Flat Days"

api/paymentRequest.js

@@ -5,7 +5,7 @@ const { HTTPError } = require('./http-error.js');
 const { calculateShipping, calculateCardFee, calculateTaxes, getTotal } = require('./stripe-utils.js');
 const { currency } = require('./stripe-consts.js');
 
-async function getDisplayItems(cart, { signal } = {}) {
+async function createDisplayItems(cart, { signal } = {}) {
 	const { getProducts } = require('./store.js');
 	const products = await getProducts(cart.map(({ id }) => id, { signal }));
 
@@ -35,56 +35,8 @@ async function getDisplayItems(cart, { signal } = {}) {
 		}
 	});
 }
-async function getPaymentRequest(displayItems) {
-	if (! Array.isArray(displayItems) || displayItems.length === 0) {
-		throw new TypeError('`displayItems` invalid');
-	} else {
-		const req = {
-			details: {
-				displayItems,
-				modifiers: {
-					additionalDisplayItems: [{
-						label: 'Taxes',
-						amount: {
-							value: await calculateTaxes({ details: { displayItems }}),
-							currency,
-						}
-					}, {
-						label: 'Shipping',
-						amount: {
-							value: await calculateShipping({ displayItems }),
-							currency,
-						},
-					}]
-				}
-			},
-			options: {
-				requestShipping: true,
-			}
-		};
-
-		req.details.modifiers.additionalDisplayItems.push({
-			label: 'Processing Fee',
-			amount: {
-				value: await calculateCardFee(req),
-				currency,
-			}
-		});
-
-		req.details.total = {
-			label: 'Total',
-			amount: {
-				value: getTotal(req),
-				currency,
-			}
-		};
-
-		return req;
-	}
-}
-async function createPaymentRequest(query) {
-	const { createDisplayItems } = require('./store.js');
-	const displayItems = await createDisplayItems(query);
+async function createPaymentRequest(items, { signal } = {}) {
+	const displayItems = await createDisplayItems(items, { signal });
 
 	if (! Array.isArray(displayItems) || displayItems.length === 0) {
 		throw new TypeError('`displayItems` invalid');
@@ -96,7 +48,7 @@ async function createPaymentRequest(query) {
 					additionalDisplayItems: [{
 						label: 'Taxes',
 						amount: {
-							value: await calculateTaxes({ displayItems }),
+							value: await calculateTaxes({ details: { displayItems }}),
 							currency,
 						}
 					}, {
@@ -137,15 +89,15 @@ exports.handler = async function(event) {
 	try {
 		switch(event.httpMethod) {
 			case 'GET':
-				if (typeof event.queryStringParameters.query !== 'string') {
-					throw new HTTPError('Missing required query param', { status: 400 });
+				if (typeof event.queryStringParameters.id !== 'string') {
+					throw new HTTPError('Missing required id param', { status: 400 });
 				} else {
-					const req = await createPaymentRequest(event.queryStringParameters.query);
-
+					const { getOrder } = require('./stripe-utils.js');
+					const { paymentRequest, paymentIntent } = await getOrder(event.queryStringParameters.id);
 					return {
 						statusCode: 200,
 						headers,
-						body: JSON.stringify(req),
+						body: JSON.stringify({ paymentRequest, paymentIntent }),
 					};
 				}
 			case 'POST':
@@ -157,8 +109,7 @@ exports.handler = async function(event) {
 					if (! Array.isArray(items) || items.length === 0) {
 						throw new HTTPError('Invalid request body', { status: 400 });
 					} else {
-						const displayItems = await getDisplayItems(items);
-						const paymentRequest = await getPaymentRequest(displayItems);
+						const paymentRequest = await createPaymentRequest(items);
 						const { createPaymentIntent, createOrder } = require('./stripe-utils.js');
 						const paymentIntent = await createPaymentIntent(paymentRequest.details.total.amount.value);
 						paymentRequest.details.id = paymentIntent.id;
@@ -176,6 +127,7 @@ exports.handler = async function(event) {
 		}
 	} catch(err) {
 		console.error(err);
+
 		if (err instanceof HTTPError) {
 			return err.send({ Options: methods.join(',')});
 		} else {

api/stripe-utils.js

@@ -167,9 +167,9 @@ async function getOrder(id) {
 		if (doc.exists) {
 			const Stripe = require('stripe');
 			const stripe = Stripe(process.env.STRIPE_SECRET);
-			const order = doc.data();
-			const paymentIntent = await stripe.paymentIntents.retrieve(order.paymentRequest.details.id);
-			return { paymentIntent, order };
+			const { paymentRequest } = doc.data();
+			const paymentIntent = await stripe.paymentIntents.retrieve(paymentRequest.details.id);
+			return { paymentIntent, paymentRequest };
 		} else {
 			throw new Error(`Invalid order "${id}"`);
 		}

js/store.js

@@ -265,13 +265,22 @@ async function showProductDetails(id, { signal } = {}) {
 	await promise;
 }
 
-async function getPaymentRequest({ signal } = {}) {
-	const cart = new Cart();
+async function createPaymentRequest(cart = new Cart(), { signal } = {}) {
 	const url = new URL('/api/paymentRequest', document.baseURI);
 	const body = await cart.getAll({ signal });
 	return await postJSON(url, { body, signal });
 }
 
+async function getPaymentRequest({ signal } = {}) {
+	const params = new URLSearchParams(location.search);
+
+	if (params.has('token')) {
+		const url = new URL('/api/paymentRequest', document.baseURI);
+		url.searchParams.set('id', params.get('token'));
+		return await getJSON(url, { signal });
+	}
+}
+
 async function reviewCart(cart, { signal } = {}) {
 	const [products, items] = await Promise.all([
 		getProducts({ signal }),
@@ -391,13 +400,26 @@ async function reviewCart(cart, { signal } = {}) {
 						events: { click: ({ target }) => target.closest('dialog').close() },
 						text: 'Back to Shopping',
 					}),
-					create('a', {
-						href: '/store/checkout',
-						role: 'button',
+					create('button', {
+						type: 'button',
 						classList: items.length === 0
 							? ['btn', 'btn-primary', 'checkout-btn', 'disabled']
 							: ['btn', 'btn-primary', 'checkout-btn'],
 						text: 'Continue to Checkout',
+						events: {
+							click: async ({ currentTarget }) => {
+								try {
+									currentTarget.disabled = true;
+									const { paymentIntent } = await createPaymentRequest();
+									const url = new URL('/store/checkout', document.baseURI);
+									url.searchParams.set('token', paymentIntent);
+									location.href = url.href;
+								} catch(err) {
+									currentTarget.disabled = false;
+									console.error(err);
+								}
+							}
+						}
 					})
 				]
 			}),
@@ -450,12 +472,12 @@ if (location.pathname.startsWith('/store/checkout')) {
 				break;
 			}
 		}
-	} else {
+	} else if (location.search.includes('token=')) {
 		Promise.all([
 			getPaymentRequest(),
 			getStripeKey(),
 		]).then(async ([{ paymentRequest, paymentIntent }, key]) => {
-			const form = new HTMLStripePaymentFormElement(key, paymentIntent, {
+			const form = new HTMLStripePaymentFormElement(key, paymentIntent.client_secret, {
 				...paymentRequest,
 				config: {
 					returnURL: new URL(location.pathname, location.origin).href,

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "whiskey-flat-days",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "private": true,
   "description": "Map, events, store, and news app for Whiskey Flat Days",
   "config": {