Stripe Terminal: Invalid `onFetchConnectionToken` handler given

Ionic Framework ionic-v3
1

Hello everyone, I hope you all are doing fine. I’m working on Stripe terminal SDK and trying to implement it in ionic v3. I’ve followed the documentation but facing error plus I’ve no idea what i’m doing wrong that error is occuring.

Problem:
After loading Stripe terminal, when I initialize Stripe SDK by creating stripe terminal I’m calling a function(named as fetchConnectionToken) and return it’s security token but race condition is happening and error pops up.

Error
Screenshot 2021-04-07 at 3.03.48 PM

Code

async initiateStripeTerminal() {
        loadStripeTerminal().then((res) => {
            this.StripeTerminal = res;
            this.initiateStripeTerminalSDK();
        }, (error) => {
            console.log('stripe terminal not loaded', error);
        });
    }

    async initiateStripeTerminalSDK() {
        var terminal = this.StripeTerminal.create({
            onFetchConnectionToken: this.fetchConnectionToken(), // this line has issue
            onUnexpectedReaderDisconnect: this.unexpectedDisconnect()
        });
    }

async fetchConnectionToken() {
        // Your backend should call /v1/terminal/connection_tokens and return the JSON response from Stripe
        var req_data = JSON.stringify({ business_id: this.globals.new_id, location_id: "tml_EGeRNABnXI7yVq" });
        
        const response = await fetch(this.globals.BaseUrl + 'stripe_payment/get_connection_token', {
            method: "POST",
            body: req_data
        });
        const data = await response.json();
        console.log('res token', data.data)
        return await data.data.secret_token;
}

Note
I’m also getting response from get_connection_token but after error. Means I believe that function fetchConnectionToken is not returning value properly.

Stripe terminal docs

2

Hi,

I’m just wondering if you found a solution to this because I’m having a similar issue.

Thanks

3

As I recall, there is some sort of syntax issue in this code like some sort of async issue but I don’t have code right now to share with you(my apologies).

var terminal = this.StripeTerminal.create({
            onFetchConnectionToken: await this.fetchConnectionToken(), // this line has issue
            onUnexpectedReaderDisconnect: this.unexpectedDisconnect()
        });

OR

var terminal = this.StripeTerminal.create(async ()  => {
            onFetchConnectionToken: await this.fetchConnectionToken(), // this line has issue
            onUnexpectedReaderDisconnect: this.unexpectedDisconnect()
        });

Possible example

4

@Dunny: please post your relevant code, because OP’s has at least two different bugs, neither of which fits in the self-reported diagnosis of “race condition”.