#luna_38953
dull mountain
last fern
hi! what errors are logged in the browser console?
abstract hatch
I am not recieving any errors that I can find
last fern
are the calls to your backend as logged in the Network tab all happening, and succeeding and returning the information you expect like PaymentIntent client secrets?
abstract hatch
I just have this. The terminal I am running the server from isn't thrwing any errors that I can see either
last fern
you need to check the browser console
you'd check the Console tab for errors/warnings that will give you a hint as to the problem, and the Network tab for debugging the communication with your backend
abstract hatch
Thank you, I will check that now. I am all very new to this and feel rather in over my head
last fern
no worries, it's a full stack integration overall so will require some frontend expertise but hopefully we can help
abstract hatch
I am sure you can! I have the browser console open now
What should I be looking for? The only issues on the Console appear to be related to a script accessing a "navigator" method.
last fern
what are the exact messages?
what is the contents of the payment.js frontend file you wrote?
last fern
ok well I'd start debugging the script
add console.log("here") for example after the "await fetch" line, and then again above the line above "const elements" and then see if those get logged when you refresh the page
also make sure you actually added a <script> tag to include payment.js in the html
abstract hatch
Ok I'll add those and let you know
Yes I have added payment.js to the html
So I am looking for something to log in my browser console? I have made those changes to the code and refreshed the page, and nothing is visible in the console
last fern
yes
then presumably that script is not loading
please share the exact full code(all the HTML and JS) , not screenshots
abstract hatch
Ok that is good to know then
I'll copy them over now
document.addEventListener('DOMContentLoaded', async () =>{
//Fetch publishable key and initialise stripe
const {publishableKey} = await fetch("/config").then(r => r.json())
const stripe = Stripe(publishableKey)
//Fetch the client secret and initialise elements
const {clientSecret} = await fetch("/create-payment-intent", {
method: "POST",
headers: {
'Content-Type': 'application/json'
//pass back 'request body' that includes
//info to decide what to charge (calculate amount on server)
}
}).then(r => r.json())
console.log("here")
const elements = stripe.elements({clientSecret}) //use clientSecret to decide which payment methods to display
const paymentElement = elements.create('payment')
paymentElement.mount('#payment-element') // a 'css selector'
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Stripe Sample</title>
<meta name="description" content="A demo of Stripe" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/global.css" />
<script src="https://js.stripe.com/v3/"></script>
<script id="./payment.js"></script>
</head>
<body>
<div class="sr-root">
<div class="sr-main">
<h1>Literally reeee</h1>
<form id="payment-form">
<div id="payment-element"></div>
<button>Pay</button>
<div id="error-messages"></div>
</form>
</div>
</div>
</body>
</html>
last fern
what is in the Network tab of the console? is the call to the backend "config" URL happening?
abstract hatch
What would that look like? I cannot see a call to a backend URL
Excuse another screenshot
last fern
add a console.log above the "//Fetch publishable key" comment and see if that is hit
also make sure you're saved the changes to all these files and they're actually being deployed
if you look in the Sources tab in the devtools you can see what the browser is actually using as payment.js
abstract hatch
Just added the new console.log and I'm still not seeing anything
abstract hatch
if you look in the Sources tab in the devtools you can see what the browser is a...
I think that might be the problem. payment.js is not in the Sources tab at all...
last fern
and in the Sources tab payment.js exists and looks like the file you've been editing and includes the .log lines?
ah wait
<script id="./payment.js"></script> is wrong, it should be src not id
abstract hatch
Oh gosh, yeah that would do it!
I'm getting the first console log now, but not the second. I have a couple flashy new issues too
