Converting Standard Web IFrame JS, HTML, CSS Functions and Code into Angular Typescript and Using Them

Question

I am trying to convert Clovers Ecommerce Iframe code from basic web app (JS, HTMl, CSS) into code that works in my angular component. I am running into a couple of issues. This is the code I want to convert into angular and although I have successfully got the clover object and elements object to initialize and the form to display, I am having trouble getting the behavior to work. It seems that the form is not sending with the request. Also if I convert the old promise to subscribe, it doesn't work. Is there something I am missing. I replicated my code into a basic angular project here. I manage to get into the then part but it is showing that the card details are null. Can someone help me connect the form values to the request and understand what is causing this error and how to link the form to get rid of it and get the code working exactly as the javascript example?

My guess is the issue lies when setting or mounting the card object and successfully populating it might resolve part of the issue:

const cardNumber = this.elements.create('CARD_NUMBER', styles);
const cardDate = this.elements.create('CARD_DATE', styles);
const cardCvv = this.elements.create('CARD_CVV', styles);
const cardPostalCode = this.elements.create('CARD_POSTAL_CODE', styles);

cardNumber.mount('#card-number');
cardDate.mount('#card-date');
cardCvv.mount('#card-cvv');
cardPostalCode.mount('#card-postal-code');

Since there is no node or typescript library, I have to convert it manually. My question is not can I attach the credit card data to the clover iframe form? my component.ts file is:

import { Component, OnInit } from '@angular/core';
import { GoogleAuthService } from 'ng-gapi';
import { UserService } from './UserService';
import { GoogleApiService } from 'ng-gapi';
import { SheetResource } from './SheetResource';
import { ActivatedRoute } from '@angular/router';

declare const Clover: any;
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  clover: any;
  elements: any;

  constructor() {
    // First make sure gapi is loaded can be in AppInitilizer
  }

  ngOnInit() {
    this.clover = new Clover('a2c04bd36719c1ae6867d9f978f7cefa');
    this.elements = this.clover.elements();
  }

  async onSubmit() {
    const styles = {
      body: {
        fontFamily: 'Roboto, Open Sans, sans-serif',
        fontSize: '16px',
      },
      input: {
        fontSize: '16px',
      },
    };
    const cardNumber = this.elements.create('CARD_NUMBER', styles);
    const cardDate = this.elements.create('CARD_DATE', styles);
    const cardCvv = this.elements.create('CARD_CVV', styles);
    const cardPostalCode = this.elements.create('CARD_POSTAL_CODE', styles);

    cardNumber.mount('#card-number');
    cardDate.mount('#card-date');
    cardCvv.mount('#card-cvv');
    cardPostalCode.mount('#card-postal-code');

    const cardResponse = document.getElementById('card-response');

    const displayCardNumberError =
      document.getElementById('card-number-errors');
    const displayCardDateError = document.getElementById('card-date-errors');
    const displayCardCvvError = document.getElementById('card-cvv-errors');
    const displayCardPostalCodeError = document.getElementById(
      'card-postal-code-errors'
    );
    const form = document.getElementById('payment-form');

    event.preventDefault();

    this.clover.createToken().then(function (result) {
      if (result.errors) {
        Object.values(result.errors).forEach(function (value) {
          console.log(value);
        });
      } else {
        alert(result.token);
      }
    });

    return;
  }
}