title: Problems with initializing Square iframes in Angular 6 form
body: <p>I'm having a problem with loading Square iframes to my form. When I navigate from navbar to payment form iframes are not loading in my inputs fields. The only way to load them is to hit refresh of my payment form. Here is my payment.ts:</p>
  
  <pre><code>import { Component, OnInit, Input, EventEmitter, AfterViewInit } from '@angular/core';
  import {AppService} from '../app.service';
  
  declare var SqPaymentForm: any;
  
  @Component({
    selector: 'app-payment',
    templateUrl: './payment.component.html',
    styleUrls: ['./payment.component.css']
  })
  export class PaymentComponent implements OnInit, AfterViewInit  {
  
    constructor(private appService: AppService) { }
    paymentForm: any ;
    ngOnInit() {
     this.squarePaymentFunction();
    }
    ngAfterViewInit(): void  {}
  
    squarePaymentFunction() {
      let vm;
      vm = this;
      // this.calculatePayment();
      const applicationId = '********';
  
      // Set the location ID
      const locationId = '*********';
      this.paymentForm = new SqPaymentForm({
  
        // Initialize the payment form elements
        applicationId: applicationId,
        locationId: locationId,
        inputClass: 'sq-input',
  
        // Customize the CSS for SqPaymentForm iframe elements
        inputStyles: [{
          fontSize: '.9em'
        }],
  
        // Initialize the credit card placeholders
        cardNumber: {
          elementId: 'sq-card-number',
          placeholder: '•••• •••• •••• ••••'
        },
        cvv: {
          elementId: 'sq-cvv',
          placeholder: 'CVV'
        },
        expirationDate: {
          elementId: 'sq-expiration-date',
          placeholder: 'MM/YY'
        },
        postalCode: {
          elementId: 'sq-postal-code'
        },
        // SqPaymentForm callback functions
        callbacks: {
  
          /*
           * callback function: methodsSupported
           * Triggered when: the page is loaded.
           */
          methodsSupported: function (methods) {
          },
  
          /*
           * callback function: createPaymentRequest
           * Triggered when: a digital wallet payment button is clicked.
           */
          createPaymentRequest: function () {
  
            let paymentRequestJson;
            return paymentRequestJson;
  
          },
  
          /*
           * callback function: cardNonceResponseReceived
           * Triggered when: SqPaymentForm completes a card nonce request
           */
          cardNonceResponseReceived: function (errors, nonce, cardData)  {
            if (errors) {
              // Log errors from nonce generation to the Javascript console
              console.log('Encountered errors:');
              errors.forEach(function(error) {
                console.log('  ' + error.message);
              });
  
              return;
            }
  
            alert('Nonce received: ' + nonce); /* FOR TESTING ONLY */
  
            // Assign the nonce value to the hidden form field
            // document.getElementById('card-nonce').value = nonce;
            // needs to be extracted from the
            (&lt;HTMLInputElement&gt;document.getElementById('card-nonce')).value = nonce; // casting so .value will work
  
            let amount = (&lt;HTMLInputElement&gt;document.getElementById('amountToPay')).value;
  
            // POST the nonce form to the payment processing page
            // (&lt;HTMLFormElement&gt;document.getElementById('nonce-form')).submit();
            vm.sendSqPayment({'nonce': nonce, 'amountToPay': amount});
          },
  
          /*
           * callback function: unsupportedBrowserDetected
           * Triggered when: the page loads and an unsupported browser is detected
           */
          unsupportedBrowserDetected: function() {
            alert('Your browser seems to be unsupported for card processing. Please try a different browser.');
          },
  
          /*
           * callback function: inputEventReceived
           * Triggered when: visitors interact with SqPaymentForm iframe elements.
           */
          inputEventReceived: function(inputEvent) {
            switch (inputEvent.eventType) {
              case 'focusClassAdded':
                /* HANDLE AS DESIRED */
                break;
              case 'focusClassRemoved':
                /* HANDLE AS DESIRED */
                break;
              case 'errorClassAdded':
                document.getElementById('error').innerHTML = 'Please fix card information errors before continuing.';
                /* HANDLE AS DESIRED */
                break;
              case 'errorClassRemoved':
                document.getElementById('error').style.display = 'none';
                /* HANDLE AS DESIRED */
                break;
              case 'cardBrandChanged':
                /* HANDLE AS DESIRED */
                break;
              case 'postalCodeChanged':
                /* HANDLE AS DESIRED */
                break;
            }
          },
  
          /*
           * callback function: paymentFormLoaded
           * Triggered when: SqPaymentForm is fully loaded
           */
          paymentFormLoaded: function() {
            /* HANDLE AS DESIRED */
            console.log('The form loaded!');
          }
        }
      });
    }
  
    requestCardNonce(event) {
  
  
      // Request a nonce from the SqPaymentForm object
      this.paymentForm.requestCardNonce();
    }
    sendSqPayment(data) {
      this.appService.sendPayment(data).subscribe((data) =&gt; {
          if (data.success) {
            console.log('Data success');
          }
          // console.log('data', data);
        },
      );
    }
  }
  </code></pre>
  
  <p>I have setup routing in my app.routing.ts using Routes and RouterModlue  </p>