#stepanr_code
spice nimbusBOT
đ 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/1288088888329637916
đ Have more to share? Add more details, code, screenshots, videos, etc. below.
oblique prism
Hi, let me help you with this.
Could you please share a recording of the behavior?
pallid ore
Hello, I'll gladly do that. Give me a minute please.
This is what the unexpected popup looks like. What we want to achieve is to embed the whole process on our site, without popups.
spice nimbusBOT
errant aspen
To be clear, is the initial modal/dialog your integration UI/code or is that part of the Connect embedded component?
pallid ore
No, the first modal that you see is a part of our own app. The only elements that are rendered by Stripe are the 'Add information' button and the gray text above it.
errant aspen
Can you share the code that handles the button click in the screenshare? What does it do?
pallid ore
The button is rendered by Stripe. I don't believe I have access to Stripe source code.
It is rendered by this code, as per documentation:
stripeConnectInstance = loadConnectAndInitialize({
publishableKey: environment.stripePublicKey,
fetchClientSecret,
appearance: {
overlays: 'dialog',
variables: {
colorPrimary: '#635BFF',
},
},
});
const container = document.getElementById(
'embedded-onboarding-container',
);
if (container) {
const embeddedOnboardingComponent =
stripeConnectInstance.create('account-onboarding');
embeddedOnboardingComponent.setOnExit(() => {
console.log('User exited the onboarding flow');
onboardingExited.value = true;
});
container.appendChild(embeddedOnboardingComponent);
}
That button isn't rendered by Stripe AFAIK, not super familiar with this but looking at the quickstart you linked it's included in that:
// HTML
<button id="add-information-button" class="hidden">Add information
</button>
// JS
const addInformationButton = document.getElementById("add-information-button");
addInformationButton.onclick = createAccountLinkAndRedirect;
So that code you've downloaded is what handles the redirect
pallid ore
There is nothing like that in our code. If you switch to the Vue or React version of the code (Vue in our case), these elements get rendered by Stripe.
errant aspen
The idea is you download that code as a boilerplate to start and then change it to work within your integration as you need. If you want to do embedded onboarding you should be looking here: https://docs.stripe.com/connect/embedded-onboarding
Creates and Account Session, rather than an Account Link (which is just a redirect/hosted)
pallid ore
Thank you, I'll try to look into that
pallid ore
The idea is you download that code as a boilerplate to start and then change it ...
Hmm, I think I have seen this page, and I still struggle to find a way to avoid running into a popup.
The docs mention the same code as the previous page just with different variable names.
errant aspen
Here's the Vue code you need: https://docs.stripe.com/connect/connect-embedded-components/quickstart?client=vue
That's for the 'payments' component but you can use the same example and interchange for the 'onboarding' component
Right now you're using a hosted/redirect flow so that's why it opens in a new window
pallid ore
I am sorry but that is simply not true. Have a look at my code again please, I am already doing all this! Creating a session, appending Stripe rendered elements. Have a look at my code again, please. There is no redirecting that I am doing.
errant aspen
My guess it that your modal is too small for the embed to render to its forcing it to a new window. Can you try mounting the component outside the modal/dialog?
pallid ore
const response = await createEmptyStripeAccount();
connectedAccountId.value = response.account;
const fetchClientSecret = async () => {
const response = await startOnboardingSession(
connectedAccountId.value!,
);
const { client_secret: clientSecret } = response;
return clientSecret;
};
stripeConnectInstance = loadConnectAndInitialize({
publishableKey: environment.stripePublicKey,
fetchClientSecret,
appearance: {
overlays: 'dialog',
variables: {
colorPrimary: '#635BFF',
},
},
});
const container = document.getElementById(
'embedded-onboarding-container',
);
if (container) {
const embeddedOnboardingComponent =
stripeConnectInstance.create('account-onboarding');
embeddedOnboardingComponent.setOnExit(() => {
console.log('User exited the onboarding flow');
onboardingExited.value = true;
});
container.appendChild(embeddedOnboardingComponent);
}
I can try that.
errant aspen
I do think this may be unavoidable in some scenarios though, as noted here:
Authentication includes a pop-up to a Stripe-owned window. The connected account must authenticate before they can continue their workflow.
So the sign in to their Stripe account is required in the popup if you're collecting external account detials during onboarding for payouts
pallid ore
Well, that's no good. The window size didn't change anything either.
I really thought this must be a bug, because the elements aren't really embeded in this process.
yes, you're right
errant aspen
Yeah sorry for the misunderstanding. I just remembered that restriction