Stripe Pre 4.1.14 Styles

stripe-pre-4.1.14-styles.txt

#add_payment_method .woocommerce-PaymentMethod label { margin-left: 10px; }
#add_payment_method li { clear: right; }
#add_payment_method #wc-stripe_sepa-form { padding: 10px; }
form#order_review #payment_method_stripe { margin: 25px 0 25px 25px; }
form#order_review #payment_method_stripe_sepa { margin: 25px 0 25px 25px; }
form#order_review .payment_methods label { margin-left: 10px; }
form#order_review li { clear: right; }
form#order_review #wc-stripe_sepa-form { padding: 10px; }
.wc_payment_method .payment_box label { display: inline; }

.woocommerce-checkout #payment .payment_method_stripe,
#add_payment_method #payment .payment_method_stripe { position: relative; }

.woocommerce-checkout #payment .payment_method_stripe_bancontact,
#add_payment_method #payment .payment_method_stripe_bancontact { position: relative; }

.woocommerce-checkout #payment .payment_method_stripe_alipay,
#add_payment_method #payment .payment_method_stripe_alipay { position: relative; }

.woocommerce-checkout #payment .payment_method_stripe_eps,
#add_payment_method #payment .payment_method_stripe_eps { position: relative; }

.woocommerce-checkout #payment .payment_method_stripe_giropay,
#add_payment_method #payment .payment_method_stripe_giropay { position: relative; }

.woocommerce-checkout #payment .payment_method_stripe_ideal,
#add_payment_method #payment .payment_method_stripe_ideal { position: relative; }

.woocommerce-checkout #payment .payment_method_stripe_multibanco,
#add_payment_method #payment .payment_method_stripe_multibanco { position: relative; }

.woocommerce-checkout #payment .payment_method_stripe_p24,
#add_payment_method #payment .payment_method_stripe_p24 { position: relative; }

.woocommerce-checkout #payment .payment_method_stripe_sepa,
#add_payment_method #payment .payment_method_stripe_sepa { position: relative; }

.woocommerce-checkout #payment .payment_method_stripe_sofort,
#add_payment_method #payment .payment_method_stripe_sofort { position: relative; }

.woocommerce-checkout #payment input#payment_method_stripe,
#add_payment_method #payment input#payment_method_stripe { position: absolute; top: 6px; }

.woocommerce-checkout #payment input#payment_method_stripe_bancontact,
#add_payment_method #payment input#payment_method_stripe_bancontact { position: absolute; top: 6px; }

.woocommerce-checkout #payment input#payment_method_stripe_alipay,
#add_payment_method #payment input#payment_method_stripe_alipay { position: absolute; top: 6px; }

.woocommerce-checkout #payment input#payment_method_stripe_eps,
#add_payment_method #payment input#payment_method_stripe_eps { position: absolute; top: 6px; }

.woocommerce-checkout #payment input#payment_method_stripe_giropay,
#add_payment_method #payment input#payment_method_stripe_giropay { position: absolute; top: 6px; }

.woocommerce-checkout #payment input#payment_method_stripe_ideal,
#add_payment_method #payment input#payment_method_stripe_ideal { position: absolute; top: 6px; }

.woocommerce-checkout #payment input#payment_method_stripe_multibanco,
#add_payment_method #payment input#payment_method_stripe_multibanco { position: absolute; top: 6px; }

.woocommerce-checkout #payment input#payment_method_stripe_p24,
#add_payment_method #payment input#payment_method_stripe_p24 { position: absolute; top: 6px; }

.woocommerce-checkout #payment input#payment_method_stripe_sepa,
#add_payment_method #payment input#payment_method_stripe_sepa { position: absolute; top: 6px; }

.woocommerce-checkout #payment input#payment_method_stripe_sofort,
#add_payment_method #payment input#payment_method_stripe_sofort { position: absolute; top: 6px; }

.woocommerce-checkout #payment .payment_method_stripe label[for=payment_method_stripe] { display: block; padding-left: 32px; }
#add_payment_method #payment .payment_method_stripe label[for=payment_method_stripe] { display: block; padding-left: 20px; }

.woocommerce-checkout #payment .payment_method_stripe_bancontact label[for=payment_method_stripe_bancontact] { display: block; padding-left: 32px; }
#add_payment_method #payment .payment_method_stripe_bancontact label[for=payment_method_stripe_bancontact] { display: block; padding-left: 20px; }

.woocommerce-checkout #payment .payment_method_stripe_alipay label[for=payment_method_stripe_alipay] { display: block; padding-left: 32px; }
#add_payment_method #payment .payment_method_stripe_alipay label[for=payment_method_stripe_alipay] { display: block; padding-left: 20px; }

.woocommerce-checkout #payment .payment_method_stripe_eps label[for=payment_method_stripe_eps] { display: block; padding-left: 32px; }
#add_payment_method #payment .payment_method_stripe_eps label[for=payment_method_stripe_eps] { display: block; padding-left: 20px; }

.woocommerce-checkout #payment .payment_method_stripe_giropay label[for=payment_method_stripe_giropay] { display: block; padding-left: 32px; }
#add_payment_method #payment .payment_method_stripe_giropay label[for=payment_method_stripe_giropay] { display: block; padding-left: 20px; }

.woocommerce-checkout #payment .payment_method_stripe_ideal label[for=payment_method_stripe_ideal] { display: block; padding-left: 32px; }
#add_payment_method #payment .payment_method_stripe_ideal label[for=payment_method_stripe_ideal] { display: block; padding-left: 20px; }

.woocommerce-checkout #payment .payment_method_stripe_multibanco label[for=payment_method_stripe_multibanco] { display: block; padding-left: 32px; }
#add_payment_method #payment .payment_method_stripe_multibanco label[for=payment_method_stripe_multibanco] { display: block; padding-left: 20px; }

.woocommerce-checkout #payment .payment_method_stripe_p24 label[for=payment_method_stripe_p24] { display: block; padding-left: 32px; }
#add_payment_method #payment .payment_method_stripe_p24 label[for=payment_method_stripe_p24] { display: block; padding-left: 20px; }

.woocommerce-checkout #payment .payment_method_stripe_sepa label[for=payment_method_stripe_sepa] { display: block; padding-left: 32px; }
#add_payment_method #payment .payment_method_stripe_sepa label[for=payment_method_stripe_sepa] { display: block; padding-left: 20px; }

.woocommerce-checkout #payment .payment_method_stripe_sofort label[for=payment_method_stripe_sofort],
#add_payment_method #payment .payment_method_stripe_sofort label[for=payment_method_stripe_sofort] { display: block; padding-left: 32px; }

.woocommerce-checkout #payment ul.payment_methods li img.stripe-icon,
#add_payment_method #payment ul.payment_methods li img.stripe-icon { float: right; max-width: 40px; padding-left: 3px; margin: 0; }

.woocommerce-checkout #payment ul.payment_methods li img.stripe-bancontact-icon,
#add_payment_method #payment ul.payment_methods li img.stripe-bancontact-icon { max-height: 65px; max-width: 45px; }

form#order_review #wc-stripe_sepa-form { padding: 10px; }
#add_payment_method #payment ul.payment_methods li .stripe-mastercard-brand { position: absolute; top: 50%; margin-top: -10px; right: 10px; background: no-repeat url( '../images/mastercard.svg' ); display: block; width: 30px; height: 24px; }

.woocommerce-checkout #payment ul.payment_methods .stripe-card-group,
#add_payment_method #payment ul.payment_methods .stripe-card-group { position: relative; } 

I have post this into CSS but I still cannot display stripe in the checkout step. Can anyone help?

I still cannot get this to show, can anyone help?

The credit card fields and other fields are not working. We can not put any value in them. Can someone help please.

@hapishyguy

The credit card fields and other fields are not working. We can not put any value in them. Can someone help please.

I'm not sure if it's the same issue but I noticed a style in my CSS:

.video iframe { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; visibility: hidden; }

and strangely the checkout page body tag has class "video"

I've added this stile

.video #wc-stripe-cc-form iframe {
   position: relative;
   visibility: visible; 
   opacity: 1;
}

and now it's working as expected for me. I don't know if it's the same issue as I've not developed the theme

Thanks guys... but I am not that knowledgeable about all this. Is there any guide as to where to go and change what and where?

Thanks Guys, I was not able to get Stripe to work. With all that code including the snippet about the video. When stripe is returning to my site I have the following error:

This page isn’t working www.mysite.com is currently unable to handle this request.
HTTP ERROR 500

I am not overly technical, any suggestions please!

That code worked for me :-)
Any recommendations for mastercard image on line 108
'../images/mastercard.svg'
Thanks in advance