#Julio

1 messages · Page 1 of 1 (latest)

hazy narwhalBOT
remote wharf
#

You can try passing the appearance variable as the example

exotic spire
#

hum

#

how do you change height of the input for example ?

remote wharf
#

I only find lineHeight and fontLineHeight for inputs

exotic spire
#

ah yes sorry, but what about borderRadius ?

remote wharf
#

I also see it on above Doc!

exotic spire
#

ahh thats my bad, i was itred last evening

#

tired

exotic spire
#

hi again

quartz path
#

Hey!

exotic spire
#

can u provide my the doc to use IbanElement ?

#

i can't manage to find it

quartz path
exotic spire
#

where can i find how to customize borderRadius using this one

#

there is nothing in the type def

quartz path
#

There's no IBAN Element referenced there?

exotic spire
#

fuck i link u the wrong url

#

you need to work on this, i used a scenario that i cant find

#

ok ok

#

for sure

#

(but it took me 10 min , its painful )

#

in the IBAN_STYLE constant

#

where do i put borderRadius

quartz path
#

Not sure if that property is supported

#

Why not just use the Payment Element?

exotic spire
#

because your tutorial said so

#

how do i use what u linked ?

quartz path
#

I'd just ignore those docs and use the Payment Element instead

exotic spire
#

seriously ? 😦

#

as in "dont use import {IbanElement} from '@stripe/react-stripe-js';"

quartz path
#

Well, up to you. But the Appearance API is way more flexible than the style object

#

And only the Payment Element supports the Appearance API

exotic spire
#

how do i create an Element in react then ?

quartz path
#

No, that's still valid. It literally references the Payment Element

#

What exactly are you trying to do?

exotic spire
#

i'm trying make a form so user can save an SEPA IBAN

#

but i'd like my form to look the same as the rest.
i'm using mui style

quartz path
#

I don't know what 'mui style' is

#

The old, PM specific Elements are generally out of favour

exotic spire
#

fyi

quartz path
#

I'd imagine you'll have an easier time adapting the Payment Element to fit that style than you would the older Elements

exotic spire
#

i'm sorry all those methods are bit confusing

#

const paymentElement = elements.create('payment', { layout: { type: 'accordion', defaultCollapsed: false, radios: true, spacedAccordionItems: false } });

#

where is elements coming from ?

quartz path
#

What do you mean?

exotic spire
#

i what do you mean what do you mean

#

i'm trying to use the docs, but its either using useStripe useElements, or pure JS, type definition won't work

quartz path
#

You need to provide me with a specific issue/error. We're jumping all over the place here

#

Everything from Stripe.js should be typed, so you'll need to be more specific

exotic spire
#

ok

#

specific

#

the elements in your doc

#

it comes from here var elements = stripe.elements({
clientSecret: 'CLIENT_SECRET',
});

#

BUT

#

i'm in react app

#

so its not the same

#

how do i get it

quartz path
exotic spire
#

ok

#

and how should i display such Element in JSX ?

#

let IbanElementCustom;

if (stripe !== null && elements !== null) {
IbanElementCustom = elements.create("iban", stripeIbanElementOptions);
}

quartz path
#

<IbanElement /> I think

exotic spire
#

does not work

quartz path
exotic spire
#

so createElementComponent ?

#

but where does it come from ?

quartz path
#

No, that's an internal API. We export a <IbanElement /> component

exotic spire
#

i can't import it

#

...

quartz path
#

You say 'it doesn't work' – can you be more specific?

exotic spire
#

but this IbanElement is not customizable

hybrid void
#

what specific customisations do you need?

exotic spire
#

hi senior manager

#

i need to add some borderRadius

hybrid void
exotic spire
#

ur colleague here advise my to NOT use react method, using directly stripe-js

hybrid void
exotic spire
#

in order to customize better

hybrid void
#

looks like we don't support a borderRadius property

exotic spire
#

hum

#

ok

#

so its not doable is what you mean

#

and i can't create a ReactComponent from a element created using stripe-js lib ?

hybrid void
#

doesn't seem like it! the way you style things in stripe.js is passing JS objects like that one(because the inputs are iframes of a secure Stripe site, so they can't use CSS on your own page). So you can only use things that our style API has implemented.

You can try applying your style to the component mounting the Element like <div style="....."><IbanElement /></div>, sometimes that accomplishes what you want

hybrid void
exotic spire
#

it seems that borderRadius is supported by style property in stripe-js , thats why

hybrid void
exotic spire
#

well ok its not supported

hybrid void
#

indeed! the things that the IbanElements supports is what I linked to. Maybe you were looking at the style options for PaymentElement, which is a different thing

exotic spire
#

i thought ur colleegue said it was

#

my bad

#

at this point mate

#

i dont know what i'm looking at

#

whats the difference between paymentELement style options and ibanElements ?

hybrid void
#

they're different, not sure how I can answer that

#

they're different components, PaymentElement is a drop in form with multiple fields and tabs and inputs, IbanElement is just a single input for a bank account number. The PaymentElement uses a specific API for styles(https://stripe.com/docs/elements/appearance-api) built for it; separate elements like IbanElement are older/pre-date when we created PaymentElement, and use a simpler system

exotic spire
#

but can use Iban with this method ?

hybrid void
#

which method, the PaymentElement?

#

the PaymentElement supports SEPA Debit payments(part of which is accepting an IBAN), yes

image.png
exotic spire
#

but only for payment? i can't save a sepa debit ?

hybrid void
#

should just work with the PaymentElement being passed a SetupIntent as well, that specific doc only talks about the IbanElement but PaymentElement should work too