Modal out – Elements in ?

Hi,

how to replace it in WordPress with Elements – will your plug-in be updated to cope with this change?

We’ve already had this option for a long time. You can just go to the Stripe settings and uncheck Stripe Modal Checkout.

The credit card input form will look like this:

Link to image: https://cld.wthms.co/OoHHp1

My problem is that without Modal Checkout I can only seem to generate the simplified one line card info entry box – this is unfamiliar to a lot of people and there seems to be resistance to using it rather than the traditional separate entry areas for Number, Date & CVV

You can have a look at my screenshot above. It’s asking Card Number, Expiry Date, and CVC. If that’s different from your site, can you share your site URL?

yes that image is different from what I am getting
when I uncheck Modal I just get a single line (see image below)

if I uncheck “Inline Credit Card Form” it gives the separte panels – but the text entry areas are less than 1 digit wide

https://movieconvention.com.au/
front end pw = movies
put something in the cart
go to checkout – you’ll see the credit card entry is in a single line

here is a screenshot
https://movieconvention.com.au/wp-content/uploads/2019/04/stripe-error.jpg

front end pw = movies

Hey @smarta-brett

if I uncheck “Inline Credit Card Form” it gives the separte panels – but the text entry areas are less than 1 digit wide

That doesn’t look right at all.

The inline checkout field is all on one line, but the standard fields shouldn’t be what is shown in your screenshot – https://docs.woocommerce.com/document/stripe/#section-10

If the Inline fields work for you, that is great, but to find out what is causing the fields not to show correctly for the standard fields, we’d recommend a conflict test. It could be your theme or something else is conflicting with how the fields show be displaying – https://docs.woocommerce.com/document/how-to-test-for-conflicts/

Let me know how you get on!

Thanks,

hi again

i solved this with some css

.woocommerce-checkout .StripeElement {
width: 100%;
}
.woocommerce-checkout .stripe-card-group {
width: 100%;
}

still not very pretty but it works