fix issue creating orders with stripe

Author: jdnichollsc

.env.example

@@ -24,7 +24,11 @@ [email protected]
 EMAIL_FROM_NAME=ProjectX Team
 
 # PAYMENT SETTINGS
+# You can find your secret key in your Stripe account
 STRIPE_SECRET_KEY=sk_test_your_stripe_secret_key
+# If you are testing your webhook locally with the Stripe CLI you
+# can find the endpoint's secret by running `stripe listen`
+# Otherwise, find your endpoint's secret in your webhook settings in the Developer Dashboard
 STRIPE_WEBHOOK_SECRET=whsec_your_stripe_webhook_signing_secret
 
 # DEVELOPMENT ONLY

apps/auth/src/workflows/login.workflow.ts

@@ -71,7 +71,8 @@ export async function loginUserWorkflow(
     state.codeStatus = LoginWorkflowCodeStatus.SENT;
 
     // Wait for user to verify code (human interaction)
-    if (await condition(() => !!state.user, '10m'))
+    await condition(() => !!state.user, '10m')
+    
     // Wait for all handlers to finish before checking the state
     await condition(allHandlersFinished);
     if (state.user) {

apps/order/src/app/app.controller.ts

@@ -10,6 +10,7 @@ import {
   Param,
   HttpStatus,
   HttpCode,
+  Delete,
 } from '@nestjs/common';
 import {
   ApiBearerAuth,
@@ -19,7 +20,7 @@ import {
   ApiTags,
 } from '@nestjs/swagger';
 import { AuthenticatedUser, AuthUser, JwtAuthGuard } from '@projectx/core';
-import { CreateOrderDto } from '@projectx/models';
+import { CreateOrderDto, OrderStatusResponseDto } from '@projectx/models';
 import { Request } from 'express';
 
 import { AppService } from './app.service';
@@ -56,13 +57,24 @@ export class AppController {
   })
   @ApiOkResponse({
     description: 'Returns the status of the order workflow',
+    type: OrderStatusResponseDto,
   })
   @HttpCode(HttpStatus.OK)
   @Get(':referenceId')
   async getOrderStatus(@Param('referenceId') referenceId: string) {
     return this.appService.getOrderStatus(referenceId);
   }
 
+  @ApiBearerAuth()
+  @UseGuards(JwtAuthGuard)
+  @ApiOperation({
+    summary: 'Cancel an order',
+  })
+  @Delete(':referenceId')
+  async cancelOrder(@Param('referenceId') referenceId: string) {
+    return this.appService.cancelOrder(referenceId);
+  }
+
   @Post('/webhook')
   async handleStripeWebhook(
     @Req() request: RawBodyRequest<Request>,

apps/order/src/app/app.service.ts

@@ -14,14 +14,16 @@ import {
   PaymentWebhookEvent,
   AuthUser,
   createOrderUpdate,
+  getOrderStateQuery,
+  cancelWorkflowSignal,
 } from '@projectx/core';
 import {
   WorkflowExecutionAlreadyStartedError,
   WorkflowIdConflictPolicy,
 } from '@temporalio/common';
+import { WithStartWorkflowOperation } from '@temporalio/client';
 
 import { createOrder } from '../workflows/order.workflow';
-import { WithStartWorkflowOperation } from '@temporalio/client';
 
 @Injectable()
 export class AppService {
@@ -114,10 +116,17 @@ export class AppService {
     }
 
     const handle = this.clientService.client?.workflow.getHandle(workflowId);
-    const state = await handle.query('getOrderState');
+    const state = await handle.query(getOrderStateQuery);
     return state;
   }
 
+  async cancelOrder(referenceId: string) {
+    this.logger.log(`cancelOrder(${referenceId}) - cancelling order`);
+    const workflowId = this.getWorkflowIdByReferenceId(referenceId);
+    const handle = this.clientService.client?.workflow.getHandle(workflowId);
+    await handle.signal(cancelWorkflowSignal);
+  }
+
   async handleWebhook(payload: Buffer, signature: string) {
     this.logger.log('Processing webhook event');
     try {

apps/order/src/workflows/long-running.workflow.ts

@@ -1,7 +1,7 @@
 import { continueAsNew, workflowInfo } from "@temporalio/workflow";
 
 const MAX_NUMBER_OF_EVENTS = 10000;
-
+// It's just an example of a long running workflow
 export async function longRunningWorkflow(n: number): Promise<void> {
   // Long-duration workflow
   while (workflowInfo().historyLength < MAX_NUMBER_OF_EVENTS) {

apps/order/src/workflows/order.workflow.ts

@@ -1,42 +1,53 @@
 /* eslint-disable @nx/enforce-module-boundaries */
 import {
   allHandlersFinished,
+  ApplicationFailure,
   ChildWorkflowHandle,
   condition,
   proxyActivities,
   setHandler,
   startChild,
+  log,
 } from '@temporalio/workflow';
 
+// Typescript alias issue while importing files from other libraries from workflows.
 import {
   OrderProcessPaymentStatus,
   OrderWorkflowData,
   OrderWorkflowNonRetryableErrors,
-  OrderWorkflowState,
-  OrderWorkflowStatus,
   createOrderUpdate,
   getOrderStateQuery,
   getWorkflowIdByPaymentOrder,
 } from '../../../../libs/backend/core/src/lib/order/workflow.utils';
-import {
-  cancelWorkflowSignal,
-} from '../../../../libs/backend/core/src/lib/workflows';
+import { cancelWorkflowSignal } from '../../../../libs/backend/core/src/lib/workflows';
+import type { OrderStatusResponseDto } from '../../../../libs/models/src/order/order.dto';
 import type { ActivitiesService } from '../main';
 
-const { createOrder: createOrderActivity } = proxyActivities<ActivitiesService>({
-  startToCloseTimeout: '5 seconds',
-  retry: {
-    initialInterval: '2s',
-    maximumInterval: '10s',
-    maximumAttempts: 10,
-    backoffCoefficient: 1.5,
-    nonRetryableErrorTypes: [OrderWorkflowNonRetryableErrors.UNKNOWN_ERROR],
-  },
-});
+const { createOrder: createOrderActivity } = proxyActivities<ActivitiesService>(
+  {
+    startToCloseTimeout: '5 seconds',
+    retry: {
+      initialInterval: '2s',
+      maximumInterval: '10s',
+      maximumAttempts: 10,
+      backoffCoefficient: 1.5,
+      nonRetryableErrorTypes: [OrderWorkflowNonRetryableErrors.UNKNOWN_ERROR],
+    },
+  }
+);
 import { processPayment } from './process-payment.workflow';
 
-const initialState: OrderWorkflowState = {
-  status: OrderWorkflowStatus.PENDING,
+export enum OrderStatus {
+  Pending = 'Pending',
+  Confirmed = 'Confirmed',
+  Shipped = 'Shipped',
+  Delivered = 'Delivered',
+  Cancelled = 'Cancelled',
+  Failed = 'Failed',
+}
+
+const initialState: OrderStatusResponseDto = {
+  status: OrderStatus.Pending,
   orderId: undefined,
   referenceId: '',
   clientSecret: undefined,
@@ -46,15 +57,27 @@ export async function createOrder(
   data: OrderWorkflowData,
   state = initialState
 ): Promise<void> {
+  state.referenceId = data.order.referenceId;
   // Define references to child workflows
   let processPaymentWorkflow: ChildWorkflowHandle<typeof processPayment>;
 
   // Attach queries, signals and updates
   setHandler(getOrderStateQuery, () => state);
-  setHandler(
-    cancelWorkflowSignal,
-    () => processPaymentWorkflow?.signal(cancelWorkflowSignal)
-  );
+  setHandler(cancelWorkflowSignal, () => {
+    log.info('Requesting order cancellation');
+    if (!state?.orderId) {
+      throw ApplicationFailure.nonRetryable(
+        OrderWorkflowNonRetryableErrors.CANCELLED,
+        'Order cancelled'
+      );
+    }
+    if (processPaymentWorkflow) {
+      processPaymentWorkflow.signal(cancelWorkflowSignal);
+    } else {
+      log.error('The payment process has already finished, cannot cancel');
+    }
+  });
+  // Create the order and the payment intent with the payment provider
   setHandler(createOrderUpdate, async () => {
     const { order, clientSecret } = await createOrderActivity(data);
     state.orderId = order.id;
@@ -63,25 +86,30 @@ export async function createOrder(
     return state;
   });
 
-  // Wait to create the order in the database
+  // Wait the order to be ready to be processed
   await condition(() => !!state?.orderId);
-  
-  // First step: Process payment
-  if (state.status === OrderWorkflowStatus.PENDING) {
+
+  // First step - Process payment
+  if (state.status === OrderStatus.Pending) {
     processPaymentWorkflow = await startChild(processPayment, {
       args: [data],
       workflowId: getWorkflowIdByPaymentOrder(state.referenceId),
     });
     const processPaymentResult = await processPaymentWorkflow.result();
-    if (processPaymentResult.status === OrderProcessPaymentStatus.SUCCESS) {
-      state.status = OrderWorkflowStatus.PAYMENT_COMPLETED;
-    } else {
-      state.status = OrderWorkflowStatus.FAILED;
-      return;
+    if (processPaymentResult.status !== OrderProcessPaymentStatus.SUCCESS) {
+      state.status = OrderStatus.Failed;
+      // TODO: Send email to the user
+      throw ApplicationFailure.nonRetryable(
+        OrderWorkflowNonRetryableErrors.UNKNOWN_ERROR,
+        'Payment failed'
+      );
     }
     processPaymentWorkflow = undefined;
-    state.status = OrderWorkflowStatus.COMPLETED;
+    state.status = OrderStatus.Confirmed;
   }
+
+  // TODO: Second step - Ship the order
+
   // Wait for all handlers to finish before workflow completion
   await condition(allHandlersFinished);
 }

apps/web/app/config/app.config.server.ts

@@ -7,6 +7,7 @@ export const sessionSecret = getRequiredServerEnvVar(
   'SESSION_SECRET',
   'MY_SECRET_KEY'
 );
+export const stripeSecretKey = getRequiredServerEnvVar('STRIPE_SECRET_KEY');
 export const authAPIUrl = getRequiredServerEnvVar('AUTH_API_URL', 'http://localhost:8081');
 export const orderAPIUrl = getRequiredServerEnvVar('ORDER_API_URL', 'http://localhost:8082');
 export const productAPIUrl = getRequiredServerEnvVar('PRODUCT_API_URL', 'http://localhost:8083');

apps/web/app/config/security.server.ts

@@ -12,10 +12,12 @@ const trustedDomains = [appDomains, localDomains].filter(Boolean).join(' ');
 
 export const defaultSrc = replaceNewLinesWithSpaces(`
   ${trustedDomains}
+  https://*.stripe.com
 `);
 
 export const scriptSrc = replaceNewLinesWithSpaces(`
   ${defaultSrc}
+  
 `);
 
 export const frameSrc = replaceNewLinesWithSpaces(`

apps/web/app/pages/CheckoutPage.tsx

@@ -0,0 +1,105 @@
+import { Elements } from '@stripe/react-stripe-js';
+import type { Appearance } from '@stripe/stripe-js';
+import { Stripe, loadStripe } from '@stripe/stripe-js';
+import { motion } from 'framer-motion';
+import { useEffect, useState } from 'react';
+
+import { CheckoutForm } from './checkout/CheckoutForm';
+import { CompletePage } from './checkout/CompletePage';
+import { stripeSecretKey } from '~/config/app.config.server';
+
+// Make sure to call loadStripe outside of a component's render to avoid
+// recreating the Stripe object on every render.
+// This is your test publishable API key.
+const stripePromise = loadStripe(stripeSecretKey);
+
+interface CheckoutPageProps {
+  clientSecret?: string;
+}
+
+const appearance: Appearance = {
+  theme: 'stripe',
+  variables: {
+    colorPrimary: '#9333ea', // purple-600
+    colorBackground: '#ffffff',
+    colorText: '#111827', // gray-900
+    colorDanger: '#dc2626', // red-600
+    fontFamily: 'system-ui, sans-serif',
+    spacingUnit: '4px',
+    borderRadius: '8px',
+  },
+  rules: {
+    '.Input': {
+      backgroundColor: '#f3f4f6', // gray-100
+      color: '#111827', // gray-900
+    },
+    '.Input--invalid': {
+      color: '#dc2626', // red-600
+    },
+    '.Label': {
+      color: '#374151', // gray-700
+    },
+    '.Tab': {
+      backgroundColor: '#f3f4f6', // gray-100
+      color: '#374151', // gray-700
+    },
+    '.Tab--selected': {
+      backgroundColor: '#9333ea', // purple-600
+      color: '#ffffff',
+    },
+  },
+};
+
+export const CheckoutPage = ({ clientSecret }: CheckoutPageProps) => {
+  const [confirmed, setConfirmed] = useState(false);
+  const [stripe, setStripe] = useState<Stripe | null>(null);
+
+  useEffect(() => {
+    // Initialize Stripe
+    stripePromise.then(setStripe);
+  }, []);
+
+  if (!clientSecret) {
+    return (
+      <div className="flex-grow flex items-center justify-center p-4">
+        <motion.div 
+          initial={{ opacity: 0, y: -20 }} 
+          animate={{ opacity: 1, y: 0 }} 
+          transition={{ duration: 0.5 }} 
+          className="w-full max-w-md bg-white dark:bg-gray-800 shadow-xl rounded-lg p-8"
+        >
+          <div className="text-center">
+            <p className="text-base font-semibold text-purple-600 dark:text-purple-400">404</p>
+            <h1 className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">Payment not found</h1>
+            <p className="mt-2 text-base text-gray-500 dark:text-gray-400">
+              The payment session you're looking for doesn't exist or has expired.
+            </p>
+          </div>
+        </motion.div>
+      </div>
+    );
+  }
+
+  const options = {
+    clientSecret,
+    appearance,
+  };
+
+  return (
+    <div className="flex-grow flex items-center justify-center p-4">
+      <motion.div 
+        initial={{ opacity: 0, y: -20 }} 
+        animate={{ opacity: 1, y: 0 }} 
+        transition={{ duration: 0.5 }} 
+        className="w-full max-w-3xl bg-white dark:bg-gray-800 shadow-xl rounded-lg p-8"
+      >
+        <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">Complete Payment</h2>
+        <div className="space-y-8">
+          <Elements options={options} stripe={stripePromise}>
+            {confirmed ? <CompletePage /> : <CheckoutForm onConfirmed={() => setConfirmed(true)} />}
+          </Elements>
+        </div>
+      </motion.div>
+    </div>
+  );
+};