Search code examples
typescriptsquare

Global Reference of Square payment form object into Angular


There's no implementation of a Square checkout form for Angular 4/5/6 so I'm trying to figure out what this might entail by creating a test component, but I can't figure out how to get a reference to their global object SqPaymentForm into Angular and have TypeScript not throw an error saying it doesn't exist on the window object as window.SqPaymentForm since it does exist.

Can anyone point me in the direction of how to have TypeScript recognize that window.SqPaymentForm exists?

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [],
  providers: [
    { provide: 'SQUARE', useFactory: getSquare }
  ]
})
export class SquareModule { }

export function getSquare() {
  return (typeof window !== undefined) 
      // TypeScript indicates it doesn't exist on Window 
      ? window.SqPaymentForm 
      : null;
}

Solution

  • Figured it out I had to create my own typings, but couldn't figure out how to load it via a .d.ts so, for now, it is declared in the Square module:

    declare global {
      interface Window {
        SqPaymentForm: any;
      }
    }
    

    or replace window.SqPaymentForm with:

    (<any>window).SqPaymentForm