Stripe checkout service and Form CSS

[lbdesign]

I’m trying to use Stripe for payments. It submits the details using a form and it creates custom buttons. There seems to be a CSS conflict in which Cardinal wraps their button elements in Cardinal button details.

Is there any way to suppress the Cardinal formatting on the buttons that Stripe generates? In the URL I gave you, you can see various examples in which Cardinal CSS is adding button details to their button.

Donate Stripe form debug

thank you

[lbdesign]

this is what their form code looks like:

<form action="/charge" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
    data-image="http://www.spiritseries.org/wp-content/uploads/2014/09/quote-left.png"
    data-name="Spirit Series"
    data-description="Sponsor a Student"
    data-amount="5000"
    data-locale="auto"
    data-panel-label="Donate {{amount}}"
    data-currency="USD"
    data-zip-code="true"
    data-billing-address="true"
    data-label="Donate $50 with Card"
    data-allow-remember-me="false"
>
  </script>
</form>

[lbdesign]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.stripe-button-el{
background:transparent !important;
box-shadow:none !important;
}

Thanks
Mohammad

[lbdesign]

Thank you! That worked to remove the color visuals from the button default state. However the hover state colors remain, as well as excess padding around the Stripe button. I will try to figure out those other definitions to zero out, but if you could provide custom CSS for removing the button padding, the hover and click states, etc, that would be amazing.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.stripe-button-el{
background:transparent !important;
}

Thanks
Mohammad

[lbdesign]

Thank you but that’s the same code you gave me earlier in the thread. It removes the default state styling, but not the mouseover state styling, or the padding.

[lbdesign]

The transition effect is still happening for the form input (button) element on mouseover, and I can’t figure out how to suppress it. This is coming from the Cardinal CSS, not from Stripe. Can you help further?

You can see it here on the test page, with the 6 blue buttons:

Donate

(It does not happen on the PayPal forms, below on the same page)

[Mohammad – SUPPORT]

Hi,
Please remove the last css code and use this new code:-

.stripe-button-el:hover{
background:transparent !important;
}

Thanks
Mohammad

[lbdesign]

I really appreciate your help with this. But that didn’t accomplish anything.
However, I can tell that the selector is working on the hover state only, because if I add another attribute, such as:
padding: 0px 0px 0px 0px;

Then on the hover state, the colored border shrinks down via a transition effect. But on the default state, the colored border remains.

The problem we have to solve is:

Transition effects are being applied to these form elements.
There is a background color on default and hover states that needs to go away.
There is extra padding that needs to go away.

I sent login credentials. I’ll provide them again here. That way you can experiment in real-time.

[lbdesign]

This reply has been marked as private.

[lbdesign]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Have you removed my css code? because i dont see any change at this page.
Thanks
Mohammad

[lbdesign]

Yes, I removed it so you’d have a blank slate to work from. It didn’t have the right effect anyway. (sorry)
If you log in, you can experiment as much as you need to.

[lbdesign]

I just changed Stripe payment plugins from the free to the “Pro” version, so the code output to the page may look slightly different now. I’ll update you in a minute or two!