ipad Stripe Checkout cuts off name, button text

Hello @wprox,

Does this happen with all other plugins deactivated and twentyseventeen theme activated ?

This seems like styling issue, make sure the styles you want are applied to those elements.

Best wishes,

Nico

Thanks Nico.

It’s related to this css:
https://checkout.stripe.com/v3/checkout/inner-6qq6yrPBGVKyh3d8xmlSiQ.css
.tablet header>.content>.title>h1 {
font-size: 24px;
color: #000;
height: 26px;
padding-top: 43px;
}

I’m trying to change that font-size from my child theme’s style.css, but Chrome doesn’t even see my code in Dev Tools???

Hello @wprox,

It could also be a cachiing issue.

Otherwise find a precise class only used on iPad and set !important like :

font-size: 24px !important;

Best wishes,

Nicolas

Thanks Nico. I already had .tablet and !important. I added a bunch of different Stripe modal snippets, Chrome doesn’t see / apply any of them.

Not sure what else to do to make my full company name show up in ipad???

Hi Nico,

I spent some more time on this with no luck!

I found some stackoverflow pages with the same issue:
https://stackoverflow.com/questions/49767801/how-to-overload-stripes-css
https://stackoverflow.com/questions/33405506/edit-stripe-embedded-form

The answer seems to be:
Stripe’s Checkout is served in an iframe for security reasons, so unfortunately there’s no way I can simply override the CSS.

So, are you able to pull up a page you have Direct Stripe loaded on, with Dev Tools set to ipad, and update that Stripe modal’s h1 (company name) font-size via an external style sheet? This is what I can’t figure out how to do, and according to stackoverflow above may not be possible. I called Stripe, and of course they say it’s all in your implementation.

.tablet header>.content>.title>h1 {
font-size: 24px;
color: #000;
height: 26px;
padding-top: 43px;
}

Thanks a lot!

Hello @wprox,

I’m sorry you still have trouble with this, I didn’t realize we were talking about the iframe, which we won’t be able to style.

Could you share an url where we can see the issue ? I couldn’t reproduce it.

Best wishes,

Thanks Nico.

It’s a private page. But just add a button with a company name that is long: “This is my company name” or something like that where the name shows up fine in desktop. Then goto Dev Tools > ipad simulation and press the button so Stripe Checkout pops up, and that long company name should get cutoff like “This is my company…” See my code pasted above, if you can reduce that font-size, it fits fine.

Thank you!

Hello @wprox,

Your description is the normal behaviour of the modal form title.

Direct Stripe uses the modal form from Stripe, I have no control over its styles.

In the case you need control over all styles, I recommend looking for a solution with custom forms.

Best wishes,

Nicolas

Thanks Nico. Got it. Doesn’t seem like there is anything more I can do there unfortunately.

So I’ve been testing Stripe’s test cards that they provide for specific responses and errors.

When I test:
4000000000000341 Attaching this card to a Customer object succeeds, but attempts to charge the customer fail.

OR

4100000000000019 Results in a charge with a risk_level of highest. The charge is blocked as it’s considered fraudulent.

I get: your “Processing” message with the 3 jumping dots img, but it just stays there permanently. It never redirects to the Error page I specified in the Global Settings? I even changed the Error page just to make sure the first Error page wasn’t the issue, but same results, no redirect.

So I’m confused about the purpose of that “Processing…” message. Is it used elsewhere then with these charging errors I’m seeing it on? I’ve only seen it pop up when I use Stripe’s 2 test failed / blocked charges above. It just sits there with the 3 dots jumping, not guiding the user at all?

Not sure why my Error page redirect never gets triggered? Shouldn’t it be when I put in either of the test cards above?

Thanks a lot ??

Hello @wprox,

Thank you for reporting that issue.

I found that I broke the response logic during the last update when I added the Update card button type. That makes failing transactions not to respond as expected, the successful transactions shouldn’t be affected by this.

I’m sorry about that, I will update as soon as I can.

Best wishes,

Nicolas

Hello @wprox,

I just pushed version 2.1.10.2 to www.ads-software.com, this fixes the issue of failing transactions, you can use a generic error message or if you leave the error message empty, the error message from Stripe will show in the bubble.

Could you confirm ?

Best wishes,

Nicolas

Thank you Nico, a bad card # now redirects to the Error page. And I see that when I remove my error message, a default error message shows up.

Hi Nico,

Quick question regarding the info your provided above.

Just thinking through the user experience:

If the card is good, I like redirecting to a Success page.

If the card is bad, if I redirect them to an Error page, then 1. I lose Stripe’s error message AND 2. I send them to another page, that then necessitates that they click BACK into the pricing page link to try to purchase, feels like I’m adding a hurdle for them. Instead, I like keeping them on the pricing page with the Stripe error message flashing, and they can just try again without having to click back to that page.

So, is there an easy way to use this combination, or are the only options:
EITHER Redirect users to success AND error pages when transaction completed
OR Use success AND error messages

Thank you ??

Hello @wprox,

Yes you can do that. Do not use the General settings redirections option and leave the Error message option empty in the general settings, then in the button settings, you will find success/error redirections options, enter the success transaction url and leave failed transacton url empty.

This will redirect successfull transactions and use the bubble message for failed transactions.

Best wishes,

Great, thank you Nico ??