yoitspeterson-ios-payment-element | Stripe Developers | Page 1

grim plinth Apr 18, 2022, 6:39 PM

#

Hi there!

#

Let's chat in this thread

floral rose Apr 18, 2022, 6:40 PM

#

grim plinth Apr 18, 2022, 6:40 PM

#

Can you share your code for how you are rendering Payment Element here?

#

yoitspeterson-ios-payment-element

floral rose Apr 18, 2022, 6:41 PM

#

ready() {

    const elements = this.state.stripeClient.elements({

        clientSecret: this.props?.clientSecret,
    });

    const element: StripePaymentElement = elements.create('payment', {

        paymentMethodOrder: ['card'],
    });

    this.update({ element, elements });

    element.mount('#payment-element');

    this.trigger('payment-element-mounted');

    element.on('change', (event) => this.trigger('payment-element-changed', event));

    this.on('payment-succeeded', () => element.unmount());

    this.on('checkbox-checked', () => {

        // if using default payment method to checkout payment element should be disabled
        element.update({
            readOnly: ($('#default-payment-checkbox' ) as HTMLInputElement[])[0]?.checked,
        });
    });
},

grim plinth Apr 18, 2022, 6:41 PM

#

Thanks and are you seeing the same behavior here across different browsers?

floral rose Apr 18, 2022, 6:43 PM

#

it was present iOS only, i am not sure what browser, i just asked our QA team

grim plinth Apr 18, 2022, 6:44 PM

#

Okay that would be useful to know the browser if you can find that out.

#

Thinking about what this might be... give me a few mins

floral rose Apr 18, 2022, 6:45 PM

#

thanks! i will try to replicate in the mean time

grim plinth Apr 18, 2022, 6:47 PM

#

The device you are experiencing this on would also be really helpful

floral rose Apr 18, 2022, 6:53 PM

#

iPhone 8 Plus on iOS 15.4

iPhone 11 Pro Max IOS 15.4

grim plinth Apr 18, 2022, 6:58 PM

#

Thanks that's great. Did you get the browser as well?

floral rose Apr 18, 2022, 7:02 PM

#

i looks like chrome

#

they didnt answer but its not safari url footer

grim plinth Apr 18, 2022, 7:03 PM

#

Thanks, let me see if I can reproduce.

#

What localization is that?

floral rose Apr 18, 2022, 7:09 PM

#

our QA team is in belarus

grim plinth Apr 18, 2022, 7:09 PM

#

Thanks

#

Can you provide your appearance code?

floral rose Apr 18, 2022, 7:11 PM

#

i have none on this element

grim plinth Apr 18, 2022, 7:11 PM

#

Hmm it doesn't have any labels though

floral rose Apr 18, 2022, 7:12 PM

#

should look like this

grim plinth Apr 18, 2022, 7:12 PM

#

Oh it does have labels

#

They are just really dark

#

Can barely see them

#

Ah okay I think I see what is happening

#

Yep got it

#

Screen_Shot_2022-04-18_at_12.13.43_PM.png

#

So the issue is because the Russian locale has such a long label for expiry

#

It is messing with the mobile formatting

#

I'll need to file a ticket internally for this

#

So really this should only be an issue for Russian (or Belarussian) customers.

floral rose Apr 18, 2022, 7:15 PM

#

ahhh

#

okay i see, thank you also for catching the really dark labels, i look at this all day i forget whats there and whats not sometimes

grim plinth Apr 18, 2022, 7:16 PM

#

Yep no problem!

floral rose Apr 18, 2022, 7:16 PM

#

to change the label color can i do that from within appearance or do i need to set a variable

grim plinth Apr 18, 2022, 7:17 PM

#

Variable within appearance: https://stripe.com/docs/stripe-js/appearance-api#commonly-used-variables

floral rose Apr 18, 2022, 7:18 PM

#

awesome thanks

#

can you text-transform to all uppercase

grim plinth Apr 18, 2022, 7:20 PM

#

Yep that is a rule option

floral rose Apr 18, 2022, 7:50 PM

#

can you change color of floating label and the text color once typing into a field

grim plinth Apr 18, 2022, 8:45 PM

#

Ah sorry I had stepped away here.

#

I need to step away again, so I'm going to have one of my colleagues take over here if you have more followups

#yoitspeterson-ios-payment-element