ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Cardinal
• November 20, 2015 at 1:32 am #230083
  lbdesign

  Member

  Post count: 136

  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

  November 20, 2015 at 1:33 am #230084
  lbdesign

  Member

  Post count: 136

  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>
  

  November 20, 2015 at 1:34 am #230086
  lbdesign

  Member

  Post count: 136

  This reply has been marked as private.
  November 20, 2015 at 9:45 am #230119
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code:-

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

  Thanks
  Mohammad

  November 21, 2015 at 9:48 am #230396
  lbdesign

  Member

  Post count: 136

  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.

  November 23, 2015 at 8:26 am #230496
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code:-

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

  Thanks
  Mohammad

  November 23, 2015 at 11:01 pm #230796
  lbdesign

  Member

  Post count: 136

  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.

  November 23, 2015 at 11:59 pm #230797
  lbdesign

  Member

  Post count: 136

  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)

  November 24, 2015 at 6:04 am #230812
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

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

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

  Thanks
  Mohammad

  November 24, 2015 at 8:21 am #230848
  lbdesign

  Member

  Post count: 136

  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.

  November 24, 2015 at 8:23 am #230849
  lbdesign

  Member

  Post count: 136

  This reply has been marked as private.
  November 24, 2015 at 8:24 am #230851
  lbdesign

  Member

  Post count: 136

  This reply has been marked as private.
  November 24, 2015 at 10:31 am #230877
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

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

  November 24, 2015 at 7:41 pm #231074
  lbdesign

  Member

  Post count: 136

  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.

  November 25, 2015 at 5:48 am #231123
  lbdesign

  Member

  Post count: 136

  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!

• Back to forum

  Posted in: Cardinal