Merge pull request #18225 from mozilla/fxa-7591-support-existing-pm

feat(next): support existing payment methods

Author: StaberindeZA

apps/payments/next/tailwind.config.ts

@@ -20,6 +20,8 @@ export default <Partial<Config>>{
       boxShadow: {
         inputError:
           '0 1px 2px rgba(0, 0, 0, 0.3), 0 3px 6px rgba(0, 0, 0, 0.02), 0 0 0 1px #df1b41',
+        stripeBox:
+          'rgba(0, 0, 0, 0.03) 0px 1px 1px 0px, rgba(0, 0, 0, 0.02) 0px 3px 6px 0px',
       },
       colors: {
         'alert-red': '#D70022',

libs/payments/cart/src/lib/cart.service.spec.ts

@@ -19,6 +19,7 @@ import {
 import {
   CouponErrorExpired,
   CustomerManager,
+  CustomerSessionManager,
   InvoiceManager,
   InvoicePreviewFactory,
   PaymentIntentManager,
@@ -41,6 +42,8 @@ import {
   StripeSubscriptionFactory,
   StripePaymentMethodFactory,
   StripePaymentIntentFactory,
+  StripeCustomerSessionFactory,
+  StripeApiListFactory,
 } from '@fxa/payments/stripe';
 import {
   MockProfileClientConfigProvider,
@@ -116,6 +119,7 @@ describe('CartService', () => {
   let cartManager: CartManager;
   let checkoutService: CheckoutService;
   let customerManager: CustomerManager;
+  let customerSessionManager: CustomerSessionManager;
   let currencyManager: CurrencyManager;
   let paymentIntentManager: PaymentIntentManager;
   let promotionCodeManager: PromotionCodeManager;
@@ -140,6 +144,7 @@ describe('CartService', () => {
         CartService,
         CheckoutService,
         CustomerManager,
+        CustomerSessionManager,
         EligibilityManager,
         EligibilityService,
         GeoDBManager,
@@ -184,6 +189,7 @@ describe('CartService', () => {
     cartService = moduleRef.get(CartService);
     checkoutService = moduleRef.get(CheckoutService);
     customerManager = moduleRef.get(CustomerManager);
+    customerSessionManager = moduleRef.get(CustomerSessionManager);
     currencyManager = moduleRef.get(CurrencyManager);
     paymentIntentManager = moduleRef.get(PaymentIntentManager);
     promotionCodeManager = moduleRef.get(PromotionCodeManager);
@@ -694,6 +700,27 @@ describe('CartService', () => {
   });
 
   describe('getCart', () => {
+    const mockCustomerSession = StripeResponseFactory(
+      StripeCustomerSessionFactory()
+    );
+    const mockSubscription = StripeSubscriptionFactory();
+    const mockListSubscriptions = StripeApiListFactory([mockSubscription]);
+    const mockPaymentMethod = StripeResponseFactory(
+      StripePaymentMethodFactory({})
+    );
+
+    beforeEach(() => {
+      jest
+        .spyOn(customerSessionManager, 'create')
+        .mockResolvedValue(mockCustomerSession);
+      jest
+        .spyOn(subscriptionManager, 'listForCustomer')
+        .mockResolvedValue(mockListSubscriptions.data);
+      jest
+        .spyOn(paymentMethodManager, 'retrieve')
+        .mockResolvedValue(mockPaymentMethod);
+    });
+
     it('returns cart and upcomingInvoicePreview', async () => {
       const mockCart = ResultCartFactory({ stripeSubscriptionId: null });
       const mockCustomer = StripeResponseFactory(StripeCustomerFactory());
@@ -713,6 +740,12 @@ describe('CartService', () => {
       expect(result).toEqual({
         ...mockCart,
         upcomingInvoicePreview: mockInvoicePreview,
+        paymentInfo: {
+          type: mockPaymentMethod.type,
+          last4: mockPaymentMethod.card?.last4,
+          brand: mockPaymentMethod.card?.brand,
+          customerSessionClientSecret: mockCustomerSession.client_secret,
+        },
         metricsOptedOut: false,
       });
 
@@ -732,9 +765,6 @@ describe('CartService', () => {
     });
 
     it('returns cart and upcomingInvoicePreview and latestInvoicePreview', async () => {
-      const mockSubscription = StripeResponseFactory(
-        StripeSubscriptionFactory()
-      );
       const mockCart = ResultCartFactory({
         stripeSubscriptionId: mockSubscription.id,
       });
@@ -754,9 +784,6 @@ describe('CartService', () => {
       jest
         .spyOn(invoiceManager, 'previewUpcoming')
         .mockResolvedValue(mockUpcomingInvoicePreview);
-      jest
-        .spyOn(subscriptionManager, 'retrieve')
-        .mockResolvedValue(mockSubscription);
       jest
         .spyOn(invoiceManager, 'preview')
         .mockResolvedValue(mockLatestInvoicePreview);
@@ -774,6 +801,7 @@ describe('CartService', () => {
           type: mockPaymentMethod.type,
           last4: mockPaymentMethod.card?.last4,
           brand: mockPaymentMethod.card?.brand,
+          customerSessionClientSecret: mockCustomerSession.client_secret,
         },
       });
       expect(result.latestInvoicePreview).not.toEqual(

libs/payments/cart/src/lib/cart.service.ts

@@ -16,12 +16,14 @@ import {
   CouponErrorExpired,
   CouponErrorGeneric,
   CouponErrorLimitReached,
+  CustomerSessionManager,
 } from '@fxa/payments/customer';
 import { EligibilityService } from '@fxa/payments/eligibility';
 import {
   AccountCustomerManager,
   AccountCustomerNotFoundError,
   StripeCustomer,
+  StripeSubscription,
 } from '@fxa/payments/stripe';
 import { ProductConfigurationManager } from '@fxa/shared/cms';
 import { CurrencyManager } from '@fxa/payments/currency';
@@ -70,6 +72,7 @@ export class CartService {
     private checkoutService: CheckoutService,
     private currencyManager: CurrencyManager,
     private customerManager: CustomerManager,
+    private customerSessionManager: CustomerSessionManager,
     private promotionCodeManager: PromotionCodeManager,
     private eligibilityService: EligibilityService,
     private geodbManager: GeoDBManager,
@@ -437,8 +440,12 @@ export class CartService {
     ]);
 
     let customer: StripeCustomer | undefined;
+    let subscriptions: StripeSubscription[] = [];
     if (cart.stripeCustomerId) {
-      customer = await this.customerManager.retrieve(cart.stripeCustomerId);
+      [customer, subscriptions] = await Promise.all([
+        this.customerManager.retrieve(cart.stripeCustomerId),
+        this.subscriptionManager.listForCustomer(cart.stripeCustomerId),
+      ]);
     }
 
     const upcomingInvoicePreview = await this.invoiceManager.previewUpcoming({
@@ -449,41 +456,48 @@ export class CartService {
       couponCode: cart.couponCode || undefined,
     });
 
-    // Cart latest invoice data
-    let latestInvoicePreview: InvoicePreview | undefined;
     let paymentInfo: PaymentInfo | undefined;
-    if (customer && cart.stripeSubscriptionId) {
-      // fetch latest payment info from subscription
-      const subscription = await this.subscriptionManager.retrieve(
-        cart.stripeSubscriptionId
+    if (customer?.invoice_settings.default_payment_method) {
+      const paymentMethodPromise = this.paymentMethodManager.retrieve(
+        customer.invoice_settings.default_payment_method
       );
-      assert(subscription.latest_invoice, 'Subscription not found');
-      latestInvoicePreview = await this.invoiceManager.preview(
-        subscription.latest_invoice
-      );
-
+      const customerSessionPromise = cart.stripeCustomerId
+        ? this.customerSessionManager.create(cart.stripeCustomerId)
+        : undefined;
+      const [paymentMethod, customerSession] = await Promise.all([
+        paymentMethodPromise,
+        customerSessionPromise,
+      ]);
+      paymentInfo = {
+        type: paymentMethod.type,
+        last4: paymentMethod.card?.last4,
+        brand: paymentMethod.card?.brand,
+        customerSessionClientSecret: customerSession?.client_secret,
+      };
+    } else if (subscriptions.length) {
+      const firstListedSubscription = subscriptions[0];
       // fetch payment method info
-      if (subscription.collection_method === 'send_invoice') {
+      if (firstListedSubscription.collection_method === 'send_invoice') {
         // PayPal payment method collection
-        // TODO: render paypal payment info in the UI (FXA-10608)
         paymentInfo = {
           type: 'external_paypal',
         };
-      } else {
-        // Stripe payment method collection
-        if (customer.invoice_settings.default_payment_method) {
-          const paymentMethod = await this.paymentMethodManager.retrieve(
-            customer.invoice_settings.default_payment_method
-          );
-          paymentInfo = {
-            type: paymentMethod.type,
-            last4: paymentMethod.card?.last4,
-            brand: paymentMethod.card?.brand,
-          };
-        }
       }
     }
 
+    // Cart latest invoice data
+    let latestInvoicePreview: InvoicePreview | undefined;
+    if (customer && cart.stripeSubscriptionId) {
+      const subscription = subscriptions.find(
+        (subscription) => subscription.id === cart.stripeSubscriptionId
+      );
+      // fetch latest payment info from subscription
+      assert(subscription?.latest_invoice, 'Subscription not found');
+      latestInvoicePreview = await this.invoiceManager.preview(
+        subscription.latest_invoice
+      );
+    }
+
     return {
       ...cart,
       upcomingInvoicePreview,

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

@@ -51,6 +51,7 @@ export interface PaymentInfo {
   type: PaymentProvidersType;
   last4?: string;
   brand?: string;
+  customerSessionClientSecret?: string;
 }
 
 export type ResultCart = Readonly<Omit<Cart, 'id' | 'uid'>> & {

libs/payments/cart/src/lib/checkout.service.spec.ts

@@ -28,6 +28,7 @@ import {
 } from '@fxa/payments/paypal';
 import {
   CustomerManager,
+  CustomerSessionManager,
   InvoiceManager,
   InvoicePreviewFactory,
   PaymentIntentManager,
@@ -126,6 +127,7 @@ describe('CheckoutService', () => {
         CartService,
         CheckoutService,
         CustomerManager,
+        CustomerSessionManager,
         CurrencyManager,
         EligibilityManager,
         EligibilityService,
@@ -579,7 +581,7 @@ describe('CheckoutService', () => {
       it('calls calls paymentIntentManager.confirm', async () => {
         expect(paymentIntentManager.confirm).toHaveBeenCalledWith(
           mockInvoice.payment_intent,
-          { confirmation_token: mockConfirmationToken.id }
+          { confirmation_token: mockConfirmationToken.id, off_session: false }
         );
       });
 

libs/payments/cart/src/lib/checkout.service.ts

@@ -119,7 +119,7 @@ export class CheckoutService {
       customer = await this.customerManager.retrieve(stripeCustomerId);
     }
 
-    if (uid && stripeCustomerId) {
+    if (uid && !cart.stripeCustomerId) {
       await this.accountCustomerManager.createAccountCustomer({
         uid,
         stripeCustomerId,
@@ -297,6 +297,7 @@ export class CheckoutService {
       invoice.payment_intent,
       {
         confirmation_token: confirmationTokenId,
+        off_session: false,
       }
     );
 

libs/payments/customer/src/index.ts

@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 export * from './lib/customer.manager';
+export * from './lib/customerSession.manager';
 export * from './lib/invoice.manager';
 export * from './lib/invoice.factories';
 export * from './lib/paymentIntent.manager';

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

@@ -0,0 +1,50 @@
+/* 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 { Test } from '@nestjs/testing';
+
+import { CustomerSessionManager } from './customerSession.manager';
+import {
+  StripeClient,
+  MockStripeConfigProvider,
+  StripeResponseFactory,
+  StripeCustomerSessionFactory,
+} from '@fxa/payments/stripe';
+
+describe('CustomerSessionManager', () => {
+  let customerSessionManager: CustomerSessionManager;
+  let stripeClient: StripeClient;
+
+  beforeEach(async () => {
+    const moduleRef = await Test.createTestingModule({
+      providers: [
+        MockStripeConfigProvider,
+        CustomerSessionManager,
+        StripeClient,
+      ],
+    }).compile();
+
+    customerSessionManager = moduleRef.get(CustomerSessionManager);
+    stripeClient = moduleRef.get(StripeClient);
+  });
+
+  describe('create', () => {
+    it('should create a customer session', async () => {
+      const customerId = 'customerId';
+      const mockCustomerSession = StripeCustomerSessionFactory();
+      const mockResponse = StripeResponseFactory(mockCustomerSession);
+
+      jest
+        .spyOn(stripeClient, 'customersSessionsCreate')
+        .mockResolvedValue(mockResponse);
+
+      const result = await customerSessionManager.create(customerId);
+
+      expect(stripeClient.customersSessionsCreate).toHaveBeenCalledWith(
+        expect.objectContaining({ customer: customerId })
+      );
+      expect(result).toEqual(mockResponse);
+    });
+  });
+});

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

@@ -0,0 +1,28 @@
+/* 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 { StripeClient } from '@fxa/payments/stripe';
+import { Injectable } from '@nestjs/common';
+
+@Injectable()
+export class CustomerSessionManager {
+  constructor(private stripeClient: StripeClient) {}
+
+  async create(customerId: string) {
+    return this.stripeClient.customersSessionsCreate({
+      customer: customerId,
+      components: {
+        payment_element: {
+          enabled: true,
+          features: {
+            payment_method_redisplay: 'enabled',
+            payment_method_save: 'disabled',
+            payment_method_remove: 'disabled',
+            payment_method_allow_redisplay_filters: ['always', 'unspecified'],
+          },
+        },
+      },
+    });
+  }
+}

libs/payments/stripe/src/index.ts

@@ -13,6 +13,7 @@ export { StripeCardFactory } from './lib/factories/card.factory';
 export { StripeConfirmationTokenFactory } from './lib/factories/confirmation-token.factory';
 export { StripeCouponFactory } from './lib/factories/coupon.factory';
 export { StripeCustomerFactory } from './lib/factories/customer.factory';
+export { StripeCustomerSessionFactory } from './lib/factories/customer-session.factory';
 export { StripeDiscountFactory } from './lib/factories/discount.factory';
 export { StripeInvoiceLineItemFactory } from './lib/factories/invoice-line-item.factory';
 export { StripeInvoiceFactory } from './lib/factories/invoice.factory';