How to get the Stripe credit card/exp/cvc fields to look like the rest of the checkout form elements?

[rayjamesdev]

Hi, I setup an Ubercart store using Ubercart Stripe module. When on the checkout screen, the section where you input your credit card/exp/cvc is on a tiny little line. How to get it into it's own fieldset and look nice like the other form elements on the page? Please see the screenshot below. Thanks.

[argiepiano]

If I remember correctly, this widget is embedded by javascript, and is obtained from Stripe itself with an ajax call. You may need to check the Stripe API to see if it's customizable. Otherwise, inspect the css and tinker with that in your theme's css file.

[rayjamesdev]

Ok, thanks @argiepiano . I'll look into that.

[argiepiano]

This may offer some clues: https://stripe.com/docs/elements/appearance-api

Also, the Stripe element is embedded in the dom by js/uc_stripe.js in the module.

Also check the create() method in line 69.

The element style is passed to js as a JS setting, so that can be modified in the module, most likely. Check out line 20.

[rayjamesdev]

How do you think I would pass style settings to that elementStyles var without changing the contrip module code? It doesn't appear that there is an admin page setting that I could use. I'm guessing maybe a custom module?

referring to this line here: Line 20

[rayjamesdev]

My other problem is getting that whole section wrapped in a fieldset too. It should probably already do that though as a standard setup for the module I think.

[rayjamesdev]

Ok, I figured out the fieldset problem. I had to check the box named "Payment Information" on the Checkout settings page. Yay! Almost there.

[argiepiano]

The element styles seem to be stored in uc_stripe.settings.json

[argiepiano]

Relevant resources:

• Lines 216-225 of uc_stripe.module
• the setting element_styles_json of uc_stripe.settings..json
• Documentation of the Stripe Style object

[rayjamesdev]

Yeah, just not sure how to go about overriding those. I'ma try to just style the existing tags from my theme css file first.

[nattywebdev]

Since the Stripe elements displayed in the UC checkout and inside an iframe, there's no opportunity to use css to alter the style. I'm keen to adjust the display of the Stripe input display (card number in particular) - they are not clear to me and I think it will be a problem on a live site. The uc_stripe module clearly has no settings to adjust the styling, so I'd like to give this a go with a custom module. @argiepiano can you give some pointers here please? And @rayjamesdev did you get anywhere with styling?

[rayjamessci]

I was not able to style it. I have a live cart on a live site located at: https://cdltrainingonline.com . Feel free to take a look if you need to. I would absolutely love to be able to style this so your help is very much welcomed. I'm getting sales on the site but I would still like to make the user experience better. Thanks.