gabornemeth_docs

[unborn quiver]

👋 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/1219219702912516148

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[crisp slate]

Have you had the chance to check the appearance API:
https://stripe.com/docs/elements/appearance-api

[mighty root]

Yep, I read through multiple times, but there's no mention about select element just dropdown, made a try with that without luck.

[crisp slate]

Yes you need to use the Dropdown class

https://docs.stripe.com/elements/appearance-api?platform=web#dropdown

Could you please share your code snipets and what you want to customize exactly ?

[mighty root]

So, this should work?

const appearance = {
   theme: 'stripe',
   rules: {
      '.DropdownItem': {
         padding: '10px 14px',
      },
   },
};

const {
   stripe,
   elements: [cardElement, idealBank],
} = useStripe({
   key: stripePublishableApiKey,
   elements: [
      { type: 'card', options: {style, hidePostalCode: true} },
      { type: 'idealBank', options: {style} },
   ],
   elementsOptions: {appearance}
});

[crisp slate]

yes

[mighty root]

I'm using vue-use-stripe

nothing with it

[crisp slate]

This is not Stripe default UI style

This is the default Stripe UI style
https://docs.stripe.com/payments/accept-a-payment?platform=react-native

Stripe doesn't provide an offical SDK for vueJs

But the community is maintaing a good SDK that you can use
https://github.com/vue-stripe/vue-stripe

[mighty root]

I'm creating custom elements with JS just using a wrapper to Vue which using Stripe.js underhood

[mighty root]

unfortunately I was not sure it's ready for production as the Vue3 support is just next flagged.

[crisp slate]

Yes, support for Vue3 is currently in development

I'm not sure how are you wrapping StripeJs in your app, but for sure the result your getting isn't Stripe default UI style

If you are using Stripe ELement, here is the default UI for Ideal:
https://docs.stripe.com/payments/accept-a-payment?platform=web&ui=elements

[mighty root]

If I'm correct this is the complete "payment" Element but I'm using custom flow as in here: https://github.com/stripe-samples/accept-a-payment/blob/main/custom-payment-flow/client/html/ideal.js

[crisp slate]

Ah you are create a field just for Ideal

Is there any particular reason for not using Stripe Element ?

[mighty root]

Yep 🙂 . Sorry for not mentioning that earlier.

To be honest I can't recall exactly what was it as it was a month ago or so and Stripe was totally new for me but I had some difficulties to insert it into my flow with all the customization I want to.

[crisp slate]

I see, I strongly recommend you to use Stripe Element, in order to have better flexibility and add more payment methods options with no-code

But you can customize your ideal Element using the style object

https://docs.stripe.com/js/elements_object/create_element?type=idealBank#elements_create-options-style>

You can find an example here too:
https://docs.stripe.com/payments/ideal/accept-a-payment?web-or-mobile=web&payments-ui-type=elements#add-and-configure-an-element

Here is the style object, supported attributes
https://docs.stripe.com/js/appendix/style

You can't use the appearance API with the ideal element.

[mighty root]

Ahh, I see. Then I'll check that (I've already checked it but not as many times as the appearance API so I might miss something) and maybe a little bit later I'll give another chance to the Stripe Element.
Thanks a mil and have a nice day! 🙂