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; }
@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