Angular onDestroy called before MatDialog displays

Question

I recently updated my project from Angular 6 to Angular 11. Naturally this caused some problems. The problem I'm working through right now is that I have a MatDialog that is displayed when a button is clicked. After this MatDialog is closed, another MatDialog is supposed to pop up and show a stripe checkout dialog. The first time afterClosed() is called between the first and second Dialog, onDestroy is called immediately after AfterViewInit, so nothing is displayed. The second time, the stripe MatDialog is displayed just fine. Wondering if anyone can explain this odd behavior. Thanks so much for any help you can provide!

Stripe HTML:

<form #checkout="ngForm" (ngSubmit)="onSubmit(checkout)" 
class="checkout" style="width:900px;">
  <div class="form-row">
    <label for="card-info">Please Enter Your Card Info</label>
    <div id="card-info" #cardInfo></div>
    <div id="card-errors" role="alert" *ngIf="error">{{ error }}</div>
  </div>
  <button type="submit">Submit Payment</button>
</form>

Code for opening first MatDialog:

openPricingDialog(): void {
this.pricingDialogRef = this.dialog.open(PricingDialogComponent, {
  hasBackdrop: true,
  panelClass: 'app-full-bleed-dialog'
});

this.pricingDialogRef.afterClosed().subscribe( subscriptionPrice => {
  this.subscriptionPrice = subscriptionPrice;
  console.log('pricing dialog after close', subscriptionPrice);
  return this.openPaymentDialog();
});

}

Code for opening second MatDialog:

 this.paymentDialogRef = this.dialog.open(PaymentDialogComponent, {
  data: {pricing: this.subscriptionPrice, userID: this.currentUser._id},
  hasBackdrop: true,
  panelClass: 'app-full-bleed-dialog'
});

The second Dialog Component:

import {
Component,
AfterViewInit,
OnDestroy,
ViewChild,
ElementRef,
ChangeDetectorRef, Inject
} from '@angular/core';

import { NgForm } from '@angular/forms';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-payment-dialog',
  templateUrl: './payment-dialog.component.html',
  styleUrls: ['./payment-dialog.component.css']
})
export class PaymentDialogComponent implements AfterViewInit, 
OnDestroy {
  @ViewChild('cardInfo', { static: true }) cardInfo: ElementRef;

  card: any;
  cardHandler = this.onChange.bind(this);
  error: string;
  tokenID: string;

  constructor(private cd: ChangeDetectorRef,
          @Inject(MAT_DIALOG_DATA) public data: any) {}

  ngAfterViewInit() {

    const style = {
      base: {
        fontFamily: 'monospace',
        fontSmoothing: 'antialiased',
        fontSize: '19px',
        '::placeholder': {
          color: '#269'
        }
      }
    };

    this.card = elements.create('card', { style });
    this.card.mount(this.cardInfo.nativeElement);

    this.card.addEventListener('change', this.cardHandler);
  }

  ngOnDestroy() {
    this.card.removeEventListener('change', this.cardHandler);
    this.card.destroy();
  }

  onChange({ error }) {
    if (error) {
      this.error = error.message;
    } else {
      this.error = null;
    }
    this.cd.detectChanges();
  }

  async onSubmit(form: NgForm) {
    const { token, error } = await stripe.createToken(this.card, {});
    if (error) {
      console.log('Something is wrong:', error);
    } else {
      this.tokenID = token.id;
    }
  }
}