Skip to content

Instantly share code, notes, and snippets.

@roykho
Last active February 5, 2024 11:58
Show Gist options
  • Save roykho/4622d24528dcec0960cc5c6917946892 to your computer and use it in GitHub Desktop.
Save roykho/4622d24528dcec0960cc5c6917946892 to your computer and use it in GitHub Desktop.
Stripe Pre 4.1.14 Styles
#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; }
@jevenblij
Copy link

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

Copy link

ghost commented Jan 17, 2019

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

@bsimone
Copy link

bsimone commented Jan 30, 2019

@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

Copy link

ghost commented Jan 31, 2019

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?

@AussieLes
Copy link

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!

@Jane-Walker
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment