fix(payments): Update payment providers vs methods

- Because
  - Sentry events frequently stating the "Server Components render" error occur for the CheckoutForm component
    - CheckoutForm is a client component, but it is importing the Node server SDK for Stripe causing Next to try to bundle Stripe Node SDK into the client build and surfacing the Server Components render error
    - Validation for paymentProvider was expecting an enum
  - This occurred as some of the options for payment methods (e.g. Apple Pay, Google Pay) during checkout are considered valid payment provider types.
  - We should distinguish payment providers and payment methods.

- This pull request
  - Updates definition/usage of payment providers vs methods

- Closes PAY-3439

Author: xlisachan

libs/payments/customer/src/lib/factories/paymentMethod.factory.ts

@@ -3,11 +3,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { faker } from '@faker-js/faker';
-import { SubPlatPaymentMethodType, type StripePaymentMethod } from '../types';
+import {
+  PaymentProvider,
+  SubPlatPaymentMethodType,
+  type StripePaymentMethod,
+} from '../types';
 
 export const StripePaymentMethodTypeResponseFactory = (
   override?: Partial<StripePaymentMethod>
 ): StripePaymentMethod => ({
+  provider: PaymentProvider.Stripe,
   type: faker.helpers.arrayElement([
     SubPlatPaymentMethodType.Card,
     SubPlatPaymentMethodType.ApplePay,

libs/payments/customer/src/lib/paymentMethod.manager.spec.ts

@@ -11,7 +11,10 @@ import {
   PayPalClient,
   PaypalCustomerManager,
 } from '@fxa/payments/paypal';
-import { SubPlatPaymentMethodType } from '@fxa/payments/customer';
+import {
+  PaymentProvider,
+  SubPlatPaymentMethodType,
+} from '@fxa/payments/customer';
 import {
   StripeClient,
   MockStripeConfigProvider,
@@ -99,6 +102,7 @@ describe('PaymentMethodManager', () => {
       const mockUid = faker.string.uuid();
 
       jest.spyOn(paymentMethodManager, 'determineType').mockResolvedValue({
+        provider: PaymentProvider.Stripe,
         type: SubPlatPaymentMethodType.Card,
         paymentMethodId: 'pm_id',
       });
@@ -128,6 +132,7 @@ describe('PaymentMethodManager', () => {
       const mockUid = faker.string.uuid();
 
       jest.spyOn(paymentMethodManager, 'determineType').mockResolvedValue({
+        provider: PaymentProvider.PayPal,
         type: SubPlatPaymentMethodType.PayPal,
       });
       jest
@@ -155,6 +160,7 @@ describe('PaymentMethodManager', () => {
       const mockUid = faker.string.uuid();
 
       jest.spyOn(paymentMethodManager, 'determineType').mockResolvedValue({
+        provider: PaymentProvider.Stripe,
         type: SubPlatPaymentMethodType.ApplePay,
         paymentMethodId: 'pm_id',
       });
@@ -215,6 +221,7 @@ describe('PaymentMethodManager', () => {
       const mockUid = faker.string.uuid();
 
       jest.spyOn(paymentMethodManager, 'determineType').mockResolvedValue({
+        provider: PaymentProvider.Stripe,
         type: SubPlatPaymentMethodType.Card,
         paymentMethodId: 'pm_id',
       });
@@ -289,6 +296,7 @@ describe('PaymentMethodManager', () => {
       const mockUid = faker.string.uuid();
 
       jest.spyOn(paymentMethodManager, 'determineType').mockResolvedValue({
+        provider: PaymentProvider.Stripe,
         type: SubPlatPaymentMethodType.ApplePay,
         paymentMethodId: 'pm_id',
       });
@@ -331,6 +339,7 @@ describe('PaymentMethodManager', () => {
       const mockUid = faker.string.uuid();
 
       jest.spyOn(paymentMethodManager, 'determineType').mockResolvedValue({
+        provider: PaymentProvider.PayPal,
         type: SubPlatPaymentMethodType.PayPal,
       });
       jest
@@ -385,6 +394,7 @@ describe('PaymentMethodManager', () => {
       await expect(
         paymentMethodManager.determineType(mockCustomer)
       ).resolves.toEqual({
+        provider: PaymentProvider.Stripe,
         type: SubPlatPaymentMethodType.Card,
         paymentMethodId: expect.any(String),
       });
@@ -398,6 +408,7 @@ describe('PaymentMethodManager', () => {
       await expect(
         paymentMethodManager.determineType(undefined, [mockSubscription])
       ).resolves.toEqual({
+        provider: PaymentProvider.PayPal,
         type: SubPlatPaymentMethodType.PayPal,
       });
     });
@@ -424,6 +435,7 @@ describe('PaymentMethodManager', () => {
       await expect(
         paymentMethodManager.determineType(mockCustomer)
       ).resolves.toEqual({
+        provider: PaymentProvider.Stripe,
         type: SubPlatPaymentMethodType.Link,
         paymentMethodId: expect.any(String),
       });
@@ -451,6 +463,7 @@ describe('PaymentMethodManager', () => {
       await expect(
         paymentMethodManager.determineType(mockCustomer)
       ).resolves.toEqual({
+        provider: PaymentProvider.Stripe,
         type: SubPlatPaymentMethodType.ApplePay,
         paymentMethodId: expect.any(String),
       });
@@ -478,6 +491,7 @@ describe('PaymentMethodManager', () => {
       await expect(
         paymentMethodManager.determineType(mockCustomer)
       ).resolves.toEqual({
+        provider: PaymentProvider.Stripe,
         type: SubPlatPaymentMethodType.GooglePay,
         paymentMethodId: expect.any(String),
       });

libs/payments/customer/src/lib/paymentMethod.manager.ts

@@ -14,6 +14,7 @@ import {
   DefaultPaymentMethod,
   DefaultPaymentMethodError,
   PaymentMethodErrorType,
+  PaymentProvider,
   SubPlatPaymentMethodType,
   type PaymentMethodTypeResponse,
 } from './types';
@@ -124,6 +125,7 @@ export class PaymentMethodManager {
       subscriptions[0].collection_method === 'send_invoice'
     ) {
       return {
+        provider: PaymentProvider.PayPal,
         type: SubPlatPaymentMethodType.PayPal,
       };
     }
@@ -134,26 +136,34 @@ export class PaymentMethodManager {
       );
       if (paymentMethod.card?.wallet?.type === 'apple_pay') {
         return {
+          provider: PaymentProvider.Stripe,
           type: SubPlatPaymentMethodType.ApplePay,
           paymentMethodId: customer.invoice_settings.default_payment_method,
         };
       } else if (paymentMethod.card?.wallet?.type === 'google_pay') {
         return {
+          provider: PaymentProvider.Stripe,
           type: SubPlatPaymentMethodType.GooglePay,
           paymentMethodId: customer.invoice_settings.default_payment_method,
         };
-      } else if (paymentMethod.type === 'link' || paymentMethod.card?.wallet?.type === 'link') {
+      } else if (
+        paymentMethod.type === 'link' ||
+        paymentMethod.card?.wallet?.type === 'link'
+      ) {
         return {
+          provider: PaymentProvider.Stripe,
           type: SubPlatPaymentMethodType.Link,
           paymentMethodId: customer.invoice_settings.default_payment_method,
         };
       } else if (paymentMethod.type === 'card') {
         return {
+          provider: PaymentProvider.Stripe,
           type: SubPlatPaymentMethodType.Card,
           paymentMethodId: customer.invoice_settings.default_payment_method,
         };
       } else {
         return {
+          provider: PaymentProvider.Stripe,
           type: SubPlatPaymentMethodType.Stripe,
           paymentMethodId: customer.invoice_settings.default_payment_method,
         };

libs/payments/customer/src/lib/types.ts

@@ -30,6 +30,13 @@ export type InvoicePreview = {
   subsequentTax?: TaxAmount[];
 };
 
+export enum PaymentProvider {
+  AppleIap = 'apple_iap',
+  GoogleIap = 'google_iap',
+  PayPal = 'paypal',
+  Stripe = 'stripe',
+}
+
 export enum SubPlatPaymentMethodType {
   PayPal = 'external_paypal',
   Stripe = 'stripe',
@@ -40,6 +47,7 @@ export enum SubPlatPaymentMethodType {
 }
 
 export interface StripePaymentMethod {
+  provider: 'stripe';
   type:
     | SubPlatPaymentMethodType.Card
     | SubPlatPaymentMethodType.ApplePay
@@ -50,6 +58,7 @@ export interface StripePaymentMethod {
 }
 
 export interface PayPalPaymentMethod {
+  provider: 'paypal';
   type: SubPlatPaymentMethodType.PayPal;
 }
 
@@ -69,10 +78,10 @@ export interface AccountCreditBalance {
 }
 
 export type PaymentProvidersType =
-  | Stripe.PaymentMethod.Type
+  | 'stripe'
   | 'google_iap'
   | 'apple_iap'
-  | 'external_paypal';
+  | 'paypal';
 
 export enum PaymentMethodErrorType {
   CardExpired,

libs/payments/events/src/lib/emitter.service.spec.ts

@@ -30,7 +30,7 @@ import {
   CustomerManager,
   SubscriptionManager,
   PaymentMethodManager,
-  SubPlatPaymentMethodType,
+  PaymentProvider,
   StripePaymentMethodTypeResponseFactory,
 } from '@fxa/payments/customer';
 import { MockFirestoreProvider } from '@fxa/shared/db/firestore';
@@ -39,7 +39,6 @@ import {
   CommonMetricsFactory,
   MockPaymentsGleanConfigProvider,
   MockPaymentsGleanFactory,
-  PaymentProvidersType,
   PaymentsGleanManager,
 } from '@fxa/payments/metrics';
 import { CartManager } from '@fxa/payments/cart';
@@ -105,7 +104,7 @@ describe('PaymentsEmitterService', () => {
   });
   const mockCheckoutPaymentEvents = {
     ...mockCommonMetricsData,
-    paymentProvider: 'stripe' as PaymentProvidersType,
+    paymentProvider: PaymentProvider.Stripe,
   };
   let retrieveOptOutMock: jest.SpyInstance<any, unknown[], any>;
   const mockLogger = {
@@ -403,7 +402,7 @@ describe('PaymentsEmitterService', () => {
   describe('handleCheckoutSuccess', () => {
     const mockCustomer = StripeCustomerFactory();
     const mockSubscription = StripeSubscriptionFactory();
-    const mockPaymentMethodType = StripePaymentMethodTypeResponseFactory();
+    const mockPaymentMethod = StripePaymentMethodTypeResponseFactory();
     beforeEach(() => {
       jest
         .spyOn(customerManager, 'retrieve')
@@ -413,7 +412,7 @@ describe('PaymentsEmitterService', () => {
         .mockResolvedValue(StripeResponseFactory([mockSubscription]));
       jest
         .spyOn(paymentMethodManager, 'determineType')
-        .mockResolvedValue(mockPaymentMethodType);
+        .mockResolvedValue(mockPaymentMethod);
       jest
         .spyOn(paymentsGleanManager, 'recordFxaPaySetupSuccess')
         .mockReturnValue();
@@ -440,7 +439,7 @@ describe('PaymentsEmitterService', () => {
           experimentationData: { nimbusUserId },
           ...additionalMetricsData,
         },
-        mockPaymentMethodType.type
+        mockPaymentMethod.provider
       );
     });
 
@@ -511,7 +510,7 @@ describe('PaymentsEmitterService', () => {
       priceId: additionalMetricsData.cmsMetricsData.priceId,
       priceInterval: mockInterval,
       priceIntervalCount: 1,
-      paymentProvider: SubPlatPaymentMethodType.Card,
+      paymentProvider: PaymentProvider.Stripe,
     });
 
     const mockPrice = StripeResponseFactory(

libs/payments/events/src/lib/emitter.service.ts

@@ -22,7 +22,7 @@ import {
   CustomerManager,
   SubscriptionManager,
   PaymentMethodManager,
-  type SubPlatPaymentMethodType,
+  PaymentProvidersType,
 } from '@fxa/payments/customer';
 import * as Sentry from '@sentry/nestjs';
 import { StatsD, StatsDService } from '@fxa/shared/metrics/statsd';
@@ -217,8 +217,8 @@ export class PaymentsEmitterService {
           eventData?.searchParams?.['experimentationPreview'] === 'true',
       });
 
-      // Determine payment method type
-      let paymentMethodType: SubPlatPaymentMethodType | undefined;
+      // Determine payment provider
+      let paymentProvider: PaymentProvidersType | undefined;
       if (additionalData.cartMetricsData.stripeCustomerId) {
         const { stripeCustomerId } = additionalData.cartMetricsData;
         const customer = await this.customerManager.retrieve(stripeCustomerId);
@@ -231,7 +231,7 @@ export class PaymentsEmitterService {
           );
 
         if (paymentMethodTypeResponse?.type) {
-          paymentMethodType = paymentMethodTypeResponse.type;
+          paymentProvider = paymentMethodTypeResponse.provider;
         }
       }
 
@@ -241,7 +241,7 @@ export class PaymentsEmitterService {
           ...additionalData,
           experimentationData: { nimbusUserId },
         },
-        paymentMethodType
+        paymentProvider
       );
     }
   }

libs/payments/events/src/lib/emitter.types.ts

@@ -1,16 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
 import {
   CancellationReason,
   CartMetrics,
   CmsMetricsData,
   CommonMetrics,
-  PaymentProvidersType,
 } from '@fxa/payments/metrics';
 import { LocationStatus } from '@fxa/payments/eligibility';
 import { TaxChangeAllowedStatus } from '@fxa/payments/cart';
-import { SubPlatPaymentMethodType } from '@fxa/payments/customer';
+import { PaymentProvidersType } from '@fxa/payments/customer';
 
 export type CheckoutEvents = CommonMetrics;
 export type CheckoutPaymentEvents = CommonMetrics & {
@@ -22,7 +22,7 @@ export type SubscriptionEndedEvents = {
   priceId: string;
   priceInterval?: string;
   priceIntervalCount?: number;
-  paymentProvider?: SubPlatPaymentMethodType;
+  paymentProvider?: PaymentProvidersType;
   providerEventId: string;
   cancellationReason: CancellationReason;
   uid?: string;

libs/payments/metrics/src/lib/glean/glean.manager.ts

@@ -7,12 +7,12 @@ import {
   CartMetrics,
   CmsMetricsData,
   CommonMetrics,
-  PaymentProvidersType,
   PaymentsGleanProvider,
   SubscriptionCancellationData,
   type ExperimentationData,
 } from './glean.types';
 import { Inject, Injectable } from '@nestjs/common';
+import { PaymentProvidersType } from '@fxa/payments/customer';
 import { type PaymentsGleanServerEventsLogger } from './glean.provider';
 import { mapSession } from './utils/mapSession';
 import { mapUtm } from './utils/mapUtm';
@@ -21,7 +21,6 @@ import { mapRelyingParty } from './utils/mapRelyingParty';
 import { normalizeGleanFalsyValues } from './utils/normalizeGleanFalsyValues';
 import { PaymentsGleanConfig } from './glean.config';
 import { mapSubscriptionCancellation } from './utils/mapSubscriptionCancellation';
-import type { SubPlatPaymentMethodType } from '@fxa/payments/customer';
 
 @Injectable()
 export class PaymentsGleanManager {
@@ -82,7 +81,7 @@ export class PaymentsGleanManager {
       cmsMetricsData: CmsMetricsData;
       experimentationData: ExperimentationData;
     },
-    paymentProvider?: SubPlatPaymentMethodType
+    paymentProvider?: PaymentProvidersType
   ) {
     const commonMetrics = this.populateCommonMetrics(metrics);