#varinal_api
limber laurelBOT
👋 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/1262882007520645163
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
cobalt latchBOT
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.
- varinal_api, 32 minutes ago, 39 messages
errant token
Hi there
strong forge
Hi there, I was talking with someone else regarding this issue where Link would show up in the CardElement for Chrome in Prod / Preview / Dev environments on Windows, but only Preview/Dev for iOS / MacOS on Chrome & Safari and then it eventually stopped showing in Windows Chrome Prod
errant token
Ah, I see my teammate mentioned this:
We often use a smart targeting heuristic to render Link when we think it will likely help conversion which is why link isn't showing up on Safari.
So we may not always render Link, only if we think it will help with conversion
strong forge
Yes, sorry I went to lunch and think the thread was considered idle
I know this isn't something I can directly control but I was wondering if there was something else I can do to help influence the conversion? Will there be a fix to change this? Or what are the other solutions?
My client wants some certain design customizations and I had previously used Payment Element but there wasn't a lot of customization available for it unless I'm doing something wrong for that
Previously it looked like this
but he wants it to look more like this
errant token
I know this isn't something I can directly control but I was wondering if there ...
There isn't anything you can change at the moment with regards to Link not rendering in Safari. The decision whether to display Link in the CardElement or not in this case was made by Stripe
In this case, we determined that presenting Link to the customer would not result in a higher conversion, so Link wasn't rendered
As for the the appearance of the PaymentElement, what was your client looking for exactly? An accordion view?
strong forge
Less fields and changing how each text box looks
errant token
If you look at the example here: https://docs.stripe.com/elements/appearance-api
You can toggle between "Tabs" and "Accordion"
strong forge
Not having the label on top of the textbox , changing the placeholder text
So if we want link, we would have to use a different Stripe element ?
errant token
Not sure if you played with the Appearance API much but there's customization you can do with labels, input, errors, etc.
strong forge
and yeah not so much tabs vs accordion, he just wants it to look like this:
I have tried the appearance API before but there wasn't much for me to work with to make it look like that
errant token
I see. That's the conflict here. Link will not always appear in the CardElement but you'll need to use the CardElement if you want the card input field to look like the screenshot above
strong forge
Yeah, is there separate element I could use for Link?
errant token
There's the Express Checkout Element: https://docs.stripe.com/elements/express-checkout-element
Options are either auto or never, and auto looks at whether Link is enabled in your Dashboard: https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods
strong forge
Hmmm okay I was just looking at that so good to know I'm going in the right direction
But just to make sure we're not missing anything, if we want Link and we want the credit card input area to look like how I showed you, we would have to either
- Get Link through Express Checkout
or - use Payment Element, but lose out on how the design looks
And that Link showing up in Card Element is just up to Stripe and we have no way of influencing it?
errant token
Correct!
strong forge
And that there isn't enough customization in Payment Element Appearance API to get to that design either right? (just making sure I'm not missing out on that as well)
errant token
I guess what's the most important piece here? Is it having the label (Card Number) in the input field, having the fields in a single row, or something else?
strong forge
Hmm I'd say the look. Just have these three fields
Client doesn't like how the Payment Element looks like 😂
errant token
So something like this is a no go for them?
strong forge
I'd have to double check, could I see how you did that? 😮
errant token
Totally! When creating the Elements object, I used labels: 'floating' for Appearance: https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance
When creating the PaymentElement, I used layout: 'tabs': https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout
The PaymentIntent that's being used here uses payment_method_types: ['card', 'link']
strong forge
Oh I see, hmm I don't think I used floating before
Okay, thank you so much! I'll try to see what I can do from here
Oh, sorry but if I wanted to get rid of some fields, is that possible? Like get rid of the country / ZIP fields?
errant token
You could omit these when rendering the PaymentElement (by passing billingDetails.address.postalCode: 'never') but you'll need to include these details when calling confirmPayment: https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-fields-billingDetails
strong forge
Hmmm okay I see thank you!
Last question - would I be able to have Card Number / Expiration / CVC in one row ?
or on top of each other? instead of 1-2
errant token
No, this isn't possible
strong forge
Alright, thank you for your help roadrunner !
