weretaco-terminaljs

[golden pendant]

hello, not a TS expert but can check

[honest otter]

thanks

[golden pendant]

sorry was not able to look but can a colleague is catching up and they can help

[tropic hill]

👋 catching up now!

What version of typescript are you using?

[honest otter]

one sec

4.5.2

[tropic hill]

One more question - how specifically did you install the stripe terminal library?

[honest otter]

npm install @stripe/terminal-js

so when i do

import { loadStripeTerminal, Reader } from '@stripe/terminal-js/pure';

that's fine.. but when i load it with the browser i get an error saying it needs a relative path

localhost/:1

   Uncaught TypeError: Failed to resolve module specifier "@stripe/terminal-js/pure". Relative references must start with either "/", "./", or "../".

is the specific error

[tropic hill]

What happens if you remove the /pure - I'm trying to pinpoint if the /pure is part of the issue or not

[honest otter]

localhost/:1

   Uncaught TypeError: Failed to resolve module specifier "@stripe/terminal-js". Relative references must start with either "/", "./", or "../".

same deal

also interesting

in terminal.d.ts

my tsconfig

  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "ES2018",
    "lib": [ "es2018", "DOM" ],
    "outDir": "wwwroot/js",
    "module": "ESNext",
    "moduleResolution": "node",
    "typeRoots": [
      "./@types",
      "./node_modules/@types",
      "./node_modules/@stripe"
    ]
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
  "include": [
    "scripts/**/*"
  ]
}```

[tropic hill]

Can I see your full tsconfig.json file?

ah perfect

[tropic hill]

Hm... I wonder if you also need to specify "types"? Try this out and see if it helps:

"paths": {
  "@stripe/terminal-js": [
    "node_modules/@stripe/terminal-js/dist/terminal
.js"
  ]
}

[honest otter]

i don't have the dist folder

[bleak birch]

Hello 👋 stepping in and catching up here. Looking in to this...

[honest otter]

tahnks

also just for test purposes

i added

declare let StripeTerminal: any

and when i get to

await terminal.connectReader(reader)

i'm getting an "invalid type"

the reader object is being returned from a controller call to my .net backend

do i need to pass the rawJObject

[bleak birch]

That is a good question. Looking in to that too. I'm not too familiar with TypeScript/Terminal and have reached out to my colleagues who will have a better idea on this

[tropic hill]

👋 I'm back - are things still not working?

[honest otter]

well i worked around the typings problem for now

declare let StripeTerminal: any

gets aroun d that

and for the readers.. i just added the call for discover, then filtered on the one i know they chose

var readers = await terminal.discoverReaders();
var selected = readers.discoveredReaders.find(r => r.id == self.terminalSelectedTerminal());

[tropic hill]

Well glad you could get it working - and sorry we weren't that helpful 😦

[honest otter]

i might re-visit later

have a feeling i need to bring in webpack to roll up the imports for the browser

[hoary python]

@honest otter done!

[honest otter]

thanks.. so the basics are.. when you import as the docs say it includes implementation as well

and if you're not using a bundler that import line gets included in the js output when typescript compiles

so if you just want the typings and stuff like that

you can do

import type * as StripeTypes from '@stripe/terminal-js'

then the terminal creation is done as

            self.connectedTerminal = StripeTerminal.create({
                onFetchConnectionToken: this.fetchConnectionToken,
                onUnexpectedReaderDisconnect: this.unexpectedDisconnect,
                onConnectionStatusChange: this.terminalConnectionStatusChange
            });```

so it grabs the global StripeTerminal object and goes from there