#nickdnk_code
little ibexBOT
👋 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/1337511530865889340
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
fickle star
const stripePayoutRef = ref<HTMLDivElement | null>(null);
const stripeConnectInstance = loadConnectAndInitialize({
// This is your test publishable API key.
publishableKey: "pk_test_xxx",
fetchClientSecret: (async () => {
return 'accs_secret__xxx'
}),
appearance: {
// See all possible variables below
overlays: "dialog"
},
});
const paymentComponent = stripeConnectInstance.create("payments");
stripePayoutRef.value!.appendChild(paymentComponent)
So I have <div style="width:100%;height:400px;" ref="stripePayoutRef"> in my component template, which renders with a decent size. I see the "authorization error" displayed in here correctly if I provide an expired access secret
For testing purposes I am just generating the access secret from the terminal and I paste it over in the code
It works on the first load, if I try again it gives the auth error as expected, then I can generate a new access secret and go again, but this doesn't explain why it renders with no content if the access secret is valid
And this is Vue3, composition API
visual tulip
Hm i'm not a Vue expert, but let me see
Can you try removing the style on your container/div?
fickle star
Yes, hold on
Doesnt help, it's still 0x0
Unless, again, I provide an invalid access_secret
visual tulip
Do you have a published test page where I can take a look by chance?
fickle star
No it's just local
this is what it renders with an invalid access token
so it does "work" just only if it ... doesn't
that being that the component mounts to the div correctly
visual tulip
Is there anything in the console log when you use a valid token?
visual tulip
Strange
looking at your code, it all looks fine/normal
Is there anyway you can serve up a test site so I can take a look?
fickle star
Hmm
Not really sure how I can do that given my current dev environment
(and without also giving essentially public access to our staging env)
I couldn't get it to work with a test account either by the way
It just kept saying "the account was created in live mode"... which I guess is true, but I don't have any "accounts created in test mode"
so I had to test with pk_live keys etc
visual tulip
Oh ok
I'm not really sure what to suggest
Let me ask a colleague to see if they have a suggestion
fickle star
Im doing this with the backend code:
$stripe = new StripeClient(
'secret key'
);
$s = $stripe->accountSessions->create([
'account' => 'acct_xxx',
'components' => [
'balances' => [
'enabled' => true,
'features' => [
'instant_payouts' => false,
'standard_payouts' => false,
'edit_payout_schedule' => true,
],
],
],
]);
echo $s->client_secret . PHP_EOL;
And that's with live secret key too?
fickle star
ahh okay wait, do I have to input balances in the frontend component and not payments if I do this?
fickle star
And that's with live secret key too?
yes
visual tulip
ahh okay wait, do I have to input `balances` in the frontend component and not `...
oh yep
i bet that's it
fickle star
let me try
it works
styiling is kind of messed up but that's because our site is in dark mode
is there a general "dark mode" enum value I can apply ?
or do I have to painstakenly apply inverted colors to every single property
visual tulip
Let me check
Oh man I think you'll need to do each property: https://docs.stripe.com/connect/customize-connect-embedded-components
I don't see a dark mode theme you can set
visual tulip
I wonder if theme: night works like it does for the payment element, for example: https://docs.stripe.com/elements/appearance-api
I kind of doubt it though. i don't think we made preset themes for these embedded components
fickle star
according to the types it doesn't accept any theme, so I couldn't compile even if I tried
and it prints the currency twice
I don't believe that has anything to do with my styling
fickle star
just DKK
visual tulip
Yeah that seems like a bug to me
fickle star
but I think the issue is it prints €0.00 EUR
so there is no symbol for DKK
so you get DKK value DKK
visual tulip
Yeah that would explain it
fickle star
but I think the issue is it prints €0.00 EUR
but this of course is also redundant
fickle star
so I guess all I have to do is give it styling for every single border, text, background, link, button etc and it should end up ok
fickle star
I wonder if theme: night works like it does for the payment element, for example...
we did do this with payment elements and we only had to override like 6-7 props for it to be fine
okay I guess that's not entirely true:
const appearance: Appearance = {
theme: 'night',
variables: {
colorPrimary: '#F0F1F3',
colorBackground: '#1A202B',
colorText: '#F0F1F3',
colorDanger: '#FF336C',
colorSuccess: '#00F27F',
colorWarning: '#FF9849',
colorTextSecondary: '#89909C',
colorTextPlaceholder: '#89909C',
iconCheckmarkColor: '#F0F1F3',
fontFamily: 'Roboto, sans-serif',
spacingUnit: '3px',
borderRadius: '9.5px',
gridRowSpacing: '25px',
logoColor: 'dark'
},
rules: {
'.AccordionItem': {
backgroundColor: '#1A202B'
},
'.Input': {
backgroundColor: '#252D3D',
fontSize: isIphone ? '16px' : '13px',
border: '1px solid transparent',
boxShadow: 'none'
},
'.Input:focus': {
outline: '0',
border: '1px solid #B9BEC7',
boxShadow: 'none'
},
'.Input--invalid': {
outline: '0',
border: '1px solid rgba(255, 51, 108, 0.6)',
boxShadow: 'none'
},
'.Label': {
textTransform: 'uppercase',
color: '#89909C',
letterSpacing: '1.5px',
fontWeight: '500',
fontSize: '11px',
marginBottom: '10px'
},
'.Error': {
fontSize: '13px',
color: '#FF336C',
marginTop: '11px'
},
'.CheckboxInput': {
border: '1px solid #89909C',
borderRadius: '3px',
transition: '200ms ease-out background-color, 200ms ease-out border-color'
},
'.CheckboxInput--checked': {
borderColor: '#B9BEC7',
backgroundColor: 'rgba(185, 190, 199, 0.2)',
},
'.CheckboxInput:focus': {
outline: '0',
boxShadow: 'none'
},
}
}
Yeah unfortunately I think you'll need to just set each individual thing
fickle star
by the way, you see we have the isPhone property there. You should consider always defaulting the font to at least 16 px, or iOS will always zoom in on the text field in the card element if the font is below that
fickle star
Yeah unfortunately I think you'll need to just set each individual thing
I'll try, apparently we've done it before
fickle star
by the way, you see we have the `isPhone` property there. You should consider al...
and this cannot be prevented, which is insanely annoying
visual tulip
Oh where is the isPhone prop?
fickle star
but that's unrelated to any of this, of course
'.Input': {
backgroundColor: '#252D3D',
fontSize: isIphone ? '16px' : '13px',
border: '1px solid transparent',
boxShadow: 'none'
},
yea sorry typoed it
visual tulip
No prob
Yes I'll file feedback for each of these
Thanks for reporting!
You always have good feedback on our products
fickle star
Yes I'll file feedback for each of these
This is of course not something Stripe can be expected to handle, but maybe it could go in the documentation as a notice at least, i.e. "dont set font below 16 for mobile devices or else"
fickle star
You always have good feedback on our products
I try 🙂
little ibexBOT
fickle star
How can I reference a Google font with stripe-connectjs ?
like Roboto
Can't really get it to work following the docs
stable eagle
Hi, my teammate had to step away. Let me catch up
fickle star
Alright, can you also exlpain this error to me?: req_Y16wzcBGQMCQ4j
I don't understand what it wants me to do. Those "features" are for two separate components
stable eagle
We document the options to configure Connect.js here: https://docs.stripe.com/connect/get-started-connect-embedded-components?platform=web#configuring-connect
I have not played with the fonts and I think you might get there faster by paying a bit more
Looking
fickle star
We document the options to configure Connect.js here: https://docs.stripe.com/co...
Alright, I will keep trying
if I set external_account_collection to true then it doesn't give me that error, but I'm still confused about it
I also cannot get it to render both balances and notification-banner on the frontend. Just like before, the notification-banner is an empty tag, even though the code should generate an access session for both. Or do I need to create two separate sessions, one for each component?
Doing this currently
$s = $stripe->accountSessions->create([
'account' => 'acct__',
'components' => [
'balances' => [
'enabled' => true,
'features' => [
'instant_payouts' => true,
'standard_payouts' => true,
'edit_payout_schedule' => true,
],
],
'notification_banner' => [
'enabled' => true,
'features' => ['external_account_collection' => true],
],
],
]);
const balances = stripeConnectInstance.create("balances");
const notificationBanner = stripeConnectInstance.create('notification-banner'); // these are typed, so no typos here
stripePayoutRef.value!.appendChild(balances)
stripePayoutRef.value!.appendChild(notificationBanner)
results in this in the DOM, where the top one works (balances) but the bottm one is empty
it tries to render it below, but it ends up at 0x0 again
it cuts off the "See details" text, the notification banner, that is, and simply doesn't render
If I just try to mount the notification banner alone, it still ends up at just 0x0
Maybe it's 0x0 if there are no notifications?
stable eagle
Still looking internally, I'll let you know once I find the reasoning
fickle star
alright
Got the font working also, I just should use cssSrc instead of what i tried with .woff2 files
stable eagle
Ok, I was able to reproduce this end to end.
I see we call out here: https://docs.stripe.com/api/account_sessions/create#create_account_session-components-notification_banner-features-external_account_collection
This feature can only be false for accounts where you’re responsible for collecting updated information when requirements are due or change, like custom accounts.
fickle star
Yeah, I saw that, but the error message says I must provide the same features on both components, which doesn't make any sense
It also works when I set it to true
stable eagle
I think that is beacuse if you don't pass 'features' => ['external_account_collection' => false], on the balances as well, it defaults to true so that is the mismatch.
Can you pass 'features' => ['external_account_collection' => false], on both of the components?
fickle star
ah, let me check
yea, that's why
Maybe this error message could be improve to specify which features conflict. That would make this clearer
e.g. The features property external_account_collection specified by balances and notification_banner must be the same.