#Paddy - Terminal

1 messages ยท Page 1 of 1 (latest)

lucid oriole
#

Hello! Can you provide more details? Are you using the server-driven integration or are you using one of our Terminal SDKs? If the latter, which SDK are you using?

jade rune
#

We are using a physical terminal for the BPOS WISE POSE

#

its currently not triggering javascript

#

127.0.0.1 - - [25/Apr/2022 21:50:52] "POST /pay/beerspiritcider HTTP/1.1" 200 -
127.0.0.1 - - [25/Apr/2022 21:50:52] "GET /static/styles/payment.js HTTP/1.1" 304 -
127.0.0.1 - - [25/Apr/2022 21:50:52] "GET /favicon.ico HTTP/1.1" 404 -

#

this is as an example of the output we are getting in the terminal

lucid oriole
#

What do you mean by "currently not triggering javascript"?

#

It sounds like you're using our Terminal JavaScript SDK, correct? If so, can you confirm that discovering the reader and connecting to it work as expected?

jade rune
#

sorry i mean, we get to the payment on our terminal but nothing is displayed on the terminal

#

yes i can confirm we can discover and pair with the device

lucid oriole
#

Can you share the code you're using to call terminal.collectPaymentMethod?

jade rune
#

global pay_intent

            pay_intent = stripe.PaymentIntent.create(
              currency="gbp",
              payment_method_types=["card_present"],
              capture_method="manual",
              amount=30,
            )

            #place try catch

            #stripe.terminal.Reader.process_payment_intent(
             # reader_id,
             # payment_intent=pay_intent,
           # )

           # stripe.terminal.Reader.retrieve(reader_id.id)

            #stripe.WebhookEndpoint.create(
             # enabled_events=[
              #  "terminal.reader.action_succeeded",
              #  "terminal.reader.action_failed",
            #  ],
             # url="https://192.168.0.111.com/my/webhook/endpoint",
          #  )
            #print("###########################")
            #print(pay_intent)
            #print("###########################")

            #time.sleep(10)


           # stripe.PaymentIntent.capture(pay_intent)
            return render_template("pay.html",result = result,cost=pricebeerspiritcider,client_secret=pay_intent.client_secret)
#

this is the code currently being used for the payment intent

lucid oriole
#

Not seeing you call collectPaymentMethod there at all... am I missing it?

jade rune
#

no i cant see it either

#

any idea on where it would go in that code?

#

that would be so helpful mate thanks

lucid oriole
#

Well, I'm not sure I understand what's going on in that code, to be honest. That looks like mostly server-side code, but the code in question would be run client-side.

#

Is that all server-side code?

jade rune
#

the code commented out is server side code where we originally had set it uop for that

#

but that got taken down in the uk

#

global pay_intent

            pay_intent = stripe.PaymentIntent.create(
              currency="gbp",
              payment_method_types=["card_present"],
              capture_method="manual",
              amount=30,
            )
#

return render_template("pay.html",result = result,cost=pricebeerspiritcider,client_secret=pay_intent.client_secret)

#

this is all the code for payment intent

lucid oriole
#

Right, what about your client-side code?

jade rune
#

so this is the client side...

#

we have an app that controls all of this

#

can it be in the same code

lucid oriole
#

No. A Terminal integration that uses the Terminal JS SDK requires a separate server and client (app).

#

There are operations that need to be performed with your secret API key server-side in a secure environment, and those operations cannot be performed in your app.

jade rune
#

this is our app its in a secure environment

lucid oriole
#

Still not seeing you call collectPaymentMethod in there anywhere.

#

To be clear, your app is not a secure environment. It will be downloaded and run on devices you can't control, and if you include your secret API key in your app it can be extracted.

jade rune
#

Our app is on physical machines

#

that belong to us

#

the customer makes a purchase using the machine

lucid oriole
#

Okay, but you do have a separate server, correct?

jade rune
#

Yes we do yes

#

will be on different servers and internet connection

lucid oriole
#

Okay, there's the call to collectPaymentMethod, but you only have placeholders in there. Is that code ever actually run?

jade rune
#

Its called in by the html file

#

but we haven't had any luck connecting to the reader with it

#

since changing from server driven

lucid oriole
#

To clarify, where are you calling checkout()?

#

You're moving away from server-driven? Why?

jade rune
#

Because it was shut down in the UK because 'its not available yet' even though we used it and got successful payments with it

#

i will have a look

#

that would be in the payment.js file only where we call the 'checkout())'

lucid oriole
#

Can you show me just that specific code, not the whole file?

#

I can't look through so much code. ๐Ÿ™‚

jade rune
#

no problem

#

function connectReader(discoverResult) {
// Just select the first reader here.
var selectedReader = discoverResult.discoveredReaders[0];

terminal.connectReader(selectedReader).then(function(connectResult) {
if (connectResult.error) {
console.log('Failed to connect: ', connectResult.error);
} else {
console.log('Connected to reader: ', connectResult.reader.label);
}
});
}

terminal.connectReader(reader, {fail_if_in_use: true}).then(function(connectResult) {
// ...
});

function checkout() {
// clientSecret is the client_secret from the PaymentIntent you created in Step 1.
terminal.collectPaymentMethod(clientSecret).then(function(result) {
if (result.error) {
// Placeholder for handling result.error
} else {
// Placeholder for processing result.paymentIntent
}
});
}

#

Do you have any python code as an example of what to put instead of these placeholders?

lucid oriole
#

There's no such thing. That code is JavaScript that needs to remain JavaScript because Terminal has a JavaScript SDK. There is no Terminal Python SDK.

#

There are also native iOS and Android Terminal SDKs.

#

Those are the only three options.

jade rune
#

sorry i meant do you have examples of Javascript code for this step

lucid oriole
#

That is the JavaScript code for that step?

#

Sorry, not sure I understand?

jade rune
#

Basically the rest of our code is able to handle the requests. We are unclear about this java script element and letting it communicate with our back end

lucid oriole
#

Okay, let's back up a bit.

#

The JavaScript SDK is designed to be used on the web. Are you opening a web view in your app to handle the Terminal interaction?

jade rune
#

Yes we are

#

its handled in a chrome window

lucid oriole
#

Okay, that should work fine. So the code above is what you're running now?

jade rune
#

yes it is yes

#

sorry for the confusion we've never done this

lucid oriole
#

Cool. So when this line is hit: console.log('Connected to reader: ', connectResult.reader.label); what is logged to your console in the browser?

jade rune
#

currently nothing

lucid oriole
#

So that code is not being run it sounds like?

jade rune
#

that code can only be found in the javascript file

#

and theres nothing else referencing it in out backend code

#

our*

lucid oriole
#

If you change the options at the top to this I think it will be most helpful:

jade rune
#

right okay

#

by the looks of it

#

i have to download them files

#

as they are missing?

lucid oriole
#

That walks you through building an example, barebones integration. You can download the files to run locally yourself if you want, but all of this is separate from your actual integration.

#

This should be used as a reference for how things work as you build your own app.

#

You would not build on top of this.

#

Does that make sense?

jade rune
#

Yeah makes sense

#

thank you

#

will attempt to do that

lucid oriole
#

I recommend reading through everything first. Don't worry about running it, just read through to understand how the Terminal integration works. Let me know if you have any questions after that.

jade rune
#

Will do thank you

#

sorry to bother you rebeus i have just checked the console once we get to pay

#

it says

#

it says stripe terminal not defined

lucid oriole
#

Ah, okay, so something prior to that isn't working.

#

If you go back to your discoverReaders call can you add logging there to debug what's going on?

#

Are you able to discover readers or are you getting nothing back?

jade rune
#

no, nothing is coming back

#

the location is in there as ewll

lucid oriole
#

Can you show me that code?

jade rune
#

function discoverReaders() {
const config = {simulated: false, location: 'tml_EkkywRv8426saA'}
terminal.discoverReaders(config).then(function(discoverResult) {
if (discoverResult.error) {
console.log('Failed to discover: ', discoverResult.error);
} else if (discoverResult.discoveredReaders.length === 0) {
console.log('No available readers.');
} else {
// You should show the list of discoveredReaders to the
// cashier here and let them select which to connect to (see below).
connectReader(discoverResult);
}
});
}

lucid oriole
#

What does this log to the console?

jade rune
#

theres nothing logged on the console just says its not defined

lucid oriole
#

So that code isn't running either?

#

What does it say is not defined exactly? Can you paste in the exact error you're seeing in the console?

jade rune
#

{
"id": "pi_3KsZjzA49TfUQ5yT0BmD7vCY",
"object": "payment_intent",
"amount": 30,
"amount_capturable": 0,
"amount_details": {
"tip": {
"amount": null
}
},
"amount_received": 0,
"application": null,
"application_fee_amount": null,
"automatic_payment_methods": null,
"canceled_at": null,
"cancellation_reason": null,
"capture_method": "manual",
"charges": {
"object": "list",
"data": [
],
"has_more": false,
"total_count": 0,
"url": "/v1/charges?payment_intent=pi_3KsZjzA49TfUQ5yT0BmD7vCY"
},
"client_secret": "pi_3KsZjzA49TfUQ5yT0BmD7vCY_secret_ohBejQ48QrvuP4Ao0wC2WSzVK",
"confirmation_method": "automatic",
"created": 1650923203,
"currency": "gbp",
"customer": null,
"description": null,
"invoice": null,
"last_payment_error": null,
"livemode": true,
"metadata": {
},
"next_action": null,
"on_behalf_of": null,
"payment_method": null,
"payment_method_options": {
"card_present": {
"request_extended_authorization": false,
"request_incremental_authorization_support": false
}
},
"payment_method_types": [
"card_present"
],
"processing": null,
"receipt_email": null,
"review": null,
"setup_future_usage": null,
"shipping": null,
"source": null,
"statement_descriptor": null,
"statement_descriptor_suffix": null,
"status": "requires_payment_method",
"transfer_data": null,
"transfer_group": null
}
Request POST body
{
"currency": "gbp",
"payment_method_types": {
"0": "card_present"
},
"capture_method": "manual",
"amount": "30"
}

lucid oriole
#

That's not an error. To clarify, I'd like to see the error you're seeing in the console in Chrome.

jade rune
#

ahh

#

okay one sec

#

uncaught referrenceerror: Stripe terminal is not defined payment.js 13:16

lucid oriole
#

That first half specifically, where you include the Stripe Terminal JS on your page?

jade rune
#

yes followed them steps

#

thats all in there

lucid oriole
#

How is payment.js being loaded on your page?

#

Is it maybe being loaded before the Terminal library, and thus the Terminal library hasn't loaded yet when it runs?

jade rune
#

its not being loaded onto our page?

lucid oriole
#

It must be, the console indicates that's where the error is coming from.

#

Line 13, column 16 of that file.

#

What is line 13 of that file?

jade rune
#

var terminal = StripeTerminal.create({
onFetchConnectionToken: fetchConnectionToken,
onUnexpectedReaderDisconnect: unexpectedDisconnect,
});

#

this is the line in the js file

#

line 13 through to 16

lucid oriole
#

Yeah, so it's trying to use the Stripe Terminal JS library, but it doesn't exist, so that line fails. That indicates you have not loaded the library by the time that code runs.

jade rune
#

right okay

lucid oriole
#

What JavaScript are you loading/running on that page?

#

Can you make sure the Stripe Terminal JS is being loaded first and try again?

jade rune
#

do you mean being loaded before the pay on our app?

lucid oriole
#

No, like, in the HTML of your page.

#

Make sure the Terminal JS is being loaded first. In the first <script> element.

#

Before the others.

#

I have to get going, but @muted cave is here to take over and can help you further! ๐Ÿ™‚

muted cave
#

Hi ๐Ÿ‘‹

#

I'm stepping in since @lucid oriole has to run

jade rune
#

Okay no problem

#

thank you

#

all the best

muted cave
#

You can find an example of how this works here:
https://stripe.com/docs/terminal/quickstart

In order to replicate your scenario make sure you select

  • Country: UK
  • Reader: Wise POS E
  • Platform: Web
  • Frontend: JavaScript
  • Backend: Python
#

That way we can both be looking at the same code to talk through it

jade rune
#

Okay done that

#

sorry about this im very new to this

muted cave
#

Okay so take a look at the index.html file in the code window

#

No worries, that's why we make these Quickstart bundles ๐Ÿ™‚

jade rune
#

yes im there now

#

the server driven one was right up my skill level

muted cave
#

Yeah, unfortunately that's geo restricted at the moment.

jade rune
#

the crazy thing is we had a successful integration with it and could take payment then it got stopped

muted cave
#

Okay so you ca see before you get to the <body> tag there are two <script> tags where you load terminal.js and your custom client.js

#

That's what @lucid oriole was referring to about loading Terminal.Js

jade rune
#

yes seen

#

i changed it to this

#

<!doctype html>
<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/main.css') }}">
<script src="{{ url_for('static', filename='styles/payment.js') }}"></script>
<script src="{{ url_for('static', filename='styles/jsDocument.js') }}"></script>
<script src="https://js.stripe.com/terminal/v1/"></script>

#

im looking at that index.html file

#

it has a lot more code in it that mine has

muted cave
#

As long as your page does what you expect that's what counts. However, you can simple download all the files from the Quickstart and get it up and running just to make sure everything you expect to work does.

jade rune
#

Are we moving onto the next step

#

i do indeed have the payment.js file coming first

muted cave
#

Honestly I would invert those two IMHO

#

Load the Stripe resource first

jade rune
#

No problems thank you!

muted cave
#

Yeah on thing I have to remind myself is web browsers read your files from left to right, top to bottom. So if your script above references Stripe terminal right away it will error out because your browser hasn't loaded it yet.

#

Given where you are starting from, it might be worth it to spin up the Quickstart app and see if you can connect to your reader and process a test charge that way.

jade rune
#

no problem mate thank you

#

can you keep this chat open

#

so i can referrence it in the morning

muted cave
#

This thread will get archived but you can find it again. If you want to keep this discussion going you can just ask the current moderator to re-open it.

jade rune
#

no problem thank you