TypeError: Cannot read property 'processPaymentFS' of undefined at Object.closed

Question

So I have a some component for a cart that lets customers checkout items. I'm using Angular CLI - Stripe Checkout - Firebase Firestore.

I'm getting an error on this line: this.paymentSvc.processPaymentFS(this.key, dataObj); inside my ngOnInit in my component

Code for some-app.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { Observable } from 'rxjs/Observable';

import { environment } from '../../environments/environment';
import { PaymentModule } from './customer-cart.module';
import { PaymentService } from '../services/payment.service';
import { Order } from '../models/order';
import { User } from '../models/user';


@Component({
  selector: 'app-some-app',
  templateUrl: './some-app.component.html',
  styleUrls: ['./some-app.component.css'],
})
export class SomeAppComponent implements OnInit {

  quantity = 3;
  fee = 40;
  amount = 500;
  totalAmount: number = this.fee + this.amount; // 500 == 5.00
  handler: any; 

  public order: Observable<Order>;
  key: string;

  currentUser: User;
  loggedIn:boolean;

  angForm: FormGroup;

  constructor(private paymentSvc: PaymentService, private authService: AuthService) {
   }

  ngOnInit() { 
    this.authService.getCurrentUser().subscribe(user => {
      this.currentUser = user;
      this.key = this.currentUser.$key;
    })
    this.handler = StripeCheckout.configure({
      opened: function() {
        console.log('payment form opened');
      },
      closed: function() {
        console.log('payment form closed');
        const dataObj = {
          quantity: this.quantity,
          amount: this.totalAmount * 100,
          date: Date.now(),
          status: 'active' // history
        };
        console.log("data obj ok");
        this.paymentSvc.processPaymentFS(this.key, dataObj);
        console.log('payment successful');
      }
    });
  }


  handlePayment() {
    this.handler.open({
        name: 'Some App',
        description: 'Checkout out the items in your cart',
        amount: this.totalAmount * 100
     });

}

Code for the service function I am trying to access (payment.service.ts):

import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFirestore, AngularFirestoreDocument  } from 'angularfire2/firestore';

import { Observable } from 'rxjs/Observable';
import { Order } from '../models/order';

@Injectable()
export class PaymentService {

  userId: string;

  private orderDoc: AngularFirestoreDocument<Order>;
  order: Observable<Order>

  constructor(private afAuth: AngularFireAuth, private afS: AngularFirestore) {
    this.afAuth.authState.subscribe((auth) => {
      if (auth) this.userId = auth.uid
    });
   }

  processPaymentFS(id, data) {
    console.log('in process payment --payment service')
    this.orderDoc = this.afS.doc<Order>('orders/'+id)
    console.log('doc path ok --payment service')
    this.orderDoc.set(data)
    console.log('order doc set --payment service')
  }

}

Lastly, here's the model (order.ts):

export class Order {
    $key: string;
    quantity: number;
    amount: number;
    date: string;  
    status: string;
}

Other important note: PaymentService is declared in app.module.ts

I had to edit some things out so let me know if I removed anything that's supposed to be here. I'll check in my code if it's there and update this.