#r3d_customer-uielements
random sleetBOT
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- r3d_api, 9 hours ago, 27 messages
queen palmBOT
👋 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/1235655270093291622
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
fading cobalt
👋 Hello! I am not sure I grasp what you are describing. We don't have any prebuilt UI element you can add to your own app to control those things, you'd build them yourself
crisp tinsel
Here is my context
export default function StripeContext({ children }) {
const { selectedMedia } = useSelectedMedia();
const { currentLang } = useLocales();
const [stripeSession, setStripeSession] = useState(null);
useEffect(() => {
if (selectedMedia) {
cloudRun('getStripeCustomerSecret')({ institutionId: selectedMedia?.id }).then((key) => {
setStripeSession(key);
});
}
}, [selectedMedia]);
return (
<Elements
stripe={stripePromise}
options={{
clientSecret: stripeSession?.client_secret,
appearance: {
theme: 'night',
variables: {
colorPrimary: palette.dark.primary.main,
colorSecondary: palette.dark.secondary.main,
colorBackground: palette.dark.background.paper
}
}
}}
>
{children}
</Elements>
);
}
r3d_customer-uielements
crisp tinsel
You don't have prebuilt elements to display and edit billing info for customers?
fading cobalt
no we do not. We do have our CustomerPortal but it's a separate app https://docs.stripe.com/customer-management
crisp tinsel
Ok, would putting it in an Iframe with the correct link work?
fading cobalt
no you can't iframe it, it's a full page redirect
crisp tinsel
Alright, well I've already set up a link to it, I think I will just automatically open a new tab when the user goes to billing
So Elements is only for an active checkout right?
fading cobalt
Not exactly, it's for embedding UI components in your own website to do certain things like accept a payment or collect payment method details for the future or collect an address and many more.
But we do not yet have some kind of pre-built and embeddable component for customer management like the CustomerPortal does. We definitely hope to add one in the future, just haven't made it high enough on the priority list just yet unfortunately
crisp tinsel
Alright so it can collect payment method details and address but only when doing a checkout, makes more sense now
fading cobalt
yep! I mean you weren't wrong to expect it'd "just work" especially with our CustomerSessions API. It's our goal in the future but right now that API is specifically to associate an existing Customer to a PaymentLink or PricingTable which are low-code approaches to accept a payment on Checkout
crisp tinsel
Good, well I'll stick with a redirection for my customers for now, good thing my sellers will be able to use the Connect Components though but I have found an issue with those: They are impossible to darkmode since they have no theme attribute and some variables would be a pain to set up by hand
Having the list of variables and overrides given by the "night" theme on elements so that I could use it on the Connect components would be a great help
@fading cobalt If you could find the overrides given by the Element theme "night" in the codebase so I can override all the aesthetics to Dark Mode on my Connect Interfaces that would help me greatly
fading cobalt
I'm not sure I follow your train of thoughts
crisp tinsel
In my app (whose UI is in Dark Mode) I have a Customer side for buyers and a Connect side for sellers
On the customer side I can easily theme the components like so:
<Elements
stripe={stripePromise}
options={{
clientSecret: stripeSession?.client_secret,
appearance: {
theme: 'night',
variables: {
colorPrimary: palette.dark.primary.main,
colorSecondary: palette.dark.secondary.main,
colorBackground: palette.dark.background.paper
}
}
}}
>
But on the Connect side, the theme prop is missing, so I cannot set the UI to 'night' and would have to override all of the relevant UI variables to emulate a dark mode
const [stripeConnectInstance] = useState(() => {
const fetchClientSecret = async () => {
// Fetch the AccountSession client secret
const { client_secret: clientSecret } = await cloudRun('getAccountSession')();
return clientSecret;
};
return loadConnectAndInitialize({
// This is your test publishable API key.
appearance: {
variables: {
colorPrimary: palette.dark.primary.main,
colorBackground: 'transparent'
},
overlays: {
error: '#error'
}
},
locale: currentLang,
publishableKey: stripeKey,
fetchClientSecret
});
});
ah gotcha, let me have a look
crisp tinsel
Thank you
queen palmBOT
fading cobalt
yeah okay someone on my team confirmed we don't support this so it'd be a feature request for our support team: https://support.stripe.com/contact
crisp tinsel
Alright, I'll stick with eye piercing light elements for now haha
Oh wait let me try this
Oh hell yeah
Put it inside a box with
filter: 'invert(1)'
Gotta get the right inverted colors for my primary color but it looks fine
fading cobalt
yeah that might work but feels like the theme approach would be more sustainable for you
crisp tinsel
yeah that might work but feels like the theme approach would be more sustainable...
It definitely would but this will do in the meantime
I see it doesn't affect dialogs opened by stripe, maybe I could use a little css magic
Well It doesn't work on dialogs, since those too seem to be iframes with random names
If I had a way to catch them and apply filter: invert or to add css inside that would do it
fading cobalt
yeah I don't think any of this is controllable. I'd recommend writing in for a feature request to: https://support.stripe.com/contact
crisp tinsel
I will, but I need a demo ready so I'm testing stuff out
Seems like importing a simple css with iframe: {filter: invert(1)}
Works on all dialogs
As long as my connect components are never on a page that needs to display iframes it works!
Though it is to be noted that it will invert any logo of any known brand, but that's a tiny detail tbh
It ain't perfect, it definitely changes the color a bit more than just inverting for some reason but with some tweaking it's perfect for now
To anyone who was searching for this thread, think outside the box, sometimes 3 lines of CSS is all it takes
solid shard
Thanks for sharing the workaround you found, and glad you've got something that works well enough for you 🙂
crisp tinsel
In order to have a pseudo Dark Mode in Stripe Connect React components
Here is the CSS to import in the page you will display Stripe Connect elements in
iframe {
filter: invert(1);
-webkit-filter: invert(1);
-moz-filter: invert(1);
-o-filter: invert(1);
-ms-filter: invert(1);
}
StripeContext.js
appearance: {
variables: {
colorPrimary: '#54ff5b', // Inverted primary color
colorText: palette.light.text.primary, // Inverted text color
buttonSecondaryColorBackground: '#95ff84', // Inverted primary dark color,
colorBackground: '#ded4c9', // Inverted background color
colorDanger: '#1eaab5' // Inverted danger color
},
overlays: 'dialog'
}