#bisha-terminal

1 messages · Page 1 of 1 (latest)

lean patrol
karmic gate
#

To give more context. Here is the code im attempting to run:

import React from 'react';
import { useHistory } from 'react-router-dom';
import { useEffect, useState } from 'react';
import {loadStripeTerminal} from '@stripe/terminal-js';

async function createTerminal(){
   const StripeTerminal = await loadStripeTerminal();
   const terminal = StripeTerminal.create({
     onFetchConnectionToken: async () => {
      return await fetch('/connection_token')
      .then(function(response) {
         console.log(response)
        return response.json();
      })
      .then(function(data) {
         console.log(data)
        return data.secret;
      });
     },
     onUnexpectedReaderDisconnect: () =>{
      console.log("Disconnected from reader")
     }
   })
   return terminal
}
lean patrol
#

So what's not working exactly?

karmic gate
#

Im calling createTerminal() method and using a console log to see whats going on:

Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: e
collectPaymentMethodAttempt: null
collectReusableCardAttempt: null
connectionStatus: "not_connected"
connectionTokenMgr: e {networkMonitor: e, activeCredentials: null, fetchConnectionTokenFn: ƒ}
delegate: {onFetchConnectionToken: ƒ, onUnexpectedReaderDisconnect: ƒ}
discoveryService: e {discoveryMethodFactory: e, activeDiscovery: null, lastResult: null, nextResult: null}
jackRabbitRpcAuthService: e {connectionMgr: e}
jackRabbitService: e {connectionMgr: e, rpcAuthService: e, querySettleIntervalMs: 400, allowCustomerCancel: true}
paymentIntentClient: u {resourceName: "payment_intents", httpClient: e, networkMonitor: e, resourceVersion: "v1", connectionTokenMgr: e}
paymentStatus: "not_ready"
pendingInteracRefund: null
refundInteracCardAttempt: null
setupIntentClient: u {resourceName: "setup_intents", httpClient: e, networkMonitor: e, resourceVersion: "v1", connectionTokenMgr: e}
__proto__: Object
#

For whatever reason, onFetchConnectionToken is not using the arrow function to get the secret

#

Sorry if im not being clear.

#

I know my backend works properly, with the fetch method, as I used it outside of the method I posted above.

lean patrol
#

Hmmm so you're saying your backend is not called at all?

karmic gate
#

If I try to call the backend within onFetchConncectionToken. It wont be called.

lean patrol
#

can you add a log after onFetchConnectionToken: async () => {

karmic gate
#

sure thing

lean patrol
#

like you don't have a log proving return await fetch('/connection_token') is called

karmic gate
#

I attempted doing a console.log before the return statement, and nothing happens

#

Let me try again, just to make sure

#

So here is the edit I made:

async function createTerminal(){
   const StripeTerminal = await loadStripeTerminal();
   const terminal = StripeTerminal.create({
     onFetchConnectionToken: async () => {
      console.log("Here!")
      return await fetch('/connection_token')
      .then(function(response) {
         console.log(response)
        return response.json();
      })
      .then(function(data) {
         console.log(data)
        return data.secret;
      });
     },
     onUnexpectedReaderDisconnect: () =>{
      console.log("Disconnected from reader")
     }
   })
   return terminal
}

And console.log is not firing either

lean patrol
#

So it loks like the fetchConnectionToken callback is never called

karmic gate
#

Yeah, do you have any advice on why that is?

#

Not sure if its a javascript thing that im missing. Or im not properly declaring the StripeTerminal

lean patrol
#

let me look for a bit

#

not yet sure

karmic gate
#

Okay no worries! Take your time

#

Thank you so much

sly thunder
#

hello, catching up

#

@karmic gate is your terminal instance being created? (if you log it out before return terminal ?)

karmic gate
karmic gate
#

So here is the edit I made:

async function createTerminal(){
   const StripeTerminal = await loadStripeTerminal();
   const terminal = StripeTerminal.create({
     onFetchConnectionToken: fetchConnectionToken(),
     onUnexpectedReaderDisconnect: () =>{
      console.log("Disconnected from reader")
     }
   })
   return terminal
}

function fetchConnectionToken() {
   // Your backend should call /v1/terminal/connection_tokens and return the JSON response from Stripe
   return fetch('/connection_token')
     .then(function(response) {
       return response.json();
     })
     .then(function(data) {
       return data.secret;
     });
 }
#

However the console spits out this:

Uncaught (in promise) Error: Invalid argument: Invalid `onFetchConnectionToken` handler given.
            You must pass a function that will retreive an connection token via your backend using your api secret key.
    at Function.value ((index):1)
    at Function.value ((index):1)
    at Function.value ((index):1)
    at Function.<anonymous> ((index):1)
    at Module.rc ((index):1)
    at createTerminal (Welcome.js:8)
#

In my backend the connection token is being called!

sly thunder
#

ok so that is good, but something about the way we wrote and passed the function to StripeTerminal.create() , it doesn't like ... thinking

#

hmm do this

#

in

     .then(function(data) {
       return data.secret;
     });
#

before the return, log out console.log(data)

karmic gate
#

Okay will do

#

After adding the log statement it prints out this JSON:

# 
{secret: "pst_test_YWNjdF8xSWQyOElJQjZIZklIaTJKLHVUNXBoWmk3RUFyNElEeWVuZGVXQWhYZzdZVk9Ga0U_00KmXBP0qG"}
secret: "pst_test_YWNjdF8xSWQyOElJQjZIZklIaTJKLHVUNXBoWmk3RUFyNElEeWVuZGVXQWhYZzdZVk9Ga0U_00KmXBP0qG"
__proto__: Object
sly thunder
#

that looks right to me, it was deserialized to an object with a secret key.

{secret: "pst_test_YWNjdF8xSWQyOElJQjZIZklIaTJKLHVUNXBoWmk3RUFyNElEeWVuZGVXQWhYZzdZVk9Ga0U_00KmXBP0qG"}

thinking what I'm missing here

#

oh

#

change this like

to this

     onFetchConnectionToken: fetchConnectionToken,
#

i.e. pass the entire function to onFetchConnectionToken , not immediately call it

karmic gate
#

Okay, after making that change. The log statement for data.secret is not appearing anymore

#

Looking at my backend, its not calling for the connection token as well

sly thunder
#

one sec trying something

karmic gate
#

No worries! Thank you so much for your help

sly thunder
#

tried to repro what your code was doing, here is what I did (ommitted most irrelevant parts)
https://pastebin.com/FV2WL65U

that works fine on my end, the only difference is the bit with loadStripeTerminal() to actually load the library, cause I import it directly since I'm not writing React

Pastebin
Terminal JS with async - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

karmic gate
#

Okay. I will try and attempt this

#

Is there a way to import directly into react?

sly thunder
karmic gate
#

Okay I will look into it!