#sano_connectembedded-popup
frail meadowBOT
đ Welcome to your new thread!
â˛ď¸ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
âąď¸ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
đ This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1235382421684486194
đ Have more to share? Add more details, code, screenshots, videos, etc. below.
gaunt harbor
@fiery bobcat that's not something you have control over. If they block popups in their browser, then they should get a notification/alert to allow them.
sano_connectembedded-popup
fiery bobcat
right, well is there a reason why its not working for me, i made sure to have a clean room but im still getting the same error. Also tried clearing cache
gaunt harbor
what does that mean "have a clean room"?
fiery bobcat
oh, just a clean version of chromium
its another chrome window, idk how to describe it
gaunt harbor
Okay, does it work in another browser first? Like can you try the latest official Chrome first?
fiery bobcat
trying it in firefox.
same error.
weirdly
it opens the pop-up just doesnt load?
gaunt harbor
Is there any error anywhere? I'm sorry you are not giving me much right now
fiery bobcat
its just the one i sent:
Uncaught (in promise) SubmerchantAuthError: Popup is blocked by browser.
r SubmerchantAuthenticationError.ts:5
ue SubmerchantAuthenticationContext.tsx:448
ue SubmerchantAuthenticationContext.tsx:443
le SubmerchantAuthenticationContext.tsx:464
Okay so you get that exact same log in Firefox despite being able to see the popup appear? Can you try real Chrome?
strong pawnBOT
gaunt harbor
(I have to run but @rancid bear is taking over for me)
fiery bobcat
thanks for your help!
rancid bear
Hi @fiery bobcat I'm taking over this thread
fiery bobcat
hello
rancid bear
Is there a URL that I can visit to reproduce the problem?
fiery bobcat
nothing is live at the moment, however i can try to share as much info as possible
rancid bear
Or can you share with me the relevant code?
fiery bobcat
whoops
window.loadConnectAndInitialize = null;
import { loadConnectAndInitialize } from '@stripe/connect-js';
window.loadConnectAndInitialize = loadConnectAndInitialize;
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
const fetchClientSecret = async () => {
// Fetch the AccountSession client secret
const response = await fetch('/dashboard/account/session', {
method: "POST",
headers: { "X-CSRFToken": getCookie('csrftoken') }
});
if (!response.ok) {
// Handle errors on the client side here
const {error} = await response.json();
console.log('An error occurred: ', error);
return "undefined";
}
else {
const {client_secret: clientSecret} = await response.json();
return clientSecret;
}
}
console.log(fetchClientSecret())
const instance = window.loadConnectAndInitialize({
publishableKey: "pk_test",
fetchClientSecret: fetchClientSecret,
appearance: {
overlays: 'dialog',
variables: {
colorPrimary: '#625afa',
},
},
});
const container = document.getElementById("stripe-container");
// const paymentsComponent = instance.create("payments");
// container.appendChild(paymentsComponent);
const accountOnboarding = instance.create('account-onboarding');
container.appendChild(accountOnboarding);
this is what my onboarding looks like
and it works perfectly fine
its just when i press the button
i get an auth error under the button and this in my console.
Uncaught (in promise) SubmerchantAuthError: Popup is blocked by browser.
at SubmerchantAuthenticationContext.tsx:448:18
at new Promise (<anonymous>)
at SubmerchantAuthenticationContext.tsx:443:14
at SubmerchantAuthenticationContext.tsx:464:14
at async
heres the POST /v1/account_sessions/claim id in my log req_hWEUrRZ2WRpjm1
rancid bear
Do you have any browser settings that block popups?
fiery bobcat
no. i made sure to turn them all off
~~i tried going to the url directly and it also is just a spinning circle
well
okay nvm
is the popup even supposed to happen? isn't it supposed to be an embed?
rancid bear
Yes the pop up will happen when authentication is needed https://docs.stripe.com/connect/get-started-connect-embedded-components#user-authentication-in-connect-embedded-components
fiery bobcat
ah okay nvm then, it just doesnt work and im not sure why
rancid bear
Can you try again in another machine? or I can test in my brower when your URL is ready.
fiery bobcat
not at the moment, and i wont be able to bring it to production
it may be that the network is blocking the pop-up?
not my browser
but that doesnt really make sense either since i can access stripe just fine
I mean the popup is showing up its just an infinite loading screen
rancid bear
Or is there way I can access your staging URL?
fiery bobcat
not at the moment
i tried using the cdn instead of the npm same issue, its most likely my network
im on university wifi, ill try with coffee shop wifi as soon as i can lol
rancid bear
Or can you try opening your webpage from your phone?
fiery bobcat
unfortunely no, im running it locally but, my phone will not be able to connect to it even on the same network
ill give it a try on another network asap and get back to you so you can close the thread
rancid bear
You can use some network tunneling service (for example https://ngrok.com/product/secure-tunnels) to generate a public HTTPS URL to your localhost, so that you can test it in another device.
fiery bobcat
alright, giving it a go
here you go, making a user for you hold on one second, will try it on my phone too
username: test@example.com
pass: AwH46&#!
hold on
rancid bear
I'm getting an error
fiery bobcat
1 sec
frail meadowBOT