I am trying to call the javascript function into the angular here is the plugin I am using "npm I global payments-3ds" of which I copied javascript files from node_modules and tried to call in my component

Below is the example :

import {
  Component,
  OnInit
} from '@angular/core';
import {
  handleInitiateAuthentication
} from './globalpayments-3ds/types/index';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';

  ngOnInit(): void {
    const status: any = "CHALLENGE_REQUIRED"
    const resp = {
      challenge: {
        encodedChallengeRequest: "abcd",
        requestUrl: "url,
      },
      challengeMandated: "MANDATED",
      dsTransactionId: "44444",
      id: "444444",
      status: status,
    };
    const windowSize: any = "WINDOWED_600X400";
    const displayMode: any = "lightbox";

    const challengeWindow = {
      windowSize: windowSize,
      displayMode: displayMode,
    };
    handleInitiateAuthentication(resp, challengeWindow)
  }
}

I am trying to call the handleInitiateAuthentication() which is giving me the below error

Here is the file structure

from index.d.ts i am calling the handleInitiateAuthentication() function

Here is Stackblitz code for the same

CodePudding user response：

You have to import directly js file.

// @ts-ignore 
    import { handleInitiateAuthentication } from './globalpayments-3ds/globalpayments-3ds.esm.js';

For error about module, it's because you have to define type of your module in TypeScript. You can directly use // @ts-ignore.

See this stackblitz : https://stackblitz.com/edit/angular-xz4kmp?file=src/app/app.component.ts

CodePudding user response：

You don't need to import a library like that. First of all install the library to your project:

npm i globalpayments-3ds --save

then in your ts file:

import { handleInitiateAuthentication } from 'globalpayments-3ds';

see this stackblitz

CodePudding user response：

The recommended way to make your own modified versions from open source libraries is to fork them and build your own versions.

Also note that you must take into account the license of that NPM package which in the case of https://github.com/globalpayments/globalpayments-js is GPL-v2, so if you will use it for commercial purposes you must follow the agreement. Check this branch: GNU General Public License (v2): can a company use the licensed software for free?.

Taking a look to your Stackblitz code, you may notice that there are several JS versions of the same module in src/app/global-payments-3ds/ folder:

• globalpayments-3ds.js (CommonJS, used in Node environments).
• globalpayments-3ds.min.js (CommonJS minified).
• globalpayments-3ds.js.map (CommonJS minified map file to reference during debugging).
• globalpayments-3ds.esm.js (ESM, ECMA Standard Module).
• ...

To use an external JS Module in an Angular App, as it is JavaScript and not TypeScript, you must tell TypeScript Compiler that you want to allow JS modules by enabling allowJS: true in tsconfig.ts file at the root of the project.

After that you should be be able to import the ESM version (globalpayments-3ds.esm.js) in your Angular App, or if you want to use the CommonJS version, you can also enable esModuleInterop: true in tsconfig.ts to allow importing CommonJS/AMD/UMD JS modules in your project, like globalpayments-3ds.js.