Send Payment method id in checkout session (#9932)

enso-org · May 13, 2024 · 2ed83f2 · 2ed83f2
1 parent ff28737
commit 2ed83f2
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 13 deletions.
diff --git a/app/ide-desktop/eslint.config.js b/app/ide-desktop/eslint.config.js
@@ -241,7 +241,7 @@ export default [
     eslintJs.configs.recommended,
     {
         // Playwright build cache.
-        ignores: ['**/.cache/**', '**/playwright-report'],
+        ignores: ['**/.cache/**', '**/playwright-report', 'dist'],
     },
     {
         settings: {

diff --git a/app/ide-desktop/lib/dashboard/src/pages/subscribe/Subscribe/Subscribe.tsx b/app/ide-desktop/lib/dashboard/src/pages/subscribe/Subscribe/Subscribe.tsx
@@ -24,6 +24,14 @@ import * as backendModule from '#/services/Backend'
 import * as components from './components'
 import * as componentForPlan from './getComponentForPlan'
 
+/**
+ * The mutation data for the `onCompleteMutation` mutation.
+ */
+interface CreateCheckoutSessionMutation {
+  readonly plan: backendModule.Plan
+  readonly paymentMethodId: string
+}
+
 /** A page in which the currently active payment plan can be changed.
  *
  * This page can be in one of several states:
@@ -74,13 +82,16 @@ export function Subscribe() {
   })
 
   const onCompleteMutation = reactQuery.useMutation({
-    mutationFn: async (userSelectedPlan: backendModule.Plan) => {
-      const { id } = await backend.createCheckoutSession(userSelectedPlan)
+    mutationFn: async (mutationData: CreateCheckoutSessionMutation) => {
+      const { id } = await backend.createCheckoutSession({
+        plan: mutationData.plan,
+        paymentMethodId: mutationData.paymentMethodId,
+      })
       return backend.getCheckoutSession(id)
     },
-    onSuccess: (data, userSelectedPlan) => {
+    onSuccess: (data, mutationData) => {
       if (data.status === 'complete') {
-        navigate({ pathname: appUtils.SUBSCRIBE_SUCCESS_PATH, search: `plan=${userSelectedPlan}` })
+        navigate({ pathname: appUtils.SUBSCRIBE_SUCCESS_PATH, search: `plan=${mutationData.plan}` })
         return
       } else {
         throw new Error(
@@ -128,8 +139,11 @@ export function Subscribe() {
                             title={planProps.title}
                             submitButton={
                               <planProps.submitButton
-                                onSubmit={async () => {
-                                  await onCompleteMutation.mutateAsync(newPlan)
+                                onSubmit={async paymentMethodId => {
+                                  await onCompleteMutation.mutateAsync({
+                                    plan: newPlan,
+                                    paymentMethodId,
+                                  })
                                 }}
                                 elements={elements}
                                 stripe={stripeInstance}

diff --git a/app/ide-desktop/lib/dashboard/src/pages/subscribe/Subscribe/components/SubscribeForm.tsx b/app/ide-desktop/lib/dashboard/src/pages/subscribe/Subscribe/components/SubscribeForm.tsx
@@ -20,7 +20,7 @@ import * as ariaComponents from '#/components/AriaComponents'
 export interface SubscribeFormProps {
   readonly stripe: stripeJs.Stripe
   readonly elements: stripeJs.StripeElements
-  readonly onSubmit: (paymentMethod: stripeJs.PaymentMethod) => Promise<void>
+  readonly onSubmit: (paymentMethodId: stripeJs.PaymentMethod['id']) => Promise<void>
 }
 
 /**
@@ -49,7 +49,7 @@ export function SubscribeForm(props: SubscribeFormProps) {
       }
     },
     onSuccess: async paymentMethod => {
-      await onSubmit(paymentMethod.paymentMethod)
+      await onSubmit(paymentMethod.paymentMethod.id)
       cardElement?.clear()
     },
   })

diff --git a/app/ide-desktop/lib/dashboard/src/pages/subscribe/Subscribe/getComponentForPlan.tsx b/app/ide-desktop/lib/dashboard/src/pages/subscribe/Subscribe/getComponentForPlan.tsx
@@ -26,7 +26,7 @@ import * as components from './components'
  * The props for the submit button.
  */
 interface SubmitButtonProps {
-  readonly onSubmit: () => Promise<void>
+  readonly onSubmit: (paymentMethodId: string) => Promise<void>
   readonly elements: stripeJs.StripeElements
   readonly stripe: stripeJs.Stripe
   readonly plan: backendModule.Plan

diff --git a/app/ide-desktop/lib/dashboard/src/services/Backend.ts b/app/ide-desktop/lib/dashboard/src/services/Backend.ts
@@ -1090,6 +1090,7 @@ export interface CreateUserGroupRequestBody {
 /** HTTP request body for the "create checkout session" endpoint. */
 export interface CreateCheckoutSessionRequestBody {
   readonly plan: Plan
+  readonly paymentMethodId: string
 }
 
 /** URL query string parameters for the "list directory" endpoint. */
@@ -1119,6 +1120,14 @@ export interface ListVersionsRequestParams {
   readonly default: boolean
 }
 
+/**
+ * POST request body for the "create checkout session" endpoint.
+ */
+export interface CreateCheckoutSessionRequestParams {
+  readonly plan: Plan
+  readonly paymentMethodId: string
+}
+
 // ==============================
 // === detectVersionLifecycle ===
 // ==============================
@@ -1346,7 +1355,9 @@ export default abstract class Backend {
   /** Return a list of backend or IDE versions. */
   abstract listVersions(params: ListVersionsRequestParams): Promise<Version[]>
   /** Create a payment checkout session. */
-  abstract createCheckoutSession(plan: Plan): Promise<CheckoutSession>
+  abstract createCheckoutSession(
+    params: CreateCheckoutSessionRequestParams
+  ): Promise<CheckoutSession>
   /** Get the status of a payment checkout session. */
   abstract getCheckoutSession(sessionId: CheckoutSessionId): Promise<CheckoutSessionStatus>
   /** List events in the organization's audit log. */

diff --git a/app/ide-desktop/lib/dashboard/src/services/RemoteBackend.ts b/app/ide-desktop/lib/dashboard/src/services/RemoteBackend.ts
@@ -934,10 +934,14 @@ export default class RemoteBackend extends Backend {
 
   /** Create a payment checkout session.
    * @throws An error if a non-successful status code (not 200-299) was received. */
-  override async createCheckoutSession(plan: backend.Plan): Promise<backend.CheckoutSession> {
+  override async createCheckoutSession(
+    params: backend.CreateCheckoutSessionRequestParams
+  ): Promise<backend.CheckoutSession> {
+    const { plan, paymentMethodId } = params
+
     const response = await this.post<backend.CheckoutSession>(
       remoteBackendPaths.CREATE_CHECKOUT_SESSION_PATH,
-      { plan } satisfies backend.CreateCheckoutSessionRequestBody
+      { plan, paymentMethodId } satisfies backend.CreateCheckoutSessionRequestBody
     )
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'createCheckoutSessionBackendError', plan)